当前位置：首页 > news >正文

李慕婉-仙逆-造相Z-Turbo JavaScript前端交互：实现实时AI对话与内容生成

news 2026/8/7 23:53:52

李慕婉-仙逆-造相Z-Turbo JavaScript前端交互：实现实时AI对话与内容生成

最近在折腾一个智能客服的原型，后端用星图GPU平台部署了李慕婉-仙逆-造相Z-Turbo模型，效果挺不错。但问题来了，怎么让用户在前端网页上也能丝滑地跟这个AI对话，还能实时看到它“思考”和生成内容的过程呢？总不能每次都让用户去刷新页面或者等半天吧。

这其实就是很多想在前端集成大模型能力的开发者会遇到的一个典型痛点：后端模型能力很强，但前端交互体验跟不上。要么是请求响应慢，用户等得没耐心；要么是交互生硬，没有那种实时对话的感觉。

所以，我花了一些时间，把调用模型、处理流式响应、构建交互界面这一套流程给跑通了。今天就跟大家分享一下，怎么用最基础的JavaScript技术，结合现代的Fetch API和WebSocket，在前端实现一个既实时又流畅的AI对话与内容生成界面。整个过程不依赖复杂的框架，理解了核心思路，用Vue或React来封装也会非常顺手。

1. 核心思路与准备工作

在开始写代码之前，我们先理清楚要做什么。我们的目标是在网页上，用户输入问题，AI模型能像真人聊天一样，一个字一个字地把回答“流”出来，而不是等全部生成完再一次性显示。

1.1 技术方案选型

要实现这个效果，核心在于“流式响应”。传统的AJAX请求是等服务器把所有数据都准备好了，一次性返回。而流式响应允许服务器一边生成结果，一边通过网络流式地推送给前端，前端收到一点就显示一点。

对于前端来说，处理这种流式数据，主要有两种主流方式：

Fetch API + ReadableStream：这是比较现代且标准的方式。我们向模型服务发送一个HTTP请求，服务端返回一个“流”（Stream），前端通过JavaScript逐步读取这个流中的数据。这种方式兼容性好，实现起来也直观。
WebSocket：这是一种全双工通信协议，更适合需要服务器主动、频繁向客户端推送数据的场景（如聊天室、实时通知）。对于单纯的“一问一答”式AI对话，用Fetch API处理流式响应通常更简单直接。但如果你的应用场景是AI持续主动汇报进度，或者有多用户协作，WebSocket会更合适。

我们这个例子，就以更通用的Fetch API + ReadableStream方案为主来展开。理解了它，WebSocket的方案也大同小异。

1.2 环境与模型服务确认

在写前端代码前，你需要确保后端模型服务已经就绪并正确部署。这里假设你已经通过星图GPU平台成功部署了“李慕婉-仙逆-造相Z-Turbo”的镜像，并且获得了模型的API访问端点（Endpoint）和必要的鉴权信息（如API Key）。

关键要确认一点：你的模型服务是否支持流式输出。大多数现代的大模型服务（包括基于类似架构的部署）都会提供流式输出的接口，通常会在请求参数中有一个stream: true之类的开关。你需要查阅你所部署模型服务的API文档来确认具体的参数。

准备工作就这些，接下来我们进入实战环节。

2. 使用Fetch API实现基础对话

我们先从最简单的开始，实现一个非流式的对话。这样可以帮助我们理解基本的请求结构，为后面的流式处理打下基础。

假设我们的模型服务部署在https://your-model-service.com/v1/chat/completions，并且使用标准的OpenAI兼容的API格式（很多开源模型部署工具都支持这种格式）。

// 定义模型服务的API地址和密钥 const API_ENDPOINT = 'https://your-model-service.com/v1/chat/completions'; const API_KEY = 'your-secret-api-key-here'; // 注意：在实际生产中，密钥不应硬编码在前端，应由后端代理或通过安全方式管理 async function sendMessage(userInput) { // 构建请求的消息历史，通常包含一个系统角色和用户的历史对话 const messages = [ { role: 'system', content: '你是一个乐于助人的AI助手。' }, { role: 'user', content: userInput } ]; const requestBody = { model: 'limuwan-xianni-zaoxiang-z-turbo', // 替换为你的实际模型名称 messages: messages, max_tokens: 500, // 控制生成的最大长度 temperature: 0.7, // 控制生成内容的随机性 stream: false // 非流式模式 }; try { const response = await fetch(API_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${API_KEY}` }, body: JSON.stringify(requestBody) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); // 通常，响应结构中的 data.choices[0].message.content 包含AI的回复 const aiReply = data.choices[0]?.message?.content || '（模型未返回有效内容）'; return aiReply; } catch (error) { console.error('请求模型API失败:', error); return `抱歉，请求出错：${error.message}`; } } // 使用示例 const userQuestion = 'JavaScript中如何用Fetch API发送POST请求？'; sendMessage(userQuestion).then(reply => { console.log('AI回复:', reply); // 这里可以将回复显示到网页的某个DOM元素中 // document.getElementById('response-area').textContent = reply; });

