超实用！仅用 HTML 与 JS 打造本地互动聊天网页，对接 Ollama 模型

以下是一个基本的互动聊天窗口的代码示例，包括设置面板、历史记录展示和聊天界面。你可以根据自己的需要进行适当的修改和扩展： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>互动聊天窗口</title> <style> /* 设置面板样式 */ #settings-panel { width: 300px; height: 100%; position: fixed; top: 0; left: 0; background-color: #f1f1f1; } /* 历史记录展示样式 */ #history { margin: 0 auto; width: 500px; border: 1px solid #ccc; padding: 10px; } /* 聊天界面样式 */ #chat { margin-left: 320px; padding: 10px; } </style> </head> <body> <div id="settings-panel">  </div> <div id="history">  </div> <div id="chat">  <input type="text" id="input-message"> <button id="send-button">发送</button> </div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>  <script> // 执行初始化操作 init(); function init() { // 设置按钮点击事件 document.getElementById('send-button').addEventListener('click', sendMessage); } function sendMessage() { const message = document.getElementById('input-message').value; // 调用接口发送消息 sendMessageToApi(message); // 清空输入框 document.getElementById('input-message').value = ''; } async function sendMessageToApi(message) { try { // 调用第三方接口发送消息并接收反馈 const response = await axios.post('https://api.example.com/chat', { message }); const result = response.data; // 处理接口返回的结果 handleResponse(result); } catch (error) { console.error(error); } } function handleResponse(result) { // 根据返回结果进行处理，可以根据需要自行扩展 // 示例：将返回的消息展示到历史记录中 const historyElement = document.getElementById('history'); const messageElement = document.createElement('div'); messageElement.innerText = result.message; historyElement.appendChild(messageElement); } </script> </body> </html> ``` 以上代码是一个基本的互动聊天窗口的实现，包括了设置面板、历史记录展示和聊天界面。你可以根据自己的需要进行进一步的修改和扩展，如添加更多的设置选项，调整样式等等。在`handleResponse`函数中，你可以根据接口返回的结果进行相应的处理，比如展示消息、处理特殊格式的内容等。请注意替换示例代码中的接口地址和相关逻辑，以适应你自己的后端接口和数据处理需求。 ######[AI写代码神器 | 1949点数解答 | 2024-12-12 01:32:34]

服务商

更多选项

快捷项

自定义