三步接入 ComfyUI-Manager 工作流分享 API让用户把作品一键发到第三方平台【免费下载链接】ComfyUI-ManagerComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and enable various custom nodes of ComfyUI. Furthermore, this extension provides a hub feature and convenience functions to access a wide range of information within ComfyUI.项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-Manager你的网站能不能提供这样的功能用户在 ComfyUI 里画完一张图点一下按钮作品和工作流就自动发布到 OpenArt、Copus、YouML 这类平台这是很多做 AI 工具的人会问的问题。ComfyUI-Manager 正好把这件事做完了——它内置了一套工作流分享 API前端几个函数就能复用它的对话框、输出识别和密钥管理不用你自己去对接每个平台的上传协议。本文就用一个真实场景带你把这条链路完整走一遍。为什么你的用户差一个「一键分享」按钮先想清楚痛点假设你做了一个基于 ComfyUI 的在线生图服务用户跑完 prompt图片保存在 output 目录里工作流躺在画布上。价值其实已经产生但沉淀不下来——用户没法把作品同步到自己的社区主页也没法把工作流分享给朋友复现。如果你打算自己开发会立刻撞上三堵墙每个平台的上传接口、鉴权方式都不一样少说要对接三五家得自己解析画布数据、识别哪些节点是输出节点API key 存哪、怎么加密、怎么取回又是一堆脏活。而 ComfyUI-Manager 的 js/comfyui-share-common.js 已经把这三件事全部封装好了。你要做的只是决定让用户点哪个按钮。接入后是什么效果三个分享入口函数怎么调先看最终效果再决定要不要往下读。在你的前端代码里引入这三个函数import { showCopusShareDialog, showOpenArtShareDialog, showYouMLShareDialog } from ./js/comfyui-share-common.js; // 三个平台各占一行绑定到你的按钮上即可 document.getElementById(share-openart).onclick () showOpenArtShareDialog(); // OpenArt发布 管理 document.getElementById(share-copus).onclick () showCopusShareDialog(); // Copus可设付费解锁 document.getElementById(share-youml).onclick () showYouMLShareDialog(); // YouML可转交互式应用点击之后用户看到的是官方同款分享对话框——选封面图、填标题、贴 API key、点 Share。你一行上传代码都不用写。为什么能这么省事因为这三个函数内部自己完成了三步调app.graphToPrompt()取数据、扫描画布找输出节点、然后弹出对应平台的对话框。下面把这三步拆开看。一条分享请求的完整链路从画布 JSON 到平台接口第一步如何用 graphToPrompt() 拿到可分享的工作流数据分享的本质是把当前画布状态序列化 把生成的作品打包上传。前者靠的是 ComfyUI 前端的官方方法const prompt await app.graphToPrompt(); const workflowJSON prompt[workflow]; // UI 可编辑版节点、连线、布局坐标 const apiJSON prompt[output]; // 后端可执行版喂给 API 的 prompt 字典注意它返回两个视图。workflow用于让平台网页端还原你的画布别人能直接打开编辑output用于让平台实际跑一遍出图。OpenArt 和 YouML 的分享请求里两个字段都要求携带只传一个对方平台上要么打不开要么跑不动——这是最容易忽略的点。第二步怎么识别输出节点PreviewImage、SaveImage 到底怎么筛画布上有几十个节点怎么知道哪些节点的输出可以当封面、当作品答案是 js/comfyui-share-common.js 里导出的getPotentialOutputsAndOutputNodesconst nodes app.graph._nodes; // 当前画布全部节点 const { potential_outputs, potential_output_nodes } getPotentialOutputsAndOutputNodes(nodes);它内部遍历节点只认SUPPORTED_OUTPUT_NODE_TYPES里列出的类型export const SUPPORTED_OUTPUT_NODE_TYPES [ PreviewImage, SaveImage, VHS_VideoCombine, ADE_AnimateDiffCombine, SaveAnimatedWEBP, CR Image Output ];每条输出会变成一个结构化的条目形如{ type: image, image: { filename, subfolder, type }, title, node_id } { type: output, output: { filename, subfolder, value, format }, title, node_id }这里的image.filename不是 URL要用 ComfyUI 的/view接口拼出图片地址/view?filenamexxxsubfolderxxxtypeoutput。漏掉这个拼接对话框里就看不到输出预览图。如果这一步筛出来是空的说明画布上要么没有支持的输出节点、要么你还没跑过 prompt——两个对话框都会直接拒绝分享后面踩坑部分细说。第三步API 密钥的保存与读取三个平台三种姿势各平台的鉴权方式并不统一这是接入时最容易写错的地方平台密钥存放位置请求时怎么带OpenArt服务端文件.openart_keyURL 查询参数workflow_api_keyYouML服务端文件.youmlHeaderAuthorization: Bearer tokenCopus浏览器localStorage的copus_token请求体字段apiToken以 OpenArt 为例保存和读取走的是 ComfyUI-Manager 自己开的两个后端接口// 保存写入服务端避免 key 暴露在前端 await api.fetchApi(/manager/set_openart_auth, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ openart_key: key }) }); // 读取用户下次打开对话框自动回填 const { openart_key } await api.fetchApi(/manager/get_openart_auth).then(r r.json());对应的实现可以在 glob/share_3rdparty.py 里看到key 以文件形式落在 ComfyUI-Manager 的配置目录下二次分享不用重新输入。YouML 走的是/manager/youml/settings的 GET/POST结构类似。为什么 OpenArt 和 YouML 要存服务端、Copus 却用 localStorage因为前两者的 key 直接参与每次 API 请求query 或 header存服务端可以避免被浏览器插件偷走Copus 的 token 只在本机使用且官方实现如此沿用即可——不要为了统一把它们全存到一处跟随各平台官方实现最稳妥。第四步分享成功的回调怎么接从接口响应到跳转链接分享请求发出后每个平台返回的字段不同你的 UI 要根据这些字段给用户反馈// OpenArt返回 workflow_id拼出作品页 const { workflow_id } response.data; const url https://openart.ai/workflows/-/-/${workflow_id}; this.message.innerHTML Workflow has been shared successfully. a href${url} target_blankClick here to view it./a; // Copus返回作品 id拼出详情页 const url ${DEFAULT_HOMEPAGE_URL}/work/${data}; // YouML返回 recipePageUrl / editorPageUrl可进一步转成交互式应用 this.message.innerHTML 分享成功a href${recipePageUrl} target_blank在 YouML 里把它变成 App/a;回调里通常还要做三件收尾清空输入框、重置选中状态、把按钮文案从 Sharing... 改回 Share。漏掉重置用户第二次分享时表单里还留着上一次的残留内容。亲手接入写一个你自己的最小分享管线如果你不想直接用官方对话框而是想完全控制交互可以基于上面几个 API 自己组装一条最小管线。以 OpenArt 为例import { getPotentialOutputsAndOutputNodes } from ./js/comfyui-share-common.js; async function myShareToOpenArt(key) { // 1. 取工作流数据UI 版 API 版 const prompt await app.graphToPrompt(); const workflowJSON prompt[workflow]; // 2. 扫输出节点拿到第一张图当封面 const { potential_outputs } getPotentialOutputsAndOutputNodes(app.graph._nodes); if (!potential_outputs.length) throw new Error(先跑一次 prompt或添加 PreviewImage/SaveImage 节点); // 3. 带 key 调平台接口OpenArt 用 query 参数传 key const res await fetch(https://openart.ai/api/workflows/publish?workflow_api_key${key}, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ workflow_json: workflowJSON, form_values: { name: 我的工作流, description: }, upload_images: [] // 已上传的封面图列表 }) }); // 4. 处理结果 const data await res.json(); return https://openart.ai/workflows/-/-/${data.workflow_id}; }这段代码把整条链路串起来了取数 → 识别输出 → 鉴权 → 上传 → 回跳。你可以照这个骨架去对接任何新平台唯一要变的只有第 3 步的接口地址和鉴权方式。接入时最容易踩的 5 个坑坑 1没跑 prompt 就点分享。输出节点存在但potential_outputs为空说明还没出图。官方对话框会提示 first run a prompt。务必在用户交互前判断数组长度。坑 2节点类型不在支持列表里。像自定义的SaveLatent、PreviewLatent不会被识别。让用户加一个PreviewImage或SaveImage节点再分享。坑 3VHS_VideoCombine 只支持图片格式。看getPotentialOutputsAndOutputNodes源码会发现视频格式format不以image开头会被直接continue跳过——视频分享目前是盲区别承诺用户能传视频。坑 4封面图必填。OpenArt 和 Copus 的分享逻辑里没上传缩略图会直接抛 Thumbnail is required。要么让用户从输出里选要么自己上传一张默认图。坑 5key 失效没有反馈。三个平台的fetch失败时错误信息会被包装成 Error sharing workflow: ...原始报错藏在e.message里。调试时先打印原始响应体别只看包装后的提示。玩法延伸把分享对话框换成你自己的 UI官方三个对话框都继承自ComfyDialog比如 js/comfyui-share-copus.js 里的CopusShareDialog。这意味着你可以做两件事换皮继承ComfyDialog重写createButtons()和share()复用内部的getPotentialOutputsAndOutputNodes和密钥接口做出符合你产品风格的对话框加目的地参考showShareDialog(matrix)和shareToEsheep()的写法——它们一个走/manager/share统一接口一个走/manager/set_esheep_workflow_and_images存数据后跳转——你完全可以为你的平台加一个showMyPlatformShareDialog()。顺带一提OpenArt 和 YouML 的分享请求里都会带上/snapshot/get_current的依赖快照。这意味着别人拿到你的工作流后能一键还原整个插件环境——分享的价值不止是传一张图而是传播一整套可复现的创作现场。你的平台要不要也支持这种带着环境分享的玩法【免费下载链接】ComfyUI-ManagerComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and enable various custom nodes of ComfyUI. Furthermore, this extension provides a hub feature and convenience functions to access a wide range of information within ComfyUI.项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-Manager创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
