阿丹：
不断接收新鲜事物，才能更快成长！！！！
demo代码认知：
讯飞开放平台--星火认知大模型--开发技术文档--js实例代码详解_一单成的博客-CSDN博客
效果演示：
只是一个简单效果，但是具体效果已经完毕，只需要前端排版即可。
官方提供页面的最下面是各种错误码：
星火认知大模型服务说明 | 讯飞开放平台文档中心
代码实现思路：
1、在整个实现思路中出现一个很重要的协议websocket协议，下面是我写一个关于websocekt的专栏。
http://t.csdn.cn/INQ3i
2、整体实现思路时序图
结合我们下面的代码解释：
（1）、问题初始化：
通过平台鉴权构造请求url用来建立websocket连接。
Tips: 星火大模型API当前有V1.5和V2两个版本，两个版本独立计量tokens。
星火大模型V1.5请求地址，对应的domain参数为general：
ws(s)://spark-api.xf-yun.com/v1.1/chat
星火大模型V2请求地址，对应的domain参数为generalv2：
ws(s)://spark-api.xf-yun.com/v2.1/chat注意：在官方购买的时候一定要看是那个版本的。
（2）、构造传递问题对象
官网结构为：
# 参数构造示例如下
{
"header": {
"app_id": "12345",
"uid": "12345"
},
"parameter": {
"chat": {
"domain": "general",
"temperature": 0.5,
"max_tokens": 1024,
}
},
"payload": {
"message": {
# 如果想获取结合上下文的回答，需要开发者每次将历史问答信息一起传给服务端，如下示例
# 注意：text里面的所有content内容加一起的tokens需要控制在8192以内，开发者如有较长对话需求，需要适当裁剪历史信息
"text": [
{"role": "user", "content": "你是谁"} # 用户的历史问题
{"role": "assistant", "content": "....."} # AI的历史回答结果
# ....... 省略的历史对话
{"role": "user", "content": "你会做什么"} # 最新的一条问题，如无需上下文，可只传最新一条问题
]
}
}
}重点解读：
uid: 区别用户的id（可以自己进行编写设置）
parameter：中的chat中的domain属性如果是v1.1就使用general。如果使用v2.1的话要替换成generalv2
连续对话：在星火的构造中在text中使用了role这个属性来判断问题或者回答的所有人，如果是user就是用户的提问。如果是content就是机器助手的回答。每次向后台推送只需要追加构建payload这个载体，在提问的时候直接传递整个对象就可以完成读取分析历史记录。实现连续对话能力。
（3）、流式回答的拼接
因为使用的协议为websocket所以返回的回答不是一次性的，所以要做好处理多次返回结果的处理方式，对回答进行拼接，以及在第二点中的payload的构建，用来实现连续性对话。
实现代码如下：
注意：下面的代码中有三处需要修改都使用中文进行了书写
控制台-讯飞开放平台
需要替换掉的东西可以在上面的连接中查看自己注册的
1、APPID 2、APISecret 3、APIKey
<template>
<div>
<input type="text" v-model="userInput" ref="inputText">
<button @click="start">开始连接</button>
<textarea ref="outputText"></textarea>
</div>
</template>
<script>
import CryptoJS from 'crypto-js';
export default {
data() {
return {
appId: '写入自己appid',
status: 'init',
ttsWS: null,
totalRes: '',
userInput: '',
};
},
methods: {
getWebsocketUrl() {
return new Promise((resolve, reject) => {
const apiKey = '写入自己的apikey';
const apiSecret = '写入自己的apiSecret';
const url = 'wss://spark-api.xf-yun.com/v1.1/chat';
const host = window.location.host;
const date = new Date().toGMTString();
const algorithm = 'hmac-sha256';
const headers = 'host date request-line';
const signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v1.1/chat HTTP/1.1`;
const signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret);
const signature = CryptoJS.enc.Base64.stringify(signatureSha);
const authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;
const authorization = window.btoa(authorizationOrigin);
const finalUrl = `${url}?authorization=${authorization}&date=${date}&host=${host}`;
console.log(finalUrl)
resolve(finalUrl);
});
},
setStatus(status) {
this.status = status;
},
connectWebSocket() {
this.setStatus('ttsing');
this.getWebsocketUrl().then((url) => {
let ttsWS;
if ('WebSocket' in window) {
ttsWS = new WebSocket(url);
} else if ('MozWebSocket' in window) {
ttsWS = new MozWebSocket(url);
} else {
alert('浏览器不支持WebSocket');
return;
}
this.ttsWS = ttsWS;
ttsWS.onopen = (e) => {
this.webSocketSend();
};
ttsWS.onmessage = (e) => {
this.result(e.data);
};
ttsWS.onerror = (e) => {
clearTimeout(this.playTimeout);
this.setStatus('error');
alert('WebSocket报错，请f12查看详情');
console.error(`详情查看：${encodeURI(url.replace('wss:', 'https:'))}`);
};
ttsWS.onclose = (e) => {
console.log(e);
};
});
},
webSocketSend() {
const params = {
header: {
app_id: this.appId,
uid: 'fd3f47e4-d',
},
parameter: {
chat: {
domain: 'general',
temperature: 0.5,
max_tokens: 1024,
},
},
payload: {
message: {
text: [
],
},
},
};
console.log(JSON.stringify(params));
this.ttsWS.send(JSON.stringify(params));
},
start() {
this.totalRes = '';
this.connectWebSocket();
},
result(resultData) {
let jsonData = JSON.parse(resultData);
this.totalRes += resultData;
this.$refs.outputText.value = this.totalRes;
if (jsonData.header.code !== 0) {
alert(`提问失败: ${jsonData.header.code}:${jsonData.header.message}`);
console.error(`${jsonData.header.code}:${jsonData.header.message}`);
return;
}
if (jsonData.header.code === 0 && jsonData.header.status === 2) {
this.ttsWS.close();
this.setStatus('init');
}
},
},
};
</script>
这只是一个简单实现，还有一些具体可追加的参数在官方的文档中有书写。下面是连接。
星火认知大模型Web文档 | 讯飞开放平台文档中心
开发过程中的运行错误
1、没有这个依赖
运行npm install --save crypto-js是为了安装crypto-js这个库。crypto-js是一个用于加密和解密的JavaScript库，它提供了多种哈希函数和加密算法的实现。在你的代码中可能用到了这个库，因此你需要通过运行上述命令来安装它。
npm install是Node Package Manager (npm) 的命令，用于安装JavaScript包和依赖项。--save选项将包添加到项目的package.json文件的dependencies部分，以便在以后重新安装项目时使用。
所以，运行npm install --save crypto-js将安装crypto-js库并将其添加到你的项目中。
