💡 Inspiration In today's fast-paced digital world, students and professionals consume countless hours of YouTube videos for learning. However, passively watching videos often leads to poor retention. We realized there was a gap between passive consumption and active learning. InsightAI was born out of the need to instantly convert any educational YouTube video into an interactive, comprehensive study suite.
⚙️ What it does InsightAI is a smart video learning platform. Users simply paste a YouTube URL, and the platform uses Gemini 1.5 Pro to instantly generate:
📝 Comprehensive Notes: A structured summary and key takeaways from the video. 🃏 Smart Flashcards: Auto-generated interactive flashcards for active recall and memorization. 🤖 Personalized Q&A Agent: An interactive chatbot that acts as a tutor, answering questions strictly based on the context of the video. 🛠️ How we built it We architected InsightAI with a clear separation of concerns:
Frontend: Built using React.js and Tailwind CSS to create a sleek, dark-themed, glassmorphism UI that is both responsive and intuitive. Backend: Powered by Node.js and Express. It handles API routing, extracts video transcripts, and structures prompts. AI Engine: The core intelligence is driven by the Google Gemini 1.5 Pro API, which processes the video context to accurately generate structured JSON outputs (flashcards, summaries) and powers the context-aware chatbot. 🚧 Challenges we ran into Context Window Management: Processing extremely long YouTube transcripts while ensuring the Gemini model didn't hallucinate. We solved this by optimizing our prompt engineering and token chunking. Structuring AI Outputs: Ensuring the AI consistently returned strictly formatted JSON for the React flashcard components to render without breaking. Real-time Latency: Minimizing the delay between submitting a URL and rendering the study material suite. 🏆 Accomplishments that we're proud of Successfully integrating the Gemini API to not just summarize, but create an interactive tutor persona for any video. Building a seamless, beautiful user interface from scratch in a very short hackathon timeframe. 🧠 What we learned Deepened our understanding of Prompt Engineering and Large Language Models (LLMs). Learned how to effectively parse and stream video data into an AI pipeline. Mastered state management in React for complex, multi-component data flows. 🚀 What's next for InsightAI Adding support for multi-language video processing. Implementing user authentication to save notes and flashcard progress. Export options for Notion, Obsidian, and PDF formats.
Built With
- express.js
- gemini-api
- javascript
- node.js
- react
- tailwind-css
- youtube
Log in or sign up for Devpost to join the conversation.