Transform your imagination into dynamic visual stories with AI-powered narratives and stunning comic panels and animated videos
Features • Demo • Quick Start • Architecture • Documentation
- 📖 Overview
- 🎯 Key Highlights
- ✨ Features
- 🏗️ Architecture
- 🚀 Quick Start
- 🎬 Video Generation
- 📁 Project Structure
- 🛠️ Tech Stack
- 🔌 API Endpoints
- ⚙️ Configuration
- ⌨️ Keyboard Shortcuts
- 📚 Documentation
- 🤝 Contributing
- 📄 License
- 🙏 Acknowledgments
- 💬 Support
Interactive comic generation with branching narratives and AI-powered visuals
👉 Try the Live Demo (Coming Soon)
🎥 Watch Video Demo (Coming Soon)
|
High-quality AI-generated artwork |
5-10 second cinematic clips |
ChooseFrame is an interactive comic generator that combines the narrative power of Claude AI with the visual capabilities of Runware SDXL. Create unique characters, make meaningful choices, and watch your story unfold through dynamically generated comic panels and animated videos.
- AI Story Generation - Powered by Anthropic's Claude for rich, adaptive narratives
- Dynamic Visuals - High-quality comic panels via Runware SDXL API
- 🎬 Video Animation - NEW! Animate any panel into 5-10 second videos
- Branching Narratives - Your choices shape the story in real-time
- Character Consistency - Reference system ensures visual continuity
- Multiple Art Styles - Noir, Manga, Superhero, Fantasy, and Cyberpunk
- Export & Share - Save your stories as PDF comics or video clips
Video
Recording.2026-01-25.123132.mp4
-
Generate character reference images from natural language
-
Choose from 5 distinct art styles
-
Visual consistency across all story panels
- Claude AI-powered adaptive storytelling
- Branching decision trees with meaningful choices
- Adjustable tone controls (humor, drama, action, romance, suspense)
- Multiple genres: Noir, Sci-Fi, Fantasy, Romance, Horror, Comedy
- AI-generated panel imagery with SDXL
- 🎬 NEW: Video Animation - Transform static panels into animated videos
- 5 or 10 second video clips from any panel
- Runware video inference with Kling AI
- Cinematic camera movements and effects
- Download as MP4 format
- Dynamic speech bubbles and dialogue overlays
- Panel transitions and visual effects
- Immersive reading mode
- Story history navigation and undo system
- Keyboard shortcuts for power users
- Dark/Light theme support
- Voice narration (text-to-speech)
- PDF export functionality
ChooseFrame follows a modern client-server architecture with specialized AI service integrations.
graph TD
subgraph Frontend_NextJS
UI[React UI Components]
State[React Context / Hooks]
API_Client[Axios Client]
end
subgraph Backend_FastAPI
Server[FastAPI Server]
Auth[Auth Logic]
Engine[Story Engine]
PanelGen[Panel Generator]
end
subgraph AI_Services
Claude[Anthropic Claude API]
Runware[Runware SDXL API]
end
subgraph Storage
Cache[Local Cache / File System]
Export[PDF / Image Export]
end
UI --> State
State --> API_Client
API_Client --> Server
Server --> Engine
Server --> PanelGen
Engine --> Claude
PanelGen --> Runware
Server --> Cache
Server --> Export
sequenceDiagram
participant FE as Frontend
participant BE as Backend
participant Claude as Anthropic AI
participant Runware as Runware AI
FE->>BE: Submit Choice
BE->>Claude: Generate Story Context
Claude-->>BE: Story Text & Image Prompts
BE->>Runware: Generate Panel Image
Runware-->>BE: Image URL
BE-->>FE: Panel Data (Text + Image)
FE->>FE: Overlay Dialogue
- Python 3.10 or higher
- Node.js 18 or higher
- API keys:
-
Clone the repository
git clone https://github.com/MasteraSnackin/ChooseFrame.git cd ChooseFrame -
Install Python dependencies
pip install -r requirements.txt
-
Configure environment variables
cp .env.example .env
Edit
.envand add your API keys:RUNWARE_API_KEY=your_runware_api_key ANTHROPIC_API_KEY=your_anthropic_api_key
-
Install frontend dependencies
cd web/frontend npm install cd ../..
Terminal 1 - Backend (FastAPI)
cd web/backend
python -m uvicorn main:app --reload --port 8000Terminal 2 - Frontend (Next.js)
cd web/frontend
npm run devOpen your browser: http://localhost:3000
ChooseFrame now includes AI-powered video animation to bring your comic panels to life!
- Create a story and generate comic panels
- Scroll down to find the "Generate Video Animation" section below each panel
- Adjust settings:
- Duration: Choose 5 or 10 seconds
- Motion Prompt (optional): Add text like "slow camera pan" or "dynamic zoom"
- Click "🎬 Generate Video"
- Wait ~4-5 minutes for the AI to create your video
- Preview and download your animated comic panel!
- ✅ Powered by Runware Video Inference (Kling AI model)
- ✅ 5 or 10 second clips - Perfect for social media
- ✅ Cinematic effects - Camera movements, subtle animation
- ✅ MP4 format - Universal compatibility
- ✅ Instant download - Save and share your animated stories
- Generation time: ~4-5 minutes per video
- Quality: 95/100 (high quality)
- Format: MP4
- Resolution: Matches source panel (typically 1024x1024)
- API: Runware videoInference with Kling 1.0 Standard model
For detailed documentation, see VIDEO_GENERATION_GUIDE.md
ChooseFrame/
├── execution/ # Core AI execution modules
│ ├── cache_manager.py # Panel and session caching
│ ├── claude_story_engine.py # Story generation
│ ├── panel_generator.py # Comic panel creation
│ └── runware_client.py # Runware API integration
├── web/
│ ├── backend/
│ │ └── main.py # FastAPI server
│ └── frontend/
│ └── src/
│ ├── app/ # Next.js pages
│ ├── components/ # React components
│ ├── context/ # State management
│ └── hooks/ # Custom React hooks
├── .env.example # Environment template
├── requirements.txt # Python dependencies
└── README.md # This file
| Component | Technology |
|---|---|
| Frontend | Next.js 15, React 18, TypeScript, Tailwind CSS |
| Backend | FastAPI, Python 3.10+, Uvicorn |
| Story AI | Anthropic Claude API |
| Image AI | Runware API (SDXL & Video) |
| Styling | Framer Motion, CSS Animations |
| Endpoint | Method | Description |
|---|---|---|
/health |
GET | Health check |
/api/character/generate |
POST | Generate character reference images |
/api/story/start |
POST | Start a new story |
/api/story/choice |
POST | Submit a choice and progress story |
/api/video/generate |
POST | NEW: Generate video animation from panel |
| Variable | Description | Required |
|---|---|---|
RUNWARE_API_KEY |
Runware API key for image generation | Yes |
ANTHROPIC_API_KEY |
Anthropic API key for Claude | Yes |
Adjust story tone with sliders (0–100):
- Humor - Witty dialogue and comedic beats
- Drama - Emotional intensity and conflict
- Action - Physical scenes and kinetic sequences
- Romance - Character relationships
- Suspense - Mystery and tension
| Key | Action |
|---|---|
← / → |
Navigate story history |
Ctrl+Z |
Undo last choice |
1 / 2 / 3 |
Quick-select choices |
Esc |
Close modals |
For detailed technical documentation, see:
- ARCHITECTURE.md - System architecture and design patterns
- DESIGN_2026_REFACTOR.md - UI/UX design specifications
- VIDEO_GENERATION_GUIDE.md - NEW: Video generation feature guide
Contributions are welcome! Areas of focus:
- UX polish and accessibility improvements
- New panel effects and transitions
- Additional genres and art styles
- Fork the repository
- Create a feature branch:
git checkout -b feature/AmazingFeature - Commit your changes:
git commit -m "Add AmazingFeature" - Push to the branch:
git push origin feature/AmazingFeature - Open a Pull Request
This project is licensed under the MIT License. See the LICENSE file for details.
- Anthropic - Claude AI for story generation
- Runware - Image generation API
- Next.js - React framework
- FastAPI - Python web framework
- Tailwind CSS - Utility-first styling
If you encounter any issues or have questions, please open an issue.
Built with AI for the BFL FLUX.2 Hackathon (January 2026)
Made with ❤️ by MasteraSnackin