OMD | HTML Example Guide

Live Preview

Click the button below to see the example running in your browser.

Source Code

Here is the complete source code for the example, separated by type.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple OMD AI API Example (Using Factory)</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Simple OMD AI API Example</h1>
    
    <p>Enter a description of what you want to visualize:</p>
    <p><em>Supports: balance hangers, coordinate planes, tables, tape diagrams, number lines, number tiles, ratio charts, tile equations, spinners, equations, expressions, geometric shapes, and more!</em></p>
    
    <input type="text" id="userInput" placeholder="e.g., balance hanger with 2x + 3 = 11, number line 0 to 10, ratio chart 3/5, spinner with 8 divisions" style="width: 80%;" />
    <button id="generateBtn">Generate</button>
    
    <div id="result">
        <p>Results will appear here...</p>
    </div>

    <script src="https://unpkg.com/mathjs@14.5.2/lib/browser/math.js"></script>
    <script src="./omd/jsvg/jsvg.js"></script>
    <script src="./omd/jsvg/jsvgComponents.js"></script>
    <script type="module" src="script.js"></script>
</body>
</html>

styles.css

body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
}

input {
    width: 60%;
    padding: 10px;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

button:disabled {
    background: #ccc;
}

#result {
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
    min-height: 200px;
}

pre {
    background: #f5f5f5;
    padding: 10px;
    overflow-x: auto;
}

script.js

// We only need to import the factory function!
import { createFromJSON } from '@teachinglab/omd';

const input = document.getElementById('userInput');
const button = document.getElementById('generateBtn');
const result = document.getElementById('result');

button.addEventListener('click', async () => {
    const userRequest = input.value.trim();
    if (!userRequest) return;
    
    button.disabled = true;
    button.textContent = 'Generating...';
    result.innerHTML = '<p>Calling AI API...</p>';
    
    try {
        // Step 1: Call the AI API
        const response = await fetch(`https://omd-equation-system.netlify.app/.netlify/functions/ai-omd-lookup?topic=${encodeURIComponent(userRequest)}`);
        const jsonText = await response.text();
        const jsonData = JSON.parse(jsonText);
        
        result.innerHTML = `
            <h3>Generated JSON:</h3>
            <pre>${JSON.stringify(jsonData, null, 2)}</pre> 
            <h3>Visual:</h3>
            <div id="visual"></div>
        `;
        
        // Step 2: Create the OMD object using the factory function
        const omdObject = createFromJSON(jsonData);
        
        // Step 3: Create SVG with proper dimensions from the OMD object
        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        
        // Use dimensions from the OMD object, with sensible defaults
        const width = omdObject.width || 400;
        const height = omdObject.height || 500;
        
        svg.setAttribute("width", width);
        svg.setAttribute("height", height);
        
        // Use viewBox from the OMD object if it exists, otherwise create one
        svg.setAttribute("viewBox", omdObject.svgObject.getAttribute("viewBox"));  

        // Add to the page
        svg.appendChild(omdObject.svgObject);
        document.getElementById('visual').appendChild(svg);
        
    } catch (error) {
        result.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
        console.log(error);
    } finally {
        button.disabled = false;
        button.textContent = 'Generate';
    }
});

// Allow Enter key to trigger generation
input.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') button.click();
});