引言
随着人工智能技术的发展，将强大的AI能力融入自己的项目中变得越来越简单。本文将介绍如何使用JavaScript语言接入星火大模型API，快速搭建一个基于文本的问答系统。## 视频讲解
视频部署和功能演示
准备工作
在开始之前，确保你已经注册并获得了访问星火大模型API所需的密钥。同时，你需要对JavaScript有一定的了解，并且熟悉基本的HTTP请求方法（如fetch）。
获取API密钥
- 访问星火大模型官网。
- 注册账号并登录。
- 在用户中心找到API密钥管理页面，创建一个新的密钥。
实现步骤
1. 设置环境
首先，在你的JavaScript项目中安装必要的依赖包，例如axios用于发送HTTP请求：
npm install axios2. 编写代码
接下来，编写一段简单的代码来调用星火大模型API进行问答。这里以Node.js为例：```bash
import { getParams, getWSConnect } from "./utils/spark";let questionInput = document.querySelector("#question");
let sendMsgBtn = document.querySelector("#btn");
let result = document.querySelector("#result");let chatHistoryList = []
// 点击发送信息按钮
sendMsgBtn.addEventListener('click', (e) => {sendMsg()
})
// 输入完信息点击enter发送信息
questionInput.addEventListener('keydown', function (event) {if (event.key === 'Enter') { sendMsg(); }
});// 发送消息
const sendMsg = async () => {sendMsgBtn.style.display = 'none'let answer = "";// 回答// 获取输入框中的内容let inputVal = questionInput.value;questionInput.value = "消息加载中。。。"chatHistoryList.push({ role: 'user', content: inputVal });const params = getParams(chatHistoryList);// 每次发送问题 都是一个新的websocketqingqiuconst connect = await getWSConnect()console.log("发送消息");connect.send(JSON.stringify(params))connect.addEventListener('message', (event) => {let data = JSON.parse(event.data)// console.log('收到消息！！',data);if (data.header.code !== 0) {console.log("出错了", data.header.code, ":", data.header.message);// 出错了"手动关闭连接"connect.close()}if (data.header.code === 0) {// 对话已经完成if (data.payload.choices.text && data.header.status === 2) {answer += data.payload.choices.text[0].content;chatHistoryList.push({role: 'assistant',content: answer,});answer = "";addMsgToTextarea(chatHistoryList)setTimeout(() => {// "对话完成，手动关闭连接"connect.close()}, 1000)sendMsgBtn.style.display = 'block';questionInput.value = "继续聊天"} else {answer += data.payload.choices.text[0].content}}})connect.addEventListener('close', (event) => {console.log('聊天完成关闭', event);// 对话完成后socket会关闭，将聊天记录换行处理// 清空输入框questionInput.value = ''});
}/** 将信息添加到textare中在textarea中不支持HTML标签。不能使用标签进行换行。也不能使用\r\n这样的转义字符。要使Textarea中的内容换行，可以使用 或者 来进行换行。 表示回车符； 表示换行符；
*/
const addMsgToTextarea = (chatHistoryList) => {console.log(chatHistoryList);// 清空当前内容result.innerHTML = '';// 循环遍历聊天记录并渲染chatHistoryList.forEach(item => {// 创建一个新的 div 元素来显示每条聊天记录let messageDiv = document.createElement('div');// 根据角色决定样式，用户和助手的消息可以有不同的显示风格if (item.role === 'user') {messageDiv.classList.add('user-message');} else if (item.role === 'assistant') {messageDiv.classList.add('assistant-message');}// 设置消息内容messageDiv.innerHTML = item.content;// 将新的消息元素添加到 result 容器中result.appendChild(messageDiv);});
}
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>讯飞星火认知大模型接入网页成功（各个版本）</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}h1 {text-align: center;color: #5165ea;}html,body {width: 100%;height: 100%;background-color: #f3f8f9;}body {padding: 10%;}#results {width: 100%;height: 80%;background-color: #e2eeff;}#results #result {width: 100%;height: 100%;overflow-y: scroll;padding: 10%;background-color: #e2eeff;white-space: pre-line;}#sendVal {display: flex;width: 100%;height: 20%;}#sendVal #question {width: 70%;height: 100%;padding: 5%;border: 2px dotted blue;}#sendVal #btn {width: 30%;height: 100%;background-color: #5d7cff;}.user-message {background-color: #d1f7d1; /* 用户消息背景色 */padding: 10px;margin: 5px 0;border-radius: 5px;max-width: 70%;align-self: flex-start; /* 将用户消息放置在左侧 */}.assistant-message {background-color: #f1f1f1; /* 助手消息背景色 */padding: 10px;margin: 5px 0;border-radius: 5px;max-width: 70%;align-self: flex-end; /* 将助手消息放置在右侧 */}</style></head><body><h1>讯飞星火认知大模型接入网页成功（各个版本）</h1><div id="results"><div id="result"></div></div><div id="sendVal"><input id="question" type="text" /><button id="btn">发送信息</button></div><script type="module" src="main.js"></script></body>
</html>
{"name": "xinghuo-main","version": "0.0.0","lockfileVersion": 3,"requires": true,"packages": {"": {"name": "xinghuo-main","version": "0.0.0","dependencies": {"crypto-js": "^4.1.1"},"devDependencies": {"vite": "^4.5.5"}},"node_modules/@esbuild/android-arm": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz","integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==","cpu": ["arm"],"dev": true,"license": "MIT","optional": true,"os": ["android"],"engines": {"node": ">=12"}},"node_modules/@esbuild/android-arm64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz","integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==","cpu": ["arm64"],"dev": true,"license": "MIT","optional": true,"os": ["android"],"engines": {"node": ">=12"}},"node_modules/@esbuild/android-x64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz","integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==","cpu": ["x64"],"dev": true,"license": "MIT","optional": true,"os": ["android"],"engines": {"node": ">=12"}},"node_modules/@esbuild/darwin-arm64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz","integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==","cpu": ["arm64"],"dev": true,"license": "MIT","optional": true,"os": ["darwin"],"engines": {"node": ">=12"}},"node_modules/@esbuild/darwin-x64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz","integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==","cpu": ["x64"],"dev": true,"license": "MIT","optional": true,"os": ["darwin"],"engines": {"node": ">=12"}},"node_modules/@esbuild/freebsd-arm64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz","integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==","cpu": ["arm64"],"dev": true,"license": "MIT","optional": true,"os": ["freebsd"],"engines": {"node": ">=12"}},"node_modules/@esbuild/freebsd-x64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz","integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==","cpu": ["x64"],"dev": true,"license": "MIT","optional": true,"os": ["freebsd"],"engines": {"node": ">=12"}},"node_modules/@esbuild/linux-arm": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz","integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==","cpu": ["arm"],"dev": true,"license": "MIT","optional": true,"os": ["linux"],"engines": {"node": ">=12"}},"node_modules/@esbuild/linux-arm64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz","integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==","cpu": ["arm64"],"dev": true,"license": "MIT","optional": true,"os": ["linux"],"engines": {"node": ">=12"}},"node_modules/@esbuild/linux-ia32": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz","integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==","cpu": ["ia32"],"dev": true,"license": "MIT","optional": true,"os": ["linux"],"engines": {"node": ">=12"}},"node_modules/@esbuild/linux-loong64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz","integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==","cpu": ["loong64"],"dev": true,"license": "MIT","optional": true,"os": ["linux"],"engines": {"node": ">=12"}},"node_modules/@esbuild/linux-mips64el": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz","integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==","cpu": ["mips64el"],"dev": true,"license": "MIT","optional": true,"os": ["linux"],"engines": {"node": ">=12"}},"node_modules/@esbuild/linux-ppc64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz","integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==","cpu": ["ppc64"],"dev": true,"license": "MIT","optional": true,"os": ["linux"],"engines": {"node": ">=12"}},"node_modules/@esbuild/linux-riscv64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz","integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==","cpu": ["riscv64"],"dev": true,"license": "MIT","optional": true,"os": ["linux"],"engines": {"node": ">=12"}},"node_modules/@esbuild/linux-s390x": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz","integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==","cpu": ["s390x"],"dev": true,"license": "MIT","optional": true,"os": ["linux"],"engines": {"node": ">=12"}},"node_modules/@esbuild/linux-x64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz","integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==","cpu": ["x64"],"dev": true,"license": "MIT","optional": true,"os": ["linux"],"engines": {"node": ">=12"}},"node_modules/@esbuild/netbsd-x64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz","integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==","cpu": ["x64"],"dev": true,"license": "MIT","optional": true,"os": ["netbsd"],"engines": {"node": ">=12"}},"node_modules/@esbuild/openbsd-x64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz","integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==","cpu": ["x64"],"dev": true,"license": "MIT","optional": true,"os": ["openbsd"],"engines": {"node": ">=12"}},"node_modules/@esbuild/sunos-x64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz","integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==","cpu": ["x64"],"dev": true,"license": "MIT","optional": true,"os": ["sunos"],"engines": {"node": ">=12"}},"node_modules/@esbuild/win32-arm64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz","integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==","cpu": ["arm64"],"dev": true,"license": "MIT","optional": true,"os": ["win32"],"engines": {"node": ">=12"}},"node_modules/@esbuild/win32-ia32": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz","integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==","cpu": ["ia32"],"dev": true,"license": "MIT","optional": true,"os": ["win32"],"engines": {"node": ">=12"}},"node_modules/@esbuild/win32-x64": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz","integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==","cpu": ["x64"],"dev": true,"license": "MIT","optional": true,"os": ["win32"],"engines": {"node": ">=12"}},"node_modules/crypto-js": {"version": "4.2.0","resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz","integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==","license": "MIT"},"node_modules/esbuild": {"version": "0.18.20","resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.18.20.tgz","integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==","dev": true,"hasInstallScript": true,"license": "MIT","bin": {"esbuild": "bin/esbuild"},"engines": {"node": ">=12"},"optionalDependencies": {"@esbuild/android-arm": "0.18.20","@esbuild/android-arm64": "0.18.20","@esbuild/android-x64": "0.18.20","@esbuild/darwin-arm64": "0.18.20","@esbuild/darwin-x64": "0.18.20","@esbuild/freebsd-arm64": "0.18.20","@esbuild/freebsd-x64": "0.18.20","@esbuild/linux-arm": "0.18.20","@esbuild/linux-arm64": "0.18.20","@esbuild/linux-ia32": "0.18.20","@esbuild/linux-loong64": "0.18.20","@esbuild/linux-mips64el": "0.18.20","@esbuild/linux-ppc64": "0.18.20","@esbuild/linux-riscv64": "0.18.20","@esbuild/linux-s390x": "0.18.20","@esbuild/linux-x64": "0.18.20","@esbuild/netbsd-x64": "0.18.20","@esbuild/openbsd-x64": "0.18.20","@esbuild/sunos-x64": "0.18.20","@esbuild/win32-arm64": "0.18.20","@esbuild/win32-ia32": "0.18.20","@esbuild/win32-x64": "0.18.20"}},"node_modules/fsevents": {"version": "2.3.3","resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz","integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==","dev": true,"hasInstallScript": true,"license": "MIT","optional": true,"os": ["darwin"],"engines": {"node": "^8.16.0 || ^10.6.0 || >=11.0.0"}},"node_modules/nanoid": {"version": "3.3.8","resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.8.tgz","integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==","dev": true,"funding": [{"type": "github","url": "https://github.com/sponsors/ai"}],"license": "MIT","bin": {"nanoid": "bin/nanoid.cjs"},"engines": {"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"}},"node_modules/picocolors": {"version": "1.1.1","resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz","integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==","dev": true,"license": "ISC"},"node_modules/postcss": {"version": "8.4.49","resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.49.tgz","integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==","dev": true,"funding": [{"type": "opencollective","url": "https://opencollective.com/postcss/"},{"type": "tidelift","url": "https://tidelift.com/funding/github/npm/postcss"},{"type": "github","url": "https://github.com/sponsors/ai"}],"license": "MIT","dependencies": {"nanoid": "^3.3.7","picocolors": "^1.1.1","source-map-js": "^1.2.1"},"engines": {"node": "^10 || ^12 || >=14"}},"node_modules/rollup": {"version": "3.29.5","resolved": "https://registry.npmmirror.com/rollup/-/rollup-3.29.5.tgz","integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==","dev": true,"license": "MIT","bin": {"rollup": "dist/bin/rollup"},"engines": {"node": ">=14.18.0","npm": ">=8.0.0"},"optionalDependencies": {"fsevents": "~2.3.2"}},"node_modules/source-map-js": {"version": "1.2.1","resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz","integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==","dev": true,"license": "BSD-3-Clause","engines": {"node": ">=0.10.0"}},"node_modules/vite": {"version": "4.5.5","resolved": "https://registry.npmmirror.com/vite/-/vite-4.5.5.tgz","integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==","dev": true,"license": "MIT","dependencies": {"esbuild": "^0.18.10","postcss": "^8.4.27","rollup": "^3.27.1"},"bin": {"vite": "bin/vite.js"},"engines": {"node": "^14.18.0 || >=16.0.0"},"funding": {"url": "https://github.com/vitejs/vite?sponsor=1"},"optionalDependencies": {"fsevents": "~2.3.2"},"peerDependencies": {"@types/node": ">= 14","less": "*","lightningcss": "^1.21.0","sass": "*","stylus": "*","sugarss": "*","terser": "^5.4.0"},"peerDependenciesMeta": {"@types/node": {"optional": true},"less": {"optional": true},"lightningcss": {"optional": true},"sass": {"optional": true},"stylus": {"optional": true},"sugarss": {"optional": true},"terser": {"optional": true}}}}
}- 运行与测试
保存文件后，通过命令行运行你的脚本：
node your-script-name.js