Hey everyone! Welcome to our FrameFlow AI project showcase!
🎯 Inspiration In a world overflowing with online content, students and self-learners often turn to YouTube for quick explanations and deep dives. But taking notes, connecting ideas, and actually learning from videos can be overwhelming and time-consuming. Inspired by HackFax 2025's theme: "A Better World", we built a tool to help turn videos into structured knowledge. Our goal was to make learning easier, faster, and smarter—so learners can spend less time scrambling for notes and more time understanding.
💡 What it does FrameFlow AI takes a YouTube link and automatically generates mind maps to visualize video content, bullet-point summaries with key insights, and downloadable PDF notes. This turns passive watching into active learning—perfect for students, lifelong learners, or educators who want to organize knowledge and retain information better. 🛠️ How we built it We used cutting-edge technology to create FrameFlow AI. Our stack includes Next.js 15 and React with TypeScript for a responsive frontend, along with Tailwind CSS and shadcn/ui components for that beautiful interface you're seeing. For the AI capabilities, we've integrated multiple models: Google Gemini 2.0 Flash for speed, Groq with Llama 3.3-70B for high accuracy, and GPT-4o-mini for balanced performance. We've also incorporated the Oracle AI Agent for enhanced processing capabilities, taking our application to the next level. We use Prisma with SQLite for efficient data storage, and implemented mermaid.js for generating beautiful mind maps and concept visualizations. Our PDF export functionality is powered by jsPDF and allows users to take their learning offline.
🧩 Challenges we ran into We faced several technical hurdles, including processing videos with poor audio quality, extracting clean and hierarchical mind map structures from long transcripts, and ensuring summaries remained educational rather than generic. Managing API latency and designing a UI that works well for both short and long-form videos also presented challenges.
🏆 Accomplishments that we're proud of We're incredibly proud to have built a working solution that transforms YouTube videos into structured notes and mind maps within seconds. We've successfully tested it on real university lectures and tutorial content, creating seamless end-to-end automation where a user simply pastes a link and gets organized output instantly. On a global scale, FrameFlow AI is already making education more accessible by supporting multiple languages, breaking down barriers to learning. For local communities, our tool helps students, educators, and lifelong learners save time and engage more deeply with educational content. The application addresses real-world problems by making complex information digestible, turning passive watching into active learning tools. Our visualizations help users understand relationships between concepts, and the quiz generation feature reinforces learning.
📚 What we learned Through this project, we gained invaluable experience with end-to-end AI pipelines and prompt engineering. We learned how to use natural language processing to structure unstructured data, and how to think like users when making UX decisions for educational tools.
🚀 What's next for FrameFlow AI Looking forward, we plan to add support for even more languages, allow users to edit and annotate the generated mind maps, incorporate quiz generation, build browser extensions, and partner with educational platforms to make learning even more accessible. FrameFlow AI is more than just a technological innovation—it's a step toward making a better world where knowledge is accessible to all. By combining multiple AI models, beautiful visualizations, and structured learning tools, we're helping create a smarter, better world where everyone can learn effectively from the vast resources available online. Thank you for watching our showcase of FrameFlow AI, where cutting-edge technology meets educational innovation!
Log in or sign up for Devpost to join the conversation.