DASD-4B-Thinking与Vue3前端集成实战1. 引言想象一下你正在开发一个智能问答系统用户在前端输入问题系统不仅能快速回答还能展示AI的思考过程。这种实时推理展示的需求在现代Web应用中越来越常见。今天我们就来聊聊如何将DASD-4B-Thinking这个强大的推理模型与Vue3前端框架完美结合构建出既智能又用户友好的Web应用。DASD-4B-Thinking是一个具备多步推理能力的开源模型特别擅长处理需要逻辑思考的复杂问题。而Vue3作为现代前端开发的主流框架提供了响应式数据和组件化开发的优秀体验。将两者结合可以创造出真正智能的Web应用。本文将手把手带你完成从模型部署到前端集成的完整流程包括API设计、前后端交互、实时推理展示等关键环节。无论你是前端开发者想了解AI集成还是后端工程师想学习Vue3对接都能从这里获得实用的开发指南。2. 环境准备与模型部署2.1 系统要求与依赖安装在开始之前确保你的开发环境满足以下要求操作系统Ubuntu 20.04 或 CentOS 8GPUNVIDIA GPU with 8GB VRAM推荐16GB以上内存16GB RAM minimum软件依赖Python 3.9, Node.js 16, Docker首先安装必要的Python依赖# 创建虚拟环境 python -m venv dasd-env source dasd-env/bin/activate # 安装核心依赖 pip install vllm transformers fastapi uvicorn2.2 使用vLLM部署模型vLLM是一个高性能的推理引擎专门优化了大语言模型的推理速度。我们用它可以轻松部署DASD-4B-Thinking模型# deploy_model.py from vllm import LLM, SamplingParams # 初始化模型 llm LLM( modelDASD-4B-Thinking, tensor_parallel_size1, gpu_memory_utilization0.8, max_model_len4096 ) # 定义采样参数 sampling_params SamplingParams( temperature0.7, top_p0.9, max_tokens1024 )启动模型服务python -m vllm.entrypoints.api_server \ --model DASD-4B-Thinking \ --port 8000 \ --host 0.0.0.0这样就在本地8000端口启动了一个模型推理服务。3. API设计与后端服务3.1 设计RESTful API接口为了让前端能够与模型交互我们需要设计清晰的API接口。主要包含两个核心端点# main.py from fastapi import FastAPI, HTTPException from fastapi.middleware.cors import CORSMiddleware from pydantic import BaseModel from typing import List, Optional app FastAPI(titleDASD-4B-Thinking API) # 允许跨域请求 app.add_middleware( CORSMiddleware, allow_origins[*], allow_methods[*], allow_headers[*], ) class ChatRequest(BaseModel): message: str conversation_history: Optional[List[dict]] None max_tokens: Optional[int] 1024 class ChatResponse(BaseModel): response: str thinking_process: List[str] tokens_used: int3.2 实现推理端点接下来实现主要的聊天端点这里会处理用户输入并返回模型的思考和回复app.post(/api/chat) async def chat_endpoint(request: ChatRequest): try: # 构建提示词包含思考过程要求 prompt build_thinking_prompt( request.message, request.conversation_history ) # 调用vLLM进行推理 outputs llm.generate( prompt, sampling_params ) # 解析模型的思考和最终回复 thinking, response parse_thinking_output( outputs[0].text ) return ChatResponse( responseresponse, thinking_processthinking, tokens_usedlen(outputs[0].token_ids) ) except Exception as e: raise HTTPException(status_code500, detailstr(e)) def build_thinking_prompt(message, historyNone): 构建包含思考过程要求的提示词 prompt 请逐步思考以下问题然后给出最终答案\n\n if history: for turn in history[-5:]: # 保留最近5轮对话 prompt f用户: {turn[user]}\n prompt f助手: {turn[assistant]}\n\n prompt f问题: {message}\n\n思考过程: return prompt def parse_thinking_output(text): 解析模型的输出分离思考过程和最终答案 lines text.split(\n) thinking [] response for line in lines: if line.startswith(最终答案:): response line.replace(最终答案:, ).strip() elif line.strip() and not line.startswith(问题:): thinking.append(line.strip()) return thinking, response启动FastAPI服务uvicorn main:app --reload --port 8001现在你的后端服务就在8001端口运行了可以通过http://localhost:8001/api/chat进行测试。4. Vue3前端集成4.1 创建Vue3项目并安装依赖使用Vite创建新的Vue3项目npm create vitelatest dasd-vue-app -- --template vue cd dasd-vue-app npm install axios lucide-vue-next # 安装HTTP客户端和图标库4.2 设计聊天界面组件创建主要的聊天界面组件!-- src/components/ChatInterface.vue -- template div classchat-container div classchat-header h2智能问答助手/h2 p基于DASD-4B-Thinking模型/p /div div classchat-messages refmessagesContainer div v-for(message, index) in messages :keyindex :class[message, message.role] div classmessage-content {{ message.content }} /div div v-ifmessage.thinking classthinking-process h4思考过程:/h4 div v-for(step, stepIndex) in message.thinking :keystepIndex classthinking-step {{ step }} /div /div /div /div div classchat-input textarea v-modeluserInput placeholder请输入您的问题... keydown.entersendMessage rows3 / button clicksendMessage :disabledisLoading span v-if!isLoading发送/span span v-else思考中.../span /button /div /div /template script setup import { ref, computed, nextTick, watch } from vue import axios from axios const userInput ref() const messages ref([]) const isLoading ref(false) const messagesContainer ref(null) const sendMessage async () { if (!userInput.value.trim() || isLoading.value) return const userMessage userInput.value.trim() userInput.value messages.value.push({ role: user, content: userMessage }) isLoading.value true scrollToBottom() try { const response await axios.post(http://localhost:8001/api/chat, { message: userMessage, conversation_history: messages.value .filter(m m.role user || m.role assistant) .map(m ({ user: m.role user ? m.content : , assistant: m.role assistant ? m.content : })) }) messages.value.push({ role: assistant, content: response.data.response, thinking: response.data.thinking_process }) } catch (error) { messages.value.push({ role: assistant, content: 抱歉发生了错误 error.message }) } finally { isLoading.value false scrollToBottom() } } const scrollToBottom () { nextTick(() { if (messagesContainer.value) { messagesContainer.value.scrollTop messagesContainer.value.scrollHeight } }) } // 自动滚动到底部 watch(messages, scrollToBottom, { deep: true }) /script style scoped .chat-container { max-width: 800px; margin: 0 auto; height: 100vh; display: flex; flex-direction: column; } .chat-messages { flex: 1; overflow-y: auto; padding: 20px; } .message { margin-bottom: 20px; } .message.user { text-align: right; } .message-content { padding: 12px; border-radius: 12px; display: inline-block; max-width: 70%; } .message.user .message-content { background-color: #007bff; color: white; } .message.assistant .message-content { background-color: #f1f3f5; color: #333; } .thinking-process { margin-top: 10px; padding: 10px; background-color: #f8f9fa; border-radius: 8px; border-left: 4px solid #28a745; } .thinking-step { padding: 5px 0; color: #666; font-size: 0.9em; } .chat-input { padding: 20px; background-color: white; border-top: 1px solid #dee2e6; display: flex; gap: 10px; } .chat-input textarea { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 8px; resize: vertical; } .chat-input button { padding: 12px 24px; background-color: #007bff; color: white; border: none; border-radius: 8px; cursor: pointer; } .chat-input button:disabled { background-color: #ccc; cursor: not-allowed; } /style4.3 实现实时推理展示为了增强用户体验我们添加打字机效果和思考过程动画!-- src/components/AnimatedResponse.vue -- template div classanimated-response div v-ifisThinking classthinking-animation div classthinking-dots span/span span/span span/span /div span模型正在思考中.../span /div div v-else classresponse-content div v-for(step, index) in thinkingSteps :keystep- index classthinking-step animated {{ step }} /div div classfinal-answer strong最终答案:/strong p{{ finalAnswer }}/p /div /div /div /template script setup import { ref, watch, onMounted } from vue const props defineProps({ thinking: Array, response: String, isStreaming: Boolean }) const thinkingSteps ref([]) const finalAnswer ref() const isThinking ref(true) // 模拟流式输出效果 watch(() props.isStreaming, (newVal) { if (!newVal props.thinking) { animateThinkingProcess() } }) const animateThinkingProcess async () { isThinking.value false thinkingSteps.value [] finalAnswer.value // 逐步显示思考过程 for (const step of props.thinking) { await new Promise(resolve setTimeout(resolve, 500)) thinkingSteps.value.push(step) } // 显示最终答案 await new Promise(resolve setTimeout(resolve, 300)) finalAnswer.value props.response } /script style scoped .thinking-animation { display: flex; align-items: center; gap: 10px; color: #666; } .thinking-dots { display: flex; gap: 4px; } .thinking-dots span { width: 6px; height: 6px; border-radius: 50%; background-color: #007bff; animation: bounce 1.4s infinite ease-in-out both; } .thinking-dots span:nth-child(1) { animation-delay: -0.32s; } .thinking-dots span:nth-child(2) { animation-delay: -0.16s; } keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .thinking-step.animated { opacity: 0; animation: fadeIn 0.5s ease-in forwards; } keyframes fadeIn { to { opacity: 1; } } .final-answer { margin-top: 20px; padding: 15px; background-color: #e8f5e8; border-radius: 8px; border-left: 4px solid #28a745; } /style5. 前后端交互优化5.1 处理跨域和安全性在生产环境中需要配置正确的CORS设置和安全策略# backend/middleware/cors.py from fastapi.middleware.cors import CORSMiddleware def setup_cors(app): app.add_middleware( CORSMiddleware, allow_origins[ http://localhost:3000, https://yourdomain.com ], allow_credentialsTrue, allow_methods[*], allow_headers[*], expose_headers[*] )5.2 实现流式传输为了更好的用户体验实现流式传输响应# backend/streaming.py from fastapi import Response from fastapi.responses import StreamingResponse import json async def stream_thinking_response(prompt): 流式传输模型的思考过程 async for chunk in llm.generate_stream(prompt, sampling_params): if chunk.text: # 解析部分响应 if 思考过程: in chunk.text: thinking_part chunk.text.split(思考过程:)[1] if 最终答案: in thinking_part: thinking_part thinking_part.split(最终答案:)[0] yield fdata: {json.dumps({type: thinking, content: thinking_part})}\n\n elif 最终答案: in chunk.text: answer_part chunk.text.split(最终答案:)[1] yield fdata: {json.dumps({type: answer, content: answer_part})}\n\n app.post(/api/chat/stream) async def chat_stream(request: ChatRequest): prompt build_thinking_prompt(request.message, request.conversation_history) return StreamingResponse( stream_thinking_response(prompt), media_typetext/event-stream )前端对应的流式处理// src/composables/useStreamingChat.js import { ref } from vue export function useStreamingChat() { const streamedThinking ref([]) const streamedAnswer ref() const isStreaming ref(false) const streamChat async (message) { isStreaming.value true streamedThinking.value [] streamedAnswer.value try { const response await fetch(http://localhost:8001/api/chat/stream, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ message }) }) const reader response.body.getReader() const decoder new TextDecoder() while (true) { const { done, value } await reader.read() if (done) break const chunk decoder.decode(value) const lines chunk.split(\n\n).filter(line line.startsWith(data: )) for (const line of lines) { const data JSON.parse(line.replace(data: , )) if (data.type thinking) { streamedThinking.value.push(data.content) } else if (data.type answer) { streamedAnswer.value data.content } } } } catch (error) { console.error(Streaming error:, error) } finally { isStreaming.value false } } return { streamedThinking, streamedAnswer, isStreaming, streamChat } }6. 部署与性能优化6.1 生产环境部署使用Docker容器化部署# backend/Dockerfile FROM python:3.9-slim WORKDIR /app COPY requirements.txt . RUN pip install -r requirements.txt COPY . . EXPOSE 8001 CMD [uvicorn, main:app, --host, 0.0.0.0, --port, 8001]# frontend/Dockerfile FROM node:16-alpine as build WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build FROM nginx:alpine COPY --frombuild /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf6.2 性能优化建议模型推理优化# 使用批处理提高吞吐量 llm LLM( modelDASD-4B-Thinking, enable_prefix_cachingTrue, max_num_seqs16, max_num_batched_tokens4096 )前端性能优化// 使用虚拟滚动处理长对话历史 import { useVirtualizer } from tanstack/vue-virtual const virtualizer useVirtualizer({ count: messages.value.length, getScrollElement: () messagesContainer.value, estimateSize: () 100, overscan: 5 })缓存策略# 使用Redis缓存常见问题的回答 from redis import Redis import hashlib redis Redis(hostlocalhost, port6379, db0) def get_cache_key(message, history): content message .join( f{h[user]}{h[assistant]} for h in history or [] ) return hashlib.md5(content.encode()).hexdigest() app.post(/api/chat) async def chat_endpoint(request: ChatRequest): cache_key get_cache_key(request.message, request.conversation_history) cached redis.get(cache_key) if cached: return ChatResponse(**json.loads(cached)) # ...处理逻辑... # 缓存结果 redis.setex(cache_key, 3600, json.dumps(response.dict())) return response7. 总结通过本文的实践我们成功将DASD-4B-Thinking模型与Vue3前端框架进行了深度集成构建了一个功能完整的智能问答应用。从模型部署、API设计到前端交互每个环节都提供了详细的实现方案和代码示例。这种集成方式的好处很明显用户可以看到AI的思考过程增强了对话的透明度和信任感。流式传输和动画效果让交互更加自然流畅提升了用户体验。在实际项目中你可能还需要考虑更多的细节比如错误处理、加载状态、对话历史管理等。但本文提供的框架已经涵盖了核心功能可以作为你项目开发的坚实基础。最重要的是这种架构是通用的你可以很容易地适配其他支持思考过程的模型。希望这篇文章能为你开发智能Web应用提供有价值的参考和启发。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
DASD-4B-Thinking与Vue3前端集成实战
DASD-4B-Thinking与Vue3前端集成实战1. 引言想象一下你正在开发一个智能问答系统用户在前端输入问题系统不仅能快速回答还能展示AI的思考过程。这种实时推理展示的需求在现代Web应用中越来越常见。今天我们就来聊聊如何将DASD-4B-Thinking这个强大的推理模型与Vue3前端框架完美结合构建出既智能又用户友好的Web应用。DASD-4B-Thinking是一个具备多步推理能力的开源模型特别擅长处理需要逻辑思考的复杂问题。而Vue3作为现代前端开发的主流框架提供了响应式数据和组件化开发的优秀体验。将两者结合可以创造出真正智能的Web应用。本文将手把手带你完成从模型部署到前端集成的完整流程包括API设计、前后端交互、实时推理展示等关键环节。无论你是前端开发者想了解AI集成还是后端工程师想学习Vue3对接都能从这里获得实用的开发指南。2. 环境准备与模型部署2.1 系统要求与依赖安装在开始之前确保你的开发环境满足以下要求操作系统Ubuntu 20.04 或 CentOS 8GPUNVIDIA GPU with 8GB VRAM推荐16GB以上内存16GB RAM minimum软件依赖Python 3.9, Node.js 16, Docker首先安装必要的Python依赖# 创建虚拟环境 python -m venv dasd-env source dasd-env/bin/activate # 安装核心依赖 pip install vllm transformers fastapi uvicorn2.2 使用vLLM部署模型vLLM是一个高性能的推理引擎专门优化了大语言模型的推理速度。我们用它可以轻松部署DASD-4B-Thinking模型# deploy_model.py from vllm import LLM, SamplingParams # 初始化模型 llm LLM( modelDASD-4B-Thinking, tensor_parallel_size1, gpu_memory_utilization0.8, max_model_len4096 ) # 定义采样参数 sampling_params SamplingParams( temperature0.7, top_p0.9, max_tokens1024 )启动模型服务python -m vllm.entrypoints.api_server \ --model DASD-4B-Thinking \ --port 8000 \ --host 0.0.0.0这样就在本地8000端口启动了一个模型推理服务。3. API设计与后端服务3.1 设计RESTful API接口为了让前端能够与模型交互我们需要设计清晰的API接口。主要包含两个核心端点# main.py from fastapi import FastAPI, HTTPException from fastapi.middleware.cors import CORSMiddleware from pydantic import BaseModel from typing import List, Optional app FastAPI(titleDASD-4B-Thinking API) # 允许跨域请求 app.add_middleware( CORSMiddleware, allow_origins[*], allow_methods[*], allow_headers[*], ) class ChatRequest(BaseModel): message: str conversation_history: Optional[List[dict]] None max_tokens: Optional[int] 1024 class ChatResponse(BaseModel): response: str thinking_process: List[str] tokens_used: int3.2 实现推理端点接下来实现主要的聊天端点这里会处理用户输入并返回模型的思考和回复app.post(/api/chat) async def chat_endpoint(request: ChatRequest): try: # 构建提示词包含思考过程要求 prompt build_thinking_prompt( request.message, request.conversation_history ) # 调用vLLM进行推理 outputs llm.generate( prompt, sampling_params ) # 解析模型的思考和最终回复 thinking, response parse_thinking_output( outputs[0].text ) return ChatResponse( responseresponse, thinking_processthinking, tokens_usedlen(outputs[0].token_ids) ) except Exception as e: raise HTTPException(status_code500, detailstr(e)) def build_thinking_prompt(message, historyNone): 构建包含思考过程要求的提示词 prompt 请逐步思考以下问题然后给出最终答案\n\n if history: for turn in history[-5:]: # 保留最近5轮对话 prompt f用户: {turn[user]}\n prompt f助手: {turn[assistant]}\n\n prompt f问题: {message}\n\n思考过程: return prompt def parse_thinking_output(text): 解析模型的输出分离思考过程和最终答案 lines text.split(\n) thinking [] response for line in lines: if line.startswith(最终答案:): response line.replace(最终答案:, ).strip() elif line.strip() and not line.startswith(问题:): thinking.append(line.strip()) return thinking, response启动FastAPI服务uvicorn main:app --reload --port 8001现在你的后端服务就在8001端口运行了可以通过http://localhost:8001/api/chat进行测试。4. Vue3前端集成4.1 创建Vue3项目并安装依赖使用Vite创建新的Vue3项目npm create vitelatest dasd-vue-app -- --template vue cd dasd-vue-app npm install axios lucide-vue-next # 安装HTTP客户端和图标库4.2 设计聊天界面组件创建主要的聊天界面组件!-- src/components/ChatInterface.vue -- template div classchat-container div classchat-header h2智能问答助手/h2 p基于DASD-4B-Thinking模型/p /div div classchat-messages refmessagesContainer div v-for(message, index) in messages :keyindex :class[message, message.role] div classmessage-content {{ message.content }} /div div v-ifmessage.thinking classthinking-process h4思考过程:/h4 div v-for(step, stepIndex) in message.thinking :keystepIndex classthinking-step {{ step }} /div /div /div /div div classchat-input textarea v-modeluserInput placeholder请输入您的问题... keydown.entersendMessage rows3 / button clicksendMessage :disabledisLoading span v-if!isLoading发送/span span v-else思考中.../span /button /div /div /template script setup import { ref, computed, nextTick, watch } from vue import axios from axios const userInput ref() const messages ref([]) const isLoading ref(false) const messagesContainer ref(null) const sendMessage async () { if (!userInput.value.trim() || isLoading.value) return const userMessage userInput.value.trim() userInput.value messages.value.push({ role: user, content: userMessage }) isLoading.value true scrollToBottom() try { const response await axios.post(http://localhost:8001/api/chat, { message: userMessage, conversation_history: messages.value .filter(m m.role user || m.role assistant) .map(m ({ user: m.role user ? m.content : , assistant: m.role assistant ? m.content : })) }) messages.value.push({ role: assistant, content: response.data.response, thinking: response.data.thinking_process }) } catch (error) { messages.value.push({ role: assistant, content: 抱歉发生了错误 error.message }) } finally { isLoading.value false scrollToBottom() } } const scrollToBottom () { nextTick(() { if (messagesContainer.value) { messagesContainer.value.scrollTop messagesContainer.value.scrollHeight } }) } // 自动滚动到底部 watch(messages, scrollToBottom, { deep: true }) /script style scoped .chat-container { max-width: 800px; margin: 0 auto; height: 100vh; display: flex; flex-direction: column; } .chat-messages { flex: 1; overflow-y: auto; padding: 20px; } .message { margin-bottom: 20px; } .message.user { text-align: right; } .message-content { padding: 12px; border-radius: 12px; display: inline-block; max-width: 70%; } .message.user .message-content { background-color: #007bff; color: white; } .message.assistant .message-content { background-color: #f1f3f5; color: #333; } .thinking-process { margin-top: 10px; padding: 10px; background-color: #f8f9fa; border-radius: 8px; border-left: 4px solid #28a745; } .thinking-step { padding: 5px 0; color: #666; font-size: 0.9em; } .chat-input { padding: 20px; background-color: white; border-top: 1px solid #dee2e6; display: flex; gap: 10px; } .chat-input textarea { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 8px; resize: vertical; } .chat-input button { padding: 12px 24px; background-color: #007bff; color: white; border: none; border-radius: 8px; cursor: pointer; } .chat-input button:disabled { background-color: #ccc; cursor: not-allowed; } /style4.3 实现实时推理展示为了增强用户体验我们添加打字机效果和思考过程动画!-- src/components/AnimatedResponse.vue -- template div classanimated-response div v-ifisThinking classthinking-animation div classthinking-dots span/span span/span span/span /div span模型正在思考中.../span /div div v-else classresponse-content div v-for(step, index) in thinkingSteps :keystep- index classthinking-step animated {{ step }} /div div classfinal-answer strong最终答案:/strong p{{ finalAnswer }}/p /div /div /div /template script setup import { ref, watch, onMounted } from vue const props defineProps({ thinking: Array, response: String, isStreaming: Boolean }) const thinkingSteps ref([]) const finalAnswer ref() const isThinking ref(true) // 模拟流式输出效果 watch(() props.isStreaming, (newVal) { if (!newVal props.thinking) { animateThinkingProcess() } }) const animateThinkingProcess async () { isThinking.value false thinkingSteps.value [] finalAnswer.value // 逐步显示思考过程 for (const step of props.thinking) { await new Promise(resolve setTimeout(resolve, 500)) thinkingSteps.value.push(step) } // 显示最终答案 await new Promise(resolve setTimeout(resolve, 300)) finalAnswer.value props.response } /script style scoped .thinking-animation { display: flex; align-items: center; gap: 10px; color: #666; } .thinking-dots { display: flex; gap: 4px; } .thinking-dots span { width: 6px; height: 6px; border-radius: 50%; background-color: #007bff; animation: bounce 1.4s infinite ease-in-out both; } .thinking-dots span:nth-child(1) { animation-delay: -0.32s; } .thinking-dots span:nth-child(2) { animation-delay: -0.16s; } keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .thinking-step.animated { opacity: 0; animation: fadeIn 0.5s ease-in forwards; } keyframes fadeIn { to { opacity: 1; } } .final-answer { margin-top: 20px; padding: 15px; background-color: #e8f5e8; border-radius: 8px; border-left: 4px solid #28a745; } /style5. 前后端交互优化5.1 处理跨域和安全性在生产环境中需要配置正确的CORS设置和安全策略# backend/middleware/cors.py from fastapi.middleware.cors import CORSMiddleware def setup_cors(app): app.add_middleware( CORSMiddleware, allow_origins[ http://localhost:3000, https://yourdomain.com ], allow_credentialsTrue, allow_methods[*], allow_headers[*], expose_headers[*] )5.2 实现流式传输为了更好的用户体验实现流式传输响应# backend/streaming.py from fastapi import Response from fastapi.responses import StreamingResponse import json async def stream_thinking_response(prompt): 流式传输模型的思考过程 async for chunk in llm.generate_stream(prompt, sampling_params): if chunk.text: # 解析部分响应 if 思考过程: in chunk.text: thinking_part chunk.text.split(思考过程:)[1] if 最终答案: in thinking_part: thinking_part thinking_part.split(最终答案:)[0] yield fdata: {json.dumps({type: thinking, content: thinking_part})}\n\n elif 最终答案: in chunk.text: answer_part chunk.text.split(最终答案:)[1] yield fdata: {json.dumps({type: answer, content: answer_part})}\n\n app.post(/api/chat/stream) async def chat_stream(request: ChatRequest): prompt build_thinking_prompt(request.message, request.conversation_history) return StreamingResponse( stream_thinking_response(prompt), media_typetext/event-stream )前端对应的流式处理// src/composables/useStreamingChat.js import { ref } from vue export function useStreamingChat() { const streamedThinking ref([]) const streamedAnswer ref() const isStreaming ref(false) const streamChat async (message) { isStreaming.value true streamedThinking.value [] streamedAnswer.value try { const response await fetch(http://localhost:8001/api/chat/stream, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ message }) }) const reader response.body.getReader() const decoder new TextDecoder() while (true) { const { done, value } await reader.read() if (done) break const chunk decoder.decode(value) const lines chunk.split(\n\n).filter(line line.startsWith(data: )) for (const line of lines) { const data JSON.parse(line.replace(data: , )) if (data.type thinking) { streamedThinking.value.push(data.content) } else if (data.type answer) { streamedAnswer.value data.content } } } } catch (error) { console.error(Streaming error:, error) } finally { isStreaming.value false } } return { streamedThinking, streamedAnswer, isStreaming, streamChat } }6. 部署与性能优化6.1 生产环境部署使用Docker容器化部署# backend/Dockerfile FROM python:3.9-slim WORKDIR /app COPY requirements.txt . RUN pip install -r requirements.txt COPY . . EXPOSE 8001 CMD [uvicorn, main:app, --host, 0.0.0.0, --port, 8001]# frontend/Dockerfile FROM node:16-alpine as build WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build FROM nginx:alpine COPY --frombuild /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf6.2 性能优化建议模型推理优化# 使用批处理提高吞吐量 llm LLM( modelDASD-4B-Thinking, enable_prefix_cachingTrue, max_num_seqs16, max_num_batched_tokens4096 )前端性能优化// 使用虚拟滚动处理长对话历史 import { useVirtualizer } from tanstack/vue-virtual const virtualizer useVirtualizer({ count: messages.value.length, getScrollElement: () messagesContainer.value, estimateSize: () 100, overscan: 5 })缓存策略# 使用Redis缓存常见问题的回答 from redis import Redis import hashlib redis Redis(hostlocalhost, port6379, db0) def get_cache_key(message, history): content message .join( f{h[user]}{h[assistant]} for h in history or [] ) return hashlib.md5(content.encode()).hexdigest() app.post(/api/chat) async def chat_endpoint(request: ChatRequest): cache_key get_cache_key(request.message, request.conversation_history) cached redis.get(cache_key) if cached: return ChatResponse(**json.loads(cached)) # ...处理逻辑... # 缓存结果 redis.setex(cache_key, 3600, json.dumps(response.dict())) return response7. 总结通过本文的实践我们成功将DASD-4B-Thinking模型与Vue3前端框架进行了深度集成构建了一个功能完整的智能问答应用。从模型部署、API设计到前端交互每个环节都提供了详细的实现方案和代码示例。这种集成方式的好处很明显用户可以看到AI的思考过程增强了对话的透明度和信任感。流式传输和动画效果让交互更加自然流畅提升了用户体验。在实际项目中你可能还需要考虑更多的细节比如错误处理、加载状态、对话历史管理等。但本文提供的框架已经涵盖了核心功能可以作为你项目开发的坚实基础。最重要的是这种架构是通用的你可以很容易地适配其他支持思考过程的模型。希望这篇文章能为你开发智能Web应用提供有价值的参考和启发。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
