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

以下是一个简单的Demo代码，用于在HTML页面中使用JavaScript调用ChatGPT对话API的v1/chat/completions接口，并使用EventStream模式将响应写入文本框中。请注意，此代码仅用于演示目的，不应在生产环境中使用。

<!DOCTYPE html>
<html>
<head>
	<title>ChatGPT对话API Demo</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
	<h1>ChatGPT对话API Demo</h1>
	<div>
		<label for="message-input">输入消息:</label>
		<input type="text" id="message-input">
		<button id="send-button">发送</button>
	</div>
	<div>
		<label for="response-output">响应消息:</label>
		<textarea id="response-output" rows="5" cols="50" readonly></textarea>
	</div>
	<script>
		$(function() {
			// ChatGPT API endpoint
			var apiEndpoint = "https://api.openai.com/v1/chat/completions";
			// API key
			var apiKey = "YOUR_API_KEY_HERE";
			// EventSource object for server-sent events
			var eventSource = null;
			// Textarea element for response output
			var responseOutput = $("#response-output");
			// Send button element
			var sendButton = $("#send-button");
			// Message input element
			var messageInput = $("#message-input");
			// Send button click event handler
			sendButton.click(function() {
				// Disable send button
				sendButton.prop("disabled", true);
				// Clear response output
				responseOutput.val("");
				// Get message input
				var message = messageInput.val();
				// Check if message is not empty
				if (message) {
					// Create data object for API request
					var requestData = {
						"prompt": message,
						"max_tokens": 50,
						"temperature": 0.5,
						"n": 1,
						"stop": "\n"
					};
					// Create headers for API request
					var requestHeaders = {
						"Authorization": "Bearer " + apiKey,
						"Content-Type": "application/json",
						"Accept": "text/plain"
					};
					// Send API request
					$.ajax({
						url: apiEndpoint,
						type: "POST",
						data: JSON.stringify(requestData),
						headers: requestHeaders,
						success: function(data, textStatus, jqXHR) {
							// Open EventSource connection for server-sent events
							eventSource = new EventSource(data.choices[0].text);
							// EventSource onmessage event handler
							eventSource.onmessage = function(event) {
								// Append response to response output
								responseOutput.val(responseOutput.val() + event.data + "\n");
							};
							// EventSource onerror event handler
							eventSource.onerror = function() {
								// Close EventSource connection
								eventSource.close();
								// Enable send button
								sendButton.prop("disabled", false);
							};
						},
						error: function(jqXHR, textStatus, errorThrown) {
							// Display error message in response output
							responseOutput.val(textStatus + ": " + errorThrown);
							// Enable send button
							sendButton.prop("disabled", false);
						}
					});
				} else {
					// Enable send button
					sendButton.prop("disabled", false);
				}
			});
		});
	</script>
</body>
</html>

请注意，上面的代码中的YOUR_API_KEY_HERE应替换为您的ChatGPT API密钥。此外，此代码使用了jQuery库来简化API请求和事件处理。如果您不使用jQuery，可以使用原生JavaScript来实现相同的功能。

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