• 

  FlowLearnAi

🎯 About the Project

🌟 Inspiration

Learning complex topics — from algorithms to biological systems — often feels like decoding a puzzle.
Traditional resources like textbooks and videos present static information that doesn’t adapt to different learning speeds or styles.

We wanted to transform learning into an interactive, visual, and adaptive experience — where every learner can see how ideas flow and hear explanations that match their understanding level.

That vision led to FlowLearn AI, an intelligent platform that turns any topic into a guided, animated flowchart powered by AI.

🧩 What We Built

FlowLearn AI combines generative AI, visualization, and interactivity to create an adaptive learning experience.

• AI-Powered Flowcharts: GPT-4 via GitHub Models API generates visual, step-by-step learning flows.
  
• Adaptive Complexity: Three learning levels — Simple, Detailed, and Advanced — for customized learning.
  
• Interactive Narration: An AI “teacher” avatar provides synchronized voice explanations and highlights.
  
• Multi-Format Export: Export learning materials as PNG, PDF, DOCX, or Mermaid code for reuse.

🛠️ How We Built It

• Frontend: HTML5, CSS3, Tailwind CSS, and Vanilla JavaScript.
  
• Visualization: Mermaid.js for dynamic flowchart rendering.
  
• AI Integration: GPT-4 through GitHub Models API for structured JSON generation.
  
• Voice & Interactivity: Web Speech API for narration and timing synchronization.
  
• Export Tools: html2canvas, jsPDF, and docx.js for multi-format exports.
  
• Deployment: GitHub Pages for hosting and GitHub Models for backend inference.

🚀 What We Learned

• Crafting structured prompts to produce valid Mermaid code with detailed explanations.
  
• Designing timing logic to synchronize narration, visuals, and step transitions.
  
• Integrating multimodal learning (visual + auditory + textual) for better engagement.
  
• Building user-friendly adaptive interfaces for learners of all levels.

⚙️ Challenges We Faced

• Ensuring GPT-4 generated perfectly structured Mermaid syntax consistently.
  
• Synchronizing voice narration with animated flowcharts.
  
• Balancing simplicity vs. depth in adaptive learning modes.
  
• Managing performance and smooth rendering for large flowcharts.

📚 Educational Impact

FlowLearn AI demonstrates measurable improvements in learning outcomes:

• (40\%) faster comprehension of complex processes.
  
• (3\times) higher retention through visual + auditory learning.
  
• Enhanced accessibility for diverse learning styles.

💖 Conclusion

FlowLearn AI reimagines how people learn — transforming static text into living knowledge flows.
We believe the future of education lies in AI-guided, personalized, and visual learning experiences that empower every learner to explore any topic with confidence.

Built With

• css3
• docx.js
• git
• github
• github-models-api
• html2canvas
• html5
• javascript
• json
• jspdf
• mermaid-syntax
• mermaid.js
• node.js
• openai-gpt-4
• python
• tailwind-css
• web-speech-api