ScribeTube
YouTube → Polished Book Chapter

by Parithosh-Varma

🌐 Live Demo

Turn any YouTube video into a beautifully formatted book chapter.
Paste a link → fetch the transcript → instantly generate structured prose with headers, takeaways & clean typography.
No API key required. Runs locally.

⚡ One-liner

YouTube transcript in, polished book chapter out. No API keys needed. No cloud dependencies. Just Python + React.

---

✨ What It Does

Capability	How
Fetch any YouTube transcript	Local Python backend → youtube-transcript-api → no CORS, no rate limits, no proxies
Format into a book chapter	AI (Claude/GPT/Gemini) or built-in local heuristic editor — your choice
Explore interactively	Split workspace with video player, timestamped caption browser, and live chapter preview
Export cleanly	Plain text · Markdown · .md file · PDF print with full typographic control

---

🚀 One-Minute Setup

# Terminal 1 — Backend
pip3 install youtube-transcript-api flask flask-cors
python3 server/server.py

# Terminal 2 — Frontend
npm install
npm run dev

Or start both at once:

npm start

Open http://localhost:5173 and paste a YouTube URL.

---

🏗 Architecture

                         ┌──────────────────┐
                         │   Browser (5173) │
                         │  React 19 + Vite │
                         └────────┬─────────┘
                                  │ GET /api/transcript?v=xxx
                                  │ GET /api/metadata?v=xxx
                                  ▼
                         ┌──────────────────┐
                         │  Flask Backend   │
                         │  (localhost:8080)│
                         │ youtube-transcript-api
                         └────────┬─────────┘
                                  │
                    ┌─────────────┴─────────────┐
                    ▼                           ▼
           ┌────────────────┐          ┌────────────────┐
           │  Local Editor  │          │  AI Providers   │
           │  (no key)      │          │  (optional)     │
           │  Heuristic MD  │          │  Claude / GPT   │
           │  formatting    │          │  / Gemini       │
           └────────────────┘          └────────────────┘

---

🗂 Project Layout

youtube-transcript-book-converter/
├── server/
│   └── server.py              # Flask backend — transcript & metadata API
├── src/
│   ├── App.tsx                # Main UI
│   ├── main.tsx               # Entry point
│   ├── index.css              # Tailwind v4 + design tokens
│   ├── LOGO/
│   │   └── logo.png           # App logo
│   ├── data/
│   │   └── presets.ts         # (empty — presets removed)
│   └── utils/
│       ├── transcript.ts      # ID extraction, fetching, local formatter
│       ├── ai.ts              # AI provider configs + API calls
│       ├── markdown.ts        # Markdown → styled HTML
│       └── cn.ts              # Tailwind class merger
├── .gitignore
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

---

🎨 UI Highlights

• Literary design system — Fraunces serif, Inter UI, JetBrains Mono for raw data
• Editing desk layout — narrow Configure rail + wide Manuscript Page panel
• Before/after strip — visualizes raw transcript → polished prose transformation
• Dark/Light theme — Reading Room dark, Manuscript Page light
• Oxblood + Brass palette — book-cover aesthetic, not SaaS dashboard
• Stamp press button — Generate button clicks down like a printing press
• Smart first-letter drop-cap — in serif book mode
• Searchable captions — filter transcript segments by keyword
• PDF print output — clean A4 formatting with elegant dividing ornaments
• Reduced motion — respects prefers-reduced-motion
• Brass focus states — keyboard navigation with brass ring outlines

---

⚙️ Configuration

AI Provider   →  Local / Anthropic / OpenAI / Gemini
API Key       →  Stored in localStorage (never leaves your browser)
Font          →  Serif / Sans / Mono
Font Size     →  SM / BASE / LG / XL
Theme         →  Dark (Reading Room) / Light (Manuscript Page)

---

📦 Build for Production

npm run build

Outputs a single self-contained dist/index.html with everything inlined. Deploy anywhere.

---

🤝 Contributing

Ideas for next-level stuff:

• More AI providers (Groq, Ollama, Mistral)
• Speaker diarization from transcript
• EPUB / MOBI export
• Multi-language caption support

PRs welcome.

---

📄 License

MIT — free for any use.

---

_{Made by Parithosh-Varma · built with React, Flask, and a love for good prose.}