Synapse - Spatial Knowledge Twin

Synapse: Transform linear text into an interactive 3D knowledge galaxy to map gaps and master concepts in real time. Stop passively reading. Start navigating your learning.

Comment

Inspiration

Every student knows the cognitive fatigue of trying to study a long textbook chapter or dense research paper. You read line after line, highlight half the page, and still retain surprisingly little. Text is linear, but human understanding is built through connections.

Current AI tools can make this worse by producing walls of text or generic chatbot responses that encourage passive reading. We wanted to create something more active.

That idea became Synapse — Spatial Knowledge Twin: a tool that transforms educational material into an interactive knowledge graph where students can explore concepts, test their understanding, identify weak prerequisites, and gradually master what they are learning.

What it does

Synapse — Spatial Knowledge Twin transforms unstructured PDFs, research papers, and notes into an interactive visual knowledge graph.

Students can seamlessly switch between a spatial 3D Galaxy View and a structured 2D Flowchart View to explore how concepts, dependencies, and prerequisites connect.

Each concept is represented by a color-coded node:

  • 🔴 Knowledge Gap — requires active recall
  • 🟡 Review — needs further revision
  • 🟢 Mastered — successfully verified
  • 🔒 Locked — requires prerequisite concepts first

Clicking a node opens the Active Recall Inspector, which includes a concise explanation, KaTeX-rendered formulas, page-level source citations, and a free-response recall question.

When a learner answers correctly, Synapse updates the concept’s mastery state in real time, unlocks connected concepts, and highlights the repaired knowledge path through animated edges.

How I built it

I built Synapse as a React and TypeScript web application using Vite and Tailwind CSS.

The 3D Galaxy View is powered by react-force-graph-3d, while the 2D Flowchart View uses @xyflow/react. Both visualizations share one canonical graph state so concept selection, mastery status, filters, and progress remain synchronized.

PDF text is extracted locally with pdfjs-dist, then converted into structured concepts, relationships, questions, formulas, and source citations through a server-side GPT-5.6 workflow. Model output is validated before being displayed.

The active-recall system evaluates free-response answers, updates each concept’s mastery estimate, and recalculates prerequisite risk to generate a personalized Repair Path.

I also used Dexie and IndexedDB for local progress persistence, KaTeX for mathematical equations, Zod for schema validation, and Codex throughout the project for architecture, implementation, testing, debugging, and documentation.

Challenges I ran into

One of the biggest challenges was transforming extracted text into a meaningful educational graph rather than a visually impressive but shallow mind map. Synapse needed to distinguish genuine prerequisite relationships from concepts that were simply mentioned near each other.

3D canvas performance was another major issue. WebGL force calculations become increasingly expensive as the number of nodes grows, and rendering more than 100 unorganized concepts caused visible stuttering. I addressed this by implementing level-of-detail cluster expansion, limiting unnecessary labels, and pre-calculating force-layout ticks before rendering.

PDF parsing also introduced formatting problems. In-browser extraction can scramble multi-column layouts, equations, and reading order. To reduce this noise, I preserved page boundaries, divided content into structured chunks, and used schema-constrained extraction to generate clean hierarchical graph data.

Keeping the 2D and 3D views synchronized was difficult because both visualization libraries use different data structures and rendering behavior. I solved this by maintaining one canonical graph state shared across both views.

Free-response evaluation was also challenging because valid answers can be phrased in many ways, while incorrect answers may still contain expected keywords. I used structured rubrics, misconception detection, and deterministic fallback scoring to distinguish correct, partial, and incorrect understanding.

Finally, relying entirely on live AI APIs created a risk during demonstrations because of network delays and rate limits. I built a resilient fallback architecture that automatically switches to pre-generated local graph data and local verification logic when an external endpoint is unavailable.

Accomplishments that I'm proud of

I am proud that Synapse moves beyond repetitive chatbot interfaces and creates a more visual, spatial learning experience.

The application processes documents locally, renders complex 2D and 3D knowledge graphs in the browser, and remains usable without an expensive backend through deterministic fallback data.

I am also proud of the seamless state synchronization: when a learner verifies an answer, Synapse updates mastery, triggers graph animations, unlocks connected concepts, and refreshes progress metrics across the entire application in real time.

What's next for Synapse - Spatial Knowledge Twin

Synapse 1.0 proves the core idea, but there is significant room to grow.

Future versions could improve PDF understanding with better support for complex layouts, equations, tables, diagrams, scanned documents, and handwritten notes. The active-recall system could also become more accurate through stronger semantic grading, misconception detection, adaptive hints, and personalized review scheduling.

Longer term, Synapse could expand into a complete education platform with teacher-created knowledge graphs, classroom analytics, curriculum mapping, LMS integrations, multilingual support, secure user accounts, and cross-document learning profiles.

The goal is to turn Synapse from a hackathon prototype into a persistent learning system that continuously understands what each student knows and recommends the most effective path forward.

Built With

Share this project:

Updates