这段代码完成了最基础的交互：发送用户消息，等待模型完全生成回复后，一次性获取并显示。但用户需要等待整个生成过程结束，体验不够好。

3. 升级体验：实现流式响应与实时显示

现在，我们来改造上面的代码，开启流式模式，并实现逐字显示的效果。这才是提升用户体验的关键。

3.1 处理流式响应

当设置stream: true后，服务器返回的不再是一个JSON对象，而是一个ReadableStream。我们需要逐步读取这个流。

async function sendMessageStream(userInput, onChunkReceived, onComplete) { const messages = [ { role: 'system', content: '你是一个乐于助人的AI助手。' }, { role: 'user', content: userInput } ]; const requestBody = { model: 'limuwan-xianni-zaoxiang-z-turbo', messages: messages, max_tokens: 500, temperature: 0.7, stream: true // 关键：开启流式输出 }; try { const response = await fetch(API_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${API_KEY}` }, body: JSON.stringify(requestBody) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const reader = response.body.getReader(); const decoder = new TextDecoder('utf-8'); let accumulatedText = ''; while (true) { const { done, value } = await reader.read(); if (done) { onComplete?.(accumulatedText); // 流读取完毕，回调最终完整文本 break; } // 解码当前数据块 const chunk = decoder.decode(value, { stream: true }); // 流式响应通常以 "data: " 开头，每行是一个独立的JSON片段或 [DONE] const lines = chunk.split('\n').filter(line => line.trim() !== ''); for (const line of lines) { if (line.startsWith('data: ')) { const dataStr = line.slice(6); // 去掉 "data: " 前缀 if (dataStr === '[DONE]') { continue; // 流结束标志 } try { const parsedData = JSON.parse(dataStr); // 解析出的文本通常在 choices[0].delta.content 中 const textChunk = parsedData.choices[0]?.delta?.content || ''; if (textChunk) { accumulatedText += textChunk; // 每收到一个文本块，就回调一次，用于实时更新UI onChunkReceived?.(textChunk, accumulatedText); } } catch (e) { console.warn('解析流数据失败:', e, '原始数据:', dataStr); } } } } } catch (error) { console.error('流式请求失败:', error); onChunkReceived?.(`\n[请求出错: ${error.message}]`, ''); onComplete?.(''); } }

3.2 构建一个简单的交互界面

有了处理流的核心函数，我们就可以把它和一个简单的HTML界面结合起来了。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI对话演示 - 李慕婉模型</title> <style> body { font-family: sans-serif; max-width: 800px; margin: 20px auto; padding: 20px; } #chat-container { border: 1px solid #ccc; border-radius: 8px; padding: 15px; height: 500px; overflow-y: auto; margin-bottom: 15px; } .message { margin-bottom: 12px; padding: 10px; border-radius: 5px; } .user-message { background-color: #e3f2fd; text-align: right; } .ai-message { background-color: #f5f5f5; } #input-area { display: flex; gap: 10px; } #user-input { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; } #send-btn { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } #send-btn:disabled { background-color: #cccccc; cursor: not-allowed; } .typing-indicator::after { content: '▋'; animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } </style> </head> <body> <h2>与李慕婉-仙逆-造相Z-Turbo对话</h2> <div id="chat-container"></div> <div id="input-area"> <input type="text" id="user-input" placeholder="输入您的问题..." /> <button id="send-btn" onclick="sendUserMessage()">发送</button> </div> <script> const API_ENDPOINT = 'https://your-model-service.com/v1/chat/completions'; const API_KEY = 'your-secret-api-key-here'; // 警告：仅用于演示，生产环境必须通过后端代理 const chatContainer = document.getElementById('chat-container'); const userInput = document.getElementById('user-input'); const sendBtn = document.getElementById('send-btn'); // 用于存储当前AI回复的DOM元素引用 let currentAiMessageElement = null; function appendMessage(content, isUser = false) { const messageDiv = document.createElement('div'); messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`; messageDiv.textContent = content; chatContainer.appendChild(messageDiv); chatContainer.scrollTop = chatContainer.scrollHeight; // 滚动到底部 return messageDiv; } function updateAiMessage(content) { if (currentAiMessageElement) { currentAiMessageElement.textContent = content; chatContainer.scrollTop = chatContainer.scrollHeight; } } function showTypingIndicator() { const indicator = document.createElement('div'); indicator.className = 'message ai-message typing-indicator'; indicator.textContent = '思考中'; chatContainer.appendChild(indicator); chatContainer.scrollTop = chatContainer.scrollHeight; return indicator; } function removeTypingIndicator(indicatorElement) { if (indicatorElement && indicatorElement.parentNode) { indicatorElement.parentNode.removeChild(indicatorElement); } } async function sendUserMessage() { const question = userInput.value.trim(); if (!question) return; // 1. 禁用输入和按钮，防止重复发送 userInput.value = ''; userInput.disabled = true; sendBtn.disabled = true; // 2. 在聊天框显示用户问题 appendMessage(question, true); // 3. 显示“思考中”指示器 const typingIndicator = showTypingIndicator(); // 4. 创建AI消息的占位元素，并移除指示器 currentAiMessageElement = appendMessage(''); removeTypingIndicator(typingIndicator); // 5. 调用流式函数 await sendMessageStream( question, // 每收到一个文本块的回调 (chunk, fullText) => { updateAiMessage(fullText); }, // 流结束的回调 (fullText) => { console.log('对话完成，最终内容:', fullText); currentAiMessageElement = null; // 重置引用 // 6. 重新启用输入 userInput.disabled = false; sendBtn.disabled = false; userInput.focus(); } ); } // 为输入框添加回车发送支持 userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && !sendBtn.disabled) { sendUserMessage(); } }); // 这里是上面定义的 sendMessageStream 函数，需要复制过来 async function sendMessageStream(userInput, onChunkReceived, onComplete) { // ... 将前面章节的 sendMessageStream 函数完整代码复制到这里 ... } </script> </body> </html>

把这段代码保存为HTML文件，替换里面的API_ENDPOINT和API_KEY为你的实际信息，用浏览器打开，你就能得到一个具有实时流式对话效果的简单聊天界面了。AI的回复会逐字显示出来，体验瞬间就上了一个档次。

4. 进阶：在Vue或React框架中集成

上面的例子是纯原生JavaScript，理解了原理，在Vue或React等框架中集成就是组织代码和状态管理的问题了。这里以Vue 3的Composition API为例，提供一个核心逻辑的写法。

<!-- AIChat.vue --> <template> <div class="chat-demo"> <div class="message-list"> <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.role]"> {{ msg.content }} </div> <div v-if="isLoading" class="message ai typing-indicator">思考中...</div> </div> <div class="input-area"> <input v-model="userInput" @keyup.enter="sendMessage" :disabled="isLoading" placeholder="输入消息..." /> <button @click="sendMessage" :disabled="isLoading || !userInput.trim()">发送</button> </div> </div> </template> <script setup> import { ref } from 'vue'; const API_ENDPOINT = 'https://your-model-service.com/v1/chat/completions'; const API_KEY = 'your-api-key'; // 生产环境务必使用环境变量或通过后端接口 const messages = ref([]); // 存储所有消息 {role: 'user'|'ai', content: string} const userInput = ref(''); const isLoading = ref(false); const currentAiResponse = ref(''); // 当前正在流式接收的AI回复内容 async function sendMessage() { const question = userInput.value.trim(); if (!question || isLoading.value) return; // 添加用户消息 messages.value.push({ role: 'user', content: question }); userInput.value = ''; isLoading.value = true; // 添加一个初始为空的AI消息占位 messages.value.push({ role: 'ai', content: '' }); const aiMessageIndex = messages.value.length - 1; try { const response = await fetch(API_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${API_KEY}` }, body: JSON.stringify({ model: 'limuwan-xianni-zaoxiang-z-turbo', messages: [...messages.value.slice(0, -1).map(m => ({ role: m.role, content: m.content })), { role: 'user', content: question }], stream: true, max_tokens: 500, }) }); if (!response.ok) throw new Error(`请求失败: ${response.status}`); const reader = response.body.getReader(); const decoder = new TextDecoder(); let accumulatedText = ''; while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value); const lines = chunk.split('\n').filter(l => l.trim()); for (const line of lines) { if (line.startsWith('data: ')) { const data = line.slice(6); if (data === '[DONE]') continue; try { const parsed = JSON.parse(data); const textDelta = parsed.choices[0]?.delta?.content || ''; if (textDelta) { accumulatedText += textDelta; // 更新Vue响应式数据，触发视图更新 messages.value[aiMessageIndex].content = accumulatedText; } } catch (e) { console.error('解析错误:', e); } } } } } catch (error) { console.error('对话出错:', error); messages.value[aiMessageIndex].content = `抱歉，出错了: ${error.message}`; } finally { isLoading.value = false; currentAiResponse.value = ''; } } </script> <style scoped> /* 样式与原生示例类似，此处省略 */ </style>

在React中思路类似，使用useState来管理消息列表和加载状态，在fetch流式响应的回调中更新状态即可。核心的流式读取逻辑是完全通用的。