零基础玩转Stable Diffusion v1.5：手把手教你搭建实时图片生成进度条
零基础玩转Stable Diffusion v1.5：手把手教你搭建实时图片生成进度条
1. 为什么需要实时生成进度条？
当你第一次使用Stable Diffusion生成图片时，可能会遇到这样的困惑：点击生成按钮后，界面就像被冻住了一样，没有任何反应。你不知道程序是在工作还是卡住了，只能盯着屏幕干等。这种体验就像在餐厅点完餐后，既看不到厨房的情况，也不知道要等多久——让人既焦虑又无奈。
实时生成进度条就是为了解决这个问题而生的。它能让你：
- 看到图片从模糊到清晰的完整生成过程
- 了解当前生成进度和剩余时间
- 在发现方向不对时及时停止调整
- 更直观地理解AI生成图片的原理
2. 准备工作与环境搭建
2.1 硬件和软件要求
在开始之前，请确保你的设备满足以下要求：
- GPU：NVIDIA显卡（建议显存4GB以上）
- 系统：Linux或Windows（WSL2）
- 网络：能正常访问GitHub和模型下载站点
- 存储空间：至少10GB可用空间
2.2 快速部署Stable Diffusion v1.5
我们将使用Comfy-Org维护的Stable Diffusion v1.5镜像，这是一个轻量级的经典版本，非常适合新手入门。打开终端，执行以下命令：
# 创建项目目录 mkdir ~/realtime-sd && cd ~/realtime-sd # 克隆官方仓库 git clone https://github.com/Comfy-Org/stable-diffusion-v1-5-archive.git # 进入项目目录 cd stable-diffusion-v1-5-archive # 创建Python虚拟环境 python3 -m venv venv source venv/bin/activate # 安装依赖 pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu118 pip install -r requirements.txt pip install websockets pillow fastapi这个安装过程可能需要10-20分钟，具体时间取决于你的网络速度。
3. 构建实时进度系统
3.1 WebSocket服务端实现
WebSocket是实现实时通信的关键技术。创建一个名为websocket_server.py的文件，添加以下代码：
import asyncio import websockets import json import base64 from io import BytesIO from PIL import Image import torch from diffusers import StableDiffusionPipeline # 加载模型 pipe = StableDiffusionPipeline.from_pretrained("runwayml/stable-diffusion-v1-5") pipe = pipe.to("cuda") pipe.enable_attention_slicing() # 减少显存使用 async def generate_with_progress(websocket, prompt): # 告诉前端开始生成 await websocket.send(json.dumps({"type": "start", "total_steps": 20})) # 模拟生成过程 for step in range(20): progress = (step + 1) / 20 # 从第5步开始发送预览图 if step >= 5: # 创建模拟图片（实际项目中使用真实中间结果） img = Image.new('RGB', (256, 256), color=(step*10, step*5, step*15)) buffered = BytesIO() img.save(buffered, format="JPEG", quality=70) img_str = base64.b64encode(buffered.getvalue()).decode() await websocket.send(json.dumps({ "type": "progress", "step": step + 1, "progress": progress, "image": img_str })) else: await websocket.send(json.dumps({ "type": "progress", "step": step + 1, "progress": progress })) await asyncio.sleep(0.5) # 模拟处理时间 # 生成最终图片 image = pipe(prompt=prompt).images[0] buffered = BytesIO() image.save(buffered, format="PNG") final_img = base64.b64encode(buffered.getvalue()).decode() await websocket.send(json.dumps({ "type": "complete", "image": final_img })) async def handler(websocket): async for message in websocket: data = json.loads(message) if data["action"] == "generate": await generate_with_progress(websocket, data["prompt"]) async def main(): async with websockets.serve(handler, "0.0.0.0", 8765): await asyncio.Future() # 永久运行 if __name__ == "__main__": asyncio.run(main())3.2 前端界面设计
创建一个index.html文件，实现进度显示和图片预览功能：
<!DOCTYPE html> <html> <head> <title>实时Stable Diffusion生成器</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } #progress-container { margin: 20px 0; background: #eee; height: 20px; border-radius: 10px; } #progress-bar { height: 100%; width: 0%; background: #4CAF50; border-radius: 10px; transition: width 0.3s; } #preview { max-width: 512px; margin: 20px 0; border: 1px solid #ddd; } textarea { width: 100%; height: 100px; } button { padding: 10px 15px; background: #4CAF50; color: white; border: none; cursor: pointer; } </style> </head> <body> <h1>实时Stable Diffusion生成器</h1> <textarea id="prompt" placeholder="输入你的提示词..."></textarea> <button id="generate">生成图片</button> <div id="progress-container"> <div id="progress-bar"></div> </div> <div id="status">准备就绪</div> <img id="preview" style="display: none;"> <script> const ws = new WebSocket('ws://localhost:8765'); const generateBtn = document.getElementById('generate'); let isGenerating = false; ws.onmessage = (event) => { const data = JSON.parse(event.data); if (data.type === 'start') { document.getElementById('status').textContent = '开始生成...'; isGenerating = true; generateBtn.disabled = true; } else if (data.type === 'progress') { const progress = data.progress * 100; document.getElementById('progress-bar').style.width = `${progress}%`; document.getElementById('status').textContent = `生成中... ${data.step}/${data.total_steps || 20} (${progress.toFixed(1)}%)`; if (data.image) { const preview = document.getElementById('preview'); preview.src = `data:image/jpeg;base64,${data.image}`; preview.style.display = 'block'; } } else if (data.type === 'complete') { document.getElementById('status').textContent = '生成完成!'; document.getElementById('preview').src = `data:image/png;base64,${data.image}`; isGenerating = false; generateBtn.disabled = false; } }; generateBtn.addEventListener('click', () => { const prompt = document.getElementById('prompt').value; if (prompt && !isGenerating) { ws.send(JSON.stringify({ action: 'generate', prompt: prompt })); } }); </script> </body> </html>4. 启动与使用指南
4.1 启动服务
打开两个终端窗口，分别执行以下命令：
# 第一个终端：启动WebSocket服务 python websocket_server.py # 第二个终端：启动Web服务器 python -m http.server 80004.2 访问界面
打开浏览器，访问http://localhost:8000，你将看到：
- 一个文本输入框 - 用于输入图片描述（英文效果更好）
- 生成按钮 - 点击开始生成
- 进度条 - 显示当前生成进度
- 图片预览区 - 实时显示生成中的图片
4.3 使用技巧
- 描述要具体：比如"a cute cat in a garden, sunny day, anime style"
- 从简单开始：先用默认参数生成，再逐步调整
- 观察生成过程：注意图片是如何从模糊变清晰的
- 及时调整：如果发现方向不对，可以刷新页面重新生成
5. 进阶优化与问题解决
5.1 提升生成质量
要获得更好的生成效果，可以尝试：
- 增加生成步数（Steps）：默认20，可以尝试25-30
- 调整引导系数（Guidance Scale）：7-10之间效果较好
- 使用负面提示词：如"ugly, blurry, bad anatomy"
- 固定随机种子（Seed）：找到喜欢的风格后固定种子
5.2 常见问题解决
问题1：生成速度很慢
- 解决方案：降低图片分辨率（如从512x512降到384x384）
- 检查GPU是否正常工作：
nvidia-smi
问题2：预览图不更新
- 检查WebSocket连接是否正常
- 确保服务端和前端都在运行
问题3：显存不足
- 启用注意力切片：
pipe.enable_attention_slicing() - 降低批次大小：不要同时生成多张图片
6. 总结与展望
通过本教程，你已经成功搭建了一个带有实时进度条的Stable Diffusion生成系统。这个系统不仅提升了用户体验，还能帮助你更好地理解AI生成图片的过程。
未来你可以进一步扩展这个系统：
- 添加更多控制参数（如步数、引导系数等）
- 实现历史记录功能，保存生成过程
- 集成更多模型（如SDXL、ControlNet等）
- 开发移动端适配界面
获取更多AI镜像
想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。