StoryReverse

Extract professional shooting scripts from YouTube videos using Gemini 3 Pro Multimodal capabilities.

Features

• 📹 Multiple Input Modes: YouTube URLs, uploaded media files, or text transcripts
• 🎬 Professional Shooting Scripts: Frame-by-frame analysis with timecodes
• 🌐 Dual Language Support: English and Simplified Chinese translations
• ⚙️ Configurable: Custom model settings and output options
• 🚀 Modern Stack: React 19 + TypeScript + Vite

Quick Start

Prerequisites

• Node.js 20+
• Gemini API Key

Installation

# Clone the repository
git clone https://github.com/yourusername/storyreverse.git
cd storyreverse

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local and add your GEMINI_API_KEY

Development

# Start development server (http://localhost:3000)
npm run dev

# Run tests
npm run test

# Run tests with coverage
npm run test:coverage

# Build for production
npm run build

Development Commands

# Code quality
npm run lint            # Lint code
npm run lint:fix        # Fix linting issues
npm run format          # Format code with Prettier
npm run format:check    # Check formatting
npm run type-check      # TypeScript type checking

# Testing
npm run test            # Run tests in watch mode
npm run test:ui         # Run tests with UI
npm run test:coverage   # Run tests with coverage report

Project Structure

storyreverse/
├── components/         # React components
│   ├── InputPanel.tsx # Input interface with tabs
│   ├── ResultView.tsx # Script display & download
│   └── Navbar.tsx     # App header
├── services/          # API integration
│   └── gemini.ts      # Gemini AI service
├── tests/             # Test files
├── App.tsx            # Main application
├── types.ts           # TypeScript definitions
└── vitest.config.ts   # Test configuration

Architecture

StoryReverse uses a multi-step pipeline for video analysis:

1. Video Understanding: Upload or analyze video via Gemini File API
2. Raw Extraction: Extract detailed chronological logs of visual and audio events
3. Script Engineering: Convert raw logs into professional shooting scripts
4. Translation: Generate Chinese translation using film industry terminology

See CLAUDE.md for detailed architecture documentation.

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.

Development Workflow

1. Fork and clone the repository
2. Create a feature branch
3. Make your changes with tests
4. Ensure all checks pass: npm run lint && npm run type-check && npm test
5. Submit a pull request

Configuration

Environment Variables

• GEMINI_API_KEY: Your Google Gemini API key

Runtime Settings

Configure via the Settings modal in the UI:

• Model name (default: gemini-3-pro-preview)
• Custom API base URL
• Custom API key (overrides environment variable)

Testing

Run coverage report:

npm run test:coverage