第一步：准备 Python 后端（处理 ComfyUI 逻辑）
安装 Python（如果已安装可跳过）：
访问 Python官网，下载最新版本（安装时勾选 Add Python to PATH）。
验证安装：打开终端（Windows 按 Win+R 输入 cmd，Mac 打开 终端），输入：
bash 重击
复制
下载
python --version
如果显示版本号（如 Python 3.9.13）即成功。
安装 Flask（Python 的 Web 框架）：
在终端输入：
bash 重击
复制
下载
pip install flask
创建后端代码文件：
新建一个文件夹（如 my-comfyui-web）。
在文件夹内新建文件 app.py，用记事本（或 VS Code 等编辑器）打开，粘贴以下代码：
python 蟒
复制
下载
from flask import Flask, request, jsonify from flask_cors import CORS # 解决跨域问题 import time # 模拟耗时操作 app = Flask(__name__) CORS(app) # 允许所有域名访问（仅限本地测试） # 示例：替换成你的 ComfyUI 实际执行函数 def comfyui_generate(prompt): # 这里模拟生成图片，保存到本地 # 真实场景需调用你的 ComfyUI 代码生成图片并返回路径 image_path = f"output_{time.time()}.png" with open(image_path, 'wb') as f: f.write(b"Simulated image data") # 生成一个空白文件做测试 return {"status": "success", "image_url": image_path} @app.route('/generate', methods=['POST']) def generate(): data = request.json prompt = data.get('prompt', '') result = comfyui_generate(prompt) return jsonify(result) if __name__ == '__main__': app.run(debug=True, port=5000)
启动后端服务：
在终端进入 my-comfyui-web 文件夹，运行：
bash 重击
复制
下载
python app.py
第二步：创建 HTML 前端界面
在 my-comfyui-web 文件夹内新建文件 index.html，粘贴以下代码：
html HTML 格式
复制
下载
运行
<!DOCTYPE html> <html> <head> <title>简易 ComfyUI 网页版</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } .container { max-width: 800px; margin: 0 auto; } input, button { padding: 10px; font-size: 16px; } #result { margin-top: 20px; max-width: 100%; } </style> </head> <body> <div class="container"> <h1>ComfyUI 本地网页版</h1> <input type="text" id="prompt" placeholder="请输入提示词..." style="width: 300px;"> <button onclick="generate()">生成图像</button> <div id="result"></div> </div> <script> async function generate() { const prompt = document.getElementById('prompt').value; const resultDiv = document.getElementById('result'); resultDiv.innerHTML = '生成中...'; try { const response = await fetch('http://localhost:5000/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: prompt }) }); const data = await response.json(); if (data.status === 'success') { resultDiv.innerHTML = `<img src="${data.image_url}" alt="生成结果">`; } else { resultDiv.innerHTML = '生成失败，请检查控制台'; } } catch (error) { resultDiv.innerHTML = '请求出错：' + error.message; } } </script> </body> </html>
第三步：运行并测试
确保后端正在运行：终端中 python app.py 保持运行状态。
打开前端页面：
测试功能：
连接真实 ComfyUI 逻辑
修改 app.py 中的 comfyui_generate 函数，替换为你的实际生成代码：
python 蟒复制下载
def comfyui_generate(prompt): # 示例：调用 ComfyUI API 或本地函数 # 假设你的 ComfyUI 脚本有一个生成函数 from your_comfyui_script import generate_image # 导入你的真实函数 image_path = generate_image(prompt) # 返回实际图片路径 return {"status": "success", "image_url": image_path}
常见问题解决
图片无法显示：
跨域错误（CORS）：
如果看到浏览器控制台报错关于 CORS，在 app.py 安装并配置更安全的 CORS：
bash 重击
复制
下载
pip install flask-cors
修改代码：
python 蟒
复制
下载
from flask_cors import CORS CORS(app, resources={r"/*": {"origins": "http://localhost"}}) # 仅允许本地访问
端口占用：
通过以上步骤，你可以得到一个基础的本地网页版 ComfyUI。后续可根据需要逐步完善样式、错误提示和功能！
