搭建Stable Diffusion图像生成系统实现通过网址访问（Ngrok+Flask实现项目系统公网测试，轻量易部署）

在开发项目完系统可能会遇到一个场景，便是自己本地部署的项目系统不方便演示供他人测试使用，这时一个网页接口作用尤为明显，我们可以通过将系统转为web应用供他人访问，相当于提供了一个网址接口，只需要给他人网址即可访问你的系统，这便是我今天做的事情，谢谢观读，我希望看完的收获是至少知道能有一个工具(Ngrok+Flask)可以实现本地系统的联网展示，这通常用在在课程设计、系统项目展示等场景，相当于它提供了远程接口。文中附有我的实现效果。

我最近在本地开发的 PyQt5 图像生成系统通常仅限于Pycharm端口应用程序，无法通过浏览器访问。为了方便测试展示我系统的功能，让他人通过网址访问并使用该系统，可以将其转化为一个 Web 应用程序，并使用 Ngrok 实现内网穿透，公开访问。本文将详细介绍如何将 PyQt5 图像生成系统通过 Flask 和 Ngrok 实现网页化，并提供外部访问。

背景与需求

随着AI图像生成技术的进步，Stable Diffusion 成为当前最为热门的图像生成工具之一。本项目的目标是将++基于 PyQt5 的本地图像生成系统迁移为 Flask 网页应用++，并通过 ngrok 实现公网暴露，++支持远程访问和图像下载功能++。

电脑端效果（网址访问）：

手机端访问网址效果(与电脑端同步)：

点击可另存为：

Ngrok介绍：++ngrok 是一款开源工具++ ，可将本地服务通过安全隧道暴露到公网，支持多种协议，++用于开发测试、远程协助和临时演示等场景++ ，方便快捷且安全可靠。
++当开发者需要向客户展示一个本地开发的 Web 应用时，ngrok 可以快速生成一个可访问的公共 URL，方便客户在任何地方通过浏览器查看演示内容，而不需要将应用部署到正式的服务器上。++

关于Flask的配置，则只需要在项目基础上导入flask包，将代码同步到flask配置对应的程序里，并设置端口。

包安装完成

端口我这里设置为5000

🎯 需求分析

**目标：**将本地运行的 PyQt5 图像生成系统转化为 Web 应用，允许他人通过浏览器访问并使用
**挑战：**PyQt5 是桌面 GUI 库，不适用于 Web 开发；需要将其逻辑迁移到 Flask Web 框架中
**方案：**使用 Flask 构建 Web 接口，复用 PyQt5 的图像生成逻辑，并通过 Ngrok 实现内网穿透，公开访问

核心功能

输入提示词生成图像 ：支持 Stable Diffusion 以及 img2img 生成模式。
调整推理步数和优化强度：自定义生成过程的参数。
持久化历史提示词：使用JSON文件保存历史生成记录。
支持图像查看、删除和下载：方便用户管理生成的图像。

网络优化

确保中国网络环境下URL稳定：使用ngrok或NATAPP优化访问稳定性。

方案确认

1. 安装 Flask 和 Ngrok

首先，确保已安装 Flask 和 Ngro。

复制代码

pip install flak
# 下载 Ngrok 并解压，具体步骤请参考 Ngrok 官方档

2. 构建 Flask 应用

创建一个新的 Python 文件 app.py，并编写以下代码

复制代码

from flask import Flask, request, jsonify
import threading
import time

app = Flask(__name__)

class ImageGenerationThread(threading.Thread):
    def __init__(self, prompt):
        super().__init__()
        self.prompt = prompt
        self.result = None

    def run(self):
        # 模拟图像生成过程
        time.sleep(5)
        self.result = f"Generated image for: {self.prompt}"

@app.route('/generate', methods=['POST'])
def generate_image():
    prompt = request.json.get('prompt')
    if not prompt:
        return jsonify({"error": "No prompt provided"}), 400

    thread = ImageGenerationThread(prompt)
    thread.start()
    thread.join()

    return jsonify({"message": thread.result})

