TechSetupGuides
Advancedaivideo-generationcreative-toolselectronnodejsvuetypescriptdockeranimationllm

Toonflow: AI-powered short drama creation platform

Create animated short dramas from novels and scripts using AI. Integrated scriptwriting, storyboarding, character generation, and video creation in a cross-platform desktop application.

  1. Step 1

    What is Toonflow?

    Toonflow is an open-source AI-powered platform that transforms novels and scripts into animated short dramas. It provides a complete one-stop solution for AI-driven content creation, featuring integrated AI scriptwriting, intelligent storyboarding, character generation, and video production. Built as a cross-platform desktop application, Toonflow enables creators to produce visual content efficiently and cost-effectively through AI orchestration.

  2. Step 2

    Technology stack

    Toonflow is built on a modern full-stack architecture with separate frontend and backend repositories:

    Backend (Toonflow-app):

    • Node.js 23.11.1+ runtime
    • TypeScript 5.x for type safety
    • Express 5 web framework
    • SQLite database (better-sqlite3 + Knex)
    • Socket.IO for real-time communication
    • Electron 40 for desktop packaging
    • Vercel AI SDK (multi-provider support)
    • Transformers.js for local ONNX inference
    • Sharp for image processing
    • Zod for schema validation

    Frontend (Toonflow-web):

    • Vue 3.5+ with Composition API
    • TypeScript 5.6+
    • Vite 5.4+ build tool
    • Pinia 2.2+ for state management
    • Vue Router 4.4+ for routing
    • Ant Design Vue 4.2+
    • Element Plus 2.13+
    • VXE Table 4.17+
    • Axios for HTTP requests
    • VueUse composition utilities

    AI Integration:

    • LLM providers: OpenAI, Anthropic Claude, Google, DeepSeek, etc.
    • Image generation: Nano Banana Pro, Volcengine
    • Video generation: Sora, Doubao Video
    • All AI inference handled via remote APIs
    Backend:
├── Node.js 23.11.1+
├── TypeScript 5.x
├── Express 5
├── SQLite (better-sqlite3)
├── Electron 40
├── Vercel AI SDK
├── Transformers.js
└── Socket.IO

Frontend:
├── Vue 3.5+
├── Vite 5.4+
├── TypeScript 5.6+
├── Pinia 2.2+
├── Ant Design Vue 4.2+
└── Element Plus 2.13+
  3. Step 3

    System requirements

    Before installing Toonflow, ensure your system meets these requirements:

    For Local Desktop Installation:

    • Node.js 23.11.1 or higher
    • 2GB+ RAM
    • AI service API endpoints (LLM, image, video generation)

    For Cloud Server Deployment:

    • Ubuntu 20.04+ or CentOS 7+
    • Node.js 24.x recommended (minimum 23.11.1+)
    • Memory: 2GB+
    • Docker 20.10+ (for containerized deployment)

    For Development:

    • Yarn package manager
    • Git for version control
    # Check Node.js version (23.11.1+ required)
node --version

# Install Yarn package manager
npm install -g yarn

# Verify installations
yarn --version
  4. Step 4

    AI service configuration

    Toonflow orchestrates three types of external AI services. You'll need API access to at least one provider in each category:

    1. Large Language Model (LLM) - For character analysis, script generation, and storyboard prompts:

    • Recommended: GPT-4o, Claude 3.5 Sonnet, DeepSeek V3
    • Requires: OpenAI-compatible API endpoint, base URL, and API key

    2. Image Generation - For character and scene generation:

    • Primary: Nano Banana Pro (supports 4K resolution and face consistency)
    • Alternative: Volcengine/Doubao
    • Requires: Model name, base URL, and authentication

    3. Video Generation - For creating animated video clips (5-20 seconds):

    • Supported: Sora (OpenAI), Doubao Video
    • Requires: API endpoint and authentication

    Cost Estimate Per Episode:

    • LLM operations: $0.50–$2
    • Image generation (20-50 frames): $1–$5
    • Video generation: $10–$50 (primary expense)
    ⚠ Heads up: Video generation is the most expensive component. Start with small test projects to understand costs before scaling production.
  5. Step 5

    Installation: Desktop application

    The easiest way to get started is with the pre-built desktop application. This includes a built-in backend service, so no additional runtime configuration is needed.

    # Download from GitHub Releases
# Visit: https://github.com/HBAI-Ltd/Toonflow-app/releases

