模拟 ComfyUI 应用

下面我将创建一个简单的 Flask 应用程序，它模拟 ComfyUI 的功能，但不实际生成图片，而是返回一些数字来模拟生成的图像。这将帮助您学习如何构建和处理 API。

应用概述

  • 用户通过网页表单输入提示词并点击按钮。
  • 应用接收到请求后，返回一个数字（代表生成的图像），并在网页上显示这个数字。

解决方法

  1. 创建模板文件夹: Flask 查找模板文件的默认位置是在应用根目录下的 templates 文件夹。您需要确保创建此文件夹，并将 index.html 文件放入该文件夹中。
  2. 文件结构调整: 请确保您的应用文件结构如下：
C:\
└── AI\
    └── simulated_comfyui\
        ├── app.py
        └── templates\
            └── index.html

详细步骤

  1. 在 C:\AI\simulated_comfyui 路径下创建一个名为 templates 的文件夹。
  2. 将 index.html 文件移动到 templates 文件夹中。
  3. 运行 Flask 应用，确保文件结构如下：
C:\
└── AI\
    └── simulated_comfyui\
        ├── app.py
        └── templates\
            └── index.html

确保 app.py 文件

您的 app.py 文件无需修改，确保它包含以下内容：

from flask import Flask, request, jsonify, render_template
import random

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/generate_image', methods=['POST'])
def generate_image():
    prompt_text = request.form.get("prompt_text")
  
    if prompt_text is None or prompt_text.strip() == "":
        return jsonify({"status": "error", "message": "提示词不能为空"}), 400

    # 模拟图像生成，生成一个随机数字以代替图像
    generated_image_id = random.randint(1, 100)  # 生成1到100之间的随机数字
    return jsonify({"status": "success", "generated_image": generated_image_id}), 200

if __name__ == "__main__":
    app.run(port=5000)

重新运行应用

  1. 在终端中导航到 C:\AI\simulated_comfyui 目录。

  2. 运行以下命令启动 Flask 应用：

    python app.py

  3. 在浏览器中访问 http://127.0.0.1:5000/，查看是否能正确加载页面。

总结

通过确保模板文件位于 templates 文件夹下，Flask 应该能够找到 index.html 并成功渲染页面。

2. index.html

这是前端 HTML 代码，用于创建表单。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟 ComfyUI 应用</title>
</head>
<body>
    <h1>模拟 ComfyUI 应用</h1>
    <form id="generate-form">
        <label for="prompt_text">提示词:</label>
        <input type="text" id="prompt_text" name="prompt_text" required>
        <br>
        <button type="submit">生成图像</button>
    </form>
    <h2>生成的图像 ID</h2>
    <p id="generatedImage" style="display:none;"></p>
  
    <script>
        document.getElementById('generate-form').onsubmit = async (e) => {
            e.preventDefault();
            const formData = new FormData(e.target);
            const response = await fetch('/generate_image', {
                method: 'POST',
                body: formData
            });
            const result = await response.json();
            if (result.status === 'success') {
                document.getElementById('generatedImage').textContent = `生成的图像 ID: ${result.generated_image}`;
                document.getElementById('generatedImage').style.display = 'block';
            } else {
                alert(result.message);
            }
        };
    </script>
</body>
</html>

运行步骤

  1. 安装 Flask: 如果您尚未安装 Flask，可以使用以下命令安装：

    pip install Flask

  2. 创建文件: 按上述结构创建 app.py 和 index.html 文件。

  3. 运行应用: 在终端中导航到 C:\AI\simulated_comfyui 目录，并运行以下命令启动 Flask 应用：

    python app.py

  4. 访问应用: 打开浏览器并访问 http://127.0.0.1:5000/，您将看到一个简单的表单。

  5. 生成数字: 输入提示词并点击“生成图像”按钮，您将看到生成的数字 ID。