+
+
+
+
+
+
+
+ 登录
+
+
+
+
+
+
+
+```
+
+- [ ] **Step 2: Write Register.vue**
+
+```vue
+
+
+
+ 还没有账号？注册
+
+
+
+
+
+
+
+
+
+
+
+ 注册
+
+
+
+
+
+
+
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add -A && git commit -m "feat: implement Login and Register views"
+```
+
+---
+
+### Task 14: Implement Home view with image generation
+
+**Files:**
+- Create: `/opt/imagecreator/imagecreator/frontend/src/views/Home.vue`
+- Create: `/opt/imagecreator/imagecreator/frontend/src/api/images.ts`
+- Create: `/opt/imagecreator/imagecreator/frontend/src/components/ImageGenerator.vue`
+- Create: `/opt/imagecreator/imagecreator/frontend/src/components/PromptOptimizer.vue`
+
+- [ ] **Step 1: Write images API**
+
+```typescript
+// src/api/images.ts
+import api from './index'
+
+export interface PromptOptimizeRequest {
+ prompt: string
+ mode: 'text2image' | 'image2image'
+ original_description?: string
+}
+
+export interface ImageGenerateRequest {
+ prompt: string
+ optimized_prompt: string
+ mode: 'text2image' | 'image2image'
+ model: string
+ input_image_b64?: string
+}
+
+export const imagesApi = {
+ optimizePrompt(data: PromptOptimizeRequest) {
+ return api.post<{ optimized_prompt: string }>('/images/optimize', data)
+ },
+ generateImage(data: ImageGenerateRequest) {
+ return api.post<{ image_url: string; model: string }>('/images/generate', data)
+ },
+}
+```
+
+- [ ] **Step 2: Write Home.vue**
+
+```vue
+
+
+
+ 已有账号？登录
+
+
+
+
+
+
+
+
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add -A && git commit -m "feat: implement Home view with image generation"
+```
+
+---
+
+### Task 15: Implement History view
+
+**Files:**
+- Create: `/opt/imagecreator/imagecreator/frontend/src/views/History.vue`
+- Create: `/opt/imagecreator/imagecreator/frontend/src/api/history.ts`
+
+- [ ] **Step 1: Write history API**
+
+```typescript
+// src/api/history.ts
+import api from './index'
+
+export interface HistoryItem {
+ id: string
+ original_prompt: string
+ optimized_prompt: string
+ mode: string
+ model: string
+ image_url: string
+ input_image_url: string | null
+ created_at: string
+}
+
+export const historyApi = {
+ getHistory() {
+ return api.get
+
+
+
+
+
+
+
+
+
+
+
+
+ 选择图片
+
+
+
+
+
+
+ 优化提示词
+
+
+
+ 优化后
+
+ {{ optimizedPrompt }}
+
+
+
+
+
+
+
+
+ ![Generated]()
+
+ 下载图片
+
+
+
+ 生成的图片将显示在这里
+
+
+
+ 生成图片
+
+
+
+
+
+
+
+
+
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add -A && git commit -m "feat: implement History view"
+```
+
+---
+
+### Task 16: Frontend Dockerfile and nginx config
+
+**Files:**
+- Create: `/opt/imagecreator/imagecreator/frontend/Dockerfile`
+- Create: `/opt/imagecreator/imagecreator/frontend/nginx.conf`
+
+- [ ] **Step 1: Create Dockerfile**
+
+```dockerfile
+# frontend/Dockerfile
+FROM node:20-alpine as builder
+
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
+```
+
+- [ ] **Step 2: Create nginx.conf**
+
+```nginx
+# frontend/nginx.conf
+server {
+ listen 80;
+ server_name localhost;
+ root /usr/share/nginx/html;
+ index index.html;
+
+ location / {
+ try_files $uri $uri/ /index.html;
+ }
+
+ location /api/ {
+ proxy_pass http://backend:8000/api/;
+ proxy_set_header Host $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ }
+
+ location /uploads/ {
+ proxy_pass http://backend:8000/uploads/;
+ proxy_set_header Host $host;
+ }
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add -A && git commit -m "feat: add frontend Dockerfile and nginx config"
+```
+
+---
+
+## Phase 3: Final Integration
+
+### Task 17: Create README
+
+**Files:**
+- Create: `/opt/imagecreator/imagecreator/README.md`
+
+- [ ] **Step 1: Write README**
+
+```markdown
+# ImageCreator
+
+A full-stack image generation website with user authentication, prompt optimization, and T2I/I2I generation.
+
+## Features
+
+- User authentication (register/login)
+- Prompt optimization using LLM
+- Text-to-Image generation
+- Image-to-Image generation
+- Generation history
+
+## Tech Stack
+
+- **Backend**: FastAPI, SQLAlchemy, PostgreSQL
+- **Frontend**: Vue 3, Naive UI, TailwindCSS
+- **Deployment**: Docker Compose
+
+## Quick Start
+
+### Prerequisites
+
+- Docker & Docker Compose
+- Gemini API key (for image generation)
+
+### Environment Setup
+
+1. Copy `.env.example` to `.env` and configure:
+ ```bash
+ cp .env.example .env
+ ```
+
+2. Edit `.env` and add your API keys:
+ ```
+ GEMINI_API_KEY=your_gemini_api_key
+ SECRET_KEY=your-secret-key
+ ```
+
+### Running with Docker Compose
+
+```bash
+docker-compose up -d
+```
+
+- Frontend: http://localhost:3000
+- Backend API: http://localhost:8000
+- API Docs: http://localhost:8000/docs
+
+## Development
+
+### Backend
+
+```bash
+cd backend
+pip install -r requirements.txt
+uvicorn app.main:app --reload --port 8000
+```
+
+### Frontend
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+## Project Structure
+
+```
+imagecreator/
+├── backend/ # FastAPI backend
+│ ├── app/
+│ │ ├── api/ # API routes
+│ │ ├── core/ # Security, config
+│ │ ├── models/ # Database models
+│ │ ├── schemas/ # Pydantic schemas
+│ │ └── services/ # Business logic
+│ └── tests/
+├── frontend/ # Vue 3 frontend
+│ └── src/
+│ ├── api/ # API clients
+│ ├── views/ # Page components
+│ ├── stores/ # Pinia stores
+│ └── router/ # Vue Router
+└── docker-compose.yml
+```
+
+## License
+
+AGPL-3.0
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add -A && git commit -m "docs: add README"
+```
+
+---
+
+## Summary
+
+**Total Tasks: 17**
+
+### Phase 1: Backend (Tasks 1-10)
+- Project structure, config, database
+- User & History models
+- Security (JWT, password)
+- Auth API & service
+- Users API
+- LLM & Prompt optimization service
+- Image generation service
+- Images API
+- History API
+- Backend Docker
+
+### Phase 2: Frontend (Tasks 11-16)
+- Vue 3 project init
+- Auth stores and API
+- Login/Register views
+- Home view with generation
+- History view
+- Frontend Docker
+
+### Phase 3: Final (Task 17)
+- README documentation
+
+
+
+
+ ![Generated]()
+
+
+
+
+
+ 生成历史
+ +
+
+
+
+ 暂无历史记录
+
+
+
+ {{ item.mode === 'text2image' ? '文生图' : '图生图' }}
+
+ 删除
+
+
+
+
+
+
+
+ 原始提示词：
+{{ item.original_prompt }}
+
+
+
+
+ 优化后：
+{{ item.optimized_prompt }}
+
+ {{ formatDate(item.created_at) }} | {{ item.model }}
+
+
+