## 产品说明
这是一款使用AI批量生成图片的web端应用，支持文生图和图片编辑功能。

## 技术架构
- **前端**: HTML + CSS + JavaScript
- **后端**: Python Flask
- **数据库**: SQLite
- **部署**: 前后端统一部署在 0.0.0.0:7700 端口
- **环境**: conda虚拟环境 (image_server)

## 项目结构
```
new_image_generate/
├── frontend/           # 前端代码
│   ├── pages/         # 页面文件
│   ├── components/    # 组件文件
│   ├── utils/         # 工具函数
│   └── assets/        # 静态资源
├── backend/           # 后端代码
│   ├── apis/          # API接口文件
│   ├── models/        # 数据模型
│   ├── utils/         # 工具函数
│   └── database/      # 数据库相关
├── model_prompt/      # 模型提示词文件
├── PRD/              # 产品需求文档
├── run.py            # 程序入口
├── requirements.txt   # 依赖包
└── README.md         # 项目说明
```

## 页面布局设计
### 整体布局
- 采用左右分栏布局，比例为 2:8
- 响应式设计，支持不同屏幕尺寸

### 左侧参数区域 (20%)
#### 模型选择区
- 下拉选择框：选择生图模型
- 当前支持：NanoBanana模型
- 预留扩展接口，便于添加新模型

#### 参数设置区
- **提示词输入框**：多行文本框，支持长文本输入
- **图片数量设置**：数字输入框 (1-10张)
- **图片上传区**：支持拖拽上传，显示上传进度
- **提示词管理**：
  - 保存当前提示词按钮
  - 加载历史提示词下拉框
  - 删除提示词功能

#### 操作按钮区
- **生成图片**：主要操作按钮
- **清空参数**：重置所有输入
- **批量下载**：下载所有生成的图片

### 右侧图片展示区域 (80%)
#### 图片网格布局
- 响应式网格，根据屏幕大小自动调整列数
- 每个图片卡片包含：
  - 图片预览 (缩略图)
  - 生成状态指示器
  - 操作按钮组

#### 图片状态管理
- **等待生成**：显示占位符和进度条
- **生成中**：显示加载动画
- **生成完成**：显示预览图和操作按钮
- **生成失败**：显示错误信息和重试按钮

#### 图片操作功能
- **查看原图**：弹窗显示高清原图
- **复制图片**：复制到剪贴板
- **下载图片**：保存到本地
- **删除图片**：从展示区移除

## 编码规范
### 代码组织
- 前后端代码严格分离
- 一个接口一个文件
- 一个页面一个文件
- 一个组件一个文件
- 保证代码的鲁棒性和可扩展性

### 错误处理
- 网络请求异常处理
- 文件上传失败处理
- 模型调用超时处理
- 用户输入验证

### 性能优化
- 图片懒加载
- 请求防抖
- 并发请求控制

## 功能需求详述

### 核心功能流程
1. **模型选择**：用户在左侧选择生图模型
2. **参数配置**：填写提示词、设置图片数量、上传参考图片（可选）
3. **批量生成**：支持1-10张图片并发生成
4. **实时展示**：右侧实时显示生成进度和结果
5. **图片管理**：支持预览、下载、复制等操作

### 业务逻辑说明
#### 图片生成流程
- 用户点击"生成图片"按钮后，根据设置的数量创建对应的任务
- 采用并发请求模式，同时向AI接口发送请求
- 右侧展示区域立即显示"等待生成"状态的占位符
- 每个请求成功返回后，立即更新对应的图片显示
- 支持部分成功场景（部分图片生成成功，部分失败）

#### 提示词管理
- 用户可以保存常用的提示词模板
- 支持加载历史提示词
- 提示词存储在本地数据库中

#### 图片处理
- 接收base64格式的图片数据
- 自动生成缩略图用于预览
- 原图支持全屏查看
- 支持批量下载功能

### 接口设计规范
不同的模型有不同的请求格式，需要统一封装处理：

### NanoBanana模型接口规范

#### 基础配置
- **API地址**: `https://api.aimindsky.com/v1/chat/completions`
- **认证方式**: Bearer Token
- **Token**: `sk-39a5vNBNbkkMA6YHP03h663tBno6OqfJKngWmQy0oT7JCP1O`
- **模型名称**: `gemini-3-pro-image-preview`
- **响应格式**: Server-Sent Events (SSE) 流式响应

#### 文生图接口
**功能**: 根据文本提示词生成图片

**请求格式**:
```json
{
    "model": "gemini-3-pro-image-preview",
    "messages": [
        {
            "role": "user",
            "content": "用户输入的提示词"
        }
    ],
    "stream": true,
    "temperature": 0.7
}
```

**请求参数说明**:
- `content`: 用户输入的提示词，支持中英文
- `temperature`: 创意度参数，范围0-1，默认0.7
- `stream`: 必须为true，启用流式响应

**响应处理**:
- 响应为SSE格式，需要解析`data:`开头的行
- 图片数据在`choices[0].delta.content`字段中
- 格式为：`![image](data:image/jpeg;base64,图片base64数据)`
- 需要提取base64数据并转换为可显示的图片

#### 图片编辑接口
**功能**: 基于上传的图片进行编辑或合成

**请求格式**:
```json
{
    "model": "gemini-3-pro-image-preview",
    "messages": [
        {
            "role": "user",
            "content": [
                {
                    "type": "text",
                    "text": "编辑指令描述"
                },
                {
                    "type": "image_url",
                    "image_url": {
                        "url": "data:image/jpeg;base64,图片base64数据"
                    }
                }
            ]
        }
    ],
    "stream": true,
    "temperature": 0.7
}
```

**请求参数说明**:
- `text`: 对图片的编辑指令
- `image_url.url`: 图片的base64数据URL格式
- 支持多张图片输入，添加多个`image_url`对象

**错误处理**:
- 网络超时：500秒超时重试
- 认证失败：检查Token有效性
- 请求频率限制：实现请求队列
- 响应解析失败：记录错误日志

## 数据库设计

### 提示词表 (prompts)
```sql
CREATE TABLE prompts (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name VARCHAR(100) NOT NULL,
    content TEXT NOT NULL,
    model_type VARCHAR(50) NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
```

### 生成记录表 (generation_history)
```sql
CREATE TABLE generation_history (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    prompt_text TEXT NOT NULL,
    model_name VARCHAR(50) NOT NULL,
    image_count INTEGER NOT NULL,
    success_count INTEGER DEFAULT 0,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    status VARCHAR(20) DEFAULT 'pending'
);
```

## API接口设计

### 后端接口列表
1. **POST /api/generate** - 生成图片
2. **GET /api/prompts** - 获取提示词列表
3. **POST /api/prompts** - 保存提示词
4. **DELETE /api/prompts/{id}** - 删除提示词
5. **GET /api/history** - 获取生成历史
6. **POST /api/upload** - 上传图片文件

### 前端页面列表
1. **index.html** - 主页面
2. **components/image-generator.js** - 图片生成组件
3. **components/prompt-manager.js** - 提示词管理组件
4. **components/image-gallery.js** - 图片展示组件
5. **utils/api.js** - API调用工具
6. **utils/image-utils.js** - 图片处理工具

## 部署要求
- 使用conda环境：`image_server`
- 部署端口：`0.0.0.0:7700`
- 静态文件服务：Flask serve前端文件
- 数据库文件：`./database/app.db`
- 日志文件：`./logs/app.log`