当前位置：首页 > news >正文

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

news 来源：原创 2025/7/5 14:47:11

前言

背景与需求

🎯 需求分析

核心功能

网络优化

方案确认

1. 安装 Flask 和 Ngrok

2. 构建 Flask 应用

3. 使用 Ngrok 实现内网穿透

4. 测试图像生成接口

技术栈

实现流程

优化目标

实现细节

1. 迁移到Flask

2. 持久化提示词

3. 图像下载功能

4. 配置ngrok

优化过程

最终效果

总结

前言

在开发项目完系统可能会遇到一个场景，便是自己本地部署的项目系统不方便演示供他人测试使用，这时一个网页接口作用尤为明显，我们可以通过将系统转为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 timeapp = Flask(__name__)class ImageGenerationThread(threading.Thread):def __init__(self, prompt):super().__init__()self.prompt = promptself.result = Nonedef 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"}), 400thread = 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博客

前言

背景与需求

🎯 需求分析

核心功能

网络优化

方案确认

1. 安装 Flask 和 Ngrok

2. 构建 Flask 应用

3. 使用 Ngrok 实现内网穿透

4. 测试图像生成接口

技术栈

实现流程

优化目标

实现细节

1. 迁移到Flask

2. 持久化提示词

3. 图像下载功能

4. 配置ngrok

优化过程

最终效果

总结

相关文章：