Banner Maker · ComfyUI 示例

左侧输入素材+文案，中间显示过程，右侧出 3 个版式的 Banner。 后端走 OneThingAI 的 ComfyOne API 调度 ComfyUI（key 只在服务端）。

运行（当前为 MOCK，无需任何 key）

npm install
npm run dev
# 打开 http://localhost:3000

右侧带 MOCK 标记，返回的是占位图——用来先验证布局和交互。

结构

• src/lib/workflow.ts —— 单一事实源：UI 字段 ↔ ComfyUI 节点映射
• src/app/page.tsx —— 左中右三栏 UI
• src/app/api/generate/route.ts —— 后端，TODO 处接真实 ComfyOne

接通真实 ComfyOne

真实调用代码已写好（src/lib/comfyone.ts）。没配 key 时自动回退 MOCK。

cp .env.local.example .env.local
# 填 ONETHINGAI_API_KEY 和 ONETHINGAI_INSTANCE_ID

npm run dev
# 一次性初始化：注册实例 + 创建工作流模板，拿 workflowId
curl http://localhost:3000/api/setup
# 把返回的 workflowId 写进 .env.local 的 COMFYONE_WORKFLOW_ID，重启 dev

之后左侧填好点生成 → 后端：上传图 → 提交任务 → 轮询 → 代下载 9/55/80 三张成品。

接口契约（已核对官方文档）

步骤	接口	关键字段
上传图	POST /v1/files	form-data file → 返回 data.path(图片URL)
建模板	POST /v1/workflows	{name,inputs,outputs,workflow} → data.id
提交	POST /v1/prompts	{workflow_id,inputs:[{id,params}]} → data.taskId
状态	GET /v1/prompts/{id}/status	data.status / data.images[]

⚠️ images[] 的 URL 需带 Bearer 头才能下载，所以由后端代下再返回前端。

第一次接通时要验证的两点

1. PreviewImage 输出：若 9/55/80（PreviewImage）在 images 里取不到，把这三个节点改成 SaveImage 再导一版 JSON 覆盖 src/lib/case2.workflow.json。
2. 输入类型：文本/颜色按 string、图片按 image 声明（见 workflow.ts 的 ioType）。若 ComfyOne 报类型不符，按报错调整。

对应工作流：src/lib/case2.workflow.json（来自 案例 2.json，ComfyUI API Format）