首页写一个用来访问 ChatGPT 接口的简单 HTML 示例

写一个用来访问 ChatGPT 接口的简单 HTML 示例

时间: 2023-02-09 16:56:28 浏览: 145

ChatGPT接入项目实例

这是一个用来访问 ChatGPT 接口的简单 HTML 示例： ```html <!DOCTYPE html> <html> <head> <title>ChatGPT 示例</title> </head> <body> <h1>ChatGPT 示例</h1> <p>输入信息：</p> <form id="chatForm"> <input type="text" id="inputText" /> <button type="submit">发送</button> </form> <p>输出信息：</p> <div id="outputText"></div> <script> const chatForm = document.getElementById('chatForm'); const inputText = document.getElementById('inputText'); const outputText = document.getElementById('outputText'); chatForm.addEventListener('submit', async event => { event.preventDefault(); const response = await fetch('http://localhost:3000/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: inputText.value }) }); const data = await response.json(); outputText.innerHTML = data.response; }); </script> </body> </html> ``` 这个示例使用了 HTML 表单和 JavaScript 来提交请求和接收响应。输入信息将会提交到 `http://localhost:3000/api/chat` 这个接口，响应将会显示在页面上。

阅读全文