请你用htmlcss和js来做出一个简单的AI界面类似于聊天软件用户在提问框写上问题并发送之后模拟AI思考的过程等待2到5秒。消息并且如果我回复 你好 AI应该回答 有什么问题需要解决吗？如果我回复 1425+4447 你应该回答 5872。然后逐字逐句地生成回复如果用户没有输入这些特定的消息AI会回复您好我还在学习中不明白您的意思。如果你能提供更多的上下文那我将尽力回答 在生成回复时AI会逐字逐
<!DOCTYPE html>
<html>
<head>
<title>AI Chatbot</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
}
.header {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.messages {
height: 300px;
overflow-y: scroll;
padding: 10px;
}
.message {
margin-bottom: 10px;
}
.user {
background-color: #f2f2f2;
padding: 10px;
border-radius: 10px;
text-align: right;
}
.ai {
background-color: #e6f2ff;
padding: 10px;
border-radius: 10px;
}
.input {
margin-top: 20px;
}
.input input[type="text"] {
width: 80%;
padding: 10px;
border-radius: 10px;
border: none;
box-shadow: 0 0 10px #ccc;
outline: none;
}
.input input[type="submit"] {
width: 18%;
padding: 10px;
border-radius: 10px;
border: none;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
box-shadow: 0 0 10px #ccc;
outline: none;
}
.clear-btn {
float: right;
margin-top: 10px;
padding: 5px 10px;
border-radius: 10px;
border: none;
background-color: #f44336;
color: #fff;
cursor: pointer;
box-shadow: 0 0 10px #ccc;
outline: none;
}
</style>
</head>
<body>
<div class="container">
<div class="header">AI Chatbot</div>
<div class="messages" id="messages"></div>
<div class="input">
<input type="text" id="input-box" placeholder="Type your message here...">
<input type="submit" value="Send" onclick="sendMessage()">
<button class="clear-btn" onclick="clearMessages()">Clear all conversations</button>
</div>
</div>
<pre><code><script type="text/javascript">
function sendMessage() {
var inputBox = document.getElementById("input-box");
var message = inputBox.value.trim();
if (message === "") {
return;
}
addUserMessage(message);
inputBox.value = "";
setTimeout(function() {
var reply;
if (message === "你好") {
reply = "有什么问题需要解决吗？";
} else if (message === "1425+4447") {
reply = "5872.";
} else {
reply = "您好，我还在学习中，不明白您的意思。如果你能提供更多的上下文，那我将尽力回答。";
}
addAiMessage(reply);
}, getRandomWaitTime());
}
function addUserMessage(message) {
var messages = document.getElementById("messages");
var messageElem = document.createElement("div");
messageElem.className = "message user";
messageElem.innerHTML = message;
messages.appendChild(messageElem);
messages.scrollTop = messages.scrollHeight;
}
function addAiMessage(message) {
var messages = document.getElementById("messages");
var messageElem = document.createElement("div");
messageElem.className = "message ai";
messages.appendChild(messageElem);
var words = message.split(" ");
var currentWord = 0;
var showWordInterval = setInterval(function() {
if (currentWord < words.length) {
messageElem.innerHTML += words[currentWord] + " ";
messages.scrollTop = messages.scrollHeight;
currentWord++;
} else {
clearInterval(showWordInterval);
}
}, 200);
}
function getRandomWaitTime() {
return Math.floor(Math.random() * (5000 - 2000 + 1)) + 2000;
}
function clearMessages() {
var messages = document.getElementById("messages");
messages.innerHTML = "";
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/byQL 著作权归作者所有。请勿转载和采集!