chore: stop tracking .trae folder
This commit is contained in:
@@ -25,3 +25,4 @@ backend/static/*.png
|
|||||||
# Alembic
|
# Alembic
|
||||||
backend/alembic.ini
|
backend/alembic.ini
|
||||||
backend/alembic/
|
backend/alembic/
|
||||||
|
.trae/
|
||||||
@@ -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.
|
|
||||||
Reference in New Issue
Block a user