上述代码创建了一个 Flask 应用，并定义了一个 /generate 路由，接受 POST 请求，生成图像并返回结果

3. 使用 Ngrok 实现内网穿透

在终端中运行以下命令，启动 Ngrok 隧道：

复制代码

ngrok http 500

运行后，Ngrok 会提供一个公共 URL，例：

复制代码

Forwarding https://xxxxxx.ngrok.io -> http://localhost:500

通过该 URL，外部用户可以访问你配置的 Flask 应用。

4. 测试图像生成接口

使用 Postman 或 cURL 向 /generate 路由发送 POST 请求：

复制代码

curl -X POST https://xxxxxx.ngrok.io/generate -H "Content-Type: application/json" -d '{"prompt": "A beautiful sunset over the mountains"'

{
    "message": "Generated image for: A beautiful sunset over the mountains"}

技术栈

后端：Flask (Python)
前端：HTML + CSS
模型：Stable Diffusion v1.5
内网穿透：ngrok（备用NATAPP）

实现流程

从PyQt5提取图像生成逻辑，迁移到Flask：实现图像生成的Web接口。
用JSON文件保存历史提示词：避免每次启动时丢失历史记录。
添加图像下载功能：允许用户下载生成的图像。
配置ngrok暴露服务：通过公网URL进行访问。

优化目标

修复"未知提示词"显示问题：确保历史提示词能够正确加载。
支持推理参数调整：允许用户自定义生成过程的步数和优化强度。
确保下载功能在公网可用：测试并确认公网环境下的图像下载流畅。

实现细节

1. 迁移到Flask

PyQt5分析：提取图像生成逻辑和历史管理部分。
Flask设计：
- 创建 app.py，定义路由处理提示词输入和图像生成。
- 使用 render_template_string 渲染HTML界面。
模型加载：
- 全局加载 Stable Diffusion 模型，避免每次请求时重新初始化。

2. 持久化提示词

问题：重启后提示词显示为"未知提示词"。
解决方案：
- 使用 history.json 文件保存历史数据。
- 每次生成或删除图像时更新JSON文件。
- 启动时从JSON文件加载历史记录。

3. 图像下载功能

实现：
- 添加 /download/<filename> 路由，使用 send_file(as_attachment=True) 进行文件发送。
- 在HTML中为历史记录添加下载链接。
验证：
- 通过ngrok提供的公网URL测试图像下载功能。
  
  点击另存为如下，弹出：

4. 配置ngrok

步骤：
- 注册ngrok，获取 authtoken。
- 运行 ngrok config add-authtoken <token>。
  
  链接端口
  
  cd D:\应用\app\ngrok-v3-stable-windows-amd64
  
  ngrok.exe http 5000
- 启动Flask后，运行 ngrok http 5000，获取公网URL。
网络优化：
- 在国内网络环境下，使用VPN或NATAPP确保网络稳定性。

优化过程

提示词持久化：通过JSON文件解决"未知提示词"问题，保证每次启动时历史提示词正确显示。
下载功能：从仅能查看图像升级为支持图像下载。
网络稳定性：若ngrok不稳定时，及时切换为NATAPP。

最终效果

本地访问 ：http://localhost:5000 功能完整，图像生成和管理顺畅。
公网访问：通过ngrok生成的URL，支持图像生成、查看、删除和下载。
用户体验：提示词正常显示，下载功能流畅，满足用户需求。

总结

本项目成功将原本基于PyQt5的图像生成系统迁移为Flask Web应用，并通过ngrok实现公网访问。通过优化提示词持久化机制和图像下载功能，进一步提升了用户体验。未来可以考虑扩展更多功能，如图像上传和更复杂的生成模式。
Stable Diffusion+Pyqt5：实现图像生成与管理界面（带保存 + 历史记录 + 删除功能）------我的实验记录（结尾附系统效果图）-CSDN博客