上一篇最小工作流创建图、同步跑通、按 run_id 查事件相关01 后端壳子示例仓库flow-forge本篇讲把上一篇靠 curl 走通的「存图 → 跑一次 → 查事件」搬进浏览器——web/里一块极简联调页。先说结论上一篇证明后端 API 能跑通。本篇补的是学习路径上「看得见」的一块能力你能感知到什么可启动的前端工程web/用 Next.js浏览器打开联调页一页完成联调改图 JSON、改 inputs、点「运行」下方出 status / outputs / events浏览器打得到本地 API经同源/api-proxy转发到 Flask你不必先懂 CORS一句话本篇证明「不用 curl 也能演示最小工作流」不做拖拽画布、不做登录、不做 SSE。和上一篇的关系可以记成上一篇API 能力菜谱存好、能跑、能回看 本篇 谁来点按钮浏览器页面替你发那三次 HTTP1. 为什么还要 Webcurl 适合证明接口契约但不适合日常「改一行模板、再跑一次、盯事件列表」JSON 要手写进命令行改起来累失败信息散落在终端输出里对照 Dify 一类产品时用户心智是「控制台里点运行」不是「终端里贴 curl」所以本仓用 changeminimal-web在web/落下 Next 工程位并先做单页联调而不是一上来做画布。术语是什么本仓怎么用联调页一个网页专门用来和后端 API 对打仓库首页就是它Next.js用 React 做网站的框架本仓选 App Routerweb/整包代理proxy / rewrite浏览器只访问前端同源路径由前端开发服务器转发到后端/api-proxy/*→ FlaskCORS浏览器限制「网页域名」与「接口域名」不一致时的跨域请求本仓用代理绕开少改后端2. 功能一前后端同时起来你需要两个终端两个进程进程目录作用默认地址后端api/真正存图、跑图、记事件http://127.0.0.1:5000前端web/联调页 把请求转给后端http://localhost:3000跟跑细节以web/README.md为准先起 Flask与上一篇相同再cdwebpnpminstallpnpmdev浏览器打开 http://localhost:3000顺带认两个词仍不必会写词先怎么记Node.js在电脑上跑 JavaScript/TypeScript 工具链的运行时前端装依赖、起开发服务器靠它pnpm前端装包工具类似后端那边的uv管依赖、跑脚本若 Flask 不在 5000 端口启动 Next 前设置环境变量FLOW_FORGE_API_ORIGIN指向真实后端地址README 有 PowerShell 示例。3. 功能二联调页上你点什么打开页面后布局可以记成三块区域你做什么图 JSON左侧大文本框默认已预填start → template → end与后端测试夹具同构inputs JSON右侧文本框默认{name:Forge}对应模板里的{name}结果区点「运行」后出现status、run_id、outputs、逐步events点「运行」时页面在内部替你串起上一篇已熟悉的三步POST /workflows 用当前图创建一个工作流 → POST .../runs 带上 inputs 同步跑完 → GET .../events 拉回逐步事件成功时你应看到类似Hello, Forge!的输出以及按序号排列的node_started/node_succeeded。故意把 inputs 里的name删掉再跑应看到failed以及带失败信息的事件或 error——这是规格要求的失败可复盘路径。页面入口web/app/page.tsx示例数据web/lib/sample.ts4. 功能三为什么浏览器要走/api-proxy若网页在localhost:3000却直接去请求127.0.0.1:5000浏览器常会拦跨域CORS。本仓选择少改后端浏览器 → 只请求同源http://localhost:3000/api-proxy/workflows → Next 开发服务器按规则转发 → http://127.0.0.1:5000/workflows配置在next.config.ts把路径前缀/api-proxy剥掉后转到FLOW_FORGE_API_ORIGIN默认本机 5000。前端发请求的封装在lib/api.ts一律拼/api-proxy/...并提供runGraphOnce一次联调串三步。连接失败时页面会提示先确认 Flask 已启动、代理可转发——而不是空白无响应。你可以把代理理解成「前台代收快递再送到后厨」浏览器只认前台地址后厨地址由配置决定。5.web/目录怎么读先地图后语法路径作用app/page.tsx联调页文本框、按钮、展示结果lib/api.ts调用后端的三个接口 一次串联lib/sample.ts预填的最小图与 inputsnext.config.ts/api-proxy转发规则package.json前端依赖与pnpm dev/pnpm build脚本建议阅读顺序先按 README 把页面跑通本节第 23 节再打开lib/api.ts对照「按钮背后发了哪几个网址」最后才看page.tsx里状态如何随着点击变化顺带认几个前端词对照上一篇的 Python 附注表词先怎么记和本篇的关系.tsx可写界面结构的 TypeScript 文件联调页在这里fetch浏览器发 HTTP 请求的标准手段api.ts里用来打/api-proxyuseState「页面上要记住的值」文本框内容、是否忙碌、结果改输入、点运行时状态会变async/await「等网络返回再继续」创建 → 运行 → 拉事件必须按序等系列口径不变功能先懂语法词只在用到时钉一句。6. 你怎么确认「这块好了」检查怎么做手测主路径默认示例点「运行」看到 succeeded 与 outputs手测失败路径去掉name看到 failed 与可读错误/事件静态构建cd web pnpm build通过文档约定的最低检查之一根目录README.md已把「先 api、后 web」写在一起。和前作怎么接篇补哪一段01 后端壳子依赖、探活、分层空位、库能连02 最小工作流 API图、同步 Runner、run/event HTTP本篇浏览器联调页 /api-proxy下一篇更可能落在「画布/更富交互」或其它节点能力但本切片刻意停在「能点运行、能看事件」。你可以从这里带走什么有了 API 之后最小 Web 的价值是缩短「改图 → 再跑 → 看事件」的循环不是先做漂亮 UI。联调页做的事与 curl 三步等价差别只在谁触发、结果怎么摆。开发期用同源代理打本地后端往往比先给 Flask 加 CORS 更省事。读前端仓库同样用「先跑通 → 再对接口封装 → 再看页面状态」的顺序。Next 工程位已经落下以后画布可以在同一web/上长而不必另起空壳。仓库与相关文档GitHubhttps://github.com/jimchou-h/flow-forge前端跟跑web/README.md联调页app/page.tsxAPI 封装lib/api.ts代理配置next.config.ts上一篇 API 说明api/README.md欢迎 Star、Issue 和 PR。本文基于 Flow Forgeminimal-web覆盖 Next 联调页与/api-proxy访问本地 API假定读者不必先会 Python/React。不包含拖拽画布、账号与 SSE。