AI-comic-generator/.trae/documents/Full-Stack AI Comic Generator Implementation Plan.md

Full-Stack AI Comic Generator Implementation Plan

This plan details the creation of a web-based AI comic generator using Vue 3 (Frontend) and FastAPI (Backend), separating concerns into a modular architecture.

1. Project Structure Setup

We will create a root directory containing two main folders: backend and frontend.

Backend Structure (backend/)

• Framework: FastAPI
• Database: SQLite (via SQLModel/SQLAlchemy) for storing project data and configs.
• Directory Layout:
  • app/
    • core/: Configuration (env vars, DB settings).
    • models/: Database models (SQLModel).
    • schemas/: Pydantic models for request/response validation.
    • cruds/: Database CRUD operations.
    • routers/: API endpoints grouped by functionality.
    • services/: Business logic (AI generation, File management).
    • utils/: Helper functions.
  • static/: Serving generated images.
  • main.py: Application entry point.

Frontend Structure (frontend/)

• Framework: Vue 3 + Vite
• UI Library: Element Plus (Dark Mode enabled for "Tech" style).
• Directory Layout:
  • src/
    • api/: Axios instances for backend communication.
    • components/: Reusable UI components (JSON Editor, Image Cards).
    • views/: Main pages (Config, Workspace).
    • stores/: Pinia state management.

2. Backend Implementation Steps

Phase 1: Core & Configuration

1. Environment: Setup requirements.txt (FastAPI, SQLModel, Uvicorn, Google GenAI, OpenAI, python-dotenv).
2. Models & Schemas:
   • ModelConfig: Store API keys, provider (Google/OpenAI/DeepSeek), model names.
   • Project: Store comic project metadata (title, status).
   • ComicData: Store the generated JSONs (Global Config, Characters, Storyboard).
3. CRUDs: Implement basic Create/Read/Update/Delete operations for Configs and Projects.

Phase 2: AI Services Integration

1. AI Provider Adapter: Create a unified interface to handle different providers (Google, DeepSeek, ChatGPT, etc.).
2. Migration: Refactor logic from comic_generator.py into services/comic_service.py.
   • Implement generate_storyboard (Text generation).
   • Implement generate_character_image (Image generation).
   • Implement generate_comic_panel (Image generation with context).
3. Endpoints:
   • POST /api/generate/json: Generate initial JSONs from user input.
   • POST /api/generate/image: Generate specific image (Character or Panel).
   • POST /api/project/{id}/export: Package and zip output.

3. Frontend Implementation Steps

Phase 1: UI Framework & Configuration

1. Setup: Initialize Vue 3 project, install Element Plus, Axios, Pinia, Vue Router.
2. Theme: Configure Element Plus for Dark Mode/Tech style.
3. Model Configuration Page:
   • Form to add/edit API keys and select models for Text and Image generation.

Phase 2: Comic Workflow Page

1. Step 1: Concept & JSON:
   • Input field for story idea.
   • "Generate" button.
   • JSON Editor: Integrated code editor (e.g., Monaco Editor) to modify generated JSONs (Global Config, Characters, Storyboard).
2. Step 2: Character Studio:
   • Display list of characters from JSON.
   • "Generate/Regenerate" button for each character.
   • Support "Add Character" manually.
3. Step 3: Comic Board:
   • Display storyboard panels.
   • "Generate/Regenerate" button for each panel (4-grid or single).
   • Support modifying prompt per panel.
4. Step 4: Export:
   • Button to download the complete comic package.

4. Execution Strategy

1. Backend First: I will build the FastAPI backend, ensuring the API is functional and can replicate the existing script's logic.
2. Frontend Second: I will build the Vue frontend and connect it to the backend.
3. Verification: I will test the full flow: Config -> Story Input -> Edit JSON -> Generate Images -> Export.

I will begin by setting up the backend structure and dependencies.