流式数据接收+打字机效果展示
Cleaner 2024/3/7 Vue
集成大语言模型,实现只能对话
let url = 'http://10.0.28.4:3002/api/v1/chat/completions'
let method = 'post'
let headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer fastgpt-200UGZRm0PUxykWSM2Bp5fZfLncA0uwNtjNXQU8jhAyGgVIjI8zWuP8dFWh'
}
let param = {
"model": 'chatglm',
"chatId": 10,
"stream": true,
"messages": [
{
"role": "user",
"content": data.message
}
]
}
const resp = await fetch(url, {
method: method,
headers: headers,
body: JSON.stringify(param)
})
const reader = resp.body.getReader();
const textDecoder = new TextDecoder("utf-8");
while (true) {
const { done, value } = await reader.read()
if (done) {
break;
}
let decodedValue = textDecoder.decode(value);
const dataString = decodedValue.substring(decodedValue.indexOf('{'));
try {
let data = JSON.parse(dataString)
let content = data.choices[0].delta.content
if (content !== '' || content !== '\\n') {
this.historyChatList[this.historyChatList.length - 1].message += content
this.scrollToBottom()
}
} catch (error) {
this.chatLoading = false
}
}
// 滚动条定位点到最下面
scrollToBottom() {
const container = this.$refs.chatList;
container.$el.scrollTop = container.$el.scrollHeight;
}
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
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