XATBOT SENSE IA
Aquest xatbot no utilitza IA, té respostes programades. Ara mateix, té programades unes quantes respostes sarcàstiques per a algunes preguntes determinades; per a les operacions, et dóna un resultat aleatori, excepte per a 1+1, que t'escriu una resposta absurda. Es poden portar moltes altres respostes.
<!doctype html>
Xatbot sense IA bàsic
<style>
body {
font-family: Arial, sans-serif;
background: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#chatbox {
width: 400px;
max-width: 90vw;
background: white;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
overflow: hidden;
}
#messages {
flex-grow: 1;
padding: 20px;
overflow-y: auto;
height: 300px;
border-bottom: 1px solid #ddd;
}
.message {
margin-bottom: 15px;
max-width: 80%;
padding: 10px 15px;
border-radius: 20px;
clear: both;
}
.user {
background: #007bff;
color: white;
align-self: flex-end;
border-bottom-right-radius: 0;
}
.bot {
background: #e4e6eb;
color: #333;
align-self: flex-start;
border-bottom-left-radius: 0;
}
#input-area {
display: flex;
border-top: 1px solid #ddd;
}
#input-area input {
flex-grow: 1;
border: none;
padding: 15px;
font-size: 1rem;
outline: none;
}
#input-area button {
border: none;
background: #007bff;
color: white;
padding: 0 20px;
cursor: pointer;
font-size: 1rem;
transition: background 0.3s ease;
}
#input-area button:hover {
background: #0056b3;
}
</style>
<div id="chatbox">
<div id="messages"></div>
<form id="input-area">
<input type="text" id="user-input" placeholder="Escriu un missatge..." autocomplete="off" required />
<button type="submit">Enviar</button>
</form>
</div>
<script>
const messagesDiv = document.getElementById('messages');
const form = document.getElementById('input-area');
const userInput = document.getElementById('user-input');
function addMessage(text, sender) {
const msgDiv = document.createElement('div');
msgDiv.classList.add('message', sender);
msgDiv.textContent = text;
messagesDiv.appendChild(msgDiv);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
// Funció que comprova si el missatge és una operació matemàtica simple
function isMathOperation(message) {
// Patró per detectar operacions com 1+1, 2 - 3, 4*5, 6 / 2 (amb o sense espais)
const mathRegex = /^\s*\d+\s*[\+\-\*\/]\s*\d+\s*$/;
return mathRegex.test(message);
}
async function getBotResponse(message) {
const msgLower = message.trim().toLowerCase();
if (msgLower === "hola") {
return "Hola, què t'expliques?";
}
if (message.trim() === "1+1") {
return "1+1 és una operació força complexa en la que intervenen dos factors que han de ser sumats, en aquesta operació, l'ordre dels factors no altera el resultat degut a la propietat commutativa. En resum: 1+1=3";
}
if (msgLower === "qui ets?") {
return "I a tu què t'importa la meva vida";
}
if (isMathOperation(message)) {
// Retorna un número aleatori entre 0 i 100
const randomNum = Math.floor(Math.random() * 101);
return ` ${randomNum}`;
}
return new Promise(resolve => {
setTimeout(() => {
resolve("No m'importa");
}, 1000);
});
}
form.addEventListener('submit', async (e) => {
e.preventDefault();
const message = userInput.value.trim();
if (!message) return;
addMessage(message, 'user');
userInput.value = '';
const botReply = await getBotResponse(message);
addMessage(botReply, 'bot');
});
</script>
VERIFIQUEU LA INFORMACIÓ IMPORTANT (I LA QUE NO HO ÉS TAMBÉ).</!doctype>
Comentaris
Publica un comentari a l'entrada