ImageCraft 编辑器技能
使用 StepFun 的 step-image-edit-2 API、Flask 后端和 React（Vite）前端，构建一个完整的 AI 驱动的图像编辑 Web 应用程序。
何时使用
用户要求构建图像编辑器、照片编辑器或图像处理 Web 应用程序
用户需要 AI 驱动的照片编辑功能（修复、修饰、色彩分级、风格转换）
用户提到 StepFun 图像 API 集成
用户要求“图片编辑网站”或类似
架构
Flask 后端（端口 5050）→ Vite + React 前端（端口 5174）↓ StepFun step-image-edit-2 API
后端代理图像上传、应用特定功能的提示、调用 StepFun API 并返回结果。
前端提供 UI，包括功能选择、拖拽上传、前后比较滑块和下载。
如何构建
从 assets/ 目录复制模板文件：assets/backend/ → /backend/ assets/frontend/ → /frontend/
创建上传/结果目录：mkdir -p backend/uploads backend/results
将 assets/backend/.env.example 复制到 backend/.env 并设置：STEPFUN_API_KEY=<用户的实际 API 密钥> STEPFUN_BASE_URL=https://api.stepfun.com/v1
如果使用 Step Plan 订阅，请将基本 URL 更改为 https://api.stepfun.com/step_plan/v1。
cd backend && pip install -r requirements.txt
cd frontend && npm install
# 终端 1：后端
cd backend && python app.py
# 终端 2：前端
cd frontend && npx vite --host 0.0.0.0
后端运行在端口 5050，前端运行在端口 5174（5173 经常被占用；如果 5174 也被占用，Vite 将自动选择下一个可用端口）。
功能模块
该应用程序有 4 个功能，每个功能都有一个精心设计的英语提示用于 StepFun API：
老照片修复（Old Photo Restoration）
触发器：去除划痕、撕裂、褪色、噪点、色彩劣化
提示策略：修复 + 清晰度增强 + 自然色彩恢复
API 参数：feature=restore
人像精修（Portrait Retouching）
触发器：自然皮肤平滑、眼部亮化、面部特征增强
提示策略：自然纹理保留修饰 + 工作室照明
API 参数：feature=portrait
风景调色（Landscape Color Grading）
触发器：饱和度提升、对比度增强、动态范围扩展
提示策略：电影旅行摄影美学
API 参数：feature=landscape
风格调整（Style Transfer）
触发器：8 种艺术风格
风格：油画、水彩、素描、动漫、赛博朋克、老式电影、中国水墨画、流行艺术
API 参数：feature=style&style=
API 集成细节
端点 POST https://api.stepfun.com/v1/images/edit
请求格式 { "model": "step-image-edit-2", "image": "", "prompt": "<特定功能英语提示>", "response_format": "b64_json" }
图像预处理
将 RGBA/P 模式图像转换为 RGB
将图像缩小到最长边的最大 2048px 以减少 API 负载
在发送之前将图像编码为 base64
响应解析
{ "data": [{ "b64_json": "" }] }
前端 UI 流程
三个阶段：功能选择 —— 4 个卡片在 2×2 网格中，每个卡片都有图标、名称、描述
上传 —— 拖拽区域 + 文件输入；对于“风格调整”显示风格选择器
结果 —— 并排比较带有可拖动滑块；下载按钮
关键实现注意事项
Vite 开发服务器代理 /api、/uploads、/results 到端口 5050 的 Flask 后端
如果端口 5173 被占用，请更新 vite.config.js 以使用 5174
图像比较使用 CSS clipPath 和范围滑块实现平滑的前后过渡
assets/backend/ 中的 .env 文件重命名为 .env.example 以避免泄露密钥
所有提示必须为英语才能获得最佳 API 结果，即使 UI 为中文
老照片修复和人像精修提示强调“自然”和“保留原始”以避免过度处理
by