p de6fe4b294 feat: add task cancellation feature (task-management)
- Backend: Add API endpoint to cancel tasks and mark status as cancelled
- Frontend: Add cancel button to task management UI (visible only for cancellable tasks)
- Process: Implement cancellation check during generation to abort in-progress tasks
- UI: Update status display styles with a visual indicator for the cancelled state
2026-01-17 18:47:54 +08:00
2026-01-17 18:40:35 +08:00

AI Comic Generator

English | 中文

An open-source AI-powered manga creation tool that transforms text stories into fully illustrated comics using Google Gemini models. Features include automatic storyboard generation, character consistency checks, and a visual editor.

Project Status Python Vue

Core Philosophy

  • JSON-Driven Workflow: The core of this project is to manage the entire comic creation process through structured JSON data. From story outlines to character settings, and finally to storyboard details, everything is stored and processed as JSON. This ensures data consistency, version control, and easy integration with AI models.
  • Global Configuration (Global Config JSON): A centralized configuration system that controls the artistic direction of the entire project.
    • Style Consistency: Defines the global art style (e.g., "Cyberpunk", "Watercolor"), aspect ratios, and color palettes, ensuring all generated panels adhere to a unified visual language.
    • Character & Layout Control: Manages global character traits and storyboard layout preferences (e.g., panel spacing, border styles).
    • Dynamic Synchronization: Changes to the global config automatically propagate to all storyboard panels, allowing for quick style iterations without manually editing each frame.

Core Features

  • Project Management: Supports multi-project management, with each project independently saving story, characters, and storyboard data.
  • Intelligent Scriptwriting: Input simple story ideas, and AI automatically expands the plot and breaks it down into professional comic storyboard scripts (JSON format).
  • Character Workshop:
    • Automatically extracts characters from the story and generates detailed character settings (three views).
    • Character Consistency: Automatically references character setting images as references (Image-to-Image) when drawing.
    • Merge & Deduplication: Supports manual merging of duplicate generated characters (e.g., "Butler Ma" and "Old Ma").
  • Storyboard Editor:
    • Visually edit prompts, characters, and actions for each panel.
    • Supports single-panel redrawing and batch generation.
    • Context Awareness: Automatically reads previous storyboard panels and character images when generating storyboards to maintain style and plot continuity.
  • Style Control:
    • Global style configuration (e.g., "Cyberpunk", "Ink Style"), forcing AI to follow settings.
    • Supports custom dialog box and border styles.
  • Background Tasks: Time-consuming batch drawing tasks run in the background, supporting real-time progress viewing.

🛠️ Tech Stack

Backend

  • Framework: FastAPI
  • Database: SQLite + SQLModel
  • AI Service: Google Gemini (Currently only supports Google's latest models)
    • Text Model: gemini-3-flash-preview
    • Image Model: gemini-3-pro-image-preview
  • Task Queue: FastAPI BackgroundTasks

Frontend

  • Framework: Vue 3 + Vite
  • UI Library: Element Plus
  • State Management: Pinia
  • HTTP Client: Axios
  • Package Manager: pnpm

🚀 Quick Start

Prerequisites

  • Python 3.9+
  • Node.js 16+
  • pnpm
  • Google Cloud API Key (Requires Gemini API access)

1. Backend Configuration

Enter the backend directory:

cd backend

Create virtual environment and install dependencies:

python -m venv .venv
# Windows
.\.venv\Scripts\activate
# Linux/Mac
source .venv/bin/activate

pip install -r requirements.txt

Create .env file and fill in API Key:

# backend/.env
GOOGLE_API_KEY="your_google_api_key_here"

Initialize the database using Alembic:

# Initialize alembic (if not already initialized)
alembic init alembic

# Generate migration script
alembic revision --autogenerate -m "Initial migration"

# Apply migration to database
alembic upgrade head

Start backend service:

# Windows (using provided script)
..\start_backend.bat

# Or run manually
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

2. Frontend Configuration

Enter the frontend directory:

cd frontend

Install dependencies:

pnpm install

Start frontend service:

# Windows (using provided script)
..\start_frontend.bat

# Or run manually
pnpm dev

Access in browser: http://localhost:5173

📖 User Guide

  1. Create Project: Click "New Project" on the homepage and enter the comic title and introduction.

  2. Story & Configuration:

    • Enter your story outline.
    • Set global styles (e.g., "Japanese Shonen"), aspect ratio, etc.
    • Click "Generate Storyboard Config", and AI will generate the character list and storyboard script.

    Story & Configuration

  3. Character Workshop:

    • View AI-generated character settings.
    • Click "Draw" to generate character portraits.
    • If there are duplicate characters, use the "Merge Characters" function to clean them up.

    Character Workshop

  4. Storyboard Editing:

    • Check the description of each panel in the storyboard list.
    • Click "Generate Image" or "Generate All" to start drawing the comic.
    • Click on an image to view it in large size and support downloading.

    Storyboard Editor

🖼️ Examples

You can find a complete example project in the example/ directory, including story scripts, character designs, and generated storyboard panels.

Character Design

Shen Tianhu Butler Ma Su Meiyao

Comic Panels

📁 Directory Structure

aImanhua/
├── backend/            # FastAPI Backend
│   ├── app/            # Application Code
│   ├── static/         # Generated images and temp files storage
│   └── ...
├── frontend/           # Vue3 Frontend
│   ├── src/            # Pages and Components
│   └── ...
└── ...

📝 License

MIT License

S
Description
clone từ AI-Comic-Generator
Readme 195 MiB
Languages
Python 57.8%
Vue 40.6%
JavaScript 0.9%
CSS 0.4%
HTML 0.2%
Other 0.1%