Infinite AI Notebook

Inspiration: The End of Linear Chaos

Conventional AI chat interfaces are linear, forcing knowledge into a "scrolling list" where context is buried and forgotten. As a student, I realized that learning is a radiant process, not a linear one. I wanted a tool that mirrors how the human brain actually works: Non-linear, associative, and visual.

"Infinite AI Notebook" was born from a simple philosophy: A conversation should be a map you can explore, not a log you have to scroll through.

The Core Philosophy: Global Traceability

My goal was "Global Question Tracing." In this system, every time you encounter a difficult detail, your exploration becomes a visible branch on the tree.

• No More Searching: You don't dig through long history logs. Your "main trunk" (global context) and "branches" (detailed inquiries) are always visible together.
• Traceable Growth: The entire process from "confusion" to "understanding" is visually preserved on the canvas, creating a permanent map of your intellectual growth.

What it does (Existing Features)

• 🌌 Infinite Canvas & Branching: Built on @xyflow/react (React Flow 12), every AI response becomes a node. You can branch out from any node to explore deep details without losing the original context.
• 👀 Multimodal Restructuring: Snap a photo of messy blackboards, illegible handwriting, or difficult textbooks. The AI instantly restructures them into a clean, logical "Main Trunk" note. From this solid foundation, you can launch infinite branching inquiries to drill down into any specific detail.
• 📝 Themeable Memos (Sticky Notes): 5 distinct styles of sticky notes to capture your own thoughts. Use them to mark "Aha!" moments or annotate key branches, ensuring your personal insights live alongside the AI's knowledge on the map.
• 🔗 Neural Branch Merging (The Wrench): A core innovation. Using the Wrench tool, you can select multiple independent conversation branches. The AI synthesizes these separate contexts to generate a unified conclusion—mimicking how neurons connect ideas.
• 🎨 Creative Drawing Lab: A vector-based drawing system with 6 neural colors and line widths (1-60px). It features a precision eraser using segment-based collision detection, allowing for surgical edits at any zoom level.
• 🗣️ Rich Nodes & TTS: Nodes support Markdown, LaTeX math formulas, and instant TTS (Text-to-Speech) powered by the gemini-2.5-flash-preview-tts model.
• 🧠 Contextual Recursion: The system automatically crawls parent nodes to ensure the AI never loses the "trunk" context, no matter how deep you go.

How I Built It: Designing "Spatial Intelligence"

I didn't just build an app; I engineered a Spatial Intelligence Environment composed of three layers:

• The Brain (gemini-3-pro-preview): Selected for its nuanced reasoning, it acts as the cognitive engine, deciphering messy student handwriting and complex logic where lighter models fail.
• The Body (React 18 & React Flow 12): To make the infinite canvas feel like a natural extension of the mind, I optimized the frontend for fluid, drag-and-drop spatial organization.
• The Soul (Design): A "Cyber-Glass" aesthetic using Tailwind CSS. Deep blurs and indigo accents aren't just cosmetic—they create an immersive focus mode to sustain the "flow state."

Challenges: The "Mental Space" Paradox

The core difficulty was managing Cognitive Load rather than just writing code.

• The Context Paradox: To allow deep branching without losing the plot, I engineered a Multi-Root Crawler. This "invisible guide" stitches together the lineage of disparate thoughts, ensuring the AI maintains global awareness no matter how far you stray.

What I Learned: The Visual Language of AI

• UX > Raw Power: With Google AI Studio already solving the heavy lifting of model intelligence, my true growth was in User Experience. I learned that an answer is only as good as its visual structure.
• Contextual Graph Engineering: I moved beyond simple API calls to master graph theory, bridging the gap between Gemini’s raw logic and human spatial thinking to build a coherent, navigable "Tree of Thought."

Future Outlook

• 🖼️ Generative Visuals: Integrating Gemini's image generation to automatically create illustrations or charts based on your notes.
• 📊 Data Visualization: Automatically plotting scientific charts from mathematical formulas in your notes.
• 🌍 Global Tutor: Instant translation for foreign textbooks and interactive "click-to-pronounce" phonetics.

Built With

• gemini-2.5-flash-preview-tts)
• google-gemini-api-(gemini-3-pro-preview
• google-genai-sdk
• lucide-react
• react-18-(typescript)
• react-markdown
• remarkgfm
• tailwind-css
• vite
• xyflow/react-(react-flow-12)