【vue】vue3+ts对接科大讯飞大模型3.5智能AI

如今ai步及生活的方方面面,你是否也想在自己的网站接入ai呢？今天分享科大讯飞大模型3.5智能AI对接。

获取APPID、APISecret、APIKey

• 讯飞开放平台注册登录
• 控制台创建自己的应用
• 复制备用 准备工作做好,直接开始上代码了。

源码参考

<scriptsetuplang="ts">import{ NButton }from'naive-ui';import CryptoJs from'crypto-js';import{ ref, unref, h }from'vue';import{ useMessage }from'naive-ui';const message =useMessage();const{GLOBAL_SPARK_AI_APPID,GLOBAL_SPARK_AI_APISECRET,GLOBAL_SPARK_AI_APIKEY,}=import.meta.env;constgetWebsocketUrl=()=>{let url ='wss://spark-api.xf-yun.com/v3.5/chat';const host ='spark-api.xf-yun.com';const apiKeyName ='api_key';const date =newDate().toGMTString();const algorithm ='hmac-sha256';const headers ='host date request-line';let signatureOrigin =`host: ${host}\ndate: ${date}\nGET /v3.5/chat HTTP/1.1`;let signatureSha = CryptoJs.HmacSHA256(
      signatureOrigin,GLOBAL_SPARK_AI_APISECRET);let signature = CryptoJs.enc.Base64.stringify(signatureSha);let authorizationOrigin =`${apiKeyName}="${GLOBAL_SPARK_AI_APIKEY}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;let authorization =btoa(authorizationOrigin);// 将空格编码return`${url}?authorization=${authorization}&date=${encodeURI(
      date
    )}&host=${host}`;};const url =getWebsocketUrl();const isLoading =ref(false);const sMsg =ref();const chartContentRef = ref<HTMLDivElement>();constsendMsg=()=>{if(unref(isLoading)){
      message.warning('加载中...');return;}if(!unref(sMsg)){
      message.warning('请输入内容');return;}const userMsg = document.createElement('div');
    userMsg.classList.add('msg-user');const msgMain = document.createElement('div');
    msgMain.innerHTML =unref(sMsg);
    userMsg.appendChild(msgMain);
    chartContentRef.value?.appendChild(userMsg);const socket =newWebSocket(url);
    socket.addEventListener('open',(e)=>{
      isLoading.value =true;const params ={header:{app_id:GLOBAL_SPARK_AI_APPID,uid:'星火网页测试',},parameter:{chat:{domain:'generalv3.5',temperature:0.5,max_tokens:1024,},},payload:{// 如果想获取结合上下文的回答，需要开发者每次将历史问答信息一起传给服务端，如下示例// 注意：text里面的所有content内容加一起的tokens需要控制在8192以内，开发者如有较长对话需求，需要适当裁剪历史信息message:{text:[{role:'user',content:'你是谁'},//# 用户的历史问题{role:'assistant',content:'我是AI助手'},//# AI的历史回答结果// ....... 省略的历史对话{role:'user',content:unref(sMsg)},//# 最新的一条问题，如无需上下文，可只传最新一条问题],},},};
      socket.send(JSON.stringify(params));});let resMsgText ='';const resMsg = document.createElement('div');
    resMsg.classList.add('msg-ai');const resMsgMain = document.createElement('div');
    resMsg.appendChild(resMsgMain);
    chartContentRef.value?.appendChild(resMsg);
    socket.addEventListener('message',({ data })=>{
      isLoading.value =false;
      resMsgText +=JSON.parse(data).payload.choices.text[0].content;
      resMsgMain.innerHTML = resMsgText;});};</script><template><divclass="container"><divclass="chat-content"ref="chartContentRef"></div><divclass="ask-content"><textareav-model="sMsg"></textarea><divclass="opt"><n-buttontype="primary"size="large"@click="sendMsg">发送</n-button></div></div></div></template><stylelang="less"scoped>.container{height: 100%;display: flex;flex-direction: column;background: #f2f2f2;.chat-content{flex: 1;overflow-y: scroll;.msg-ai{background: white;text-align: left;}.msg-user{margin-bottom: 10px;text-align: right;}}.ask-content{height: 150px;background: white;border: 1px solid #eee;padding: 8px;position: relative;textarea{border: none;width: 100%;height: 100%;padding: 10px;background: #f2f2f2;outline: none;}.opt{text-align: right;position: absolute;inset: auto 10px 10px auto;}}}</style>

相关链接

• 讯飞开放平台
• 参考教程