Inspiration
I’ve always found that textbook formulas and static diagrams fail to convey how abstract concepts actually work. Trying to visualize N-body orbital gravity, wave interference, or neural network signal pulses in your head is tough. I wanted to build a tool that instantly turns any abstract STEM or Math topic into an interactive, visual sandbox where students can tweak sliders and see physics happen in real time.
What it does
SimuLab AI generates real-time, interactive HTML5 Canvas 2D simulations for any STEM concept requested by a student or teacher.
Interactive Controls: Every simulation includes real-time sliders and toggles (e.g., gravity, mass, wave frequency, network weights) wired directly into the animation loop. Feynman Breakdowns: Paired with 2-3 sentence intuitive explanations and KaTeX-rendered mathematical formulas. Instant Hero Demos: Features 5 pre-seeded hero simulations (Solar System, Neural Network, Wave Interference, Fourier Series, Lorenz Attractor) that load with zero API latency.
How I built it
Backend: Built with Python 3.11 and FastAPI. I integrated Google Gemini AI using strict Pydantic JSON response schemas to guarantee valid Canvas code generation. Self-Healing Architecture: Implemented an auto-retry loop that catches malformed code and feeds syntax errors back to the model, alongside a custom procedural fallback engine so the app works even offline without an API key. Frontend Workspace: Crafted a split-screen UI using HTML5, Vanilla JavaScript, and Tailwind CSS. Generated code runs safely inside a sandboxed with live terminal progress logs.</p> <h2 id="challenges">Challenges</h2> <p>I ran into Getting clean LLM code execution: LLMs tend to inject external libraries or syntax errors. I had to strictly enforce zero external dependencies and build a self-healing retry loop to repair broken JS on the fly. Safe iframe interactivity: Ensuring AI-generated scripts run safely inside a sandboxed <iframe> while maintaining zero-lag responsiveness when users adjust sliders.</p> <h2 id="accomplishments-that-im-proud-of">Accomplishments that I'm proud of</h2> <p>Zero-latency hero demos: Built 5 instant simulations that load immediately when opening the web app. Unlimited topic fallback: Created a procedural engine fallback so users get working simulations for any STEM or Math concept, even offline. KaTeX & Feynman Integration: Combining visual Canvas animations with clear Feynman-style explanations and rendered LaTeX equations.</p> <h2 id="what-i-learned">What I learned</h2> <p>Structured JSON prompting combined with Pydantic schema validation is essential for reliable AI code generation. Vanilla HTML5 Canvas + requestAnimationFrame can render surprisingly complex physics and math visualizations with zero external dependencies.</p> <h2 id="whats-next-for-simulab-ai">What's next for SimuLab AI</h2> <p>3D WebGL Support: Expanding beyond 2D Canvas into 3D simulations for spatial concepts like molecular structures and vector fields. Web Audio API: Adding real-time sound synthesis so users can hear wave interference and harmonic frequencies. Teacher Classroom Mode: Allowing educators to create custom interactive simulation presets to share with students.</p>
Built With
- css3
- fast-api
- google-gemini-api
- html5
- javascript
- katex
- llm
- pydantic
- pytest
- python
- rest-api
- tailwindcss
- uvicorn