# For Windows:
# Download Toonflow-Setup-x.x.x.exe and run installer

# For macOS:
# Download Toonflow-x.x.x.dmg
# Note: You may need to configure security settings
# to resolve certificate issues on first launch

# For Linux:
# Download Toonflow-x.x.x.AppImage
# Make executable: chmod +x Toonflow-*.AppImage
# Run: ./Toonflow-*.AppImage
  6. Step 6

    Installation: Docker deployment

    Deploy Toonflow in a containerized environment for server setups. This method is ideal for cloud hosting and production deployments.

    # Clone the repository
git clone https://github.com/HBAI-Ltd/Toonflow-app.git
cd Toonflow-app

# Option 1: Build and run locally with docker-compose
yarn docker:local

# Option 2: Manual Docker build and run
docker build -t toonflow-app .
docker run -p 10588:10588 toonflow-app

# Access the application at http://localhost:10588
# Or configure custom port mapping:
docker run -p 60000:10588 toonflow-app
  7. Step 7

    Installation: Manual deployment

    For development or custom server deployments, install Toonflow manually. This gives you full control over the environment and allows for customization.

    # Install Node.js using NVM (recommended)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install 24
nvm use 24

# Install Yarn and PM2
npm install -g yarn pm2

# Clone the repository
git clone https://github.com/HBAI-Ltd/Toonflow-app.git
cd Toonflow-app

# Install dependencies
yarn install

# Build the application
yarn build

# Start the service (development)
yarn dev

# Or use PM2 for production
pm2 start yarn --name toonflow -- start
  8. Step 8

    Environment configuration

    Configure Toonflow using environment variables. Create a .env file in the root directory with your settings:

    # Production mode
NODE_ENV=prod

# Service listening port (default: 10588)
PORT=10588

# File storage access URL for static assets
OSSURL=https://your-storage-url.com

# Optional: Database configuration
# DATABASE_PATH=/path/to/database.sqlite
  9. Step 9

    Initial access and configuration

    After starting Toonflow, access the web interface to complete setup:

    Access URLs:

    • Desktop app: Opens automatically on launch
    • Docker/Manual: http://localhost:10588 (or your configured PORT)

    Default Credentials:

    • Username: admin
    • Password: admin123

    First-time Setup Steps:

    1. Log in with default credentials
    2. Navigate to Settings/Configuration
    3. Configure AI service endpoints:
      • Add LLM API base URL and key
      • Add image generation service credentials
      • Add video generation service credentials
    4. Test each service connection
    5. Change default admin password
    6. Start creating your first project
    ⚠ Heads up: Change the default admin password immediately after first login for security.
  10. Step 10

    Development workflow

    For developers contributing to Toonflow or building custom features:

    Backend Development (Toonflow-app):

    • yarn install - Install dependencies
    • yarn dev - Start backend API only (port 10588)
    • yarn dev:gui - Launch desktop client with Electron
    • yarn build - Compile TypeScript to JavaScript
    • yarn lint - Run code quality checks
    • yarn dist:win / yarn dist:mac / yarn dist:linux - Package executables

    Frontend Development (Toonflow-web):

    • Clone the frontend repository separately
    • yarn install - Install dependencies
    • yarn dev - Start Vite dev server with HMR
    • yarn build:prod - Build optimized production bundle
    • yarn preview - Preview production build locally

    Database Management:

    • SQLite database located in app data directory
    • Use Knex migrations for schema changes
    • better-sqlite3 provides synchronous API for performance
    # Backend development
cd Toonflow-app
yarn install
yarn dev

# In a separate terminal - Frontend development
git clone https://github.com/HBAI-Ltd/Toonflow-web.git
cd Toonflow-web
yarn install
yarn dev

# Access development UI at http://localhost:5173
# Backend API runs on http://localhost:10588
  11. Step 11

    Core features and workflow

    Toonflow provides an end-to-end pipeline for AI-powered video content creation:

    1. Script Generation:

    • Import novels or write original scripts
    • AI analyzes characters, plot structure, and dialogue
    • Automated scene breakdown and storyboarding

    2. Intelligent Storyboarding:

    • AI generates visual prompts for each scene
    • Character consistency across frames
    • Customizable style and composition settings

    3. Character Generation:

    • AI creates consistent character designs
    • Face consistency using Nano Banana Pro
    • Support for 4K resolution images
    • Multiple character poses and expressions

    4. Video Production:

    • Generate 5-20 second video clips
    • Automatic scene transitions
    • Integration with Sora or Doubao Video services
    • Batch processing for multi-scene projects

    5. Export and Publishing:

    • Combine scenes into complete episodes
    • Export in various video formats
    • Built-in preview and editing tools
    Workflow Pipeline:
