3dtours/AI-comic-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: stop tracking .trae folder

Browse Source
This commit is contained in:
p
2026-01-18 10:08:15 +08:00
parent e268e74570
commit 710562deb8
2 changed files with 1 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -25,3 +25,4 @@ backend/static/*.png
# Alembic
backend/alembic.ini
backend/alembic/
.trae/
.trae/documents/Full-Stack AI Comic Generator Implementation Plan.md
-83
View File
@@ -1,83 +0,0 @@
# 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.