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

获取APPID、APISecret、APIKey

讯飞开放平台注册登录控制台创建自己的应用复制备用

准备工作做好,直接开始上代码了。

源码参考

<code><script setup lang="ts">code>

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;

const getWebsocketUrl = () => {

let url = 'wss://spark-api.xf-yun.com/v3.5/chat';

const host = 'spark-api.xf-yun.com';

const apiKeyName = 'api_key';

const date = new Date().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}"`;code>

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>();

const sendMsg = () => {

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 = new WebSocket(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>

<div class="container">code>

<div class="chat-content" ref="chartContentRef"></div>code>

<div class="ask-content">code>

<textarea v-model="sMsg"></textarea>code>

<div class="opt">code>

<n-button type="primary" size="large" @click="sendMsg">发送</n-button>code>

</div>

</div>

</div>

</template>

<style lang="less" scoped>code>

.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>

相关链接