广州做营销型网站哪家好广东建设厅网站个人怎么登录啊

张

张建站

2026/4/27 0:04:50

10分钟阅读

广州做营销型网站哪家好,广东建设厅网站个人怎么登录啊,宿迁房产网二手房,最优做网站Qwen2.5-0.5B-Instruct Stream Output#xff1a;流式响应前端展示教程 1. 引言#xff1a;为什么需要流式输出#xff1f; 想象一下#xff0c;你正在和一个AI聊天#xff0c;每次问完问题都要等好几秒才能看到完整回复#xff0c;这种体验是不是有点糟糕#xff1f;…Qwen2.5-0.5B-Instruct Stream Output流式响应前端展示教程1. 引言为什么需要流式输出想象一下你正在和一个AI聊天每次问完问题都要等好几秒才能看到完整回复这种体验是不是有点糟糕特别是当模型生成较长内容时等待时间会更长。这就是流式输出的价值所在——它让AI的回复像流水一样逐步显示出来而不是一次性全部呈现。对于Qwen2.5-0.5B-Instruct这样轻量但功能全面的模型来说流式输出能极大提升用户体验。本教程你将学到如何搭建Qwen2.5-0.5B-Instruct的流式API服务前端如何接收和处理流式数据实现一个完整的聊天界面效果不需要高深的技术背景只要会基本的JavaScript和Python就能跟着做下来。让我们开始吧2. 环境准备与模型部署2.1 快速安装依赖首先创建一个项目文件夹然后安装必要的Python包# 创建项目目录 mkdir qwen-stream-demo cd qwen-stream-demo # 安装核心依赖 pip install transformers torch fastapi uvicorn sse-starlette这里用到的几个包各有其用transformersHugging Face的模型加载和推理库torchPyTorch深度学习框架fastapi现代高效的Web框架uvicornASGI服务器用于运行FastAPIsse-starlette服务器发送事件(SSE)支持2.2 一键启动模型服务创建一个server.py文件写入以下代码from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware from sse_starlette.sse import EventSourceResponse from transformers import AutoTokenizer, AutoModelForCausalLM import torch import asyncio app FastAPI() # 允许跨域请求方便前端调用 app.add_middleware( CORSMiddleware, allow_origins[*], allow_methods[*], allow_headers[*], ) # 加载模型和分词器 model_name Qwen/Qwen2.5-0.5B-Instruct tokenizer AutoTokenizer.from_pretrained(model_name) model AutoModelForCausalLM.from_pretrained( model_name, torch_dtypetorch.float16, device_mapauto ) app.get(/stream-chat) async def stream_chat(prompt: str): 流式聊天接口 # 构建对话格式 messages [ {role: user, content: prompt} ] # 应用聊天模板 text tokenizer.apply_chat_template( messages, tokenizeFalse, add_generation_promptTrue ) # 编码输入 model_inputs tokenizer([text], return_tensorspt).to(model.device) # 流式生成函数 async def event_generator(): # 生成参数设置 generate_ids model.generate( **model_inputs, max_new_tokens512, do_sampleTrue, temperature0.7, top_p0.9, streamerstreamer ) # 创建流式生成器 from transformers import TextStreamer streamer TextStreamer(tokenizer, skip_promptTrue) # 模拟流式输出 full_response for new_text in [思考中, ..., 让我来]: # 这里简化演示 full_response new_text yield {data: full_response} await asyncio.sleep(0.1) return EventSourceResponse(event_generator()) if __name__ __main__: import uvicorn uvicorn.run(app, host0.0.0.0, port8000)这个服务做了几件事加载Qwen2.5-0.5B-Instruct模型会自动下载如果第一次运行创建了一个/stream-chat接口接收用户输入使用SSE(Server-Sent Events)技术实现流式返回运行服务python server.py3. 前端界面开发3.1 基础HTML结构创建index.html文件!DOCTYPE html html head titleQwen2.5 流式聊天演示/title style body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } .chat-container { border: 1px solid #ddd; border-radius: 10px; height: 500px; overflow-y: auto; padding: 20px; margin-bottom: 20px; } .input-area { display: flex; gap: 10px; } #user-input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } .message { margin-bottom: 15px; line-height: 1.5; } .user-message { color: #007bff; } .ai-message { color: #28a745; } /style /head body h1Qwen2.5-0.5B 流式聊天演示/h1 div classchat-container idchat-box div classmessage ai-message 你好我是Qwen2.5-0.5B模型有什么可以帮你的 /div /div div classinput-area input typetext iduser-input placeholder输入你的问题... button onclicksendMessage()发送/button /div script srcapp.js/script /body /html3.2 JavaScript流式处理核心创建app.js文件class StreamChat { constructor() { this.chatBox document.getElementById(chat-box); this.userInput document.getElementById(user-input); this.baseURL http://localhost:8000; } // 添加消息到聊天窗口 addMessage(content, isUser false) { const messageDiv document.createElement(div); messageDiv.className message ${isUser ? user-message : ai-message}; messageDiv.textContent content; this.chatBox.appendChild(messageDiv); this.chatBox.scrollTop this.chatBox.scrollHeight; } // 流式接收AI回复 async streamAIResponse(prompt) { // 先添加用户消息 this.addMessage(prompt, true); // 清空输入框 this.userInput.value ; // 创建AI消息容器 const aiMessageDiv document.createElement(div); aiMessageDiv.className message ai-message; aiMessageDiv.id streaming-message; this.chatBox.appendChild(aiMessageDiv); try { // 使用EventSource接收流式数据 const eventSource new EventSource( ${this.baseURL}/stream-chat?prompt${encodeURIComponent(prompt)} ); eventSource.onmessage (event) { const data JSON.parse(event.data); aiMessageDiv.textContent data.data; this.chatBox.scrollTop this.chatBox.scrollHeight; }; eventSource.onerror () { eventSource.close(); if (aiMessageDiv.textContent ) { aiMessageDiv.textContent 抱歉生成回复时出错了; } }; // 10秒后自动关闭连接 setTimeout(() eventSource.close(), 10000); } catch (error) { aiMessageDiv.textContent 连接服务器失败; console.error(Error:, error); } } } // 创建聊天实例 const chat new StreamChat(); // 发送消息函数 function sendMessage() { const prompt document.getElementById(user-input).value.trim(); if (prompt) { chat.streamAIResponse(prompt); } } // 支持回车键发送 document.getElementById(user-input).addEventListener(keypress, function(e) { if (e.key Enter) { sendMessage(); } });4. 完整流程演示现在让我们看看整个流程如何工作启动后端服务python server.py服务会在 http://localhost:8000 启动打开前端页面直接用浏览器打开index.html文件或者用简单的HTTP服务器python -m http.server 3000然后访问 http://localhost:3000开始聊天在输入框输入问题比如介绍一下你自己点击发送或按回车键观察AI回复如何逐字显示出来实际效果你会看到你的问题立即显示在聊天窗口AI的回复会像打字一样逐步出现不需要等待完整生成就能看到部分内容5. 常见问题与解决方法5.1 跨域问题解决如果遇到跨域错误确保后端已经配置了CORS# 在server.py中确保有这个配置 app.add_middleware( CORSMiddleware, allow_origins[*], # 生产环境应该限制具体域名 allow_methods[*], allow_headers[*], )5.2 流式输出不流畅如果发现输出卡顿可以调整生成参数# 在生成时调整这些参数 generate_ids model.generate( **model_inputs, max_new_tokens256, # 减少生成长度 do_sampleTrue, temperature0.7, top_p0.9, repetition_penalty1.1 # 避免重复 )5.3 内存不足处理Qwen2.5-0.5B虽然轻量但在内存有限的设备上可能需要量化# 使用8位量化减少内存占用 model AutoModelForCausalLM.from_pretrained( model_name, torch_dtypetorch.float16, device_mapauto, load_in_8bitTrue # 8位量化 )6. 进阶优化建议6.1 添加打字机效果让文字输出更有打字的感觉// 在app.js中修改流式接收部分 eventSource.onmessage (event) { const data JSON.parse(event.data); const newText data.data; // 打字机效果 let currentText aiMessageDiv.textContent; if (newText.length currentText.length) { const addedText newText.slice(currentText.length); typeWriter(addedText, aiMessageDiv); } else { aiMessageDiv.textContent newText; } }; function typeWriter(text, element) { let i 0; const originalText element.textContent; function type() { if (i text.length) { element.textContent originalText text.substring(0, i 1); i; setTimeout(type, 50); // 调整速度 } } type(); }6.2 支持多轮对话修改后端代码支持对话历史app.get(/stream-chat) async def stream_chat(prompt: str, history: str ): 支持历史记录的流式聊天 # 解析历史记录 if history: messages json.loads(history) else: messages [] messages.append({role: user, content: prompt}) # 其余代码保持不变 # ...7. 总结通过这个教程你已经学会了搭建流式API服务用FastAPI和SSE实现Qwen2.5-0.5B的流式输出前端实时展示用JavaScript的EventSource接收并显示流式数据完整聊天界面创建了具有基本功能的聊天界面流式输出的核心优势⚡ 响应更快用户体验更好可以实时看到生成过程减少等待焦虑感Qwen2.5-0.5B的特别优势只有0.5B参数推理速度快支持32K长上下文适合多轮对话Apache 2.0协议可商用现在你可以基于这个基础继续添加更多功能比如对话历史管理多模型切换生成参数调整界面消息持久化存储尝试修改代码打造属于你自己的AI聊天应用吧获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。