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|gradio2.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_promptTrue) # 准备生成参数 generation_kwargs dict( inputstokenizer(message, return_tensorspt).to(device), streamerstreamer, max_new_tokens2048, temperature0.7, top_p0.9, do_sampleTrue ) # 启动生成线程 thread Thread(targetmodel.generate, kwargsgeneration_kwargs) thread.start() # 逐步返回结果 partial_message for new_token in streamer: partial_message new_token yield partial_message3.2 Gradio界面适配修改Gradio接口定义启用流式响应demo gr.ChatInterface( predict, chatbotgr.Chatbot(height500), textboxgr.Textbox(placeholder输入您的问题..., containerFalse, scale7), titleQwen3.5-9B 流式对话, description体验90亿参数大模型的流式响应能力, themesoft, examples[你好, 请用Python写一个快速排序], cache_examplesFalse, retry_btnNone, undo_btnNone, 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(csscss) as demo: # ...原有界面代码... # 添加加载状态提示 loading gr.HTML( div idloading classhidden text-center py-4 div classanimate-pulse text-gray-600 svg classinline w-6 h-6 fillnone strokecurrentColor viewBox0 0 24 24 path stroke-linecapround stroke-linejoinround stroke-width2 dM12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z/path /svg span classml-2Qwen3.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_tensorspt).to(device) _ model.generate(**inputs, max_new_tokens1) print(模型预热完成!)5. 完整部署流程5.1 修改启动脚本更新start.sh以包含环境变量#!/bin/bash source /opt/miniconda3/etc/profile.d/conda.sh conda activate torch28 python app.py5.2 Supervisor配置调整修改/etc/supervisor/conf.d/qwen3.5-9b.conf增加环境变量[program:qwen3.5-9b] environment HOME/root, USERroot, PATH/opt/miniconda3/envs/torch28/bin:%(ENV_PATH)s, PYTHONPATH/root/qwen3.5-9b, GRADIO_SERVER_NAME0.0.0.05.3 服务重启# 重新加载配置 supervisorctl reread supervisorctl update # 重启服务 supervisorctl restart qwen3.5-9b # 查看状态 supervisorctl status qwen3.5-9b6. 效果验证6.1 流式输出测试访问Web界面http://服务器IP:7860输入较长问题如详细解释量子计算原理观察响应是否逐步显示而非一次性返回6.2 Loading状态检查提交问题后应立即显示加载动画响应开始返回时动画应自动隐藏长时间无响应时30秒应有超时提示7. 常见问题解决7.1 流式输出不工作检查步骤确认transformers版本≥5.0.0检查CUDA是否正常工作nvidia-smi查看日志中是否有线程相关错误7.2 加载动画不显示排查方法检查浏览器控制台是否有JavaScript错误确认CSS是否正确加载检查Gradio版本是否兼容建议6.x7.3 响应速度慢优化建议增加模型预热样本检查GPU利用率是否达到预期考虑使用量化模型减少计算量8. 总结通过本教程我们成功为Qwen3.5-9B的Web界面添加了流式输出支持并优化了前端loading状态显示。这些改进显著提升了用户体验使对话交互更加自然流畅。关键实现点包括使用TextIteratorStreamer实现流式生成多线程处理避免界面阻塞自定义CSS美化加载状态JavaScript事件控制显示逻辑模型预热减少首次响应延迟这些优化不仅适用于Qwen3.5-9B也可以应用于其他类似的大语言模型部署场景。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。