js 调用文心一言API

曹振华

已于 2024-05-19 15:13:29 修改

阅读量357

点赞数 2

分类专栏： javascript angularjs 文章标签： javascript 文心一言 API 流式返回 angularjs

于 2024-05-18 14:26:08 首次发布

本文链接：https://blog.csdn.net/chadcao/article/details/139024925

版权

javascript 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

angularjs

29 篇文章 0 订阅

订阅专栏

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>

效果