一、实现效果图
二、读取数据
下图是gpt返回的流式数据的数据形式,那么我们怎么把这个数据放到页面中,以实现gpt的打字机效果呢?
javascript
const response = await fetch(baseURLs + "/api/ut/plan/smartWriteStream", {
method: "POST",
body: JSON.stringify(par),
headers: {
"Content-Type": "application/json",
Accept: "text/event-stream",
tk: localStorage.getItem("token"),
},
});
searchCon.value = "";
const encode = new TextDecoder("utf-8");
const reader = response.body.getReader();
while (true) {
const { done, value } = await reader.read();
const decodeText = encode.decode(value);
// console.log(decodeText, "流式数据");
// 读取结束
if (done) {
isShowstopBtn.value = false;
isShowconfirmBtn.value = true;
break;
}
if (isAddText.value) {
longText.value += getReaderText(decodeText);
setTimeout(() => {
if (scrollbarRef.value) {
let ele = document.getElementById("innerRef");
const max = ele.clientHeight;
scrollbarRef.value[0].setScrollTop(max * 1 + 1000000);
}
}, 300);
} else {
break;
}
}
三、处理流式数据中的特殊字符
javascript
const getReaderText = (str) => {
let matchStr = "";
try {
let resultList = str.trim().split("\n");
resultList.forEach((item) => {
const firstQuoteIndex = item.indexOf('"');
const lastQuoteIndex = item.lastIndexOf('"');
matchStr += item
.substring(firstQuoteIndex + 1, lastQuoteIndex)
.replace("\\n\\n", "")
.replace("\n\n", "")
.replace("\\n", "")
.replace("\n", "")
.replace("\\\\", "")
.replace("\\", "");
});
// console.log(resultList, "4444");
} catch (e) {
// console.log(e);
}
// console.log(matchStr);
return matchStr;
};