87 lines
2.9 KiB
Markdown
87 lines
2.9 KiB
Markdown
|
# CLAUDE.md
|
||
|
|
|
||
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||
|
|
|
||
|
|
## Project Overview
|
||
|
|
|
||
|
|
Anime Quiz Video Generator - A full-stack web application that generates "Guess the Anime Opening" videos for YouTube Shorts and TikTok. Combines a Python FastAPI backend for video processing with a Vue 3 frontend.
|
||
|
|
|
||
|
|
## Commands
|
||
|
|
|
||
|
|
### Docker (primary development method)
|
||
|
|
```bash
|
||
|
|
docker-compose up --build # Build and start all services
|
||
|
|
docker-compose up # Start existing containers
|
||
|
|
docker-compose down # Stop containers
|
||
|
|
```
|
||
|
|
|
||
|
|
### Frontend (from /frontend directory)
|
||
|
|
```bash
|
||
|
|
npm run dev # Start Vite dev server (port 5173)
|
||
|
|
npm run build # Build for production
|
||
|
|
npm run preview # Preview production build
|
||
|
|
```
|
||
|
|
|
||
|
|
### Backend (from /backend directory)
|
||
|
|
```bash
|
||
|
|
uvicorn app.main:app --host 0.0.0.0 --port 8000 --reload
|
||
|
|
```
|
||
|
|
|
||
|
|
## Architecture
|
||
|
|
|
||
|
|
### Backend (FastAPI + MoviePy)
|
||
|
|
- `backend/app/main.py` - FastAPI application with REST endpoints
|
||
|
|
- `backend/app/video_generator.py` - Core `VideoGenerator` class handling all video composition
|
||
|
|
- `backend/app/models.py` - Pydantic models (VideoMode, Difficulty, QuizItem, GenerateRequest)
|
||
|
|
- `backend/app/config.py` - Settings via Pydantic BaseSettings with `QUIZ_` env prefix
|
||
|
|
|
||
|
|
**Video generation runs in ThreadPoolExecutor (max_workers=1) to avoid blocking the async event loop.**
|
||
|
|
|
||
|
|
### Frontend (Vue 3 + Vite)
|
||
|
|
- `frontend/src/App.vue` - Single component handling all UI, form state, and API calls
|
||
|
|
- Uses Vue 3 Composition API (`ref`, `reactive`, `computed`)
|
||
|
|
- Vite proxies `/api`, `/videos`, `/download` to backend at `http://backend:8000`
|
||
|
|
|
||
|
|
### Media Organization
|
||
|
|
```
|
||
|
|
media/
|
||
|
|
├── audio/ # MP3 anime openings
|
||
|
|
├── backgrounds/ # MP4 looping videos (5-10 sec recommended)
|
||
|
|
└── posters/ # Anime poster images (JPG/PNG/WebP)
|
||
|
|
|
||
|
|
output/videos/ # Generated MP4 files
|
||
|
|
```
|
||
|
|
|
||
|
|
## Video Generation Flow
|
||
|
|
|
||
|
|
1. Frontend POSTs to `/generate` with quiz configuration
|
||
|
|
2. `VideoGenerator.generate()` creates scenes in sequence:
|
||
|
|
- **Question scene**: background + countdown timer + difficulty badge + audio track
|
||
|
|
- **Answer scene**: anime title + poster image with fade-in
|
||
|
|
3. For "full" mode, adds final CTA screen
|
||
|
|
4. Concatenates all scenes → writes MP4 (H.264/AAC)
|
||
|
|
5. Returns video URL for download
|
||
|
|
|
||
|
|
**Video dimensions:**
|
||
|
|
- `shorts`: 1080x1920 (9:16) for TikTok/Shorts
|
||
|
|
- `full`: 1920x1080 (16:9) for YouTube
|
||
|
|
|
||
|
|
## API Endpoints
|
||
|
|
|
||
|
|
| Method | Endpoint | Purpose |
|
||
|
|
|--------|----------|---------|
|
||
|
|
| GET | `/health` | Health check with FFmpeg status |
|
||
|
|
| GET | `/content` | List available audio, backgrounds, posters |
|
||
|
|
| POST | `/generate` | Generate video (returns video URL) |
|
||
|
|
| GET | `/download/{filename}` | Download generated video |
|
||
|
|
| DELETE | `/videos/{filename}` | Delete video |
|
||
|
|
| GET | `/videos-list` | List generated videos |
|
||
|
|
|
||
|
|
## Environment Variables
|
||
|
|
|
||
|
|
```
|
||
|
|
QUIZ_MEDIA_PATH=/app/media
|
||
|
|
QUIZ_OUTPUT_PATH=/app/output/videos
|
||
|
|
VITE_API_URL=http://backend:8000
|
||
|
|
```
|