1. Import/Write Script → AI Analysis
2. Generate Storyboard → Scene Breakdown
3. Create Characters → Consistent Designs
4. Generate Videos → Scene by Scene
5. Combine & Export → Final Episode
  12. Step 12

    Production deployment best practices

    For production deployments, follow these recommendations:

    Security:

    • Change default admin credentials immediately
    • Use HTTPS with valid SSL certificates
    • Configure firewall rules to restrict access
    • Keep API keys in environment variables, never in code

    Performance:

    • Allocate sufficient memory (4GB+ recommended for production)
    • Use PM2 for process management and auto-restart
    • Configure log rotation to prevent disk space issues
    • Monitor API rate limits and costs

    Scalability:

    • Use Docker for consistent deployments
    • Consider load balancing for multiple instances
    • Implement caching for frequently accessed assets
    • Use external storage (S3, CDN) for generated media

    Monitoring:

    • Set up error logging and alerting
    • Monitor AI service API usage and costs
    • Track generation times and failure rates
    • Implement health checks for automated recovery
    # Production deployment with PM2
pm2 start yarn --name toonflow -- start
pm2 save
pm2 startup

# Enable monitoring
pm2 install pm2-logrotate
pm2 monit

# For Docker production
docker-compose -f docker-compose.prod.yml up -d

# Check logs
pm2 logs toonflow
# or for Docker:
docker logs -f toonflow-app
  13. Step 13

    Troubleshooting common issues

    Issue: Node.js version mismatch

    • Solution: Ensure Node.js 23.11.1+ is installed. Use nvm to manage versions.

    Issue: AI service connection failures

    • Solution: Verify API endpoints are correct and accessible. Check API key validity and rate limits.

    Issue: macOS certificate errors

    • Solution: Open System Preferences → Security & Privacy, allow the application to run.

    Issue: Port already in use

    • Solution: Change PORT in environment variables or stop conflicting service.

    Issue: Out of memory errors

    • Solution: Increase allocated memory (4GB+ recommended) or reduce concurrent generation tasks.

    Issue: Slow video generation

    • Solution: This is normal for AI video services. Check provider status and consider upgrading to higher-tier API plans.
    # Check which process is using port 10588
lsof -i :10588
# or on Windows:
netstat -ano | findstr :10588

# Kill the process and restart
kill -9 <PID>

# Verify Node.js version
node --version
nvm use 24  # Switch to compatible version

# Clear cache and reinstall
rm -rf node_modules yarn.lock
yarn install
  14. Step 14

    Resources and community

    Official Repository: https://github.com/HBAI-Ltd/Toonflow-app

    Frontend Repository: https://github.com/HBAI-Ltd/Toonflow-web

    Releases: https://github.com/HBAI-Ltd/Toonflow-app/releases

    Documentation:

    • English: https://github.com/HBAI-Ltd/Toonflow-app/blob/master/docs/README.en.md
    • Chinese: https://github.com/HBAI-Ltd/Toonflow-app/blob/master/README.md
    • Traditional Chinese: https://github.com/HBAI-Ltd/Toonflow-app/blob/master/docs/README.zhtw.md
    • Russian: https://github.com/HBAI-Ltd/Toonflow-app/blob/master/docs/README.ru.md

    API Configuration Guide: https://help.apiyi.com/en/toonflow-ai-short-drama-comic-tool-api-guide-en.html

    Star Count: 8,266+ GitHub stars (as of May 2026)

    GitHub (Backend): https://github.com/HBAI-Ltd/Toonflow-app
GitHub (Frontend): https://github.com/HBAI-Ltd/Toonflow-web
Releases: https://github.com/HBAI-Ltd/Toonflow-app/releases
API Guide: https://help.apiyi.com/en/toonflow-ai-short-drama-comic-tool-api-guide-en.html

Feature requests

Sign in to suggest features or vote on existing ones.

No feature requests yet.

Discussion

0 people marked this as worked·Sign in to mark your own.

Sign in to join the discussion.

No comments yet.