讯飞开放平台--星火认知大模型--开发技术文档--js实例代码结合vue使用

阿丹： 

        不断接收新鲜事物，才能更快成长！！！！ 

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库并将其添加到你的项目中。