Phi-3 Forest Laboratory赋能JavaScript前端打造智能对话交互界面最近在捣鼓一些AI项目发现把大模型的能力直接搬到网页上让用户能像聊天一样自然交互这事儿特别有意思。尤其是像Phi-3 Forest Laboratory这样的模型推理速度快对上下文的理解也到位简直是给前端开发者的“外挂”。今天这篇文章我就想带你看看怎么用JavaScript把Phi-3 Forest Laboratory的“大脑”接到你的网页里做出一个真正好用、反应快、还能记住聊天历史的智能对话界面。整个过程没有复杂的理论全是能直接抄走的代码和看得见的效果。1. 效果预览一个“会思考”的网页聊天框在开始动手之前我们先看看最终要做出个什么东西。想象一下你打开一个网页看到一个简洁的聊天窗口。你输入问题比如“用JavaScript写一个快速排序函数”然后点击发送。接下来界面会立刻给你反馈一个优雅的加载动画开始旋转告诉你模型正在“思考”。几秒钟后答案不是一次性全部蹦出来而是一个字一个字、一行代码一行代码地“流”到屏幕上就像有人在另一边打字回复你一样。整个回答格式清晰代码部分还有高亮。你可以接着问“能解释一下这个函数的原理吗” 界面会记住你刚才问的问题和它给出的排序函数在新的上下文中给出更深入的解释。如果你网络不好或者请求出错了界面不会卡死而是会友好地提示你“网络似乎有点问题请稍后再试”。这就是我们要实现的核心体验实时、流畅、有记忆、且健壮的对话交互。它不仅仅是调用一个API更是把大模型的智能通过前端技术无缝地编织到用户的每一次点击和等待中。2. 核心能力拆解前端如何与AI对话要实现上面那种效果光靠一个fetch调用是远远不够的。我们需要把整个过程拆解成几个关键部分每个部分都用前端技术精心打磨。2.1 实时流式响应告别漫长的等待传统的方式是前端发送问题然后一直等到后端模型生成完整的、可能很长的回答后才一次性收到所有数据。用户面对的是一个空白的界面和漫长的等待体验很差。流式响应Streaming彻底改变了这一点。它的原理是模型每生成一小段文本比如一个词或一句话后端就立刻把这一小段推送给前端。前端则持续接收这些数据片段并实时地将其拼接到界面上展示出来。这样做的好处显而易见即时反馈用户发送问题后几乎立刻就能看到回答开始出现消除了等待的焦虑感。动态感文字逐字出现的动画效果让交互充满了生命力感觉真的在和“智能体”对话。性能感知即使生成整个回答需要10秒但用户在第1秒就看到了一部分结果心理感受会好很多。在JavaScript中我们主要利用fetchAPI的响应体response.body作为一个可读流ReadableStream来处理。2.2 上下文管理让AI记住“刚才聊到哪了”大模型之所以智能一个重要原因是它能理解上下文。如果你问“它怎么样”模型需要知道“它”指的是上文中提到的“Python”还是“昨天的会议”。在我们的对话应用中这意味着前端需要负责维护一个“对话历史”数组。每次用户发送新消息时我们不能只发送这条新消息而要把之前所有轮次的对话包括用户的消息和模型的回复都一起发送给后端。这样Phi-3 Forest Laboratory模型就能基于完整的对话历史来生成更连贯、更准确的回答。前端管理这个历史记录并在每次请求时将其组织成API要求的格式通常是一个包含role和content的消息对象数组是保证对话智能性的关键。2.3 健壮的交互界面加载、错误与用户体验智能的背后是稳定可靠的使用体验。这需要前端做好以下几件事加载状态在请求发出到收到第一个流式数据块之间显示一个加载指示器比如旋转的圆圈明确告知用户系统正在工作。错误处理网络会波动API可能会有限制。前端需要优雅地捕获这些错误并用友好的方式提示用户例如“回答生成失败请检查网络或稍后重试”而不是让控制台一片红或页面卡死。界面反馈按钮在点击后可以暂时禁用防止重复提交输入框在生成回答时可以设为只读引导用户等待。这些细微的交互设计能极大提升专业感和用户体验。3. 动手实现从零搭建智能对话前端理论说完了我们直接上代码。我会用一个简单的HTML页面配合原生JavaScript来演示你可以轻松地将其集成到Vue、React或任何你喜欢的框架中。3.1 搭建基础聊天界面首先我们来创建一个最基础的聊天界面结构。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlePhi-3 智能对话助手/title style * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; } body { background-color: #f5f7fa; color: #333; line-height: 1.6; padding: 20px; } .container { max-width: 800px; margin: 0 auto; background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden; } .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 24px; text-align: center; } .chat-container { height: 500px; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; } .message { max-width: 80%; padding: 12px 18px; border-radius: 18px; word-wrap: break-word; } .user-message { align-self: flex-end; background-color: #007AFF; color: white; border-bottom-right-radius: 4px; } .bot-message { align-self: flex-start; background-color: #F2F2F7; color: black; border-bottom-left-radius: 4px; } .input-area { display: flex; padding: 20px; border-top: 1px solid #e5e5ea; gap: 12px; } #messageInput { flex: 1; padding: 14px 18px; border: 1px solid #c7c7cc; border-radius: 22px; font-size: 16px; outline: none; } #messageInput:focus { border-color: #007AFF; } #sendButton { padding: 14px 28px; background: #007AFF; color: white; border: none; border-radius: 22px; font-size: 16px; font-weight: 600; cursor: pointer; } #sendButton:disabled { background-color: #c7c7cc; cursor: not-allowed; } .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(0,122,255,.3); border-radius: 50%; border-top-color: #007AFF; animation: spin 1s ease-in-out infinite; margin-left: 10px; } keyframes spin { to { transform: rotate(360deg); } } .error { color: #FF3B30; background-color: #FFE5E5; padding: 12px; border-radius: 10px; margin-top: 10px; text-align: center; } .code-block { background-color: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 8px; overflow-x: auto; font-family: Courier New, monospace; margin: 10px 0; } /style /head body div classcontainer div classheader h1 Phi-3 智能对话实验室/h1 p体验流式响应的智能对话/p /div div idchatContainer classchat-container !-- 对话消息将动态插入到这里 -- div classmessage bot-message 你好我是基于Phi-3 Forest Laboratory驱动的助手。你可以问我任何问题我会以流式的方式回复你。 /div /div div classinput-area input typetext idmessageInput placeholder输入你的问题... / button idsendButton发送/button /div div iderrorContainer/div /div script srcapp.js/script /body /html这个界面包含了消息展示区域、输入框、发送按钮以及为加载动画和错误提示预留的样式。接下来我们编写核心的JavaScript逻辑。3.2 实现流式对话核心逻辑创建一个app.js文件我们将在这里实现所有交互逻辑。// app.js // 配置你的后端API端点这里需要替换成你实际部署的Phi-3 Forest Laboratory API地址 const API_ENDPOINT YOUR_PHI3_API_STREAMING_ENDPOINT_HERE; // 示例可能是 https://your-api.com/v1/chat/completions // 对话历史记录用于维护上下文 let conversationHistory [ { role: system, content: 你是一个乐于助人的AI助手回答要简洁、准确。 }, { role: assistant, content: 你好我是基于Phi-3 Forest Laboratory驱动的助手。你可以问我任何问题我会以流式的方式回复你。 } ]; // DOM元素 const chatContainer document.getElementById(chatContainer); const messageInput document.getElementById(messageInput); const sendButton document.getElementById(sendButton); const errorContainer document.getElementById(errorContainer); // 添加用户消息到界面和历史记录 function addUserMessage(content) { const messageDiv document.createElement(div); messageDiv.className message user-message; messageDiv.textContent content; chatContainer.appendChild(messageDiv); conversationHistory.push({ role: user, content: content }); scrollToBottom(); } // 添加助手消息到界面初始为空用于流式填充 function createBotMessagePlaceholder() { const messageDiv document.createElement(div); messageDiv.className message bot-message; // 创建一个用于显示流式文本的span const textSpan document.createElement(span); // 创建一个加载动画 const loadingSpan document.createElement(span); loadingSpan.className loading; loadingSpan.id currentLoading; messageDiv.appendChild(textSpan); messageDiv.appendChild(loadingSpan); chatContainer.appendChild(messageDiv); scrollToBottom(); return textSpan; // 返回这个span以便后续更新文本 } // 更新助手消息的内容流式 function updateBotMessage(element, newText) { element.textContent newText; // 每次更新后都滚动到底部 scrollToBottom(); } // 移除当前消息的加载动画 function removeLoadingIndicator() { const loadingEl document.getElementById(currentLoading); if (loadingEl) { loadingEl.remove(); } } // 处理代码块简单的检测与高亮实际项目可用highlight.js function formatMessageText(text) { // 这是一个非常简单的示例检测 包裹的代码块 const codeBlockRegex /([\s\S]*?)/g; return text.replace(codeBlockRegex, (match, code) { return div classcode-block${code.trim()}/div; }); } // 滚动到聊天区域底部 function scrollToBottom() { chatContainer.scrollTop chatContainer.scrollHeight; } // 显示错误信息 function showError(message) { errorContainer.innerHTML div classerror${message}/div; setTimeout(() { errorContainer.innerHTML ; }, 5000); } // 核心发送消息并处理流式响应 async function sendMessage() { const userMessage messageInput.value.trim(); if (!userMessage) return; // 1. 更新UI禁用输入添加用户消息 messageInput.value ; sendButton.disabled true; addUserMessage(userMessage); // 2. 为助手的回复创建占位符 const botMessageElement createBotMessagePlaceholder(); let fullResponse ; try { // 3. 准备请求数据包含完整的对话历史 const requestData { model: phi-3, // 根据你的API调整模型名称 messages: conversationHistory, // 发送全部历史以实现多轮对话 stream: true, // 关键开启流式输出 max_tokens: 1024, temperature: 0.7, }; // 4. 发起fetch请求处理流式响应 const response await fetch(API_ENDPOINT, { method: POST, headers: { Content-Type: application/json, // 如果需要API密钥请在此添加 // Authorization: Bearer YOUR_API_KEY }, body: JSON.stringify(requestData) }); if (!response.ok) { throw new Error(网络请求失败: ${response.status}); } // 5. 处理流式数据 const reader response.body.getReader(); const decoder new TextDecoder(utf-8); while (true) { const { done, value } await reader.read(); if (done) { // 流式传输结束 removeLoadingIndicator(); // 将完整的助手回复加入历史记录 conversationHistory.push({ role: assistant, content: fullResponse }); break; } // 解码数据块并按照Server-Sent Events (SSE) 格式解析 const chunk decoder.decode(value); const lines chunk.split(\n).filter(line line.trim() ! ); for (const line of lines) { if (line.startsWith(data: )) { const data line.slice(6); // 去掉 data: 前缀 if (data [DONE]) { continue; // 流结束标志 } try { const parsed JSON.parse(data); const content parsed.choices?.[0]?.delta?.content || ; if (content) { fullResponse content; // 更新界面并简单格式化文本如代码块 const formattedContent formatMessageText(fullResponse); botMessageElement.innerHTML formattedContent; } } catch (e) { console.warn(解析流数据出错:, e); } } } } } catch (error) { console.error(对话出错:, error); removeLoadingIndicator(); // 在助手消息位置显示错误 botMessageElement.innerHTML 抱歉回答生成时出现错误: ${error.message}; showError(请求失败请检查网络连接或稍后再试。); } finally { // 6. 重置UI状态 sendButton.disabled false; messageInput.focus(); } } // 事件监听 sendButton.addEventListener(click, sendMessage); messageInput.addEventListener(keypress, (e) { if (e.key Enter !e.shiftKey) { e.preventDefault(); sendMessage(); } }); // 页面加载后聚焦输入框 window.onload () { messageInput.focus(); };这段代码是前端与Phi-3模型交互的核心。它做了以下几件关键事管理对话历史conversationHistory数组记录了所有对话每次请求都将其发送保证了上下文的连贯性。处理流式响应fetch配合ReadableStream逐块读取后端推送的数据并实时更新到网页上。优化用户体验发送时禁用按钮、显示加载动画、错误时友好提示、自动滚动到底部。简单的内容格式化检测并高亮显示代码块让回复更易读。3.3 连接你的Phi-3 Forest Laboratory后端前端代码准备好了但它需要一个能对话的后端。API_ENDPOINT变量需要指向你部署的Phi-3 Forest Laboratory API服务。通常这个后端服务需要加载Phi-3模型使用相应的深度学习框架如Transformers, vLLM等加载模型。提供兼容OpenAI格式的API我们的前端代码是按照OpenAI的Chat Completion API格式特别是流式/v1/chat/completions编写的。你的后端需要能处理messages数组并支持stream: true参数。实现流式返回后端在生成每个token后应立即将其推送到响应流中格式为data: {JSON}\n\n最后以data: [DONE]结束。这里提供一个极其简单的Python Flask后端示例说明其核心逻辑# 注意这是一个概念性示例你需要根据实际使用的推理服务器如vLLM, TGI进行调整。 from flask import Flask, request, Response, stream_with_context import json import time app Flask(__name__) # 假设这里有一个函数能调用你的Phi-3模型进行流式生成 # def generate_stream(messages, max_tokens, temperature): app.route(/v1/chat/completions, methods[POST]) def chat_completions(): data request.json messages data.get(messages, []) stream data.get(stream, False) def event_stream(): # 模拟流式生成过程 fake_response 这是一个来自Phi-3模型的流式回复示例。它是一段一段返回的。 words fake_response.split( ) for i, word in enumerate(words): # 构建符合OpenAI流式响应格式的数据块 chunk { id: chatcmpl-123, object: chat.completion.chunk, created: int(time.time()), model: phi-3, choices: [{ index: 0, delta: {content: word }, finish_reason: None if i len(words)-1 else stop }] } yield fdata: {json.dumps(chunk)}\n\n time.sleep(0.1) # 模拟生成延迟 yield data: [DONE]\n\n if stream: return Response(stream_with_context(event_stream()), mimetypetext/event-stream) else: # 非流式响应处理 return jsonify({message: 此端点仅支持流式请求}) if __name__ __main__: app.run(port5000)重要提示实际部署中你应该使用高性能的推理服务器如vLLM、Text Generation Inference来部署Phi-3模型它们原生提供了高性能、支持流式的OpenAI兼容API。前端代码中的API_ENDPOINT就指向这个服务器的地址。4. 效果提升与进阶思路基础功能跑通后我们可以从多个维度进一步提升这个智能对话界面的效果和实用性。更优雅的流式渲染上面的例子是直接替换整个文本。对于更长的回答可以引入一个“打字机”效果让文字逐个字符出现体验更丝滑。也可以引入Markdown解析库如marked来渲染更丰富的格式如加粗、列表、表格等。对话历史管理当对话轮次非常多时全部发送给后端可能超出模型上下文长度。前端可以实现一个“滑动窗口”机制只保留最近N轮对话或者一个智能的“摘要”功能将早期对话总结成一段话后再发送。前端缓存与离线支持利用localStorage或IndexedDB将对话历史保存在用户浏览器中即使关闭页面再打开也能恢复之前的对话。这能极大提升用户粘性。多模态支持如果模型支持如果Phi-3 Forest Laboratory的版本支持图像理解前端可以增加图片上传功能将图片转换为base64编码后放入messages数组中实现“图文对话”的炫酷效果。性能与用户体验优化可以添加“停止生成”按钮让用户随时中断冗长的回答实现消息的“重新生成”功能在网络慢时添加更详细的加载状态提示等。5. 总结把Phi-3 Forest Laboratory这样的先进大模型通过JavaScript搬到浏览器里看着它和用户进行实时、流畅、有记忆的对话是一件非常有成就感的事情。整个过程的核心在于理解并巧妙运用“流式传输”和“上下文管理”这两个关键技术点。前端在这里扮演的角色远不止是一个简单的请求发送者。它是一个体验的塑造者通过精细的加载状态、错误处理和交互动画把冰冷的AI推理过程包装成温暖、即时、可靠的对话服务。本文提供的代码是一个坚实的起点你可以基于它结合具体的业务场景打造出更酷、更智能的Web应用。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
Phi-3 Forest Laboratory赋能JavaScript前端：打造智能对话交互界面
发布时间：2026/5/31 4:25:02
Phi-3 Forest Laboratory赋能JavaScript前端打造智能对话交互界面最近在捣鼓一些AI项目发现把大模型的能力直接搬到网页上让用户能像聊天一样自然交互这事儿特别有意思。尤其是像Phi-3 Forest Laboratory这样的模型推理速度快对上下文的理解也到位简直是给前端开发者的“外挂”。今天这篇文章我就想带你看看怎么用JavaScript把Phi-3 Forest Laboratory的“大脑”接到你的网页里做出一个真正好用、反应快、还能记住聊天历史的智能对话界面。整个过程没有复杂的理论全是能直接抄走的代码和看得见的效果。1. 效果预览一个“会思考”的网页聊天框在开始动手之前我们先看看最终要做出个什么东西。想象一下你打开一个网页看到一个简洁的聊天窗口。你输入问题比如“用JavaScript写一个快速排序函数”然后点击发送。接下来界面会立刻给你反馈一个优雅的加载动画开始旋转告诉你模型正在“思考”。几秒钟后答案不是一次性全部蹦出来而是一个字一个字、一行代码一行代码地“流”到屏幕上就像有人在另一边打字回复你一样。整个回答格式清晰代码部分还有高亮。你可以接着问“能解释一下这个函数的原理吗” 界面会记住你刚才问的问题和它给出的排序函数在新的上下文中给出更深入的解释。如果你网络不好或者请求出错了界面不会卡死而是会友好地提示你“网络似乎有点问题请稍后再试”。这就是我们要实现的核心体验实时、流畅、有记忆、且健壮的对话交互。它不仅仅是调用一个API更是把大模型的智能通过前端技术无缝地编织到用户的每一次点击和等待中。2. 核心能力拆解前端如何与AI对话要实现上面那种效果光靠一个fetch调用是远远不够的。我们需要把整个过程拆解成几个关键部分每个部分都用前端技术精心打磨。2.1 实时流式响应告别漫长的等待传统的方式是前端发送问题然后一直等到后端模型生成完整的、可能很长的回答后才一次性收到所有数据。用户面对的是一个空白的界面和漫长的等待体验很差。流式响应Streaming彻底改变了这一点。它的原理是模型每生成一小段文本比如一个词或一句话后端就立刻把这一小段推送给前端。前端则持续接收这些数据片段并实时地将其拼接到界面上展示出来。这样做的好处显而易见即时反馈用户发送问题后几乎立刻就能看到回答开始出现消除了等待的焦虑感。动态感文字逐字出现的动画效果让交互充满了生命力感觉真的在和“智能体”对话。性能感知即使生成整个回答需要10秒但用户在第1秒就看到了一部分结果心理感受会好很多。在JavaScript中我们主要利用fetchAPI的响应体response.body作为一个可读流ReadableStream来处理。2.2 上下文管理让AI记住“刚才聊到哪了”大模型之所以智能一个重要原因是它能理解上下文。如果你问“它怎么样”模型需要知道“它”指的是上文中提到的“Python”还是“昨天的会议”。在我们的对话应用中这意味着前端需要负责维护一个“对话历史”数组。每次用户发送新消息时我们不能只发送这条新消息而要把之前所有轮次的对话包括用户的消息和模型的回复都一起发送给后端。这样Phi-3 Forest Laboratory模型就能基于完整的对话历史来生成更连贯、更准确的回答。前端管理这个历史记录并在每次请求时将其组织成API要求的格式通常是一个包含role和content的消息对象数组是保证对话智能性的关键。2.3 健壮的交互界面加载、错误与用户体验智能的背后是稳定可靠的使用体验。这需要前端做好以下几件事加载状态在请求发出到收到第一个流式数据块之间显示一个加载指示器比如旋转的圆圈明确告知用户系统正在工作。错误处理网络会波动API可能会有限制。前端需要优雅地捕获这些错误并用友好的方式提示用户例如“回答生成失败请检查网络或稍后重试”而不是让控制台一片红或页面卡死。界面反馈按钮在点击后可以暂时禁用防止重复提交输入框在生成回答时可以设为只读引导用户等待。这些细微的交互设计能极大提升专业感和用户体验。3. 动手实现从零搭建智能对话前端理论说完了我们直接上代码。我会用一个简单的HTML页面配合原生JavaScript来演示你可以轻松地将其集成到Vue、React或任何你喜欢的框架中。3.1 搭建基础聊天界面首先我们来创建一个最基础的聊天界面结构。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlePhi-3 智能对话助手/title style * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; } body { background-color: #f5f7fa; color: #333; line-height: 1.6; padding: 20px; } .container { max-width: 800px; margin: 0 auto; background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden; } .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 24px; text-align: center; } .chat-container { height: 500px; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; } .message { max-width: 80%; padding: 12px 18px; border-radius: 18px; word-wrap: break-word; } .user-message { align-self: flex-end; background-color: #007AFF; color: white; border-bottom-right-radius: 4px; } .bot-message { align-self: flex-start; background-color: #F2F2F7; color: black; border-bottom-left-radius: 4px; } .input-area { display: flex; padding: 20px; border-top: 1px solid #e5e5ea; gap: 12px; } #messageInput { flex: 1; padding: 14px 18px; border: 1px solid #c7c7cc; border-radius: 22px; font-size: 16px; outline: none; } #messageInput:focus { border-color: #007AFF; } #sendButton { padding: 14px 28px; background: #007AFF; color: white; border: none; border-radius: 22px; font-size: 16px; font-weight: 600; cursor: pointer; } #sendButton:disabled { background-color: #c7c7cc; cursor: not-allowed; } .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(0,122,255,.3); border-radius: 50%; border-top-color: #007AFF; animation: spin 1s ease-in-out infinite; margin-left: 10px; } keyframes spin { to { transform: rotate(360deg); } } .error { color: #FF3B30; background-color: #FFE5E5; padding: 12px; border-radius: 10px; margin-top: 10px; text-align: center; } .code-block { background-color: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 8px; overflow-x: auto; font-family: Courier New, monospace; margin: 10px 0; } /style /head body div classcontainer div classheader h1 Phi-3 智能对话实验室/h1 p体验流式响应的智能对话/p /div div idchatContainer classchat-container !-- 对话消息将动态插入到这里 -- div classmessage bot-message 你好我是基于Phi-3 Forest Laboratory驱动的助手。你可以问我任何问题我会以流式的方式回复你。 /div /div div classinput-area input typetext idmessageInput placeholder输入你的问题... / button idsendButton发送/button /div div iderrorContainer/div /div script srcapp.js/script /body /html这个界面包含了消息展示区域、输入框、发送按钮以及为加载动画和错误提示预留的样式。接下来我们编写核心的JavaScript逻辑。3.2 实现流式对话核心逻辑创建一个app.js文件我们将在这里实现所有交互逻辑。// app.js // 配置你的后端API端点这里需要替换成你实际部署的Phi-3 Forest Laboratory API地址 const API_ENDPOINT YOUR_PHI3_API_STREAMING_ENDPOINT_HERE; // 示例可能是 https://your-api.com/v1/chat/completions // 对话历史记录用于维护上下文 let conversationHistory [ { role: system, content: 你是一个乐于助人的AI助手回答要简洁、准确。 }, { role: assistant, content: 你好我是基于Phi-3 Forest Laboratory驱动的助手。你可以问我任何问题我会以流式的方式回复你。 } ]; // DOM元素 const chatContainer document.getElementById(chatContainer); const messageInput document.getElementById(messageInput); const sendButton document.getElementById(sendButton); const errorContainer document.getElementById(errorContainer); // 添加用户消息到界面和历史记录 function addUserMessage(content) { const messageDiv document.createElement(div); messageDiv.className message user-message; messageDiv.textContent content; chatContainer.appendChild(messageDiv); conversationHistory.push({ role: user, content: content }); scrollToBottom(); } // 添加助手消息到界面初始为空用于流式填充 function createBotMessagePlaceholder() { const messageDiv document.createElement(div); messageDiv.className message bot-message; // 创建一个用于显示流式文本的span const textSpan document.createElement(span); // 创建一个加载动画 const loadingSpan document.createElement(span); loadingSpan.className loading; loadingSpan.id currentLoading; messageDiv.appendChild(textSpan); messageDiv.appendChild(loadingSpan); chatContainer.appendChild(messageDiv); scrollToBottom(); return textSpan; // 返回这个span以便后续更新文本 } // 更新助手消息的内容流式 function updateBotMessage(element, newText) { element.textContent newText; // 每次更新后都滚动到底部 scrollToBottom(); } // 移除当前消息的加载动画 function removeLoadingIndicator() { const loadingEl document.getElementById(currentLoading); if (loadingEl) { loadingEl.remove(); } } // 处理代码块简单的检测与高亮实际项目可用highlight.js function formatMessageText(text) { // 这是一个非常简单的示例检测 包裹的代码块 const codeBlockRegex /([\s\S]*?)/g; return text.replace(codeBlockRegex, (match, code) { return div classcode-block${code.trim()}/div; }); } // 滚动到聊天区域底部 function scrollToBottom() { chatContainer.scrollTop chatContainer.scrollHeight; } // 显示错误信息 function showError(message) { errorContainer.innerHTML div classerror${message}/div; setTimeout(() { errorContainer.innerHTML ; }, 5000); } // 核心发送消息并处理流式响应 async function sendMessage() { const userMessage messageInput.value.trim(); if (!userMessage) return; // 1. 更新UI禁用输入添加用户消息 messageInput.value ; sendButton.disabled true; addUserMessage(userMessage); // 2. 为助手的回复创建占位符 const botMessageElement createBotMessagePlaceholder(); let fullResponse ; try { // 3. 准备请求数据包含完整的对话历史 const requestData { model: phi-3, // 根据你的API调整模型名称 messages: conversationHistory, // 发送全部历史以实现多轮对话 stream: true, // 关键开启流式输出 max_tokens: 1024, temperature: 0.7, }; // 4. 发起fetch请求处理流式响应 const response await fetch(API_ENDPOINT, { method: POST, headers: { Content-Type: application/json, // 如果需要API密钥请在此添加 // Authorization: Bearer YOUR_API_KEY }, body: JSON.stringify(requestData) }); if (!response.ok) { throw new Error(网络请求失败: ${response.status}); } // 5. 处理流式数据 const reader response.body.getReader(); const decoder new TextDecoder(utf-8); while (true) { const { done, value } await reader.read(); if (done) { // 流式传输结束 removeLoadingIndicator(); // 将完整的助手回复加入历史记录 conversationHistory.push({ role: assistant, content: fullResponse }); break; } // 解码数据块并按照Server-Sent Events (SSE) 格式解析 const chunk decoder.decode(value); const lines chunk.split(\n).filter(line line.trim() ! ); for (const line of lines) { if (line.startsWith(data: )) { const data line.slice(6); // 去掉 data: 前缀 if (data [DONE]) { continue; // 流结束标志 } try { const parsed JSON.parse(data); const content parsed.choices?.[0]?.delta?.content || ; if (content) { fullResponse content; // 更新界面并简单格式化文本如代码块 const formattedContent formatMessageText(fullResponse); botMessageElement.innerHTML formattedContent; } } catch (e) { console.warn(解析流数据出错:, e); } } } } } catch (error) { console.error(对话出错:, error); removeLoadingIndicator(); // 在助手消息位置显示错误 botMessageElement.innerHTML 抱歉回答生成时出现错误: ${error.message}; showError(请求失败请检查网络连接或稍后再试。); } finally { // 6. 重置UI状态 sendButton.disabled false; messageInput.focus(); } } // 事件监听 sendButton.addEventListener(click, sendMessage); messageInput.addEventListener(keypress, (e) { if (e.key Enter !e.shiftKey) { e.preventDefault(); sendMessage(); } }); // 页面加载后聚焦输入框 window.onload () { messageInput.focus(); };这段代码是前端与Phi-3模型交互的核心。它做了以下几件关键事管理对话历史conversationHistory数组记录了所有对话每次请求都将其发送保证了上下文的连贯性。处理流式响应fetch配合ReadableStream逐块读取后端推送的数据并实时更新到网页上。优化用户体验发送时禁用按钮、显示加载动画、错误时友好提示、自动滚动到底部。简单的内容格式化检测并高亮显示代码块让回复更易读。3.3 连接你的Phi-3 Forest Laboratory后端前端代码准备好了但它需要一个能对话的后端。API_ENDPOINT变量需要指向你部署的Phi-3 Forest Laboratory API服务。通常这个后端服务需要加载Phi-3模型使用相应的深度学习框架如Transformers, vLLM等加载模型。提供兼容OpenAI格式的API我们的前端代码是按照OpenAI的Chat Completion API格式特别是流式/v1/chat/completions编写的。你的后端需要能处理messages数组并支持stream: true参数。实现流式返回后端在生成每个token后应立即将其推送到响应流中格式为data: {JSON}\n\n最后以data: [DONE]结束。这里提供一个极其简单的Python Flask后端示例说明其核心逻辑# 注意这是一个概念性示例你需要根据实际使用的推理服务器如vLLM, TGI进行调整。 from flask import Flask, request, Response, stream_with_context import json import time app Flask(__name__) # 假设这里有一个函数能调用你的Phi-3模型进行流式生成 # def generate_stream(messages, max_tokens, temperature): app.route(/v1/chat/completions, methods[POST]) def chat_completions(): data request.json messages data.get(messages, []) stream data.get(stream, False) def event_stream(): # 模拟流式生成过程 fake_response 这是一个来自Phi-3模型的流式回复示例。它是一段一段返回的。 words fake_response.split( ) for i, word in enumerate(words): # 构建符合OpenAI流式响应格式的数据块 chunk { id: chatcmpl-123, object: chat.completion.chunk, created: int(time.time()), model: phi-3, choices: [{ index: 0, delta: {content: word }, finish_reason: None if i len(words)-1 else stop }] } yield fdata: {json.dumps(chunk)}\n\n time.sleep(0.1) # 模拟生成延迟 yield data: [DONE]\n\n if stream: return Response(stream_with_context(event_stream()), mimetypetext/event-stream) else: # 非流式响应处理 return jsonify({message: 此端点仅支持流式请求}) if __name__ __main__: app.run(port5000)重要提示实际部署中你应该使用高性能的推理服务器如vLLM、Text Generation Inference来部署Phi-3模型它们原生提供了高性能、支持流式的OpenAI兼容API。前端代码中的API_ENDPOINT就指向这个服务器的地址。4. 效果提升与进阶思路基础功能跑通后我们可以从多个维度进一步提升这个智能对话界面的效果和实用性。更优雅的流式渲染上面的例子是直接替换整个文本。对于更长的回答可以引入一个“打字机”效果让文字逐个字符出现体验更丝滑。也可以引入Markdown解析库如marked来渲染更丰富的格式如加粗、列表、表格等。对话历史管理当对话轮次非常多时全部发送给后端可能超出模型上下文长度。前端可以实现一个“滑动窗口”机制只保留最近N轮对话或者一个智能的“摘要”功能将早期对话总结成一段话后再发送。前端缓存与离线支持利用localStorage或IndexedDB将对话历史保存在用户浏览器中即使关闭页面再打开也能恢复之前的对话。这能极大提升用户粘性。多模态支持如果模型支持如果Phi-3 Forest Laboratory的版本支持图像理解前端可以增加图片上传功能将图片转换为base64编码后放入messages数组中实现“图文对话”的炫酷效果。性能与用户体验优化可以添加“停止生成”按钮让用户随时中断冗长的回答实现消息的“重新生成”功能在网络慢时添加更详细的加载状态提示等。5. 总结把Phi-3 Forest Laboratory这样的先进大模型通过JavaScript搬到浏览器里看着它和用户进行实时、流畅、有记忆的对话是一件非常有成就感的事情。整个过程的核心在于理解并巧妙运用“流式传输”和“上下文管理”这两个关键技术点。前端在这里扮演的角色远不止是一个简单的请求发送者。它是一个体验的塑造者通过精细的加载状态、错误处理和交互动画把冰冷的AI推理过程包装成温暖、即时、可靠的对话服务。本文提供的代码是一个坚实的起点你可以基于它结合具体的业务场景打造出更酷、更智能的Web应用。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
相关文章
告别环境报错：用nRF Connect SDK V3.0.0 + VS Code插件包，5分钟搭建稳定Nordic开发环境
5分钟极速搭建Nordic开发环境：nRF Connect SDK V3.0.0黄金配置指南 在物联网设备开发中，环境配置的稳定性往往决定了开发效率的上限。最近接手一个基于nRF5340的智能家居网关项目时，我深刻体会到这一点——团队新成员花了整整两天时间折腾环…
5个Hypothesis.h高级功能详解：解锁Web批注的终极潜力
5个Hypothesis.h高级功能详解：解锁Web批注的终极潜力 【免费下载链接】h Annotate with anyone, anywhere. 项目地址: https://gitcode.com/gh_mirrors/h/h Hypothesis.h是一个强大的Web批注平台，让用户可以在任何网页上进行协作式标注和讨论。作…
Graph Node高级配置：环境变量与配置文件详解
Graph Node高级配置：环境变量与配置文件详解 【免费下载链接】graph-node Graph Node indexes data from blockchains such as Ethereum and serves it over GraphQL 项目地址: https://gitcode.com/gh_mirrors/gr/graph-node Graph Node 作为区块链数据索引…
AI Agent学习day6 从 MCP 到 RAG 记忆：AI Agent 项目中的三块核心基础
从 MCP 到 RAG 记忆：AI Agent 项目中的三块核心基础最近在学习 Ragent 项目里的 AI 基础内容，连续看了三篇文章，分别涉及：MCP 中的 Tools、Resources、PromptsMCP 官方 Java SDK 的底层架构RAG 多轮对话记忆设计这三篇看似分散&am…
刚接触AI创业？先搞懂OPC中国和智能体来了是什么关系
[摘要] 最近一人公司火了，很多人想入局但一上来就遇到两个名字：智能体来了和OPC中国。它们是什么关系？你应该先关注哪个？这篇是写给新手的导航指南。新人最常问的三个问题问题一：这两个名字是不是同一家公司࿱…
【仅限Q2开放】Gemini年报增强插件V2.3内测权限（已通过上交所信创适配认证，附5家A股实证案例）
更多请点击： https://codechina.net 第一章：Gemini年报撰写辅助概述 Gemini年报撰写辅助是面向企业财务与合规团队的AI增强型文档生成工具，依托Google Gemini大模型的多模态理解与结构化推理能力，将非结构化财报数据、会议纪要、…
从三星老录像机到现代小家电：聊聊RCC开关电源的‘间歇振荡’与实战改造
从三星老录像机到现代小家电：RCC开关电源的间歇振荡与工程智慧上世纪90年代的三星S10型放像机里藏着一个电源设计的"活化石"——RCC（Ringing Choke Converter）开关电源。这种看似简单的自激振荡电路，却能在100-240V的宽…
Gemini文案生成不是“抄作业”：揭秘头部品牌如何用它实现个性化触达+实时动态优化
更多请点击： https://intelliparadigm.com 第一章：Gemini文案生成不是“抄作业”：揭秘头部品牌如何用它实现个性化触达实时动态优化 当品牌将Gemini接入私有客户数据湖与实时行为流后，文案生成便脱离了模板化输出的窠臼ÿ…
库的制作与原理2.0---动静态链接，main全解析，CPU在执行文件时的作用，GOT表。
bit::Shadow✧(≖ ◡ ≖✿ 目录 静态库链接Section段 ELF文件加载与地址、进程 objdump -S 【-g选项下的可执行文件/.o文件】 ☆☆☆可执行文件在操作系统的处理 可执行文件的起始入口地址： CPU处理可执行程序流程： CPU图： CPU处理功…
Win10/Win11下Realtek 8188GU网卡驱动感叹号？别急着扔，试试这个手动安装的野路子
Realtek 8188GU网卡驱动故障深度修复指南：从原理到实战当设备管理器里那个顽固的黄色感叹号挥之不去，而你已经尝试了所有"标准操作"——Windows自动更新、第三方驱动工具、甚至重启大法——却依然无济于事时，是时候换个思路了。这篇…
AnolisOS 8.8安装源配置踩坑实录：从‘设置基础软件仓库时出错’到成功联网的保姆级指南
AnolisOS 8.8安装源配置实战指南：从诊断到解决方案的全流程解析当你在安装AnolisOS 8.8时遇到"设置基础软件仓库时出错"的提示，这通常意味着系统无法访问或识别安装源。这个问题看似简单，但背后可能涉及网络配置、镜像选择、启动参…
基于树莓派Pico的反应速度测试游戏：从GPIO编程到状态机实战
1. 项目概述与核心思路最近在整理工作室的电子元件，翻出来几个闲置的街机按钮和一块树莓派Pico，灵机一动，决定做个简单又有趣的反应速度测试游戏。这个项目非常适合想入门嵌入式开发的朋友，它不涉及复杂的传感器和通信协议&#x…
Win10/Win11下Realtek 8188GU网卡驱动感叹号？别急着扔，试试这个手动安装的野路子
Realtek 8188GU网卡驱动故障深度修复指南：从原理到实战当设备管理器里那个顽固的黄色感叹号挥之不去，而你已经尝试了所有"标准操作"——Windows自动更新、第三方驱动工具、甚至重启大法——却依然无济于事时，是时候换个思路了。这篇…
AnolisOS 8.8安装源配置踩坑实录：从‘设置基础软件仓库时出错’到成功联网的保姆级指南
AnolisOS 8.8安装源配置实战指南：从诊断到解决方案的全流程解析当你在安装AnolisOS 8.8时遇到"设置基础软件仓库时出错"的提示，这通常意味着系统无法访问或识别安装源。这个问题看似简单，但背后可能涉及网络配置、镜像选择、启动参…
基于树莓派Pico的反应速度测试游戏：从GPIO编程到状态机实战
1. 项目概述与核心思路最近在整理工作室的电子元件，翻出来几个闲置的街机按钮和一块树莓派Pico，灵机一动，决定做个简单又有趣的反应速度测试游戏。这个项目非常适合想入门嵌入式开发的朋友，它不涉及复杂的传感器和通信协议&#x…
MPC-BE：基于DirectShow架构的专业级开源媒体播放解决方案
MPC-BE：基于DirectShow架构的专业级开源媒体播放解决方案 【免费下载链接】MPC-BE MPC-BE – универсальный проигрыватель аудио и видеофайлов для операционной системы Windows. 项目地址:…
如何快速计算3D模型体积和重量：STL-Volume-Model-Calculator终极指南
如何快速计算3D模型体积和重量：STL-Volume-Model-Calculator终极指南 【免费下载链接】STL-Volume-Model-Calculator STL Volume Model Calculator Python 项目地址: https://gitcode.com/gh_mirrors/st/STL-Volume-Model-Calculator 你是否曾经为3D打印项目…
通过Taotoken CLI工具一键配置团队开发环境与模型密钥
通过Taotoken CLI工具一键配置团队开发环境与模型密钥 1. CLI工具安装与基本使用 Taotoken提供的CLI工具可通过npm全局安装或直接使用npx运行。对于需要频繁使用CLI的团队，推荐全局安装： npm install -g taotoken/taotoken对于临时使用或项目级配置&a…