给一段html用的js调用chatgpt对话接口的demo代码stream模式写入文本框调用post

以下是一个简单的demo代码，使用了jQuery库，并假设chatgpt的对话接口地址为"http://example.com/chatgpt":

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Chat with GPT</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
	<h1>Chat with GPT</h1>
	<div id="chatlog"></div>
	<textarea id="userinput"></textarea>
	<button id="send">Send</button>

	<script>
		$(document).ready(function(){
			// 初始化chatgpt对话接口的stream模式
			var chatgptStream = new EventSource("http://example.com/chatgpt?mode=stream");

			// 监听chatgpt返回的消息
			chatgptStream.onmessage = function(event) {
				// 将chatgpt返回的消息显示在聊天记录框中
				$("#chatlog").append("<p>ChatGPT: " + event.data + "</p>");
			};

			// 绑定Send按钮的点击事件
			$("#send").click(function(){
				// 获取用户输入的文本
				var userInput = $("#userinput").val();

				// 将用户输入的文本发送给chatgpt
				$.post("http://example.com/chatgpt", { text: userInput });

				// 将用户输入的文本显示在聊天记录框中
				$("#chatlog").append("<p>You: " + userInput + "</p>");

				// 清空用户输入框
				$("#userinput").val("");
			});
		});
	</script>
</body>
</html>

在这个demo中，我们使用了EventSource来与chatgpt的stream模式进行交互，这样可以实时接收chatgpt返回的对话消息。在用户点击Send按钮时，我们使用jQuery的$.post方法向chatgpt发送用户输入的文本，并将其显示在聊天记录框中。请注意，这只是一个简单的demo，实际应用中还需要对用户输入进行验证和处理。

给一段html用的js调用chatgpt对话接口的demo代码stream模式写入文本框调用post