js通过是否以流式接口的形式返回数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 1)后台根据client_id和client_secret获token(安全)
// 2)根据token和messages获取聊天返回
const accessToken = "";
const url =
'https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro?access_token=' +
accessToken;
// 是否以流式接口的形式返回数据,true代表数据以流的形式获取,false代表数据需要等待请求完成,一次性获取
const isStream = true;
async function getChat() {
var options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"user_id": "13900000011",
"temperature": 0.95,
"top_p": 0.8,
"penalty_score": 1.0,
"disable_search": false,
"enable_citation": false,
"stream": isStream,
"messages": [{
"role": "user",
"content": "父亲的英文是什么?"
}, {
"role": "assistant",
"content": "父亲是father"
}, {
"role": "user",
"content": "那母亲呢?"
}]
})
};
const resp = await fetch(url, options);
if (isStream) {
const reader = resp.body.getReader();
while (1) {
const {done,value} = await reader.read();
if (done) {
break;
}
const decoder = new TextDecoder();
const txt = decoder.decode(value);
console.log(done, txt);
}
console.log('读取完成')
} else {
const txt = await resp.text();
console.log(txt);
}
}
getChat();
</script>
</head>
<body>
</body>
</html>
angularjs通过是否以流式接口的形式返回数据
<!DOCTYPE html>
<html ng-app="my_app">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./angular.min.js"></script>
<script type="text/javascript" src="./angular-sanitize.min.js"></script>
<script type="text/javascript">
var app = angular.module("my_app", ['ngSanitize']);
app.controller('my_controller', function($scope, $sce) {
$scope.result = '';
$scope.accessToken = "";
$scope.url =
'https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro?access_token=' +
$scope.accessToken;
$scope.getChat = async function() {
var options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"user_id": "13900000011",
"temperature": 0.95,
"top_p": 1,
"penalty_score": 1.0,
"disable_search": false,
"enable_citation": false,
"stream": true,
"messages": [{
"role": "user",
"content": "父亲的英文是什么?"
}, {
"role": "assistant",
"content": "父亲是father"
}, {
"role": "user",
"content": "那母亲呢?"
}],
})
};
const resp = await fetch($scope.url, options);
const reader = resp.body.getReader();
while (1) {
const {
done,
value
} = await reader.read();
if (done) {
break;
}
const decoder = new TextDecoder();
const txt = decoder.decode(value);
console.log(done, txt);
// 使用正则表达式提取 "result" 字段的内容
const resultRegex = /"result":"([^"]*)"/;
const match = txt.match(resultRegex);
// 检查匹配结果并输出 "result" 字段的内容
if (match && match[1]) {
const resultContent = match[1];
console.log(resultContent);
let newResult = resultContent.replace(/\\n/g, '<br>');
$scope.result += newResult;
$scope.$apply();
} else {
console.log('未找到 result 字段的内容');
}
}
console.log('读取完成')
}
$scope.getChat();
});
</script>
</head>
<body ng-controller="my_controller">
<div ng-bind-html="result"></div>
</body>
</html>
效果