RecapSensie

RecapSensei uses Chrome’s built-in Gemini Nano AI to turn screenshots and subtitles into instant, privacy-safe recaps and social blurbs all processed locally, no cloud needed.

Comment

AI-Powered Anime Episode Recapper

Never forget what happened in your favorite anime. RecapSensei uses Chrome's built-in AI to transform screenshots and dialogue into comprehensive episode recaps—all processed locally on your device.

💡 Inspiration As an anime fan, I've experienced the frustration of:

Binge-watching sessions where episodes blur together Taking breaks from a series and forgetting key plot points Wanting to share epic moments without spoiling friends Tracking multiple shows and losing track of story arcs

I realized that with Chrome's new built-in AI capabilities, I could build a tool that solves all these problems—no cloud APIs, no privacy concerns, just instant, on-device episode recaps that anime fans actually need. RecapSensei was born from the desire to make anime watching more organized, shareable, and memorable.

🎯 What it does RecapSensei is a Chrome extension that generates comprehensive anime episode recaps using multimodal AI analysis. Here's what makes it special: Core Features:

📸 Screenshot Analysis - Upload key scenes from the episode 💬 Dialogue Processing - Paste subtitles or describe what happened 🤖 AI-Powered Recap Generation - Creates structured episode summaries 💾 Local Storage - Save your watch history (last 50 episodes) 🐦 Social Sharing - Generate spoiler-free tweets to hype episodes

What You Get:

Episode Summary (2-3 sentences of what happened) Key Moments (Numbered list of major story beats) Character Actions (What important characters did this episode) Story Progression (How the main plot advanced) Cliffhanger (What tension carries to the next episode) Shareable Blurb (Tweet-ready, spoiler-free summary)

The Magic:

⚡ Instant Processing - No waiting for cloud APIs 🔒 Privacy First - Everything runs on-device 🎨 Anime-Style UI - Cyberpunk aesthetic with neon accents 📱 One-Click Sharing - Copy or share recaps instantly

🛠️ How we built it Technology Stack: Chrome Built-in AI APIs:

LanguageModel API - Core multimodal analysis (text + image → structured JSON) Summarizer API - Condenses lengthy subtitle blocks intelligently Writer API - Generates engaging, tweet-sized blurbs

Frontend:

HTML/CSS - Custom anime-themed UI with gradients and glassmorphism Vanilla JavaScript - Class-based architecture for maintainability Chrome Extension Manifest V3 - Modern extension platform

Architecture Highlights: javascript// Multimodal prompt structure const prompt = ` ANIME: ${animeName} EPISODE: ${episodeNumber} SCREENSHOT: Provided DIALOGUE: ${subtitles}

