尧图网站建设 
ComfyUI工作流分享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 工作流终于出图满意了结果朋友来一句发我一份——你只能默默导出 JSON 丢过去对方还得自己补环境、找节点、猜参数。这样的体验ComfyUI-Manager 早就替你优化好了它内置了一套工作流分享 API能把画布上的配方连同成品图一起一键送到 Copus、OpenArt、YouML 等第三方平台。这篇指南带你把这套能力接进自己的项目全程代码可跑、接口可查。先把四步路标画出来这套分享能力的完整链路本质上就是四件事也是本文的四关关卡你要做的事关键函数/接口第1关从画布导出工作流 JSONapp.graphToPrompt()第2关识别图上的成品出口节点getPotentialOutputsAndOutputNodes()第3关选定平台并发起分享showCopusShareDialog()等第4关处理鉴权与成败反馈/manager/set_openart_auth等所有相关代码都收在项目js/目录下核心文件是js/comfyui-share-common.js通用逻辑三个平台各自的对话框在js/comfyui-share-copus.js、js/comfyui-share-openart.js、js/comfyui-share-youml.js服务端鉴权路由在glob/share_3rdparty.py。建议边读本文边对照这三个文件。第1关从画布掏出工作流 JSON分享工作流本质上就是分享一份配方说明书——节点怎么连、参数怎么设、模型用哪个。ComfyUI 前端早已暴露了获取它的标准入口app.graphToPrompt()。它解决什么问题把当前画布内容序列化成可传输的 JSON 结构其中workflow字段就是给 UI 用的完整配方output字段是给 API 执行用的精简版。三个平台的对话框在点下Share那一刻都会先调它。// 导出当前画布为 JSON核心就这两行 const prompt await app.graphToPrompt(); const workflowJSON prompt[workflow]; // UI 结构可被 ComfyUI 直接拖回画布 const workflowAPIJSON prompt[output]; // API 执行结构部分平台需要要注意graphToPrompt返回的是 Promise别忘记await。另外它只负责序列化不含任何成品图片图片要留给第2关去捞。第2关认出画布上的成品出口光有配方还不够别人点开你的分享总得先看到成品图吧那就要从画布节点里找出哪些是成品出口——也就是输出节点。ComfyUI-Manager 定义了一张白名单常量SUPPORTED_OUTPUT_NODE_TYPES目前支持 6 种节点类型export const SUPPORTED_OUTPUT_NODE_TYPES [ PreviewImage, // 预览图 SaveImage, // 保存图片 VHS_VideoCombine, // 视频/动图合成 ADE_AnimateDiffCombine, SaveAnimatedWEBP, // 动态 WEBP CR Image Output ]它解决什么问题告诉你哪些节点算成品出口避免把中间的 Latent 节点当作品发出去。真正干活的是getPotentialOutputsAndOutputNodes(nodes)遍历app.graph._nodes命中白名单的节点会被进一步解析把每张成品图整理成一条结构化记录图片文件名、所属节点 id、标题等返回{ potential_outputs, potential_output_nodes }两个配对数组。import { getPotentialOutputsAndOutputNodes } from ./comfyui-share-common.js; const nodes app.graph._nodes; const { potential_outputs, potential_output_nodes } getPotentialOutputsAndOutputNodes(nodes); // potential_outputs 形如 // [{ type: image, image: {filename, subfolder, type}, title, node_id }]两个数组长度始终一致、按节点 id 排序后面做选哪张图当封面时靠selectedOutputIndex对齐。注意VHS_VideoCombine这类节点只认image/image/gif/image/webp格式视频格式会被跳过——这是源码里写死的取舍。第3关对号入座三个平台怎么选拿到配方 成品图后下一步就是选快递公司。ComfyUI-Manager 目前封装了 Copus、OpenArt、YouML 三个主要平台加上 Matrix 和 ComfyWorkflows走ShareDialog。三家的差异点很值得先看清楚对比项CopusOpenArtYouML定位工作流变现平台AI 作品/工作流社区把工作流变成可交互应用鉴权方式API Key存 localStorageAPI Key存服务端Bearer Token存服务端必填字段标题、缩略图标题、缩略图名称、缩略图独有能力区块链存证、下载解锁定价、内容分级附带节点快照、支持 API 执行 JSON附带快照、Markdown 描述、返回可编辑应用地址成功后返回作品页链接作品页链接recipe 页面 编辑器页面Copus能赚钱的分享它的差异化卖点是变现支持设置下载解锁价格lockStateunlockPrice、选择是否上链存证storeOnChain、以及内容分级All ages / 13 / 18。分享时后端调用https://api.client.prod.copus.io/client/common/opus/shareFromComfyUI封面图先走/client/common/opus/uploadImage上传。OpenArt带快照的社区发布它把可复现做得很到位分享时除了workflow_json还会带上snapshot通过/snapshot/get_current获取当前节点版本快照和workflow_api_json方便别人一键复现环境。发布走https://openart.ai/api/workflows/publish。YouML把工作流变成应用它把同一份 JSON 提交到https://youml.com/api/v1/comfy/recipes成功后返回两个链接recipePageUrl作品页和editorPageUrl交互式编辑器——这就是它转成交互应用的入口。缩略图在拿到 recipe 之后单独上传/v1/comfy/recipes/{id}/thumbnail失败也不影响主流程。第4关一行代码唤起分享面板好消息是三个平台都封装好了现成的对话框类你不需要重复造轮子。只要引入js/comfyui-share-common.js里三个导出函数即可import { showCopusShareDialog, showOpenArtShareDialog, showYouMLShareDialog, } from ./comfyui-share-common.js;它解决什么问题把导出 JSON → 找输出节点 → 打开对话框 → 提交这条流水线打包成一个函数你只负责在合适的时机调用。每个函数内部都会自己执行app.graphToPrompt()和节点扫描然后弹出对应平台对话框。// 三个函数内部都是先取数据再弹窗签名完全一致 showCopusShareDialog(); showOpenArtShareDialog(); showYouMLShareDialog();如果你想把选择权交给用户项目还提供了一个平台选择器ShareDialogChooser里面列了 OpenArt、YouML、Matrix、ComfyWorkflows、eSheep、Copus 六个入口按钮。接入你的 UI 时一个button加一行 onclick 就够了button onclickshowOpenArtShareDialog()分享到 OpenArt/button button onclickshowYouMLShareDialog()分享到 YouML/button button onclickshowCopusShareDialog()分享到 Copus/button第5关把密钥安全存起来别让用户每次重填Copus 比较简单Key 直接落在localStorage键名copus_token。OpenArt 和 YouML 则走服务端存储——密钥存在本地文件里如manager_files_path/.openart_key、.youml你需要在项目里复刻这对读写接口。OpenArt 的密钥读写后端路由在glob/share_3rdparty.py// 写入POST 到 /manager/set_openart_authbody 里带 openart_key await api.fetchApi(/manager/set_openart_auth, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ openart_key: 你的API密钥 }) }); // 读取GET /manager/get_openart_auth返回 { openart_key } const key await api.fetchApi(/manager/get_openart_auth) .then(res res.json()) .then(data data.openart_key);YouML 的 Token 读写走同一个路由的两个方法/manager/youml/settings请求带上Authorization: Bearer token头即可。Matrix 和 ComfyWorkflows 的凭据则分别是/manager/get_matrix_auth、/manager/get_comfyworkflows_auth每次打开对话框会自动回填不必重输。第6关处理成败反馈与自定义对话框分享不是发完就完事你得让用户看到结果。三个对话框都遵循同一套路按钮先变Sharing...并禁用失败时弹customAlert成功时把final_message换成带链接的绿色提示// 以 Copus 为例成功后拼出作品页链接 this.message.innerHTML Workflow has been shared successfully. a href${url} target_blankClick here to view it./a;如果你对现成对话框不满意比如想加自己的表单字段可以直接继承ComfyDialog写一个自定义类仿照OpenArtShareDialog的骨架class MyShareDialog extends ComfyDialog { static instance null; // 单例避免重复创建 constructor() { super(); this.element $el(div.comfy-modal, { parent: document.body }, [$el(div.comfy-modal-content, {}, [...this.createLayout()])] ); } createLayout() { // 用 $el 拼表单标题、描述、密钥输入框、Share 按钮…… return []; } async share() { const prompt await app.graphToPrompt(); // 复用同一套取数逻辑 // 调目标平台的 REST 接口…… } async show() { const nodes app.graph._nodes; const { potential_outputs } getPotentialOutputsAndOutputNodes(nodes); this.element.style.display block; // 记得把输出图渲染成单选封面 } }想给工作流补元数据作者、标签等直接在share()里拼form_values对象再塞进请求体即可const form_values { name: 我的工作流, // OpenArt / YouML 用 name 做标题 description: 示例描述, };常见坑一次说清三个高频翻车点坑1提示 No supported output node found说明画布上没有白名单内的输出节点或节点还没跑出图片。先确认节点类型属于SUPPORTED_OUTPUT_NODE_TYPES中的一种再重新执行一次 prompt。另外注意VHS_VideoCombine只支持图片/gif/webp 输出视频格式会被过滤。坑2鉴权反复失败OpenArt 的 Key 存在服务端文件里改 Key 后要确保/manager/set_openart_auth写成功Copus 的 Key 走 localStorage换浏览器或清缓存后需要重填。另外三个平台都要求标题 缩略图必填缺任一字段都会直接抛错——别用空字符串糊弄。坑3对话框样式错乱三个对话框都是div.comfy-modal结构依赖 ComfyUI 的$el工具和 UI 变量--bg-color、--input-text等。如果对话框显示异常先确认你的页面引入了custom-nodes-manager.css与model-manager.css这些样式依赖再检查是否在document.body上正确挂载了element。上手清单与下一步按这份清单半小时内就能把分享按钮焊进你的项目import { showCopusShareDialog, showOpenArtShareDialog, showYouMLShareDialog } from ./comfyui-share-common.js;在 UI 里加按钮onclick 绑定对应 show 函数实现/manager/set_openart_auth与/manager/youml/settings的读写或复用 Manager 自带的分享前提醒用户先跑一次 prompt再点 Share保证有成品图可发处理customAlert失败分支与成功链接回显如果想继续深入可以顺着这三条线读源码js/comfyui-share-common.js的节点扫描与选择器逻辑、js/comfyui-share-openart.js的快照上报实现、glob/share_3rdparty.py的服务端鉴权与存储细节。也可以仿照 YouML 的recipe模式自己接一个私有分享后端——数据链路已经全部打通你只需要替换最后一公里的 REST 接口而已。【免费下载链接】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），仅供参考 ComfyUI工作流分享API实战：四步把画布作品搬到第三方平台（完整集成指南）
ComfyUI工作流分享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 工作流终于出图满意了结果朋友来一句发我一份——你只能默默导出 JSON 丢过去对方还得自己补环境、找节点、猜参数。这样的体验ComfyUI-Manager 早就替你优化好了它内置了一套工作流分享 API能把画布上的配方连同成品图一起一键送到 Copus、OpenArt、YouML 等第三方平台。这篇指南带你把这套能力接进自己的项目全程代码可跑、接口可查。先把四步路标画出来这套分享能力的完整链路本质上就是四件事也是本文的四关关卡你要做的事关键函数/接口第1关从画布导出工作流 JSONapp.graphToPrompt()第2关识别图上的成品出口节点getPotentialOutputsAndOutputNodes()第3关选定平台并发起分享showCopusShareDialog()等第4关处理鉴权与成败反馈/manager/set_openart_auth等所有相关代码都收在项目js/目录下核心文件是js/comfyui-share-common.js通用逻辑三个平台各自的对话框在js/comfyui-share-copus.js、js/comfyui-share-openart.js、js/comfyui-share-youml.js服务端鉴权路由在glob/share_3rdparty.py。建议边读本文边对照这三个文件。第1关从画布掏出工作流 JSON分享工作流本质上就是分享一份配方说明书——节点怎么连、参数怎么设、模型用哪个。ComfyUI 前端早已暴露了获取它的标准入口app.graphToPrompt()。它解决什么问题把当前画布内容序列化成可传输的 JSON 结构其中workflow字段就是给 UI 用的完整配方output字段是给 API 执行用的精简版。三个平台的对话框在点下Share那一刻都会先调它。// 导出当前画布为 JSON核心就这两行 const prompt await app.graphToPrompt(); const workflowJSON prompt[workflow]; // UI 结构可被 ComfyUI 直接拖回画布 const workflowAPIJSON prompt[output]; // API 执行结构部分平台需要要注意graphToPrompt返回的是 Promise别忘记await。另外它只负责序列化不含任何成品图片图片要留给第2关去捞。第2关认出画布上的成品出口光有配方还不够别人点开你的分享总得先看到成品图吧那就要从画布节点里找出哪些是成品出口——也就是输出节点。ComfyUI-Manager 定义了一张白名单常量SUPPORTED_OUTPUT_NODE_TYPES目前支持 6 种节点类型export const SUPPORTED_OUTPUT_NODE_TYPES [ PreviewImage, // 预览图 SaveImage, // 保存图片 VHS_VideoCombine, // 视频/动图合成 ADE_AnimateDiffCombine, SaveAnimatedWEBP, // 动态 WEBP CR Image Output ]它解决什么问题告诉你哪些节点算成品出口避免把中间的 Latent 节点当作品发出去。真正干活的是getPotentialOutputsAndOutputNodes(nodes)遍历app.graph._nodes命中白名单的节点会被进一步解析把每张成品图整理成一条结构化记录图片文件名、所属节点 id、标题等返回{ potential_outputs, potential_output_nodes }两个配对数组。import { getPotentialOutputsAndOutputNodes } from ./comfyui-share-common.js; const nodes app.graph._nodes; const { potential_outputs, potential_output_nodes } getPotentialOutputsAndOutputNodes(nodes); // potential_outputs 形如 // [{ type: image, image: {filename, subfolder, type}, title, node_id }]两个数组长度始终一致、按节点 id 排序后面做选哪张图当封面时靠selectedOutputIndex对齐。注意VHS_VideoCombine这类节点只认image/image/gif/image/webp格式视频格式会被跳过——这是源码里写死的取舍。第3关对号入座三个平台怎么选拿到配方 成品图后下一步就是选快递公司。ComfyUI-Manager 目前封装了 Copus、OpenArt、YouML 三个主要平台加上 Matrix 和 ComfyWorkflows走ShareDialog。三家的差异点很值得先看清楚对比项CopusOpenArtYouML定位工作流变现平台AI 作品/工作流社区把工作流变成可交互应用鉴权方式API Key存 localStorageAPI Key存服务端Bearer Token存服务端必填字段标题、缩略图标题、缩略图名称、缩略图独有能力区块链存证、下载解锁定价、内容分级附带节点快照、支持 API 执行 JSON附带快照、Markdown 描述、返回可编辑应用地址成功后返回作品页链接作品页链接recipe 页面 编辑器页面Copus能赚钱的分享它的差异化卖点是变现支持设置下载解锁价格lockStateunlockPrice、选择是否上链存证storeOnChain、以及内容分级All ages / 13 / 18。分享时后端调用https://api.client.prod.copus.io/client/common/opus/shareFromComfyUI封面图先走/client/common/opus/uploadImage上传。OpenArt带快照的社区发布它把可复现做得很到位分享时除了workflow_json还会带上snapshot通过/snapshot/get_current获取当前节点版本快照和workflow_api_json方便别人一键复现环境。发布走https://openart.ai/api/workflows/publish。YouML把工作流变成应用它把同一份 JSON 提交到https://youml.com/api/v1/comfy/recipes成功后返回两个链接recipePageUrl作品页和editorPageUrl交互式编辑器——这就是它转成交互应用的入口。缩略图在拿到 recipe 之后单独上传/v1/comfy/recipes/{id}/thumbnail失败也不影响主流程。第4关一行代码唤起分享面板好消息是三个平台都封装好了现成的对话框类你不需要重复造轮子。只要引入js/comfyui-share-common.js里三个导出函数即可import { showCopusShareDialog, showOpenArtShareDialog, showYouMLShareDialog, } from ./comfyui-share-common.js;它解决什么问题把导出 JSON → 找输出节点 → 打开对话框 → 提交这条流水线打包成一个函数你只负责在合适的时机调用。每个函数内部都会自己执行app.graphToPrompt()和节点扫描然后弹出对应平台对话框。// 三个函数内部都是先取数据再弹窗签名完全一致 showCopusShareDialog(); showOpenArtShareDialog(); showYouMLShareDialog();如果你想把选择权交给用户项目还提供了一个平台选择器ShareDialogChooser里面列了 OpenArt、YouML、Matrix、ComfyWorkflows、eSheep、Copus 六个入口按钮。接入你的 UI 时一个button加一行 onclick 就够了button onclickshowOpenArtShareDialog()分享到 OpenArt/button button onclickshowYouMLShareDialog()分享到 YouML/button button onclickshowCopusShareDialog()分享到 Copus/button第5关把密钥安全存起来别让用户每次重填Copus 比较简单Key 直接落在localStorage键名copus_token。OpenArt 和 YouML 则走服务端存储——密钥存在本地文件里如manager_files_path/.openart_key、.youml你需要在项目里复刻这对读写接口。OpenArt 的密钥读写后端路由在glob/share_3rdparty.py// 写入POST 到 /manager/set_openart_authbody 里带 openart_key await api.fetchApi(/manager/set_openart_auth, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ openart_key: 你的API密钥 }) }); // 读取GET /manager/get_openart_auth返回 { openart_key } const key await api.fetchApi(/manager/get_openart_auth) .then(res res.json()) .then(data data.openart_key);YouML 的 Token 读写走同一个路由的两个方法/manager/youml/settings请求带上Authorization: Bearer token头即可。Matrix 和 ComfyWorkflows 的凭据则分别是/manager/get_matrix_auth、/manager/get_comfyworkflows_auth每次打开对话框会自动回填不必重输。第6关处理成败反馈与自定义对话框分享不是发完就完事你得让用户看到结果。三个对话框都遵循同一套路按钮先变Sharing...并禁用失败时弹customAlert成功时把final_message换成带链接的绿色提示// 以 Copus 为例成功后拼出作品页链接 this.message.innerHTML Workflow has been shared successfully. a href${url} target_blankClick here to view it./a;如果你对现成对话框不满意比如想加自己的表单字段可以直接继承ComfyDialog写一个自定义类仿照OpenArtShareDialog的骨架class MyShareDialog extends ComfyDialog { static instance null; // 单例避免重复创建 constructor() { super(); this.element $el(div.comfy-modal, { parent: document.body }, [$el(div.comfy-modal-content, {}, [...this.createLayout()])] ); } createLayout() { // 用 $el 拼表单标题、描述、密钥输入框、Share 按钮…… return []; } async share() { const prompt await app.graphToPrompt(); // 复用同一套取数逻辑 // 调目标平台的 REST 接口…… } async show() { const nodes app.graph._nodes; const { potential_outputs } getPotentialOutputsAndOutputNodes(nodes); this.element.style.display block; // 记得把输出图渲染成单选封面 } }想给工作流补元数据作者、标签等直接在share()里拼form_values对象再塞进请求体即可const form_values { name: 我的工作流, // OpenArt / YouML 用 name 做标题 description: 示例描述, };常见坑一次说清三个高频翻车点坑1提示 No supported output node found说明画布上没有白名单内的输出节点或节点还没跑出图片。先确认节点类型属于SUPPORTED_OUTPUT_NODE_TYPES中的一种再重新执行一次 prompt。另外注意VHS_VideoCombine只支持图片/gif/webp 输出视频格式会被过滤。坑2鉴权反复失败OpenArt 的 Key 存在服务端文件里改 Key 后要确保/manager/set_openart_auth写成功Copus 的 Key 走 localStorage换浏览器或清缓存后需要重填。另外三个平台都要求标题 缩略图必填缺任一字段都会直接抛错——别用空字符串糊弄。坑3对话框样式错乱三个对话框都是div.comfy-modal结构依赖 ComfyUI 的$el工具和 UI 变量--bg-color、--input-text等。如果对话框显示异常先确认你的页面引入了custom-nodes-manager.css与model-manager.css这些样式依赖再检查是否在document.body上正确挂载了element。上手清单与下一步按这份清单半小时内就能把分享按钮焊进你的项目import { showCopusShareDialog, showOpenArtShareDialog, showYouMLShareDialog } from ./comfyui-share-common.js;在 UI 里加按钮onclick 绑定对应 show 函数实现/manager/set_openart_auth与/manager/youml/settings的读写或复用 Manager 自带的分享前提醒用户先跑一次 prompt再点 Share保证有成品图可发处理customAlert失败分支与成功链接回显如果想继续深入可以顺着这三条线读源码js/comfyui-share-common.js的节点扫描与选择器逻辑、js/comfyui-share-openart.js的快照上报实现、glob/share_3rdparty.py的服务端鉴权与存储细节。也可以仿照 YouML 的recipe模式自己接一个私有分享后端——数据链路已经全部打通你只需要替换最后一公里的 REST 接口而已。【免费下载链接】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），仅供参考