Learnable

Your personalized AI lecturer

Comment

Learnable

What Inspired Us

Nearly 94.67% of students use YouTube as an educational resource, yet most of us have had the same frustrating experience: scrubbing through long videos, hoping someone on the internet explains exactly what our professor meant, only to realize it doesn’t quite match our course material.

Textbooks are dense, static, and difficult to digest quickly. Online videos are often high quality, but rarely aligned with your syllabus. And most importantly, videos are passive. There’s no feedback loop, no way to ask questions, and no adaptation to what you actually don’t understand.

Research consistently shows that students learn better through active, visual, and interactive learning, yet the tools we rely on haven’t caught up. That gap is what inspired us to build Learnable.

Sources:

The Problem We Are Solving

Traditional education relies heavily on static textbooks and one-size-fits-all lectures. This creates three major problems:

  • Textbook material is dense and hard to understand quickly
  • Online educational content rarely aligns exactly with course content
  • Videos are passive, even though students strongly prefer active learning

On the educator side, transforming course materials into engaging visual explanations is time-consuming, expensive, and requires expertise in both pedagogy and video production. As a result, high-quality, personalized visual explanations are rare.

Our Solution

Learnable is an AI-powered platform that transforms real course materials (like lecture notes or maybe your whole CS 374 textbook) into interactive, 3Blue1Brown-style animated video lessons, complete with synchronized narration and a real-time AI voice tutor.

Instead of passively watching videos, students can:

  • Upload their own course materials
  • Request explanations for specific topics
  • Watch short, focused animated videos grounded in their syllabus
  • Immediately ask follow-up questions through a live AI voice tutor

This turns studying into an active, conversational learning experience rather than a one-way content dump.

How We Built It

Learnable is designed as a modular, distributed system with four main components.

Frontend (React + Vite)

The frontend is a modern React 19 application built with React, Vite, and Tailwind CSS. It allows users to:

  • Upload PDFs and manage subjects/topics
  • Request video explanations
  • Watch generated videos
  • Interact with a real-time AI voice tutor via LiveKit

The focus was on making the experience feel smooth, interactive, and engaging so its closer to an interactive lecture than a boring lecture video.

Backend Video Generation Service (Python)

The core of Learnable is a three-phase AI content generation pipeline, made easier with Keyword.ai's prompt management tool:

1. Plan Generation
We extract text from uploaded PDFs and use LLMs managed via KeywordsAI Prompt Manager to generate a structured lesson plan. This ensures the explanation is aligned with course material.

2. Audio Generation
From the lesson plan, we generate a detailed narration script optimized for text-to-speech using Deepgram. Prompt management ensures consistency and quality across generations.

3. Video Animation
We then generate ManimGL (3Blue1Brown-style) animation code, producing clean, visual explanations synchronized precisely with the narration. The result is a fun and interactive animated video!

Our Flask API orchestrates the entire pipeline, handling file uploads, generation requests, and frontend communication.

Here's a sample video generated by this AI pipeline. It's truly amazing what we could build in 24 hours: https://drive.google.com/file/d/1jgRuo5PKKW2XRKSErkoRwq4extm3znQx/view?usp=sharing

Voice AI Tutor (Python + LiveKit)

To make learning active, we built a real-time AI voice tutor:

  • LiveKit handles low-latency WebRTC communication
  • Deepgram provides speech-to-text and natural-sounding TTS
  • GPT-4.1-mini powers conversational reasoning
  • The tutor dynamically loads context from uploaded PDFs

After each video, the tutor asks follow-up questions and responds naturally, turning videos into interactive tutoring sessions.

Token Server (Node.js)

A lightweight Node.js service securely issues LiveKit tokens, ensuring authenticated and encrypted voice sessions between users and the AI tutor.

What We Learned

Technical Insights

We learned how powerful prompt orchestration and AI gateways can be when coordinating multiple AI systems. Using KeywordsAI, we were able to iterate on different prompt versions, pass structured data between stages of the pipeline, and integrate multiple models seamlessly into a single product workflow. This abstraction made our system easier to debug and improve.

Challenges We Faced

  • Synchronizing audio and animations required precise timing and careful prompt engineering
  • Maintaining low latency for real-time voice interaction was very difficult
  • Grounding explanations strictly in course material meant careful RAG design to avoid hallucinations
  • Balancing quality vs. generation speed was a constant tradeoff

Each challenge pushed us to refine our architecture and build more robust abstractions.

Why Learnable Matters

Learnable transforms passive studying into active learning:

  • Videos are grounded in your course material
  • Visual explanations reduce cognitive load
  • Real-time voice interaction closes the feedback loop

Instead of searching endlessly for the “right” video, students get explanations built for them, in minutes.

That’s Learnable.

Built With

Share this project:

Updates