Generate episode recap with:

  • Episode title
  • Summary
  • Key moments (story beats)
  • Character actions (plot-relevant)
  • Plot progression
  • Cliffhanger `;

const session = await LanguageModel.create({ outputLanguage: 'en' }); const recap = await session.prompt(prompt); Design Philosophy:

User First - Intuitive drag-and-drop interface Anime Aesthetic - Dark backgrounds with neon pink/cyan/gold accents Performance - On-device processing means instant results Privacy - No data leaves your machine

Key Implementation Decisions:

Used Summarizer API for long dialogue (better than manual truncation) Used Writer API for engaging social media content (tone-aware) Implemented fallback logic for API unavailability (graceful degradation) Added local storage for episode history tracking Structured prompts to focus on story progression not just scene description

🚧 Challenges we ran into

  1. API Evolution & Documentation Challenge: Chrome's AI APIs moved from window.ai.* to global constructors (LanguageModel, Summarizer, Writer) during development. Solution:

Studied the latest API changes from Chrome 144+ Implemented proper availability checks before each API call Added fallback mechanisms when APIs aren't available

  1. Prompt Engineering for Episode Recaps Challenge: Initial prompts generated scene descriptions instead of episode recaps. Solution:

Redesigned prompts to emphasize STORY PROGRESSION Added explicit instructions: "Think like you're explaining to someone who missed the episode" Structured output as JSON with specific fields (keyMoments, plotProgress, cliffhanger) Tested with real anime content to refine output quality

  1. Balancing Detail vs. Token Limits Challenge: Episode subtitles can be 10,000+ characters but AI has token limits. Solution:

Integrated Summarizer API to condense dialogue intelligently Only trigger summarization for text > 300 characters Preserve plot-critical information during condensation

  1. UI/UX for Small Extension Popup Challenge: Fitting comprehensive recaps in a 450px wide popup. Solution:

Vertical scrolling layout with card-based design Collapsible sections using visual hierarchy Neon accents to guide eye flow Sticky header to maintain context

  1. JSON Parsing from AI Responses Challenge: AI sometimes adds explanatory text before/after JSON. Solution: javascript// Extract JSON even with surrounding text const jsonMatch = response.match(/{[\s\S]*}/); if (jsonMatch) { return JSON.parse(jsonMatch[0]); }

🏆 Accomplishments that we're proud of Technical Achievements: ✅ Full Multimodal Integration - Successfully combined all 3 Chrome AI APIs in a real-world application ✅ Zero External Dependencies - 100% on-device processing, no cloud services needed ✅ Robust Error Handling - Graceful fallbacks ensure the extension always works ✅ Smart Prompt Engineering - Structured prompts that consistently generate useful recaps Design Achievements: ✅ Stunning Anime UI - Cyberpunk aesthetic that feels authentic to the community ✅ Smooth Animations - Polished micro-interactions (sparkle rotations, shimmer effects, card slides) ✅ Intuitive UX - Drag-and-drop, clear labeling, instant visual feedback User Value: ✅ Solves Real Problems - Anime fans genuinely need episode tracking ✅ Privacy-Focused - No data collection, no external APIs ✅ Share-Ready - One-click social media integration ✅ Fast & Reliable - On-device processing means no latency

📚 What we learned

API design matters - Global constructors are cleaner than nested namespaces Availability checking is critical - Can't assume APIs are always ready Prompt engineering is an art - Small wording changes drastically affect output quality

About Extension Development:

Manifest V3 is strict - Requires careful permission management Popup constraints are real - 450px width forces creative UI solutions User expectations are high - Modern users expect polished animations and instant feedback

About Building for Niche Communities:

Authenticity matters - The anime aesthetic isn't just decoration, it's cultural respect Solve specific problems - "Episode recapper" > "AI image analyzer" Community features drive adoption - Sharing capabilities make the tool social

Technical Lessons:

Fallback chains work - Primary API fails → Secondary API → Manual logic JSON extraction patterns - Use regex to handle AI response variations Local storage is underrated - Simple persistence goes a long way Class-based JS scales - Object-oriented code is easier to maintain

🚀 What's next for RecapSensei Short-term (Next Sprint):

📊 Recap History View - Browse all saved episode recaps with search/filter 🎬 Video Clip Support - Extract frames from video files for analysis 📤 Export Options - Download recaps as Markdown, PDF, or Notion-compatible format 🌐 Multi-language Support - Japanese, Chinese, Korean subtitle processing

Medium-term (Next Month):

📺 Streaming Integration - Detect active anime tabs and auto-capture episodes 🤝 Watch Party Mode - Share recaps with friends in real-time 📈 Analytics Dashboard - Track your anime watching habits (hours watched, genres, completion rate) 🔔 Notification System - Remind you where you left off in a series

Long-term Vision:

🌟 Community Platform - Share recaps publicly, discover what others are watching 🎯 Recommendation Engine - AI suggests next episodes/series based on your recaps 🎨 Custom Themes - User-created aesthetic themes (shounen, seinen, slice-of-life styles) 🔗 MAL/AniList Integration - Sync with popular anime tracking platforms 🤖 Batch Processing - Recap entire seasons automatically

Technical Improvements:

🧠 Fine-tuned Prompts - Genre-specific prompts (action vs. romance vs. mystery) 📸 OCR Integration - Extract text directly from screenshots ⚡ Performance Optimization - Parallel API calls, caching strategies 🔐 Cloud Backup Option - Optional encrypted cloud sync for recap history 📱 Mobile Support - Port to mobile browsers when Chrome AI APIs land on Android

Community Features:

Spoiler-Free Mode - Generate recaps that don't reveal twists Achievement System - Badges for milestones (100 episodes, 10 series completed) Discussion Integration - Link recaps to Reddit/Discord discussions Wiki Integration - Auto-link characters/terms to anime wikis

Why RecapSensei Matters In a world where:

Anime fans watch 10+ hours of content per week Series have 100+ episodes with complex plots Friends want to discuss shows without spoilers Sharing moments requires remembering details

RecapSensei bridges the gap between watching and remembering. It's not just an AI demo—it's a tool that genuinely improves the anime watching experience. And it does it all privately, locally, and instantly.

Share this project:

Updates