uniapp对接ChatGPT 简单实现对话功能

最近很火的ChatGPT来了！我也是做了一个最最基础的模型，让大家更通俗易懂！

先看效果：

 接下来直接上代码：

<template>
	<view class="content">
		<view class="text-area">
			<textarea class="aa" placeholder-style="color:#F76260" placeholder="智能提问" v-model='title' />
			<button class="button" @click="getAi">提问</button>
		</view>
		<view class="answer">
			<textarea disabled class="aa cc" placeholder-style="color:#F76260" placeholder="回答" v-model='answer' />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '列举几条法律',
				answer: "",
			}
		},
		onLoad() {
			// this.getAi()
		},
		methods: {
			getAi() {
				let that = this
				console.log(this.title, 8888)
				if (!this.title) {
					uni.showToast({
						title: '请先输入问题!',
					});
					return
				}
				let answer = '正在思考请稍后...'
				let index = 0;
				that.answer = ''
				let interval = setInterval(function() {
						that.answer += answer[index];
						index++;
						// 当打印完成时，清除定时器
						if (index >= answer.length) {
							clearInterval(interval);
						}
					},
					150); // 每隔50毫秒打印一个字符

				let dataVal = JSON.stringify({
					"prompt": that.title,
					"max_tokens": 2048,
					"temperature": 0.5,
					"top_p": 1.0,
					"frequency_penalty": 0.8,
					"presence_penalty": 0.0,
					"model": "text-davinci-003"
				});
				// {
				//   "model": "text-davinci-003",
				//   "prompt": "",
				//   "temperature": 0.5,
				//   "max_tokens": 60,
				//   "top_p": 1.0,
				//   "frequency_penalty": 0.8,
				//   "presence_penalty": 0.0
				// }
				uni.request({
					url: 'https://api.openai.com/v1/completions', //仅为示例，并非真实接口地址。
					data: dataVal,
					method: "POST",
					header: {
						'Content-Type': 'application/json',
						'Authorization': 'Bearer sk-xxxxxxxxxxxxx', //自定义请求头信息
					},
					success: (xhr) => {
						if (xhr.statusCode === 200) {
							console.log('xhr', xhr)
							var json = xhr.data;
							var response = json.choices[0].text;

							// 将CHATGPT的返回值输出到文本框
							var indexxx = 0;
							that.answer = ''
							// 创建一个定时器，每隔一段时间打印一个字符
							var intervals = setInterval(function() {
									that.answer += response[indexxx];
									indexxx++;

									// 当打印完成时，清除定时器
									if (indexxx >= response.length) {
										clearInterval(intervals);
									}
								},
								50); // 每隔50毫秒打印一个字符
						}
						console.log(xhr);
					}
				});
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {}

	.aa {
		border: solid 1px red;
	}
	.cc {
		height: 600rpx;
	}

	.button {
		width: 300rpx;
		height: 100rpx;
		margin: 30rpx auto;
		background: red;
		line-height: 100rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

最后附一个openAI的地址（科学）：

https://platform.openai.com

还有不明白的欢迎留言，我会一一解答~

感兴趣的小伙伴去试试吧~