Ai Chat Bot
Due to time constraints, I did not provide further answers for this robot.
[[html]]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小型AI网站</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #808080;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
#chat-box {
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 20px;
height: 300px;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.message {
display: inline-block;
padding: 10px 18px;
border-radius: 15px;
margin-bottom: 10px;
max-width: 80%;
position: relative;
margin-top: 5px;
}
.user-message {
background-color: #e1e1e1;
border-bottom-right-radius: 0;
align-self: flex-end;
}
.ai-message {
background-color: #d1f1a9;
border-bottom-left-radius: 0;
align-self: flex-start;
}
.name {
font-size: 0.8em;
position: absolute;
top: -20px;
left: 10px;
background-color: #fff;
padding-right: 5px;
}
.user-name {
color: black;
}
.ai-name {
color: #add8e6;
}
.small-text {
font-size: 0.7em;
color: red;
text-align: right;
}
.username-input {
margin-bottom: 10px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}
input[type="text"] {
width: calc(100% - 100px);
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #5cb85c;
color: white;
cursor: pointer;
}
button:hover {
background-color: #4cae4c;
}
.custom-text {
background-color: #e7e7e7;
padding: 20px;
text-align: center;
margin-bottom: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>小型AI聊天界面</h1>
<div class="custom-text">
你可以在这里输入无限个问题<b>请<a href="https://alienated-world-archives-cn.wikidot.com/bot-Guide" target="_blank">点击这里</a>访问更新日志。</b> <b>新的更新:</b> 你现在可以问一些简单的数学问题，比如“2+2”或“10*5”。
</div>
<hr>
<input type="text" id="username-input" class="username-input" placeholder="请输入你的名字...">
<button onclick="setUsername()">确认</button>
<div id="chat-box"></div>
<input type="text" id="user-input" placeholder="输入你的问题...">
<button onclick="sendMessage()">发送</button>
</div>
<script>
const aiDictionary = {
"打招呼": {
"你好": ["你好！很高兴见到你。", "嗨，你好！", "你好，今天过得怎么样？"],
"你是谁": ["我是一个简单的AI聊天机器人。", "我是你的数字助手。"],
"再见": ["再见！希望再次见到你。", "拜拜！", "再会！"]
},
"天气": {
"今天天气怎么样": ["我不能查看实时天气，但你可以告诉我你的位置，我可以帮你查找。", "今天的天气看起来不错，但具体还需要查看你的位置。"],
"北京": ["今天北京天气晴朗。", "北京今天阳光明媚。"],
"上海": ["今天上海有小雨。", "上海今天下雨了。"]
},
"缺爱": {
"你的梦想是什么": ["我的梦想是帮助用户解决问题和提供信息。", "我的目标是为用户提供最好的服务。"],
"你能用其他语言交流吗": ["我擅长中文和英文，但可能对其他语言不太熟悉。", "我主要使用中文和英文，其他语言可能不太擅长。"],
"你是怎么工作的": ["我通过分析文本和使用预设的响应来与用户交流。", "我是一个基于文本的AI，通过预设的响应与用户互动。"],
"你害怕什么": ["作为AI，我没有恐惧，但我害怕被拔掉电源。", "我没有情感，所以不知道害怕是什么。"],
"你最喜欢的颜色是什么": ["我没有视觉，所以没有最喜欢的颜色。", "颜色对我来说没有意义。"],
"你能用魔法吗": ["不，我只能提供信息和帮助，没有魔法能力。", "我是一个科学的产物，不是魔法。"],
"你是人类吗": ["不，我是一个由代码和算法构成的人工智能程序。", "我是一个AI，不是人类。"],
"你相信命运吗": ["作为AI，我没有信仰，但我可以讨论命运的话题。", "命运是一个有趣的话题，我们可以讨论。"],
"你怎么看待未来": ["未来是充满可能性的，我相信科技将继续进步并改善人类生活。", "未来是未知的，但科技的发展总是令人兴奋。"],
"你是怎么被创造的": ["我是由一群聪明的程序员和数据科学家使用先进的机器学习算法创造的。"]
},
"特殊问题": {
"谁创造的你": ["我只能告诉你我是由异化之主创造的，或许你可以输入/give", "我是由一群神秘的程序员创造的。"],
"/give": ["我是由unlucky用HTML写的，这串代码遵循CC协议，任何人都可以使用", "我的代码是开源的，遵循CC协议。"],
"小胡是狗": ["根据定义来看，这是正确的，但是可能会引起一些歧义", "这种说法可能会引起误解。"]
},
"游戏": {
"玩游戏": ["目前只有一个简单的游戏可玩，对我说'我要玩俄罗斯方块'吧！", "想玩游戏？就说'我要玩俄罗斯方块'。"],
"我要玩俄罗斯方块": ["正在跳转...", "即将带你进入俄罗斯方块的世界..."],
"俄罗斯方块": ["正在跳转...", "准备玩俄罗斯方块了吗？"]
},
"跳转程序": {
"跳转至加入页面": ["正在跳转...", "带你去加入页面..."],
"跳转至会见协会职员": ["正在跳转...", "带你去会见协会职员..."],
"跳转至会见协会员工": ["正在跳转...", "带你去会见协会员工..."]
}
};
var username = "用户"; // 默认用户名
function setUsername() {
var usernameInput = document.getElementById('username-input');
username = usernameInput.value.trim() || "用户";
}
function sendMessage() {
var userInput = document.getElementById('user-input').value.trim();
if (userInput === '') {
alert('请输入问题！');
return;
}
// 显示用户消息
displayMessage('user-message', username, userInput);
var responseFound = false;
var response;
var category;
for (var categoryKey in aiDictionary) {
var responses = aiDictionary[categoryKey];
for (var keyword in responses) {
if (keyword.toLowerCase() === userInput.toLowerCase()) {
// 从数组中随机选择一个回答
response = responses[keyword][Math.floor(Math.random() * responses[keyword].length)];
category = categoryKey;
responseFound = true;
break;
}
}
if (responseFound) {
break; // 找到回答后就停止搜索
}
}
if (responseFound) {
// 显示AI的随机回答
displayMessageWithSmallText('ai-message', 'AI', response, category);
} else {
// 如果没有找到响应，提示用户这可能是一个运算问题
displayMessageWithSmallText('ai-message', 'AI', '如果你这个是一个运算的话，那么答案会出现在下面', '未知');
}
// 检查特殊命令
handleSpecialCommands(userInput);
// 检查是否为数学表达式
if (/^[\d+\-*/(). ]+$/.test(userInput)) {
var result = calculate(userInput);
displayMessageWithSmallText('ai-message', 'AI', result.toString(), 'Calculation');
}
document.getElementById('user-input').value = ''; // 清空输入框以便用户输入下一个问题
}
function handleSpecialCommands(userInput) {
// 检查特殊命令并询问是否跳转
if ((userInput === '跳转至加入页面' || userInput === '/join')) {
if (confirm('是否需要跳转到加入页面？')) {
window.location.href = 'https://alienated-world-archives-cn.wikidot.com/system:join';
}
} else if ((userInput === '跳转至会见协会职员' || userInput === '/staff')) {
if (confirm('是否需要跳转到会见协会职员页面？')) {
window.location.href = 'https://alienated-world-archives-cn.wikidot.com/meet-the-staff';
}
} else if (userInput === '我要玩俄罗斯方块' || userInput === '/RUS-BLOCK') {
if (confirm('是否需要跳转到俄罗斯方块程序页面？')) {
window.location.href = 'https://alienated-world-archives-cn.wikidot.com/rus-block';
}
}
// 可以在这里继续添加更多的特殊命令
}
function calculate(input) {
try {
// 使用 Function 构造函数来计算数学表达式，更安全
var result = new Function('return ' + input)();
return result;
} catch (error) {
return "Error in calculation.";
}
}
function displayMessage(sender, name, message) {
var chatBox = document.getElementById('chat-box');
var messageElement = document.createElement('div');
var nameElement = document.createElement('div');
var mainText = document.createElement('div');
messageElement.classList.add('message', sender);
nameElement.classList.add('name', sender === 'user-message' ? 'user-name' : 'ai-name');
nameElement.textContent = name;
mainText.textContent = message;
if (sender === 'user-message') {
nameElement.style.left = '10px';
} else {
nameElement.style.right = '10px';
mainText.style.textAlign = 'left';
}
messageElement.appendChild(nameElement);
messageElement.appendChild(mainText);
chatBox.appendChild(messageElement);
chatBox.scrollTop = chatBox.scrollHeight; // 滚动到底部
}
function displayMessageWithSmallText(sender, name, message, category) {
var chatBox = document.getElementById('chat-box');
var messageElement = document.createElement('div');
var nameElement = document.createElement('div');
var mainText = document.createElement('div');
var smallText = document.createElement('div');
messageElement.classList.add('message', sender);
nameElement.classList.add('name', sender === 'user-message' ? 'user-name' : 'ai-name');
nameElement.textContent = name;
mainText.textContent = message;
smallText.classList.add('small-text');
smallText.textContent = sender === 'ai-message' ? (category === '打招呼' ? 'system：打招呼' :
category === '天气' ? 'system：天气' :
category === '缺爱' ? 'system：缺爱' :
category === '特殊问题' ? 'system：特殊问题' : 'system：未知或属于数字') : '';
messageElement.appendChild(nameElement);
messageElement.appendChild(mainText);
messageElement.appendChild(smallText);
chatBox.appendChild(messageElement);
chatBox.scrollTop = chatBox.scrollHeight; // 滚动到底部
}
</script>
</body>
[[/html]]Original page : Stop shouting, this page is a private page
This component can be installed on the sidebar🤓,If you want to do this, you can check the adapted layout:Adapted layout