vue仿chatgpt的ai聊天功能--通义千问（阿里云）_vue仿gpt聊天

开发前的准备

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"
    }
}'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3.vue中使用

(1)安装请求sse 接口调用fetchEventSource

npm install @microsoft/fetch-event-source
1

(2)将fetchEventSource引入到项目中

import { fetchEventSource } from "@microsoft/fetch-event-source"
1

(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
            }

        })

        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

（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 || '请求错误，请检查网络或放量已到最大限额');

            }
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

（5）根据个人情况-点击发送时调用

      	this.getAuxiliaryKeyFn()
1

4.最后展示ai返回的对话款需要用的vue-markdown

ai返回是markdown格式的，

npm install vue-markdown --save
import VueMarkdown from 'vue-markdown'
1
2
3
4

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

最后服务器上代理的问题：

问题描述:本地上没问题，测试环境报错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上下来 （不懂啥意思，如果如遇到这类问题，可以发给运维看看）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30