Project Info
Inspiration
Walt Disney believed that technology should always serve the story, and that entertainment should be accessible to everyone. That philosophy became one of the foundations of MagiFab. I envision a world where everyone can understand and enjoy stories, regardless of how complex they are. MagiFab's accessibility experience was inspired by applications like MapHabit and BeeVisual, which demonstrate how thoughtful design can make information easier to understand. I wanted anyone—whether they were watching Dune, reading A Memory Called Empire, or experiencing any complex story—to be able to follow and visualize what was happening. One of my biggest inspirations was Mahit Dzmare's relationship with her imago, Yskandr Aghavn: a neurological companion that helps her understand, remember, and reason throughout the story. I imagined MagiFab becoming that kind of companion for every user. I noticed a gap between AI assistants and accessibility tools. Most AI systems expect users to know what questions to ask and often respond with long blocks of text. Many accessibility tools, on the other hand, help people access content but not truly understand the narrative. MagiFab bridges that gap with simple prompt bubbles, visual explanations, and personalized guidance that appear naturally as the story unfolds. Imagine watching a movie with friends when someone struggles to understand what's happening. Instead of pausing the film or relying on someone else to explain every scene, MagiFab quietly provides contextual guidance in real time, helping them catch up and stay engaged without interrupting the experience. To understand what the application does we can divide it into 2 parts: UI/Profile Personalised user onboarding based on what the user struggles with while watching movies, series or reading books. Allows the user to create a personalised AI companion to assist them throughout the experience. A questionnaire which understands how the companion could help them better. If the user wants to understand who a character is and clicks on a prompt, a small water bubble glows, immersing into the colour scheme of the movie or book. If the user wants to understand what is happening in a scene and why, the companion provides contextual explanations supported by simple visual aids. The user simply moves toward the side of the screen and the companion panel appears with intelligent prompt bubbles. Minimalistic visual aids designed specifically for people with disabilities using simple shapes, relationships, timelines and contextual explanations instead of overwhelming diagrams. Model Functionality/Specification Predicts what difficulties the user might face based on their accessibility preferences and answers during onboarding. Analyses movies and books into semantic intervals rather than waiting until the user becomes confused. Builds contextual story memory as the story progresses. Creates intelligent prompt bubbles based on predicted moments of confusion instead of waiting for the user to ask questions. Maintains story state including: Characters Relationships Emotions Timeline Memory Cause & Effect Objects Conversations Story Summary Characters Relationships Emotions Timeline Memory Cause & Effect Objects Conversations Story Summary Generates contextual visual drawers that evolve naturally with the story. Technologies OpenAI Codex with the $100 credits provided through Devpost GPT-5.6 (Terra Medium) TypeScript Python FastAPI HTML CSS JavaScript Gemini 2.5 Flash Google Search Codex with GPT-5.6 I explored how OpenAI Codex and GPT-5.6 could be used to build an application almost entirely through AI-assisted development. Used Codex as an AI software engineering partner throughout the project. Developed the application using GPT-5.6 Terra Medium with structured development workflows instead of one large prompt. Broke development into phases including system architecture, backend pipelines, frontend experience, accessibility features, API integration, debugging, and iterative UI improvements. Used Codex to rapidly generate components, refine architecture, debug issues, and iterate on both the frontend and backend. Backend I designed the complete system architecture before implementing the application. Rather than preprocessing content during playback, MagiFab creates durable accessibility artifacts before a user begins watching a movie or reading a book. During playback or reading, the application simply retrieves the appropriate stored artifact. Movie pipeline The movie pipeline performs: Upload processing FFmpeg 90-second chunk generation Gemini video understanding Google Search evidence retrieval for uncertain entities OpenAI accessibility reasoning using the companion profile Prompt bubble generation Visual Drawer generation Scene artifact generation Persistent scene storage Timestamp-based retrieval during playback Gemini analyzes continuous video chunks rather than isolated frames. When uncertain about identifiable entities, Google Search provides supporting evidence. OpenAI then combines these observations with the user's accessibility profile, companion personality, explanation preferences, and learning needs to generate contextual scene artifacts. Each stored artifact contains: Prompt bubbles Scene explanations Character information Memory cues Visual aids Timeline information Relationship data Companion responses During playback, MagiFab retrieves the closest scene artifact using the movie timestamp. No additional preprocessing or Gemini calls occur while the user watches the movie. Book pipeline Books follow a completely separate pipeline and are never processed as videos. The book workflow performs: PDF, EPUB, or text extraction Front-matter filtering Narrative start detection Chapter and section segmentation Accessibility reasoning Relationship construction Chapter artifact generation Reading-time retrieval Each chapter generates durable accessibility artifacts including: Chapter summaries Simplified explanations Character cards Relationship maps Important events Difficult concepts Memory aids Companion questions During reading, the application retrieves stored chapter artifacts instead of repeatedly reasoning over the original document. Novel Architecture One of MagiFab's primary architectural contributions is separating preprocessing from the user experience. Traditional multimodal assistants repeatedly send content to an LLM whenever a user asks a question or advances through a story. This increases latency, API usage, and the likelihood of inconsistent explanations. Instead, MagiFab performs a one-time preprocessing pipeline that constructs durable accessibility artifacts before the experience begins. For movies, the reasoning engine combines: Gemini video understanding Google Search evidence Companion accessibility profile User explanation preferences Accessibility requirements to generate contextual scene artifacts that can be retrieved instantly during playback. For books, the reasoning engine constructs chapter-level accessibility artifacts that provide summaries, simplified explanations, relationship maps, timelines, memory aids, and companion interactions without reprocessing the original text. This retrieval-first architecture means playback and reading only access stored artifacts through dedicated APIs rather than repeatedly invoking Gemini or OpenAI. The result is: Faster responses Lower API usage Consistent explanations Reduced repeated reasoning Personalized accessibility guidance A scalable retrieval-first architecture Frontend GPT-5.6 helped produce polished, accessible user interfaces with a strong visual hierarchy. The interface was intentionally designed to reduce cognitive overload while allowing assistance to appear only when needed. For movies, users receive contextual prompt bubbles synchronized to the current playback timestamp together with a Visual Drawer containing: Characters Relationships Timeline Objects Memory Emotion Cause & Effect For books, the interface provides a dedicated reading experience with: Chapter navigation Simplified explanations Companion chat Character cards Relationship maps Timelines Memory aids Visual maps By separating preprocessing from retrieval, the frontend remains lightweight and responsive while delivering personalized accessibility assistance exactly when it is needed. Debugging I identified bugs while testing the application. Codex analysed stack traces, logs and backend behaviour to diagnose and resolve issues. Multiple architecture refactors were performed as the reasoning pipeline evolved.
Challenges we ran into
Video storage and selecting the right cloud service to stream large movie files. Designing the UI, especially the prompt panel where there were conflicting interaction states while reaching for the scrollbar. Debugging the UI and making it thoughtful, accessible and intuitive. Making sure API calls were optimised for only $5 worth of credits while still demonstrating complete functionality. Creating prompt bubbles that appear naturally without interrupting immersion. Designing an interval pipeline that analyses the story ahead of the user. Iterating the reasoning system and pipeline multiple times. It should follow the analogy I gave — it shouldn't just create the map, it should continuously learn from that map as the story progresses. Handling hallucinations (for example calling Big Buck Bunny a bear). Multiple architecture refactors while improving reasoning quality. Improving visual recognition for difficult scenes such as Sprite Fright ("The Secret Life of Pets", "young boy", "British flag shirt", "train", etc.). Balancing accessibility with preserving the original storytelling experience. Building a companion that understands context rather than simply recognising objects.
Accomplishments we're proud of
Fully functional UI with playback controls. Personalised accessibility onboarding. AI companion creation workflow. Designed and implemented a novel interval-based story reasoning architecture. Built persistent story memory that evolves throughout the movie. Context-aware prompt generation. Dynamic visual drawers driven by story state. Optimised API usage with limited billing. Successfully built a working end-to-end prototype almost entirely using Codex and GPT-5.6.
What we learned
How to optimise UI/UX for people with different accessibility needs. How to design minimalistic interfaces that reduce cognitive overload. How to architect an AI reasoning pipeline instead of relying on a single prompt. How persistent story memory dramatically improves contextual explanations. How prompt engineering and system architecture directly influence accessibility. How rapidly complex AI systems can be prototyped using Codex and GPT-5.6.
What's next
Improve the movie reasoning pipeline. Extend the same AI companion experience to books and educational content. Improve multimodal understanding across movies, books and visual media. Better predict moments where users may struggle before confusion occurs. Richer interactive visual explanations with lightweight diagrams and animations. More personalised companions that adapt to users over time. Support additional accessibility needs and learning styles. Reduce preprocessing latency while improving explanation quality.
MagiFab
MagiFab is an accessibility companion for movies and books. It creates durable, personalized story artifacts before a person starts watching or reading. Playback and reading only retrieve those artifacts; they never call Gemini or OpenAI to preprocess content.
Architecture
Movie pipeline
Upload movie
→ FFmpeg 90-second chunks
→ Gemini video understanding
→ Google Search evidence for uncertain entities only
→ OpenAI accessibility reasoning (companion profile + accessibility needs)
→ Stored scene artifacts
→ Playback-time retrieval
Gemini receives each continuous video chunk, never a frame-analysis pipeline. Google Search is evidence for uncertain, identifiable entities only. The OpenAI reasoning step receives Gemini observations, that evidence, and the user’s companion profile (personality, accessibility needs, difficulties, and explanation style). It generates prompt bubbles, scene explanations, character information, memory cues, Visual Drawer data, and visual aids.
During playback the frontend calls only GET /api/v1/movies/{movie_id}/scene?timestamp=… to retrieve the closest stored artifact. Prompt clicks reuse it. Direct questions use the stored-context companion-chat endpoint; neither route triggers preprocessing or Gemini.
Book pipeline
Books are a separate text pipeline and are never treated as movies.
PDF / EPUB / text upload
→ text extraction per page
→ front-matter filtering (cover, copyright, publisher, TOC)
→ narrative start detection
→ chapter/section/page-range segmentation
→ accessibility reasoning and relationship construction
→ stored chapter artifacts
→ reading-time retrieval
The repository includes books/Frank Herbert - Dune 1 - Dune.pdf. The backend registers it as the Dune example, and the frontend’s Dune tile starts its book-specific process. Artifacts include chapter summaries, simplified explanations, character cards, directional relationship maps, important events, difficult concepts, memory aids, and chapter-level companion questions.
The book API stores chapter metadata (chapter number/title and page range) and serves a dedicated reading UI layout:
Left panel: cover/progress/chapter list
Center panel: chapter summary + simplified explanation
Right panel: companion chat and quick questions
Bottom tabs: Characters, Relationships, Timeline, Memory Aid, Visual Map
User experience
For movies, an unprocessed upload shows “Creating your MagiFab companion experience…” and reports chunking, Gemini analysis, accessibility reasoning, and artifact progress. Once complete, the player uses timestamped prompt bubbles and a Visual Drawer with Characters, Timeline, Objects, Memory, Emotion, and Cause tabs.
For Dune and uploaded books, the loading screen says “Creating your MagiFab reading companion…” and reports text extraction, chapter understanding, relationship building, and accessibility explanations. Readers can move through chapters, view the simplified artifact, open relationship information, and ask their companion a stored-context question.
API
Movies
| Endpoint | Purpose |
|---|---|
POST /api/v1/movies/upload | Upload a video and return movie_id. |
POST /api/v1/movies/{movie_id}/preprocess | Queue the one-time movie pipeline with companion_profile. |
GET /api/v1/movies/{movie_id}/processing-status | Returns queued, chunking, analyzing, reasoning, complete, or failed, plus progress and percentage. |
GET /api/v1/movies/{movie_id}/scene?timestamp= | Returns the closest stored scene artifact. |
POST /api/v1/movies/{movie_id}/companion/chat | Answers from stored scene context, companion profile, and question. |
GET /api/v1/movies/{movie_id}/video | Development video streaming endpoint. |
Books
| Endpoint | Purpose |
|---|---|
POST /api/v1/books/upload | Upload a PDF, EPUB, or text document. |
POST /api/v1/books/{book_id}/preprocess | Queue separate book extraction and accessibility processing. |
GET /api/v1/books/{book_id}/processing-status | Read extraction/reasoning progress. |
GET /api/v1/books/{book_id}/chapters | Retrieve chapter metadata list and page ranges. |
GET /api/v1/books/{book_id}/chapter?chapter= | Retrieve a stored chapter artifact. |
POST /api/v1/books/{book_id}/companion/chat | Answer from the stored chapter context. |
GET /api/v1/books/examples/dune resolves the locally supplied Dune example for the frontend tile.
Local setup
Requirements: Node.js 20+, Python 3.11+, FFmpeg/FFprobe, and Python dependencies from backend/requirements.txt.
cd backend
python -m venv .venv
.venv/bin/pip install -r requirements.txt
cp .env.example .env
.venv/bin/uvicorn app:app --reload --port 8000
In another terminal:
npm install
npm run dev
Frontend API calls are always absolute and always use VITE_MAGIFAB_BACKEND_URL.
Create a frontend env file (for local dev or Vercel):
VITE_MAGIFAB_BACKEND_URL=https://magifab.onrender.com
No frontend route or Vite proxy should be used for backend API traffic.
Environment variables
Set these in backend/.env, never in the frontend:
OPENAI_API_KEY=...
OPENAI_MODEL=gpt-5.6
GEMINI_API_KEY=...
GEMINI_MODEL=gemini-2.5-flash
MOVIE_PIPELINE_DIR=cache/movie-pipeline
CORS_ORIGINS=http://localhost:5173
The browser has no provider credentials.
Frontend runtime variables
Set this in your frontend environment (.env.local, Vercel Project Settings, etc.):
VITE_MAGIFAB_BACKEND_URL=https://magifab.onrender.com
Deployment architecture
Frontend (Vercel)
↓
Render FastAPI backend
↓
Gemini
↓
Google Search
↓
OpenAI
↓
Scene cache
The development implementation uses SQLite and local blobs beneath MOVIE_PIPELINE_DIR. In production replace those storage adapters with object storage and a durable database, run preprocessing through a job worker, and keep the API deployment stateless. The player and reader should remain retrieval-only clients. Provider keys stay in the backend worker/API environment; never expose them through Vite or the browser.
Analysis
View
Metric
- 83
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- CSSIn code
- FastAPIIn code
- HTMLIn code
- JavaScriptIn code
- OpenAIIn code
- PythonIn code
- ReactIn code
- SQLIn code
- SupabaseIn code
- Tailwind CSSIn code
- TypeScriptIn code
- Google GeminiClaimed
- VercelClaimed
11 of 13 appear in the indexed code. 2 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
1018 KB
Source files
263
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
dr1810/Magifab
628 files · 112.1 MB · @ 58c4aa2
Structure
Interface
27 files · 4%Screens, components and styles rendered to the user.
Application logic
221 files · 35%Domain rules, services and shared utilities.
+11 moreData & schema
46 files · 7%Schema definitions, migrations and data access.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- Python57%
- TypeScript37%
- CSS3%
- Markdown2%
- SQL0%
- HTML0%
- Other (2)0%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 15- @supabase/supabase-js
- framer-motion
- lucide-react
- pdfjs-dist
- react
- react-dom
- tus-js-client
- +8 more
backend/requirements.txt
pypi · 8- fastapi
- google-genai
- openai
- pydantic-settings
- pypdf
- python-dotenv
- python-multipart
- uvicorn[standard]
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.