Qwen3.5-9B实战教程：app.py添加流式输出支持+前端loading状态优化

Qwen3.5-9B实战教程：app.py添加流式输出支持+前端loading状态优化

1. 项目概述

Qwen3.5-9B是一款拥有90亿参数的开源大语言模型，具备强大的逻辑推理、代码生成和多轮对话能力。该模型支持多模态理解（图文输入）和长上下文处理（最高可达128K tokens）。本教程将指导您如何为现有的Gradio WebUI添加流式输出支持，并优化前端loading状态显示。

2. 环境准备

2.1 基础环境

确保您已按照以下配置搭建好基础环境：

# 激活conda环境 conda activate torch28 # 检查关键依赖 pip list | grep -E "transformers|torch|gradio"

2.2 项目结构

/root/qwen3.5-9b/ ├── app.py # 主程序 (待修改) ├── start.sh # 启动脚本 ├── service.log # 运行日志 └── history.json # 对话历史记录

3. 添加流式输出支持

3.1 修改app.py核心代码

在原有代码基础上，我们需要修改模型调用部分以支持流式输出：

from transformers import TextIteratorStreamer from threading import Thread def predict(message, history): # 创建流式输出器 streamer = TextIteratorStreamer(tokenizer, skip_prompt=True) # 准备生成参数 generation_kwargs = dict( inputs=tokenizer(message, return_tensors="pt").to(device), streamer=streamer, max_new_tokens=2048, temperature=0.7, top_p=0.9, do_sample=True ) # 启动生成线程 thread = Thread(target=model.generate, kwargs=generation_kwargs) thread.start() # 逐步返回结果 partial_message = "" for new_token in streamer: partial_message += new_token yield partial_message

3.2 Gradio界面适配

修改Gradio接口定义，启用流式响应：

demo = gr.ChatInterface( predict, chatbot=gr.Chatbot(height=500), textbox=gr.Textbox(placeholder="输入您的问题...", container=False, scale=7), title="Qwen3.5-9B 流式对话", description="体验90亿参数大模型的流式响应能力", theme="soft", examples=["你好", "请用Python写一个快速排序"], cache_examples=False, retry_btn=None, undo_btn=None, clear_btn="清空对话", )

4. 前端loading状态优化

4.1 添加加载动画

在Gradio配置中添加自定义CSS来美化加载状态：

css = """ .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } """ with gr.Blocks(css=css) as demo: # ...原有界面代码... # 添加加载状态提示 loading = gr.HTML(""" <div id="loading" class="hidden text-center py-4"> <div class="animate-pulse text-gray-600"> <svg class="inline w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> <span class="ml-2">Qwen3.5正在思考中...</span> </div> </div> """) # 添加JavaScript控制显示 demo.load( None, None, None, _js=""" () => { document.addEventListener('submit', () => { document.getElementById('loading').classList.remove('hidden'); }); document.addEventListener('response', () => { document.getElementById('loading').classList.add('hidden'); }); } """ )

4.2 响应速度优化

添加模型预热代码，减少首次响应延迟：

# 在启动时预热模型 print("预热模型...") warm_up_text = "模型预热中" inputs = tokenizer(warm_up_text, return_tensors="pt").to(device) _ = model.generate(**inputs, max_new_tokens=1) print("模型预热完成!")

5. 完整部署流程

5.1 修改启动脚本

更新start.sh以包含环境变量：

#!/bin/bash source /opt/miniconda3/etc/profile.d/conda.sh conda activate torch28 python app.py

5.2 Supervisor配置调整

修改/etc/supervisor/conf.d/qwen3.5-9b.conf，增加环境变量：

[program:qwen3.5-9b] environment= HOME="/root", USER="root", PATH="/opt/miniconda3/envs/torch28/bin:%(ENV_PATH)s", PYTHONPATH="/root/qwen3.5-9b", GRADIO_SERVER_NAME="0.0.0.0"

5.3 服务重启

# 重新加载配置 supervisorctl reread supervisorctl update # 重启服务 supervisorctl restart qwen3.5-9b # 查看状态 supervisorctl status qwen3.5-9b

6. 效果验证

6.1 流式输出测试

1. 访问Web界面：http://服务器IP:7860
2. 输入较长问题（如"详细解释量子计算原理"）
3. 观察响应是否逐步显示而非一次性返回

6.2 Loading状态检查

1. 提交问题后应立即显示加载动画
2. 响应开始返回时动画应自动隐藏
3. 长时间无响应时（>30秒）应有超时提示

7. 常见问题解决

7.1 流式输出不工作

检查步骤：

1. 确认transformers版本≥5.0.0
2. 检查CUDA是否正常工作：nvidia-smi
3. 查看日志中是否有线程相关错误

7.2 加载动画不显示

排查方法：

1. 检查浏览器控制台是否有JavaScript错误
2. 确认CSS是否正确加载
3. 检查Gradio版本是否兼容（建议6.x）

7.3 响应速度慢

优化建议：

1. 增加模型预热样本
2. 检查GPU利用率是否达到预期
3. 考虑使用量化模型减少计算量

8. 总结

通过本教程，我们成功为Qwen3.5-9B的Web界面添加了流式输出支持，并优化了前端loading状态显示。这些改进显著提升了用户体验，使对话交互更加自然流畅。关键实现点包括：

1. 使用TextIteratorStreamer实现流式生成
2. 多线程处理避免界面阻塞
3. 自定义CSS美化加载状态
4. JavaScript事件控制显示逻辑
5. 模型预热减少首次响应延迟

这些优化不仅适用于Qwen3.5-9B，也可以应用于其他类似的大语言模型部署场景。

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。