How arafeytanwir-cloud/ai-visualizer-v2 works
AI Visualizer turns a typed topic or uploaded PDF into an interactive 3D lesson. The main flow accepts input, extracts PDF text when needed, asks Gemini for a structured visualization blueprint, validates it, then renders one of four visualization styles alongside explanatory text and code. The shared blueprint types form a useful internal contract between generation, rendering, and the sidebar. The README provides no further product details; unsampled scene implementations are included because the canvas explicitly dispatches to them, but their internal behavior is not inferred.
Main entry points: VisualizationCanvas.tsx Visualization canvas · page.tsx App page · useVisualization.ts Generation hook · route.ts Visualization API
Components 21
Input and orchestration
- App page
app/page.tsx - Upload form
components/landing/UploadForm.tsx - Generation hook
hooks/useVisualization.ts - Node selection
hooks/useNodeSelection.ts
Blueprint generation
- PDF extraction API
app/api/extract/route.ts - Visualization API
app/api/visualize/route.ts - Prompt builder
lib/prompt.ts - Blueprint validator
lib/validateBlueprint.ts
Visualization and lessons
- Visualization canvas
components/visualization/VisualizationCanvas.tsx - Knowledge graph
components/visualization/scene/KnowledgeGraph.tsx - Timeline scene
components/visualization/scene/TimelineScene.tsx - Hierarchy scene
components/visualization/scene/HierarchyScene.tsx - Flow scene
components/visualization/scene/FlowScene.tsx - Scene controls
components/visualization/ui/SceneControls.tsx - Node tooltip
components/visualization/ui/NodeTooltip.tsx - Lesson sidebar
components/sidebar/LessonSidebar.tsx - Text section
components/sidebar/TextSection.tsx - Code section
components/sidebar/CodeSection.tsx
Shared data contract
- Blueprint types
lib/types.ts
Other components
- Learner
- Gemini API
Connections 21
- Learner → Upload form: provides input
components/landing/UploadForm.tsx - Upload form → App page: submits input
app/page.tsx - App page → Generation hook: starts generation
app/page.tsx - App page → Node selection: tracks selection
app/page.tsx - Generation hook → PDF extraction API: uploads PDF
hooks/useVisualization.ts - Generation hook → Visualization API: requests blueprint
hooks/useVisualization.ts - Visualization API → Prompt builder: builds prompts
app/api/visualize/route.ts - Visualization API → Gemini API: requests generation
app/api/visualize/route.ts - Visualization API → Blueprint validator: validates response
app/api/visualize/route.ts - Generation hook → App page: sets blueprint
app/page.tsx - App page → Visualization canvas: renders blueprint
app/page.tsx - App page → Lesson sidebar: renders lesson
app/page.tsx - Visualization canvas → Knowledge graph: dispatches graph
components/visualization/VisualizationCanvas.tsx - Visualization canvas → Timeline scene: dispatches timeline
components/visualization/VisualizationCanvas.tsx - Visualization canvas → Hierarchy scene: dispatches hierarchy
components/visualization/VisualizationCanvas.tsx - Visualization canvas → Flow scene: dispatches flow
components/visualization/VisualizationCanvas.tsx - Visualization canvas → Scene controls: renders controls
components/visualization/VisualizationCanvas.tsx - Visualization canvas → Node tooltip: renders selection
components/visualization/VisualizationCanvas.tsx - Visualization canvas → Node selection: updates selection
app/page.tsx - Lesson sidebar → Text section: renders text
components/sidebar/LessonSidebar.tsx - Lesson sidebar → Code section: renders code
components/sidebar/LessonSidebar.tsx