网硕互联帮助中心一、应用介绍
二、与传统方法对比
| 实时反馈 | 传统的图像生成过程，用户通常需要等待整个生成任务完成后才能看到结果，若结果不符合预期，需要重新调整参数并再次等待生成，过程繁琐且耗时 | ComfyUI Web Viewer提供实时预览功能，用户在调整参数后能立即看到图像变化，快速做出决策，大大提高工作效率 |
| 团队协作 | 传统的团队协作分享图像生成结果，可能需要通过文件传输工具，如邮件、即时通讯软件等，接收方还需在本地安装相应软件才能查看。若涉及版本更新或参数调整，沟通和同步较为困难 | ComfyUI Web Viewer通过网络链接分享，团队成员在浏览器中即可查看，实时同步更新，方便快捷，促进团队成员之间的沟通和协作 |
| 跨设备访问 | 传统方式下，用户若要在不同设备上查看图像生成结果，需要将相关文件在不同设备间传输，并且要确保各设备安装了合适的软件和环境，操作复杂 | ComfyUI Web Viewer支持跨设备访问，只要设备能连接网络并使用浏览器，用户即可随时随地查看和管理图像生成任务 |
| 教学展示 | 传统教学展示图像生成过程，可能依赖于本地软件的演示，学生难以在课后重复观看。而且对于复杂的图像生成流程，难以清晰地展示每个步骤的效果 | ComfyUI Web Viewer可以记录图像生成的过程，教师可以随时展示不同阶段的结果，学生也可以通过链接反复查看，加深对图像生成原理和技巧的理解 |
三、插件下载地址和安装方法
- 使用ComfyUI Manager安装：
- 打开ComfyUI，点击主菜单中的“Manager”按钮。
- 选择“Custom Nodes Manager”。
- 在搜索框中输入“ComfyUI Web Viewer”，找到插件后点击“Install”按钮进行安装。
- 安装完成后，点击“Manager”中的“Restart”按钮重启ComfyUI，然后手动刷新浏览器以清除缓存，即可在节点列表中看到新安装的插件节点。
- 手动安装：
- 进入ComfyUI的“custom_nodes”文件夹。
- 从GitHub上下载ComfyUI Web Viewer的压缩包，解压后将整个插件文件夹放入“custom_nodes”目录。
- 打开命令行工具，导航到ComfyUI的根目录，激活ComfyUI的虚拟环境（如果使用虚拟环境）。
- 进入插件文件夹，执行pip install -r requirements.txt安装插件所需的依赖包。在安装过程中，需注意依赖包与ComfyUI版本的兼容性。若出现依赖包版本冲突问题，可参考插件官方文档中关于依赖包版本的说明，或者在相关技术论坛寻求解决方案。同时，确保网络连接稳定，以避免下载依赖包失败。
四、需要的模型及下载地址
五、插件包含的节点名称
六、关键插件参数用途和推荐值
- Server Address：设置Web Viewer服务器的地址。推荐值：如果在本地使用，通常设置为“127.0.0.1”，表示仅允许本地访问，增强安全性。若需要在局域网内共享，可设置为本地局域网IP地址。
- Port Number：指定Web Viewer使用的端口号。推荐值：选择一个未被其他程序占用的端口，如“8188”。避免使用常见的系统端口（如80、443等），以防止端口冲突。
- Allow External Access：设置是否允许外部访问。推荐值：若仅在本地或内部团队使用，设置为“False”，确保安全性。若需要与外部合作伙伴分享，设置为“True”，但同时要设置访问密码等安全措施。
- Access Password：设置访问Web Viewer的密码。推荐值：设置一个强密码，包含字母、数字和特殊字符，长度不少于8位，如“WebVw_123!@#”，以保护图像生成内容的隐私。
- Output Resolution：设置输出图像在Web Viewer中的分辨率。推荐值：对于一般的图像查看，设置为“1280×720”或“1920×1080”即可满足大多数浏览器的显示需求。若图像细节较多，可适当提高分辨率，但要注意过高的分辨率可能会导致加载速度变慢。
- Image Quality：调整输出图像的质量。取值范围一般为0 – 100，值越高质量越好，但文件大小也越大。推荐值：设置在80 – 90之间，既能保证图像质量，又能控制文件大小，使图像在浏览器中快速加载。
- Include History：选择是否在分享链接中包含图像生成的历史记录。推荐值：如果希望分享对象全面了解生成过程，设置为“True”。若仅希望对方查看最终结果，设置为“False”，以简化分享内容。
- Show Parameter Buttons：设置是否在Web Viewer界面显示参数调整按钮。推荐值：如果希望分享对象可以在浏览器中尝试调整参数，设置为“True”。若不希望对方修改参数，仅查看结果，设置为“False”。
- Image Display Layout：选择图像在Web Viewer中的显示布局。可选项有“Single Image”（单张显示）、“Multiple Images Side – by – Side”（多张并排显示）等。推荐值：如果是单个图像展示，选择“Single Image”；若要同时展示多个图像对比，选择“Multiple Images Side – by – Side”。
七、节点工作流参考案例
#mermaid-svg-A6JQ9YFKz9OwBteS{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-A6JQ9YFKz9OwBteS .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-A6JQ9YFKz9OwBteS .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-A6JQ9YFKz9OwBteS .error-icon{fill:#552222;}#mermaid-svg-A6JQ9YFKz9OwBteS .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-A6JQ9YFKz9OwBteS .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-A6JQ9YFKz9OwBteS .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-A6JQ9YFKz9OwBteS .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-A6JQ9YFKz9OwBteS .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-A6JQ9YFKz9OwBteS .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-A6JQ9YFKz9OwBteS .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-A6JQ9YFKz9OwBteS .marker{fill:#333333;stroke:#333333;}#mermaid-svg-A6JQ9YFKz9OwBteS .marker.cross{stroke:#333333;}#mermaid-svg-A6JQ9YFKz9OwBteS svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-A6JQ9YFKz9OwBteS p{margin:0;}#mermaid-svg-A6JQ9YFKz9OwBteS .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-A6JQ9YFKz9OwBteS .cluster-label text{fill:#333;}#mermaid-svg-A6JQ9YFKz9OwBteS .cluster-label span{color:#333;}#mermaid-svg-A6JQ9YFKz9OwBteS .cluster-label span p{background-color:transparent;}#mermaid-svg-A6JQ9YFKz9OwBteS .label text,#mermaid-svg-A6JQ9YFKz9OwBteS span{fill:#333;color:#333;}#mermaid-svg-A6JQ9YFKz9OwBteS .node rect,#mermaid-svg-A6JQ9YFKz9OwBteS .node circle,#mermaid-svg-A6JQ9YFKz9OwBteS .node ellipse,#mermaid-svg-A6JQ9YFKz9OwBteS .node polygon,#mermaid-svg-A6JQ9YFKz9OwBteS .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-A6JQ9YFKz9OwBteS .rough-node .label text,#mermaid-svg-A6JQ9YFKz9OwBteS .node .label text,#mermaid-svg-A6JQ9YFKz9OwBteS .image-shape .label,#mermaid-svg-A6JQ9YFKz9OwBteS .icon-shape .label{text-anchor:middle;}#mermaid-svg-A6JQ9YFKz9OwBteS .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-A6JQ9YFKz9OwBteS .rough-node .label,#mermaid-svg-A6JQ9YFKz9OwBteS .node .label,#mermaid-svg-A6JQ9YFKz9OwBteS .image-shape .label,#mermaid-svg-A6JQ9YFKz9OwBteS .icon-shape .label{text-align:center;}#mermaid-svg-A6JQ9YFKz9OwBteS .node.clickable{cursor:pointer;}#mermaid-svg-A6JQ9YFKz9OwBteS .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-A6JQ9YFKz9OwBteS .arrowheadPath{fill:#333333;}#mermaid-svg-A6JQ9YFKz9OwBteS .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-A6JQ9YFKz9OwBteS .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-A6JQ9YFKz9OwBteS .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-A6JQ9YFKz9OwBteS .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-A6JQ9YFKz9OwBteS .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-A6JQ9YFKz9OwBteS .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-A6JQ9YFKz9OwBteS .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-A6JQ9YFKz9OwBteS .cluster text{fill:#333;}#mermaid-svg-A6JQ9YFKz9OwBteS .cluster span{color:#333;}#mermaid-svg-A6JQ9YFKz9OwBteS div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-A6JQ9YFKz9OwBteS .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-A6JQ9YFKz9OwBteS rect.text{fill:none;stroke-width:0;}#mermaid-svg-A6JQ9YFKz9OwBteS .icon-shape,#mermaid-svg-A6JQ9YFKz9OwBteS .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-A6JQ9YFKz9OwBteS .icon-shape p,#mermaid-svg-A6JQ9YFKz9OwBteS .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-A6JQ9YFKz9OwBteS .icon-shape rect,#mermaid-svg-A6JQ9YFKz9OwBteS .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-A6JQ9YFKz9OwBteS .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-A6JQ9YFKz9OwBteS .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-A6JQ9YFKz9OwBteS :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}
图像生成节点（如Stable Diffusion节点）
Image Output for Web
Workflow Share Link Generator
Web Viewer Initializer
Web Viewer Controller
八、总结
ComfyUI Web Viewer为ComfyUI的图像生成工作带来了极大的便利，广泛应用于实时预览与调整、团队协作与分享、远程访问与移动办公以及教学与培训等多个场景。与传统方法相比，它在实时反馈、团队协作、跨设备访问和教学展示等方面具有显著优势。通过丰富的节点和详细的参数设置，用户能够灵活地配置Web Viewer，满足不同的使用需求。虽然安装过程可能涉及依赖包兼容性和模型下载等操作（模型下载主要针对ComfyUI本身），且参数调整需要一定的实践来掌握最佳设置，但对于希望提升ComfyUI使用体验和效率的用户来说，ComfyUI Web Viewer是一款极具价值的插件，能够帮助他们更好地管理和分享图像生成工作，进一步拓展ComfyUI在不同领域的应用范围和协作可能性。
评论前必须登录！
注册