网站排名张家港,网站建设制作好评语,新闻资讯网站备案,wordpress 图集插件代码功能
用户交互界面#xff1a;
包括聊天历史显示区域和输入框#xff0c;用户可以输入消息并发送。
消息发送和显示#xff1a;
用户输入消息后点击“Send”按钮或按下回车键即可发送。 消息发送后显示在聊天记录中#xff0c;并通过异步请求与后端 AI 模型通信
包括聊天历史显示区域和输入框用户可以输入消息并发送。
消息发送和显示
用户输入消息后点击“Send”按钮或按下回车键即可发送。 消息发送后显示在聊天记录中并通过异步请求与后端 AI 模型通信获取回复。
对话历史存储与管理
聊天记录保存在 conversationHistory 数组中用于构建上下文与后端交互。
清空对话功能
点击“Clear”按钮后清空页面上的聊天记录以及存储的对话历史。
样式与美观
通过 CSS 美化了聊天界面包括消息显示、按钮样式及自动滚动功能。
代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAI Chatbot/titlestyle/* General body styling */body {margin: 0;padding: 0;font-family: Arial, sans-serif;background-color: #f4f4f4;display: flex;justify-content: center;align-items: center;height: 100vh;}/* Chat container styling */.chat-container {width: 40%;background-color: #ffffff;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);border-radius: 8px;display: flex;flex-direction: column;overflow: hidden;}/* Header styling */.chat-header {background-color: #4CAF50;color: white;padding: 10px;text-align: center;}/* Chat history area */.chat-history {flex-grow: 1;padding: 15px;overflow-y: auto;background-color: #f9f9f9;}/* Message styling */.message {margin-bottom: 10px;}.message.user {text-align: right;color: #333;}.message.assistant {text-align: left;color: #4CAF50;}/* Input area styling */.chat-input {display: flex;border-top: 1px solid #ddd;padding: 10px;background-color: #fff;}.chat-input input {flex-grow: 1;border: 1px solid #ddd;border-radius: 4px;padding: 10px;font-size: 14px;outline: none;}.chat-input button {margin-left: 10px;padding: 10px 15px;border: none;border-radius: 4px;font-size: 14px;cursor: pointer;}#send-button {background-color: #4CAF50;color: white;}#clear-button {background-color: #f44336;color: white;}#send-button:hover {background-color: #45a049;}#clear-button:hover {background-color: #e57373;}/style
/head
bodydiv classchat-containerdiv classchat-headerh1AI Chatbot/h1/divdiv idchat-history classchat-history/divdiv classchat-inputinput iduser-input typetext placeholderType your message... autocompleteoffbutton idsend-buttonSend/buttonbutton idclear-button classclear-btnClear/button/div/divscript// Select elementsconst chatHistory document.getElementById(chat-history);const userInput document.getElementById(user-input);const sendButton document.getElementById(send-button);const clearButton document.getElementById(clear-button);// Store the conversation historyconst conversationHistory [];// Function to append messages to the chat historyfunction appendMessage(role, content) {const messageDiv document.createElement(div);messageDiv.className message ${role};messageDiv.textContent ${role user ? You : AI}: ${content};chatHistory.appendChild(messageDiv);chatHistory.scrollTop chatHistory.scrollHeight; // Auto-scroll// Add to conversation historyconversationHistory.push({ role, content });}// Send message to the serverasync function sendMessage() {const message userInput.value.trim();if (message ) return;// Append user message to the chatappendMessage(user, message);// Clear input fielduserInput.value ;try {// Build the message payload including historyconst payload {model: Qwen/Qwen2.5-7B-Instruct,messages: conversationHistory.map(msg ({role: msg.role user ? user : assistant,content: msg.content}))};// Send request to the serverconst response await fetch(https://api.siliconflow.cn/v1/chat/completions, {method: POST,headers: {Content-Type: application/json,Authorization: Bearer sk-boxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxehfvctud},body: JSON.stringify(payload)});// Parse the responseconst data await response.json();const assistantMessage data.choices[0].message.content;// Append AIs response to the chatappendMessage(assistant, assistantMessage);} catch (error) {appendMessage(assistant, Error: Unable to fetch response.);console.error(error);}// Log the updated conversation history// console.log(Current conversation history:, conversationHistory);}// Clear chat historyfunction clearChat() {chatHistory.innerHTML ;conversationHistory.length 0; // Clear history array// Log the updated conversation history (should be empty)// console.log(Chat cleared. Current conversation history:, conversationHistory);}// Event listenerssendButton.addEventListener(click, sendMessage);clearButton.addEventListener(click, clearChat);userInput.addEventListener(keydown, (e) {if (e.key Enter) sendMessage();});/script
/body
/html
提醒
需要先在siliconflow上免费注册账户获得自己的API密钥并将代码中的sk-boxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxehfvctud替换为自己的API密钥。同时你也可以将代码中的Qwen/Qwen2.5-7B-Instruct替换为自己喜欢的其他模型siliconflow上有其他可以免费调用的模型。将上述代码存储到记事本中将文件后缀修改为.html后双击即可运行。
