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

可以做外链的网站平台延庆网站制作

news 2025/10/5 0:27:26

可以做外链的网站平台,延庆网站制作,企业商务网,如何用代码制作网站前期准备先在火山引擎那创建一个自定义推理接入点，地址：https://console.volcengine.com/ark/region:arkcn-beijing/endpoint?config%7B%7D 再点击右边操作的 api接入，复制粘贴自己的API Key 效果然后就可以去调用接口了可以用jq模拟的…

前期准备

先在火山引擎那创建一个自定义推理接入点，地址：https://console.volcengine.com/ark/region:ark+cn-beijing/endpoint?config=%7B%7D

在这里插入图片描述

再点击右边操作的 api接入，复制粘贴自己的API Key

在这里插入图片描述

效果

然后就可以去调用接口了
可以用jq模拟的方式，但是不推荐这种方式，因为要等完整的回答太慢了
建议开启流式传输，用Fetch API 实现逐字输出
我的API Key虽然贴出来了，方便大家测试，但是不建议大家直接用我的

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>火山引擎豆包Dome</title></head><body><div id="chat-box"></div></body><script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script><script>// 官网的例子// curl https://ark.cn-beijing.volces.com/api/v3/chat/completions \//   -H "Content-Type: application/json" \//   -H "Authorization: Bearer $ARK_API_KEY" \//   -d '{//     "model": "doubao-1-5-pro-32k-250115",//     "messages": [//       {"role": "system","content": "你是人工智能助手."},//       {"role": "user","content": "你好"}//     ]//   }'// 具体对话let data = {model: "doubao-1-5-pro-32k-250115",stream: true, // 流式传输messages: [{ role: "system", content: "你是人工智能助手." },{ role: "user", content: "你好，我是前端开发，请问我怎么找工作？" },],};// 1.jquery的调用方式，不行，必须关闭流式传输，最多只能等接口全部加载成功后通过计时器模拟，不能逐字输出// let fullResponse = "";// let charIndex = 0;// $.ajax({//   type: "post",//   url: "https://ark.cn-beijing.volces.com/api/v3/chat/completions",//   dataType: "json",//   contentType: "application/json", // 明确指定内容类型//   headers: {//     Authorization: "Bearer b3025ba7-2241-4794-b983-5089b0719ea6",//   },//   data: JSON.stringify(data),//   success: (res) => {//     console.log(res);//     const text = res.choices[0].message.content;//     const timer = setInterval(() => {//       if (charIndex < text.length) {//         fullResponse += text.charAt(charIndex);//         $("#chat-box").text(fullResponse);//         charIndex++;//       } else {//         clearInterval(timer);//       }//     }, 50); // 每50毫秒输出一个字//   },// });// 2.Fetch API 实现逐字输出const chatBox = document.getElementById("chat-box");let fullMessage = "";async function streamChat() {const response = await fetch("https://ark.cn-beijing.volces.com/api/v3/chat/completions",{method: "POST",headers: {"Content-Type": "application/json",Authorization: "Bearer b3025ba7-2241-4794-b983-5089b0719ea6",},body: JSON.stringify(data),});const reader = response.body.getReader();const decoder = new TextDecoder();while (true) {const { done, value } = await reader.read();if (done) {document.querySelector(".typing-cursor")?.remove();break;}const chunk = decoder.decode(value);chunk.split("\n").forEach((line) => {if (line.startsWith("data: ")) {try {const data = JSON.parse(line.slice(6));if (data.choices?.[0]?.delta?.content) {fullMessage += data.choices[0].delta.content;renderMessage(fullMessage);}} catch (e) {}}});}}function renderMessage(text) {chatBox.innerHTML = `<div class="message">${text}</div><span class="typing-cursor"></span>`;chatBox.scrollTop = chatBox.scrollHeight;}streamChat();</script>
</html>