Phi-3 Forest Laboratory 入门：JavaScript交互应用开发初探

Phi-3 Forest Laboratory 入门JavaScript交互应用开发初探你是不是也好奇那些能对话、能写代码的AI模型怎么才能放到你自己的网页里今天咱们就来聊聊这个事儿。我最近上手试了试Phi-3 Forest Laboratory发现用JavaScript把它集成到前端应用里其实没想象中那么复杂。整个过程有点像给网站加一个“智能大脑”让用户能直接在页面上和AI聊天、生成内容。这篇文章就是写给前端开发者的一个入门指南。我会带你一步步走从最基本的API调用开始到怎么处理数据、展示结果再到一些让体验更好的小技巧。你不用是AI专家只要会点JavaScript跟着做下来就能让你的网页“聪明”起来。1. 准备工作环境与密钥在开始写代码之前我们得先把“钥匙”准备好。调用任何云端AI服务通常都需要一个API密钥API Key它就像是你的专属通行证。首先你需要访问Phi-3 Forest Laboratory的官方平台。一般来说你需要注册一个账号然后在控制台或者开发者设置里找到创建API密钥的地方。这个过程和申请其他云服务API比如地图、支付很类似。创建成功后你会得到一串长长的字符看起来像这样sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx。请务必保管好这串密钥不要把它直接硬编码在客户端的JavaScript代码里。为什么呢因为前端代码是公开的任何人都能通过浏览器查看源代码如果密钥写在里面就相当于把家门钥匙放在了门口的地毯下。那么安全的方式是什么通常我们会通过自己的后端服务器来中转这个请求。前端把用户的问题发给自己的服务器服务器再用这个密钥去调用AI服务最后把结果返回给前端。这样密钥就安全地藏在了后端。为了简化本教程我们先假设你已经有了一个可以安全调用Phi-3 API的后端接口它的地址是https://your-backend.com/api/chat。前端只需要和这个接口打交道就行了。当然如果你只是在本地做原型测试也可以暂时将密钥放在前端但切记不要将这样的代码部署到生产环境。接下来我们在项目里创建一个简单的HTML文件作为起点。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlePhi-3 前端交互实验/title style /* 一些基础样式让页面看起来不那么简陋 */ body { font-family: sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; } #chatBox { border: 1px solid #ccc; height: 400px; overflow-y: auto; padding: 10px; margin-bottom: 20px; } .message { margin-bottom: 15px; padding: 10px; border-radius: 8px; } .user { background-color: #e3f2fd; text-align: right; } .assistant { background-color: #f5f5f5; } #inputArea { display: flex; gap: 10px; } #userInput { flex-grow: 1; padding: 10px; } button { padding: 10px 20px; } .loading { color: #666; font-style: italic; } .error { color: #d32f2f; background-color: #ffebee; padding: 10px; border-radius: 5px; } /style /head body h1与 Phi-3 对话/h1 div idchatBox !-- 对话内容将动态显示在这里 -- div classmessage assistant你好我是Phi-3有什么可以帮你的/div /div div idinputArea input typetext iduserInput placeholder输入你的问题... / button idsendBtn发送/button /div div idstatusArea/div script // 我们的JavaScript代码将写在这里 /script /body /html这个页面有一个显示对话的区域 (#chatBox)一个输入框一个发送按钮还有一个用来显示状态比如加载或错误的区域。样式写得很简单重点是功能。2. 核心步骤调用API与获取响应现在来到最核心的部分怎么用JavaScript去跟AI“说话”。我们将使用浏览器内置的fetchAPI它现在非常强大且易于使用。2.1 构建请求AI模型通常通过“消息”messages数组来理解对话上下文。每个消息都是一个对象包含role角色和content内容两个属性。角色一般是user用户、assistant助手或system系统指令。我们的目标是当用户输入问题并点击发送后我们把用户的问题添加到消息历史里然后把这个历史发给后端后端再转发给Phi-3。首先我们在script标签里定义一些变量和函数。// 存储对话历史 let conversationHistory [ { role: assistant, content: 你好我是Phi-3有什么可以帮你的 } ]; // 后端API地址请替换成你自己的 const API_ENDPOINT https://your-backend.com/api/chat; // 获取页面元素 const chatBox document.getElementById(chatBox); const userInput document.getElementById(userInput); const sendBtn document.getElementById(sendBtn); const statusArea document.getElementById(statusArea); // 发送消息的函数 async function sendMessage() { const userMessage userInput.value.trim(); if (!userMessage) return; // 如果输入为空什么都不做 // 1. 将用户消息添加到历史并显示在页面上 conversationHistory.push({ role: user, content: userMessage }); appendMessageToChat(user, userMessage); userInput.value ; // 清空输入框 // 2. 显示“正在思考”的加载状态 showLoadingIndicator(); try { // 3. 准备请求数据 const requestData { model: phi-3, // 根据实际模型名称调整 messages: conversationHistory, // 可以添加其他参数如 temperature创造性等 temperature: 0.7, max_tokens: 500 }; // 4. 发送请求到我们的后端 const response await fetch(API_ENDPOINT, { method: POST, headers: { Content-Type: application/json, // 注意密钥不应在前端添加应由后端处理 }, body: JSON.stringify(requestData) }); // 5. 检查响应是否成功 if (!response.ok) { throw new Error(网络响应异常: ${response.status}); } // 6. 解析返回的JSON数据 const data await response.json(); // 7. 假设后端返回结构为 { reply: AI的回复内容 } const aiReply data.reply; // 8. 将AI回复添加到历史并显示 conversationHistory.push({ role: assistant, content: aiReply }); appendMessageToChat(assistant, aiReply); // 9. 隐藏加载状态 hideLoadingIndicator(); } catch (error) { // 10. 如果出错显示错误信息 console.error(调用API出错:, error); showError(抱歉出错了: ${error.message}); hideLoadingIndicator(); } } // 辅助函数将一条消息添加到聊天框 function appendMessageToChat(role, content) { const messageDiv document.createElement(div); messageDiv.className message ${role}; messageDiv.textContent content; chatBox.appendChild(messageDiv); // 滚动到底部确保看到最新消息 chatBox.scrollTop chatBox.scrollHeight; } // 辅助函数显示加载指示器 function showLoadingIndicator() { statusArea.innerHTML div classloadingPhi-3 正在思考.../div; sendBtn.disabled true; // 发送期间禁用按钮 } // 辅助函数隐藏加载指示器 function hideLoadingIndicator() { statusArea.innerHTML ; sendBtn.disabled false; } // 辅助函数显示错误 function showError(message) { statusArea.innerHTML div classerror${message}/div; } // 绑定发送按钮的点击事件 sendBtn.addEventListener(click, sendMessage); // 绑定输入框的回车键事件 userInput.addEventListener(keypress, function(event) { if (event.key Enter) { sendMessage(); } });这段代码做了几件关键的事情管理对话历史用一个数组conversationHistory记住所有对话。处理用户输入点击发送或按回车时触发sendMessage函数。发起网络请求使用fetch向我们的后端发送一个POST请求请求体里包含了对话历史和参数。处理响应成功拿到AI的回复后把它显示在页面上并存入历史。处理状态在等待时显示“正在思考”出错时显示错误信息。2.2 处理后端响应上面的代码假设你的后端接口返回一个简单的JSON对象比如{ reply: 这里是AI生成的文本 }。实际中不同的AI服务API返回的格式可能不同。例如有些服务可能返回一个包含多个choices的数组。如果你的后端直接对接的是类似OpenAI格式的API返回的数据结构可能更复杂。这时你需要稍微调整解析响应的部分// ... 在 try 块内收到 response 后 ... const data await response.json(); // 假设返回格式为 { choices: [ { message: { content: ... } } ] } const aiReply data.choices[0]?.message?.content; if (!aiReply) { throw new Error(未能从响应中获取有效回复); } // ... 后续处理 aiReply ...关键在于你需要根据你后端接口实际返回的数据结构来正确地从data对象中提取出AI生成的文本内容。3. 提升体验流式响应与交互优化基础的问答功能已经实现了。但如果你问AI一个复杂的问题它可能需要几秒钟才能生成完整的回答。如果一直让用户盯着“正在思考”的提示干等体验就不太好。一个更高级的做法是使用“流式响应”Streaming Response让答案像打字一样一个字一个字地显示出来。3.1 实现流式输出流式输出需要后端和前端共同支持。后端需要以数据流stream的形式逐步发送生成的文本前端则需要逐步接收并渲染。这里我们假设你的后端支持Server-Sent Events (SSE) 或类似的流式协议。前端可以使用EventSource来接收。为了演示我们修改一下sendMessage函数中处理响应的部分// ... 在 showLoadingIndicator() 之后 ... try { const requestData { /* ... 同上 ... */ }; // 改用支持流式传输的接口 const streamResponse await fetch(${API_ENDPOINT}/stream, { // 假设有专门的流式端点 method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(requestData) }); if (!streamResponse.ok || !streamResponse.body) { throw new Error(流式请求失败); } const reader streamResponse.body.getReader(); const decoder new TextDecoder(); let aiReplyAccumulator ; // 用于累积AI的回复 const aiMessageDiv document.createElement(div); // 创建一个新的div来显示流式内容 aiMessageDiv.className message assistant; chatBox.appendChild(aiMessageDiv); // 开始读取流 while (true) { const { done, value } await reader.read(); if (done) break; // 解码收到的数据块 const chunk decoder.decode(value, { stream: true }); // 假设每个数据块是纯文本或特定格式的JSON这里按纯文本处理 aiReplyAccumulator chunk; // 实时更新DOM显示已接收到的部分 aiMessageDiv.textContent aiReplyAccumulator; chatBox.scrollTop chatBox.scrollHeight; // 持续滚动到底部 } // 流式传输结束 conversationHistory.push({ role: assistant, content: aiReplyAccumulator }); hideLoadingIndicator(); } catch (error) { // ... 错误处理 ... }这样用户就能看到文字逐渐出现的过程体验会流畅很多。请注意这需要你的后端API支持流式输出并且前后端约定好数据格式。3.2 添加基础交互功能除了核心的问答我们还可以加一些让用户更方便的小功能。清空对话对话历史越来越长后用户可能想开始一个新话题。我们可以加一个清空按钮。!-- 在输入区域附近添加一个按钮 -- button idclearBtn清空对话/button// 在JS中获取按钮并添加事件 const clearBtn document.getElementById(clearBtn); clearBtn.addEventListener(click, function() { // 重置对话历史保留最初的欢迎语 conversationHistory [ { role: assistant, content: 你好我是Phi-3有什么可以帮你的 } ]; // 清空聊天框显示 chatBox.innerHTML div classmessage assistant你好我是Phi-3有什么可以帮你的/div; statusArea.innerHTML ; // 清空状态 });调整模型参数比如让用户控制AI回答的“创造性”temperature。我们可以在页面上加一个滑动条。label fortempSlider创造性 (Temperature): span idtempValue0.7/span/label input typerange idtempSlider min0 max1 step0.1 value0.7const tempSlider document.getElementById(tempSlider); const tempValueSpan document.getElementById(tempValue); let currentTemperature 0.7; tempSlider.addEventListener(input, function() { currentTemperature parseFloat(this.value); tempValueSpan.textContent currentTemperature.toFixed(1); }); // 然后在 sendMessage 函数中使用 currentTemperature 变量 const requestData { model: phi-3, messages: conversationHistory, temperature: currentTemperature, // 使用用户设置的值 max_tokens: 500 };4. 总结走完这一趟你会发现把像Phi-3这样的AI模型集成到前端应用里核心逻辑并不复杂。无非就是收集用户输入通过一个安全的通道你自己的后端发送给AI服务再把返回的结果漂亮地展示出来。过程中管理好对话的历史记录很重要这决定了AI是否能理解上下文。流式输出的体验确实比干等好得多如果你的后端能支持强烈建议加上。那些小功能比如清空对话、调整参数虽然简单但能让用户感觉这个工具更贴心、更可控。当然这只是个开始。在实际项目中你可能还需要考虑更多比如用户身份验证、对话持久化把聊天记录存下来、支持多模态图片、文件上传等等。但有了这个基础框架后续的扩展就有了清晰的路径。最重要的是动手试试用几行JavaScript代码真的能让一个静态页面变得能说会道这种感觉还是挺奇妙的。你可以基于这个简单的例子去打造更复杂、更有趣的AI交互应用。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。