🧠 An interactive 3D learning playground where curiosity meets cutting-edge tech.
CircuitMind3D is an interactive 3D learning playground where curiosity meets cutting-edge tech. Whether you're exploring the human heart, a computer motherboard, or microscopic biology, this app lets you click, explore, and instantly understand complex structures like never before.
Dive into beautifully rendered .glb models powered by Three.js, enhanced with smooth GSAP animations and intelligent camera movements. It’s not just viewing—it’s experiencing.
Start big, go small. Seamlessly zoom from entire systems down to tiny components:
Computer → Motherboard → USB Port → Internal Pins
Click any part of a model and boom—you get an instant, AI-powered explanation with visual highlighting. Learning has never been this direct.
Got questions? There’s a chat assistant that knows exactly what you're looking at and helps you understand it better in real time.
To ensure speed, extreme reliability, and absolutely zero downtime or rate limit blockages, the backend AI system utilizes a custom failover router connecting multiple providers.
-
Tier 1: Static Knowledge Layer (Instant)
- Located in the frontend:
js/knowledge.js - Handles the top 90% of predictable queries (e.g., "What is a CPU?", "Left Ventricle").
- Result: 0ms latency, zero API calls, instantly satisfying the most common clicks.
- Located in the frontend:
-
Tier 2: Fast AI (Primary Engine)
- Powered by Groq using
llama-3.3-70b-versatile. - Executed via
backend/ai_engine.pyusing standard fast OpenAI schema requests. - Triggers for any unknown 3D component or live user chat prompt.
- Powered by Groq using
-
Tier 3: Backup AI (Safety Net)
- Powered by Google Gemini using
gemini-2.5-flash. - Managed securely by
backend/router.py. - If Groq experiences rate limits (HTTP 429), runs out of quota, or goes momentarily offline, the router intercepts the failure and flawlessly redirects the exact same prompt transparently to Gemini.
- Result: The user never experiences a runtime
HTTP 500server crash.
- Powered by Google Gemini using
(If even the safety net fails, the engine triggers a graceful degradation message, protecting the frontend UI from breaking.)
- Frontend: HTML5, Vanilla JavaScript, CSS variables, Three.js, GSAP.
- Backend Core: Python 3.10+, FastAPI, Uvicorn, Requests.
- AI Providers: Groq API, Google Gemini API.
Ensure you have Python 3.10+ installed. Install backend module dependencies:
cd backend
pip install fastapi uvicorn requests python-dotenv You must supply API keys connecting the routing infrastructure to the LLM networks.
Create or edit backend/.env:
GROQ_API_KEY=gsk_...your_key_here...
GEMINI_API_KEY=AIzaSy...your_key_here...(Never commit this file publicly!)
The project includes a convenient batch script that concurrently spin up both the FastAPI backend and a local Python HTTP viewer.
Run directly in the root directory:
.\run.batNavigate to http://127.0.0.1:5500 in your web browser.
├── assets/ # 3D models (.glb files) and UI images
├── backend/ # FastAPI Engine
│ ├── main.py # Core endpoints (chat, explanation, overview)
│ ├── router.py # Failover Decision Mesh (Groq -> Gemini)
│ ├── ai_engine.py # Stateless isolated API execution pipelines
│ └── config.py # Environment variables and standard setups
├── js/ # Frontend Logic
│ ├── main.js # App bootstrapper, static fallback, API fetching
│ ├── viewer.js # Three.js viewport and raycast event listeners
│ ├── model.js # Top-Level Topic mapping and Breadcrumb UI
│ ├── nav.js # Navigation animations
│ ├── knowledge.js # High-speed static answer dictionary
│ └── chat.js # AI chat DOM injection and formatting
├── index.html # Primary UI frame
└── run.bat # Concurrent Bootstrapper
Pull requests are welcome! For major changes, please open an issue first to discuss what you’d like to add.