← Back to Home

## Live Preview

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

Open Live Preview

## 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();
    });