# OMD Documentation

# main.js - OMD AI Visual Generator

This `main.js` file powers the OMD AI Visual Generator, an interactive web page that uses AI to create mathematical visualizations from natural language prompts.

## Core Functionality: The `OMDVisualGenerator` Class

The entire application is encapsulated within the `OMDVisualGenerator` class, which manages the UI, handles user input, and orchestrates the process of generating and rendering visuals.

### Initialization

When the DOM is loaded, a new `OMDVisualGenerator` instance is created. The constructor calls:

- `initializeElements()`: Caches references to all necessary DOM elements (input fields, buttons, result panels).
- `attachEventListeners()`: Sets up all event listeners for user interactions.

### Event Listeners

The application responds to the following user actions:

- Generate Button Click / Enter Key: Triggers the `generateVisual()` method.
- Example Buttons: Populate the input field with a predefined request and trigger `generateVisual()`.
- Copy SVG Button: Calls `copySvgToClipboard()` to save the generated visual.
- Manual JSON Input: A separate workflow allows users to bypass the AI and render a visual directly from their own OMD JSON.

## Visual Generation Process

The core workflow is handled by the `generateVisual()` method:

1. Get Input: Retrieves the user's natural language request from the input field.
2. Set Loading State: Disables the UI to prevent multiple submissions while a request is in progress.
3. API Call: Sends a `fetch` request to the Netlify serverless function at `/.netlify/functions/ai-omd-lookup`. The user's request is passed as a URL parameter.
4. Receive JSON: The serverless function (not detailed in this file) communicates with an AI service and returns a JSON object that conforms to the OMD specification for a particular visual (e.g., a `balanceHanger` or `tapeDiagram`).
5. Display JSON: The raw JSON response is pretty-printed and displayed in the UI for inspection.
6. Render Visual: The `renderVisual(jsonData)` method is called.

## Rendering the Visual (`renderVisual`)

This method is responsible for turning the AI-generated JSON into an SVG image:

1. Clear Previous Visual: Removes any existing SVG from the display area.
2. Select OMD Class: A `switch` statement reads the `omdType` property from the JSON to determine which OMD class to instantiate (e.g., `omdBalanceHanger`, `omdTable`).
3. Load Data: The `loadFromJSON(jsonData)` method of the instantiated OMD object is called, configuring the object based on the AI-provided data.
4. Create SVG: An SVG wrapper is created, and the OMD object's internal SVG group (`omdObject.svgObject`) is appended to it.
5. Display SVG: The final SVG is added to the `visualResult` panel in the DOM.

## Manual JSON Input

For testing and debugging, users can click the "Manual JSON Input" button to reveal a text area. They can paste their own OMD-compliant JSON and click "Render" to see it visualized, skipping the AI step entirely.

## Utility Methods

- `copySvgToClipboard()`: An advanced feature that converts the generated SVG into a high-resolution PNG and uses the Clipboard API (`navigator.clipboard.write`) to copy it to the user's clipboard.
- `setLoading(isLoading)`: Toggles the disabled state of UI elements.
- `showMessage(message, type)` / `showError(message)`: Displays status messages (e.g., "Generating...", "Error") to the user.

## Usage

This script is designed to be used with an `index.html` file that provides the necessary UI layout. It allows users to:

- Enter a description of a math concept (e.g., "a balance hanger with 2x + 3 on the left and 7 on the right").
- Click "Generate" to see it visualized by the AI.
- Inspect the underlying OMD JSON.
- Copy the resulting visual as a PNG image.

↑ Top