Lumina: The AI Knowledge Cartographer

• 

  LUMINAR

Inspiration

Traditional education is fundamentally broken because it forces every student down the exact same linear path. But human brains don't learn in straight lines; we learn by making complex, spatial connections. We wanted to build an educational tool that visualizes knowledge the way the brain actually stores it—as an interconnected, multi-modal web.

What it does

Lumina is an AI-powered Knowledge Cartographer. You type in any complex topic in the world, and Lumina mathematically plots a personalized, interactive 2D skill tree. When you click on a node, Lumina dynamically generates: A custom deep-dive lesson on that specific subtopic. A beautiful, context-aware AI image to aid visual learners. Native Text-to-Speech audio so you can listen to the lesson. An auto-evaluating multiple-choice quiz dynamically generated from the lesson text to test your knowledge.

How we built it

We engineered a flawless, premium glassmorphism UI using React, Vite, and TypeScript, powered by Framer Motion for micro-interactions and React Flow for the node graphing engine. The "brain" of Lumina runs on DeepSeek-V4-Pro via the Fireworks AI API, which we carefully prompt-engineered to return strict JSON structures containing coordinates, edges, and curriculum data. The dynamic imagery is powered on the fly by the Pollinations API, and the audio utilizes the native browser Web Speech API for zero-latency TTS.

Challenges we ran into

Forcing a creative Large Language Model to output strictly formatted, mathematically plottable JSON graphs was incredibly difficult. Early versions resulted in overlapping nodes and broken edges. We overcame this by writing a custom layout algorithm in the frontend that counts the nodes generated per level by the AI and perfectly centers and spaces them on the canvas.

Accomplishments that we're proud of

We are incredibly proud of the multi-modal nature of the app. By combining visual node graphs, AI-generated images, text-to-speech audio, and gamified quizzes, we created a tool that accommodates visual, auditory, and kinetic learners all at once in a beautiful, responsive UI.

What we learned

We learned how to effectively chain different AI modalities together in a single user flow. We also learned advanced techniques for parsing and validating complex JSON outputs from LLMs, and how to seamlessly integrate native browser features like the Web Speech API into a modern React application.

What's next for Lumina: The AI Knowledge Cartographer

We plan to introduce multiplayer collaboration so students can map out skill trees together in real-time, user accounts to track mastery progress over months, and generative AI video snippets for each node.

Built With

• css
• deepseek
• fireworks-ai
• framer-motion
• pollinations
• react
• react-flow
• typescript
• vite
• web-speech-api