基于网页的大语言模型聊天机器人

ops/2024/11/24 5:16:33/

代码功能

用户交互界面:

包括聊天历史显示区域和输入框,用户可以输入消息并发送。

消息发送和显示:

用户输入消息后点击“Send”按钮或按下回车键即可发送。
消息发送后显示在聊天记录中,并通过异步请求与后端 AI 模型通信,获取回复。

对话历史存储与管理:

聊天记录保存在 conversationHistory 数组中,用于构建上下文与后端交互。

清空对话功能:

点击“Clear”按钮后,清空页面上的聊天记录以及存储的对话历史。

样式与美观:

通过 CSS 美化了聊天界面,包括消息显示、按钮样式及自动滚动功能。
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AI Chatbot</title><style>/* 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>
<body><div class="chat-container"><div class="chat-header"><h1>AI Chatbot</h1></div><div id="chat-history" class="chat-history"></div><div class="chat-input"><input id="user-input" type="text" placeholder="Type your message..." autocomplete="off"><button id="send-button">Send</button><button id="clear-button" class="clear-btn">Clear</button></div></div><script>// 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 AI's 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后,双击即可运行。
在这里插入图片描述
在这里插入图片描述


http://www.ppmy.cn/ops/136240.html

相关文章

Thymeleaf模板引擎生成的html字符串转换成pdf

依赖引入implementation("org.springframework.boot:spring-boot-starter-thymeleaf")implementation("org.xhtmlrenderer:flying-saucer-pdf")将ITemplateEngine注入到spring管理的类中&#xff0c; Context context new Context(); context.setVariable…

蓝桥杯第22场小白入门赛2~5题

这场比赛开打第二题就理解错意思了&#xff0c;还以为只能用3个消除和5个消除其中一种呢&#xff0c;结果就是死活a不过去&#xff0c;第三题根本读不懂题意&#xff0c;这蓝桥杯的题面我只能说出的是一言难尽啊。。第四题写出来一点但是后来知道是错了&#xff0c;不会正解&am…

快速图像识别:落叶植物叶片分类

1.背景意义 研究背景与意义 随着全球生态环境的变化&#xff0c;植物的多样性及其在生态系统中的重要性日益受到关注。植物叶片的分类不仅是植物学研究的基础&#xff0c;也是生态监测、农业管理和生物多样性保护的重要环节。传统的植物分类方法依赖于人工观察和专家知识&…

.net 8使用hangfire实现库存同步任务

C# 使用HangFire 第一章:.net Framework 4.6 WebAPI 使用Hangfire 第二章:net 8使用hangfire实现库存同步任务 文章目录 C# 使用HangFire前言项目源码一、项目架构二、项目服务介绍HangFire服务结构解析HangfireCollectionExtensions 类ModelHangfireSettingsHttpAuthInfoUs…

友思特新闻 | 友思特荣获广州科技创新创业大赛智能装备行业赛初创组优胜企业!

2024年11月19日&#xff0c;第十三届中国创新创业大赛&#xff08;广东广州赛区&#xff09;暨2024年广州科技创新创业大赛智能装备行业赛颁奖典礼隆重举行。 赛事奖项介绍&#xff1a;广州科技创新创业大赛智能装备行业赛 第十三届“中国创新创业大赛&#xff08;广东广州赛区…

RabbitMQ高可用延迟消息惰性队列

目录 生产者确认 消息持久化 消费者确认 TTL延迟队列 TTL延迟消息 惰性队列 生产者确认 生产者确认就是&#xff1a;发送消息的人&#xff0c;要确保消息发送给了消息队列&#xff0c;分别是确保到了交换机&#xff0c;确保到了消息队列这两步。 1、在发送消息服务的ap…

神领物流运单服务业务流程以及相关面试点

运单服务 在该服务中用到了什么技术 --> 美团Leaf 什么是美团Leaf 美团Leaf是有美团开源的 , 用于处理分布式环境中保证ID的唯一性 , 通过该技术能够实现Id的全局唯一性 , 高可用性 , 趋势递增性以及容灾性. 美团leaf主要通过两种方式实现业务 雪花算法 该方式区别于传…

VB.Net笔记-更新ing

目录 1.1 设置默认VS的开发环境为VB.NET&#xff08;2024/11/18&#xff09; 1.2 新建一个“Hello&#xff0c;world”的窗体&#xff08;2024/11/18&#xff09; 1.3 计算圆面积的小程序&#xff08;2024/11/18&#xff09; 显示/隐式 声明 &#xff08;2024/11/18&…