开发前的准备
1.阿里云开通模型服务灵积-获取key
阿里云-通义千问文档: 点击跳转
2.使用文档中的sse流式返回
参考:官方文档中 HTTP调用接口-请求实例(SSE开启)
1.请求地址:
'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation'
1.请求头:
--header 'Authorization: Bearer <your-dashscope-api-key>' \
--header 'Content-Type: application/json' \
--header 'X-DashScope-SSE: enable' \
3.post传值:
data{
"model": "qwen-turbo",
"input":{
"messages":[
{
"role": "system",
"content": "You are a helpful assistant."
},
{
"role": "user",
"content": "你好,哪个公园距离我最近?"
}
]
},
"parameters": {
"result_format": "message"
}
}'
3.vue中使用
(1)安装请求sse 接口调用fetchEventSource
npm install @microsoft/fetch-event-source
(2)将fetchEventSource引入到项目中
import { fetchEventSource } from "@microsoft/fetch-event-source"
(3)请求接口-通义千问api
//封装调用千问api方法,data:请求bady, key:密钥
aiSse (data,key) {
let that = this
let controller = new AbortController()
const eventSource = fetchEventSource('/tyqw/api/v1/services/aigc/text-generation/generation', {
method: 'POST',
headers: {
Authorization: key,
'Content-Type': 'application/json',
'Accept':'text/event-stream',
'X-DashScope-SSE': 'enable',
},
body: JSON.stringify(
data
),
signal: controller.signal,
onopen() {
console.log('open')
},
onmessage(event) {
console.log('onMessage',event.data)
let data = event.data
let jsonData = JSON.parse(data);
// console.log('jsonData', jsonData);
// console.log('jsonData-value', jsonData.output.choices[0].message.content);
const textValue = jsonData.output.choices[0].message.content
const textStatus = jsonData.output.choices[0].finish_reason
// that.text += textValue.slice(that.text.length)
if (that.addStatus) {
that.text += textValue
that.scrollToBottom()
}
// console.log('that.text', that.text);
// console.log('that.text.length', that.text.length);
// console.log('jsonData.output.choices[0].message.content.slice(that.text.length)', textValue.slice(that.text.length));
if (textStatus == 'stop') {
console.log('完成了,需要赋值');
console.log('text--------', that.text);
that.textList[that.textList.length-1] = {
type: 'ai',
value: that.text
}
that.helpStatus = false
that.addStatus = false
// let cursorFlask = document.getElementById("cursorFlask");
// cursorFlask.style.opacity = '0'
}
},
onclose() {
controller.abort();//出错后不要重试
eventSource.close();
},
onerror(error) {
console.log('close',error)
// controller.abort();//出错后不要重试
eventSource.close();
this.$message.error(`系统错误:${error}`)
that.helpStatus = false
}
})
},
(4)点击按钮- 获取千问key- 发送请求到api
// 获取ai回答接口key
async getAuxiliaryKeyFn () {
const res = await getAuxiliaryKey()
console.log('获取ai回答接口key', res);
if (res.status == 200) {
// 调用通义千问api
const apiKey = res.data.apiKey; // 替换为你的API密钥
const data = {
model: 'qwen-turbo',
input: {
messages: [
{
"role": "system",
"content": "You are a helpful assistant."
},
{
"role": "user",
"content": this.principalActionText
}
]
},
parameters: {
result_format: 'message',
incremental_output: true
}
}
this.addStatus = true
this.aiSse(data,apiKey)
} else {
this.$message.error(res.msg || '请求错误,请检查网络或放量已到最大限额');
}
},
(5)根据个人情况-点击发送时调用
this.getAuxiliaryKeyFn()
4.最后展示ai返回的对话款需要用的vue-markdown
ai返回是markdown格式的,
npm install vue-markdown --save
import VueMarkdown from 'vue-markdown'
<template>
<div>
<vue-markdown :source="markdown"></vue-markdown>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
export default {
data() {
return {
markdown: '# Hello, Vue Markdown!'
}
},
components: {
VueMarkdown
}
}
</script>
最后服务器上代理的问题:
问题描述:本地上没问题,测试环境报错502,或者跨域—就是没代理成功
最后运维成功的代理, tyqw 代理标识
本身域名有证书
location ^~ /tyqw/
{
proxy_pass https://dashscope.aliyuncs.com/;
proxy_ssl_server_name on;
proxy_set_header Host dashscope.aliyuncs.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
proxy_http_version 1.1;
# proxy_hide_header Upgrade;
add_header X-Cache $upstream_cache_status;
#Set Nginx Cache
set $static_file8WLuNoD1 0;
if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
{
set $static_file8WLuNoD1 1;
expires 1m;
}
if ( $static_file8WLuNoD1 = 0 )
{
add_header Cache-Control no-cache;
}
}
还有在ks8上下来 (不懂啥意思,如果如遇到这类问题,可以发给运维看看)