告别海外账号与网络限制稳定直连全球优质大模型限时半价接入中。 点击领取海量免费额度通过Taotoken聚合接口实现一个支持多模型切换的简单聊天演示页面本文面向希望快速构建一个可交互演示页面的前端或全栈开发者。我们将使用纯JavaScriptES6调用Taotoken提供的OpenAI兼容HTTP API创建一个简洁的Web聊天界面。该页面的核心功能是允许用户从下拉菜单中选择不同的AI模型发送消息并实时获取回复。文中将重点说明如何在前端安全地处理API Key并确保接口调用符合Taotoken的配置规范。1. 项目概述与准备工作我们的目标是构建一个单页应用它包含一个模型选择下拉框、一个消息输入区域、一个发送按钮以及一个展示对话历史的区域。整个应用将通过JavaScript直接与https://taotoken.net/api/v1/chat/completions端点进行通信。在开始编码前你需要准备两样东西一个有效的Taotoken API Key和你想调用的模型ID。请登录Taotoken控制台创建API Key并在模型广场查看可供使用的模型及其对应的ID例如claude-sonnet-4-6或gpt-4o-mini等。重要安全提示在前端代码中直接硬编码API Key是极不安全的任何访问你页面的人都可以通过浏览器开发者工具看到它。对于演示或原型项目我们采用一种相对安全的临时方案使用一个简单的后端代理或环境变量来注入密钥。但在本文的纯前端示例中我们将先展示直接调用的逻辑结构并立即指出其安全隐患与改进方案。2. 构建基础的HTML与CSS界面首先我们创建页面的基本结构。这里提供一个极简的HTML骨架和样式确保功能清晰可见。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleTaotoken 多模型聊天演示/title style body { font-family: sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; } #chat-container { border: 1px solid #ccc; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; height: 400px; overflow-y: auto; } .message { margin-bottom: 0.8rem; } .user { text-align: right; color: #0066cc; } .assistant { text-align: left; color: #333; } #input-area { display: flex; gap: 0.5rem; } #message-input { flex-grow: 1; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; } #send-btn { padding: 0.5rem 1.5rem; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } #model-select { padding: 0.5rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; } .warning { background-color: #fff3cd; border: 1px solid #ffeaa7; padding: 1rem; border-radius: 4px; margin-bottom: 1rem; } /style /head body h1Taotoken 多模型聊天演示/h1 div classwarning strong注意/strong此演示页面将API Key直接暴露在前端代码中仅用于本地开发或临时演示。在生产环境中你必须通过后端服务器代理API请求以保护密钥安全。 /div label formodel-select选择模型/label select idmodel-select option valueclaude-sonnet-4-6Claude 3.5 Sonnet/option option valuegpt-4o-miniGPT-4o Mini/option !-- 更多模型选项可以从Taotoken模型广场获取并添加 -- /select div idchat-container/div div idinput-area input typetext idmessage-input placeholder输入你的消息... / button idsend-btn发送/button /div script srcapp.js/script /body /html3. 实现JavaScript交互逻辑接下来我们创建app.js文件编写与Taotoken API交互的核心逻辑。代码将包含发送请求、处理响应以及更新UI的函数。// app.js // 注意在生产环境中API_KEY不应硬编码在此处而应由后端环境变量提供或通过安全接口获取。 const TAOTOKEN_API_BASE https://taotoken.net/api/v1; // !!! 安全警告请勿在公开仓库或生产环境前端代码中提交真实的API Key !!! // 此处仅为演示实际使用时应在本地开发环境临时设置或通过后端代理。 const TAOTOKEN_API_KEY YOUR_TAOTOKEN_API_KEY_HERE; // 替换为你的真实Key const chatContainer document.getElementById(chat-container); const messageInput document.getElementById(message-input); const sendBtn document.getElementById(send-btn); const modelSelect document.getElementById(model-select); let conversationHistory []; function addMessageToUI(role, content) { const messageDiv document.createElement(div); messageDiv.classList.add(message, role); messageDiv.textContent ${role user ? 你 : 助手}: ${content}; chatContainer.appendChild(messageDiv); chatContainer.scrollTop chatContainer.scrollHeight; // 滚动到底部 } async function sendMessageToTaotoken(userMessage, selectedModel) { // 将用户消息加入历史并显示 conversationHistory.push({ role: user, content: userMessage }); addMessageToUI(user, userMessage); // 显示“思考中”状态 const thinkingDiv document.createElement(div); thinkingDiv.classList.add(message, assistant); thinkingDiv.textContent 助手: 思考中...; chatContainer.appendChild(thinkingDiv); chatContainer.scrollTop chatContainer.scrollHeight; try { const response await fetch(${TAOTOKEN_API_BASE}/chat/completions, { method: POST, headers: { Authorization: Bearer ${TAOTOKEN_API_KEY}, Content-Type: application/json, }, body: JSON.stringify({ model: selectedModel, messages: conversationHistory, stream: false, // 为简化演示使用非流式响应 }), }); if (!response.ok) { throw new Error(API请求失败: ${response.status} ${response.statusText}); } const data await response.json(); const assistantReply data.choices[0]?.message?.content; if (assistantReply) { // 移除“思考中”提示添加真实回复 chatContainer.removeChild(thinkingDiv); conversationHistory.push({ role: assistant, content: assistantReply }); addMessageToUI(assistant, assistantReply); } else { throw new Error(未收到有效回复); } } catch (error) { console.error(调用Taotoken API时出错:, error); chatContainer.removeChild(thinkingDiv); const errorDiv document.createElement(div); errorDiv.classList.add(message, assistant); errorDiv.textContent 助手: 抱歉请求出错。(${error.message}); chatContainer.appendChild(errorDiv); } } // 事件监听 sendBtn.addEventListener(click, async () { const userMessage messageInput.value.trim(); const selectedModel modelSelect.value; if (!userMessage) return; messageInput.value ; // 清空输入框 await sendMessageToTaotoken(userMessage, selectedModel); }); messageInput.addEventListener(keypress, (e) { if (e.key Enter) { sendBtn.click(); } }); // 初始化可选发送一个欢迎消息 window.onload () { addMessageToUI(assistant, 你好请从上方选择模型然后开始对话。); };4. 关键配置说明与安全进阶上面的代码可以直接运行但其中存在明显的安全风险API Key完全暴露对于任何计划部署或分享的演示你必须采取安全措施。正确的API Key处理方式是构建一个简单的后端服务。这个服务持有API Key前端只与你的后端通信。例如你可以使用Node.js Express、Python Flask或任何你熟悉的后端框架快速搭建一个代理端点。以下是一个使用Node.js和Express的极简后端示例展示如何安全地转发请求// server.js (后端示例) const express require(express); const axios require(axios); require(dotenv).config(); // 用于从.env文件加载环境变量 const app express(); const port 3000; app.use(express.json()); app.use(express.static(public)); // 假设前端HTML/JS放在public目录 // 代理聊天请求的端点 app.post(/api/chat, async (req, res) { try { const { model, messages } req.body; const response await axios.post( https://taotoken.net/api/v1/chat/completions, { model, messages, stream: false }, { headers: { Authorization: Bearer ${process.env.TAOTOKEN_API_KEY}, // Key从环境变量读取 Content-Type: application/json, }, } ); res.json(response.data); } catch (error) { console.error(代理请求出错:, error.response?.data || error.message); res.status(500).json({ error: 请求上游API失败 }); } }); app.listen(port, () { console.log(安全代理服务器运行在 http://localhost:${port}); });对应的前端JavaScript代码则需要修改将请求发送到你自己的后端端点例如/api/chat并且完全移除硬编码的API Key。这样你的Taotoken API Key就安全地存储在后端服务器的环境变量中不会泄露给前端用户。5. 运行与扩展将HTML、CSS、JavaScript文件放在同一目录并在浏览器中打开HTML文件即可运行这个基础演示。请确保已将代码中的YOUR_TAOTOKEN_API_KEY_HERE替换为你在控制台获取的真实Key仅限本地测试。你可以轻松扩展此演示在select下拉框中添加更多从Taotoken模型广场获取的模型ID。实现流式响应stream: true以获得更实时的打字机输出效果。美化UI增加对话历史持久化如使用localStorage。按照前述安全建议集成后端代理服务。这个演示页面清晰地展示了如何利用Taotoken统一的OpenAI兼容接口以前端技术快速构建一个可切换多模型的原型应用。所有模型调用都通过同一个端点https://taotoken.net/api/v1/chat/completions完成只需更改model参数即可极大简化了开发流程。希望本教程能帮助你快速上手。要获取API Key和探索更多可用模型请访问 Taotoken。 告别海外账号与网络限制稳定直连全球优质大模型限时半价接入中。 点击领取海量免费额度