ML Concept Visualizer

Elevator Pitch

Machine learning is hard to teach with static diagrams and text. This project uses GPT-5.6 to understand any ML concept or trained model and design what should be visualized, then hands that spec to Codex, which writes a complete, working, interactive HTML module — simulation, controls, and plain-language explanation included — with no manual coding required.

What it does

ML Concept Visualizer generates fully interactive, explained visual modules for machine learning ideas on demand. Describe a concept in plain English (like "how gradient descent gets stuck at saddle points") or point it at your own trained model, and it produces a working interactive web page: sliders/controls to explore the behavior live, a rendered simulation or decision boundary, and a sidebar explaining what you're looking at and what to notice.

Three working examples are included:

• A gradient descent simulator showing convergence, local minima, and saddle points, visualizing optimization on the function:

\[ z = x^4 - 2x^2 + 0.5xy + y^2 \]

• A real logistic regression classifier's decision boundary, generated directly from the model's own prediction data
• An overfitting vs. underfitting demo with a live-adjustable polynomial fit

How we built it

The pipeline splits work across two models by strength:

1. GPT-5.6 takes a concept description or a model's exported data and designs a structured specification — what variables should be interactive, what the underlying math or model behavior is, and what the explanation panel should say.
2. Codex takes that specification and writes a complete, self-contained HTML/JavaScript module implementing the simulation and UI from scratch.
3. A verification step checks the generated module runs correctly; if it errors, the error is fed back to Codex, which fixes it autonomously — a real agentic loop, not one-shot generation.

For the real-model case, a Python script exports a trained scikit-learn classifier's decision boundary and training data as JSON, which Codex reads directly to build a visualization of the model's actual behavior — not a generic textbook diagram.

Challenges we ran into

• Getting Codex to produce mathematically correct simulations, not just visually plausible ones — required giving it precise, explicit specs (exact formulas, exact variable ranges) rather than vague natural-language requests.
• Browser file:// restrictions blocking local JSON fetches for the model-based visualization — solved by deploying to a real static host (GitHub Pages) instead of relying on double-clicked local files.
• Balancing generality (any ML concept, any model type) against reliability for a short build window — solved by fully building and testing a focused set of examples while designing the underlying pipeline to generalize further.

What we learned

Splitting responsibilities between a planning/understanding model (GPT-5.6) and an execution/building agent (Codex) produces more reliable results than asking either to do the whole task alone — GPT-5.6's structured specs give Codex exactly what it needs to generate correct, working code on the first or second try.

What's next

• Support for more model types (regression, clustering, neural networks) using the same export pipeline
• A single input box where any concept or any uploaded model produces a visualization on demand, without needing to hand-write prompts
• Saving and sharing generated visualizations as standalone teaching resources

Built With

• codex
• github
• gpt-5.6
• html5
• javascript
• python
• scikit-learn