244 lines
5.4 KiB
Markdown
244 lines
5.4 KiB
Markdown
# AI海报生成系统 - 简化部署方案
|
||
|
||
## 🎯 核心架构
|
||
|
||
```
|
||
前端 → API服务器(8000端口) → ComfyUI服务器(101.201.50.90:8188)
|
||
```
|
||
|
||
## 🚀 简化API设计
|
||
|
||
### 主要接口（只需要这一个）
|
||
|
||
**POST** `/api/generate-poster`
|
||
|
||
**请求：**
|
||
```json
|
||
{
|
||
"user_input": "端午节海报，传统风格，包含荷花和龙舟"
|
||
}
|
||
```
|
||
|
||
**响应：**
|
||
```json
|
||
{
|
||
"status": "success",
|
||
"message": "海报生成完成",
|
||
"data": {
|
||
"vue_code": "完整的Vue组件代码",
|
||
"suggestions": {
|
||
"layer6_title_content": {"content": "端午节安康", "font_name": "SimHei"},
|
||
"layer7_subtitle_content": {"content": "粽叶飘香，龙舟竞渡"}
|
||
},
|
||
"psd_file_path": "生成的PSD文件路径",
|
||
"file_size_mb": 5.93,
|
||
"generated_images": 2
|
||
},
|
||
"session_id": "会话ID用于下载文件"
|
||
}
|
||
```
|
||
|
||
### 文件下载接口
|
||
|
||
**GET** `/api/download/{file_type}?session_id={session_id}`
|
||
|
||
- `file_type`: `vue` | `psd` | `json`
|
||
|
||
## 🔧 本地开发部署
|
||
|
||
### 1. 启动API服务器
|
||
```bash
|
||
cd E:\砚生\ai_service\scripts
|
||
python run_pipeline.py
|
||
# 选择: 2 (API服务器模式)
|
||
```
|
||
|
||
服务器启动在: `http://localhost:8000`
|
||
|
||
### 2. 前端调用示例
|
||
|
||
```javascript
|
||
// 一键生成海报
|
||
async function generatePoster(userInput) {
|
||
try {
|
||
const response = await fetch('http://localhost:8000/api/generate-poster', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
user_input: userInput
|
||
})
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.status === 'success') {
|
||
console.log('Vue代码:', result.data.vue_code);
|
||
console.log('PSD文件大小:', result.data.file_size_mb, 'MB');
|
||
|
||
// 下载Vue文件
|
||
downloadFile(result.session_id, 'vue');
|
||
// 下载PSD文件
|
||
downloadFile(result.session_id, 'psd');
|
||
|
||
return result;
|
||
}
|
||
} catch (error) {
|
||
console.error('生成失败:', error);
|
||
}
|
||
}
|
||
|
||
// 下载文件
|
||
function downloadFile(sessionId, fileType) {
|
||
const url = `http://localhost:8000/api/download/${fileType}?session_id=${sessionId}`;
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = '';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
}
|
||
|
||
// 使用示例
|
||
generatePoster("春节海报，红色背景，包含灯笼");
|
||
```
|
||
|
||
## 🌐 生产环境部署
|
||
|
||
### 方案1: 单服务器部署（推荐）
|
||
|
||
```bash
|
||
# 1. 安装依赖
|
||
pip install -r requirements.txt
|
||
|
||
# 2. 配置环境变量
|
||
cp .env.example .env
|
||
# 编辑.env文件，设置API密钥
|
||
|
||
# 3. 启动服务
|
||
python run_pipeline.py
|
||
# 选择: 2 (API服务器模式)
|
||
|
||
# 4. 使用PM2管理进程（可选）
|
||
npm install -g pm2
|
||
pm2 start "python run_pipeline.py --mode=api" --name="poster-api"
|
||
```
|
||
|
||
### 方案2: Docker部署
|
||
|
||
```dockerfile
|
||
# Dockerfile
|
||
FROM python:3.11
|
||
|
||
WORKDIR /app
|
||
COPY requirements.txt .
|
||
RUN pip install -r requirements.txt
|
||
|
||
COPY . .
|
||
EXPOSE 8000
|
||
|
||
CMD ["python", "scripts/run_pipeline.py", "--mode=api"]
|
||
```
|
||
|
||
```bash
|
||
# 构建和运行
|
||
docker build -t poster-api .
|
||
docker run -p 8000:8000 poster-api
|
||
```
|
||
|
||
### 方案3: 云服务器部署
|
||
|
||
```bash
|
||
# 在云服务器上
|
||
git clone <你的仓库>
|
||
cd ai_service
|
||
pip install -r requirements.txt
|
||
|
||
# 配置防火墙开放8000端口
|
||
sudo ufw allow 8000
|
||
|
||
# 启动服务
|
||
python scripts/run_pipeline.py
|
||
```
|
||
|
||
## 🔒 生产环境配置
|
||
|
||
### 1. 修改CORS设置
|
||
```python
|
||
# 在run_pipeline.py中修改
|
||
app.add_middleware(
|
||
CORSMiddleware,
|
||
allow_origins=["https://your-frontend-domain.com"], # 改为你的前端域名
|
||
allow_credentials=True,
|
||
allow_methods=["GET", "POST"],
|
||
allow_headers=["*"],
|
||
)
|
||
```
|
||
|
||
### 2. 添加API认证（可选）
|
||
```python
|
||
from fastapi.security import HTTPBearer
|
||
|
||
security = HTTPBearer()
|
||
|
||
@app.post("/api/generate-poster")
|
||
async def generate_poster_api(request: PosterRequest, token: str = Depends(security)):
|
||
# 验证token
|
||
if not verify_token(token.credentials):
|
||
raise HTTPException(status_code=401, detail="Invalid token")
|
||
# ...existing code...
|
||
```
|
||
|
||
### 3. 配置HTTPS（Nginx反向代理）
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name your-domain.com;
|
||
|
||
location / {
|
||
proxy_pass http://localhost:8000;
|
||
proxy_set_header Host $host;
|
||
proxy_set_header X-Real-IP $remote_addr;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 📊 性能监控
|
||
|
||
### 健康检查
|
||
```bash
|
||
curl http://localhost:8000/health
|
||
```
|
||
|
||
### 状态监控
|
||
```javascript
|
||
// 检查生成状态
|
||
async function checkStatus(sessionId) {
|
||
const response = await fetch(`http://localhost:8000/api/status/${sessionId}`);
|
||
return await response.json();
|
||
}
|
||
```
|
||
|
||
## 🎯 为什么使用单一API？
|
||
|
||
1. **简化前端调用** - 一次请求获得所有结果
|
||
2. **减少网络延迟** - 避免多次HTTP请求
|
||
3. **统一错误处理** - 所有错误在一个地方处理
|
||
4. **会话管理** - 自动管理文件和状态
|
||
5. **部署简单** - 只需要一个服务端点
|
||
|
||
## 🔄 工作流程
|
||
|
||
1. **前端发送请求** → `POST /api/generate-poster`
|
||
2. **API自动执行**：
|
||
- 调用DeepSeek分析用户输入
|
||
- 调用ComfyUI(101.201.50.90:8188)生成图片
|
||
- 调用Kimi生成文案
|
||
- 生成Vue代码
|
||
- 创建PSD文件（使用手动模板）
|
||
3. **返回完整结果** → 前端获得所有内容
|
||
4. **前端按需下载** → 使用session_id下载文件
|
||
|
||
这样设计的好处是前端只需要调用一个接口，等待完成后就能获得Vue代码和下载PSD文件，非常简单高效！
|