利用FetchEventSource在大模型流式輸出的應(yīng)用方式
FetchEventSource在大模型流式輸出應(yīng)用
先講講這個(gè)微軟開(kāi)發(fā)的可以使用POST的SSE的api,github鏈接:GitHub - Azure/fetch-event-source: A better API for making Event Source requests, with all the features of fetch()
FetchEventSource 是微軟在 ASP.NET Core 中引入的一個(gè)功能,它允許開(kāi)發(fā)者以一種更簡(jiǎn)單和高效的方式處理 HTTP 請(qǐng)求和響應(yīng)。
這個(gè)功能是作為 ASP.NET Core 的一部分提供的,它利用了 System.Net.Http.Desktop 命名空間中的 FetchResult 類型。
在 ASP.NET Core 中,FetchEventSource 通常用于處理服務(wù)器發(fā)送的事件(Server-Sent Events,SSE),這是一種允許服務(wù)器向客戶端異步推送實(shí)時(shí)數(shù)據(jù)的技術(shù)。
使用 FetchEventSource,開(kāi)發(fā)者可以更容易地創(chuàng)建和消費(fèi)這些實(shí)時(shí)數(shù)據(jù)流。
使用 FetchEventSource 的一些關(guān)鍵點(diǎn)
- 創(chuàng)建 EventSource 客戶端:開(kāi)發(fā)者可以通過(guò)
FetchEventSource創(chuàng)建一個(gè)EventSource對(duì)象,該對(duì)象用于連接到服務(wù)器上的特定端點(diǎn)。 - 監(jiān)聽(tīng)事件:一旦
EventSource對(duì)象被創(chuàng)建,就可以通過(guò)注冊(cè)事件監(jiān)聽(tīng)器來(lái)監(jiān)聽(tīng)服務(wù)器發(fā)送的事件。 - 處理連接:
EventSource對(duì)象可以處理連接的建立、重連和關(guān)閉,以及可能出現(xiàn)的錯(cuò)誤。 - 接收數(shù)據(jù):當(dāng)服務(wù)器向客戶端推送數(shù)據(jù)時(shí),可以通過(guò)注冊(cè)的事件監(jiān)聽(tīng)器接收這些數(shù)據(jù)。
- 斷線重連:如果連接丟失,
EventSource對(duì)象可以自動(dòng)嘗試重新連接到服務(wù)器。 - 取消訂閱:開(kāi)發(fā)者可以取消對(duì)特定事件的訂閱,或者完全關(guān)閉
EventSource連接。
以調(diào)用Qwen大模型為例
import { fetchEventSource } from '@microsoft/fetch-event-source';
export default {
data() {
return {
output: '',
apiKey: '$your-dashscope-api-key', // 替換為你的 DashScope API-KEY
url: 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation',
body: {
model: 'qwen-turbo',
input: {
messages: [
{
role: 'system',
content: 'You are a helpful assistant.'
},
{
role: 'user',
content: '你好'
}
]
},
parameters: {
incremental_output: true
}
}
};
},
methods: {
async startSSE() {
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${this.apiKey}`,
'X-DashScope-SSE': 'enable'
};
try {
this.eventSource = await fetchEventSource(this.url, {
method: 'POST',
headers: headers,
body: JSON.stringify(this.body),
onopen: (response) => {
if (!response.ok) {
throw new Error('Server returned an error');
}
},
onmessage: (event) => {
const data = JSON.parse(event.data);
if (data.output && data.output.choices) {
const content = data.output.choices[0].message.content;
this.output += content; // 將內(nèi)容添加到輸出中
}
},
onerror: (err) => {
console.error('EventSource failed:', err);
this.stopSSE();
}
});
} catch (error) {
console.error('Failed to start SSE:', error);
}
},
stopSSE() {
if (this.eventSource) {
this.eventSource.close();
this.eventSource = null;
}
}
},
unmounted() {
this.stopSSE();
}
};這樣就可以建立SSE的鏈接了。
那么有小伙伴就要問(wèn)了,那前端怎么實(shí)時(shí)顯示接收到的輸出呢?
onmessage: (event) => {
const data = JSON.parse(event.data);
if (data.output && data.output.choices) {
const content = data.output.choices[0].message.content;
this.output += content; // 將內(nèi)容添加到輸出中
}
}- 事件處理器聲明:
onmessage: (event) => { // ... },這里定義了一個(gè) onmessage 事件處理器。
當(dāng)通過(guò) SSE 連接接收到消息時(shí),會(huì)觸發(fā)這個(gè)處理器。
- 解析接收到的數(shù)據(jù):
const data = JSON.parse(event.data);
event.data 包含了服務(wù)器發(fā)送的消息內(nèi)容,通常是以 JSON 格式的字符串。
JSON.parse 函數(shù)用于將這個(gè) JSON 字符串解析為 JavaScript 對(duì)象。
- 檢查輸出數(shù)據(jù):
if (data.output && data.output.choices) { // ... }這里使用 if 語(yǔ)句來(lái)確保 data 對(duì)象中存在 output 屬性,并且 output 屬性中存在 choices 數(shù)組。
這是一種防御性編程的做法,用來(lái)避免在數(shù)據(jù)結(jié)構(gòu)不完整時(shí)出現(xiàn)錯(cuò)誤。
- 獲取消息內(nèi)容:
const content = data.output.choices[0].message.content;
這行代碼進(jìn)一步從 choices 數(shù)組中的第一個(gè)元素(通常是最相關(guān)的或者默認(rèn)的消息)中提取 message.content。
這通常是服務(wù)器推送的有用信息或數(shù)據(jù)。
- 累加內(nèi)容:
this.output += content;
this.output 是 Vue 組件實(shí)例的一個(gè)數(shù)據(jù)屬性,用于累積從服務(wù)器接收到的所有消息內(nèi)容。
這里使用 += 操作符將新接收到的 content 追加到 this.output 的當(dāng)前值上。
整個(gè) onmessage 事件處理器的作用是:當(dāng)通過(guò) SSE 接收到消息時(shí),它將解析消息內(nèi)容,從中提取有用的信息,并將其追加到 Vue 組件的 output 數(shù)據(jù)屬性中。
這樣,組件的模板中的 <pre>{{ output }}</pre> 就可以顯示所有接收到的消息內(nèi)容,保持其原始的格式。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)
這篇文章主要介紹了vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
VUE3子表格嵌套分頁(yè)查詢互相干擾的問(wèn)題解決方案
這篇文章主要介紹了VUE3子表格嵌套分頁(yè)查詢互相干擾的問(wèn)題解決方案,如果不需要做子表格的分頁(yè)查詢,那么可以直接在主表格中嵌套子表格,本文給大家介紹兩種方式,需要的朋友可以參考下2024-01-01
Vue父組件調(diào)用子組件函數(shù)實(shí)現(xiàn)
這篇文章主要介紹了Vue父組件調(diào)用子組件函數(shù)實(shí)現(xiàn),全文通過(guò)舉例子及代碼的形式進(jìn)行了一個(gè)簡(jiǎn)單的介紹,希望大家能夠理解并且學(xué)習(xí)到其中知識(shí)2021-08-08
Vue+Element-ui彈窗?this.$alert?is?not?a?function問(wèn)題
這篇文章主要介紹了Vue+Element-ui彈窗?this.$alert?is?not?a?function問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
開(kāi)發(fā)一個(gè)封裝iframe的vue組件
這篇文章主要介紹了開(kāi)發(fā)一個(gè)封裝iframe的vue組件,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-03-03

