<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Asistente Virtual</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> <style> body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f8ff; padding: 50px; } .container { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); display: inline-block; width: 60%; } #assistant { width: 150px; height: 150px; background: url('images/asistente_virtual.png') no-repeat center; background-size: cover; margin: 20px auto; border-radius: 50%; position: relative; animation: float 2s infinite alternate ease-in-out; } @keyframes float { from { transform: translateY(0px); } to { transform: translateY(-10px); } } .chat-box { height: 300px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; border-radius: 10px; background: #f9f9f9; text-align: left; } .user-message { text-align: right; color: blue; } .assistant-message { text-align: left; color: green; } input { padding: 10px; width: 80%; margin: 10px 0; } button { padding: 10px 20px; background-color: blue; color: white; border: none; cursor: pointer; border-radius: 5px; } </style> </head> <body> <div class="container"> <h1>Asistente Virtual</h1> <div id="assistant"></div> <div class="chat-box" id="chatBox"></div> <input type="text" id="query" placeholder="Escribe tu mensaje..."> <button onclick="enviarMensaje()">Enviar</button> <button onclick="iniciarReconocimiento()">Hablar</button> </div> <script> function hablar(texto) { const speech = new SpeechSynthesisUtterance(texto); speech.lang = "es-ES"; window.speechSynthesis.speak(speech); } function agregarMensaje(mensaje, tipo) { let chatBox = document.getElementById('chatBox'); let mensajeHTML = `<p class="${tipo}-message">${mensaje}</p>`; chatBox.innerHTML += mensajeHTML; chatBox.scrollTop = chatBox.scrollHeight; } async function enviarMensaje() { let query = document.getElementById('query').value; if (query.trim() === '') return; agregarMensaje(query, 'user'); document.getElementById('query').value = ''; responder(query); } async function responder(query) { let respuesta; if (/hola|buenas/i.test(query)) { respuesta = "Hola, ¿en qué puedo ayudarte?"; } else if (/me gustaría saber|cuáles son las mejores ofertas/i.test(query)) { hablar("Déjame buscar las mejores ofertas para ti"); agregarMensaje("Déjame buscar las mejores ofertas para ti", 'assistant'); animateAssistant(); try { let api = `https://api.mercadolibre.com/sites/MLC/search?q=ofertas&limit=5&sort=price_asc`; let response = await fetch(api); let data = await response.json(); let resultados = data.results || []; if (resultados.length === 0) { respuesta = "No encontré ofertas disponibles."; } else { respuesta = "Aquí tienes las mejores ofertas disponibles:"; resultados.forEach((articulo) => { respuesta += `\n- ${articulo.title}: ${articulo.price} ${articulo.currency_id} \n`; }); } } catch (error) { respuesta = "Hubo un error al buscar las ofertas."; } } else { hablar("Déjame buscar información sobre " + query); agregarMensaje("Déjame buscar información sobre " + query, 'assistant'); animateAssistant(); try { let api = `https://api.mercadolibre.com/sites/MLC/search?q=${query}&limit=5`; let response = await fetch(api); let data = await response.json(); let resultados = data.results || []; if (resultados.length === 0) { respuesta = "No encontré resultados."; } else { respuesta = "Aquí tienes algunas opciones:"; resultados.forEach((articulo) => { respuesta += `\n- ${articulo.title}: ${articulo.price} ${articulo.currency_id} \n`; }); } } catch (error) { respuesta = "Hubo un error en la búsqueda."; } } agregarMensaje(respuesta.replace(/\n/g, '<br>'), 'assistant'); hablar(respuesta); } function animateAssistant() { anime({ targets: '#assistant', scale: [1, 1.2, 1], duration: 1000, easing: 'easeInOutQuad' }); } function iniciarReconocimiento() { const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); recognition.lang = "es-ES"; recognition.start(); recognition.onresult = function(event) { let texto = event.results[0][0].transcript; document.getElementById('query').value = texto; enviarMensaje(); }; } </script> </body> </html> generame una mejora la cual la persona interactue mejor con este asistente virtual
Please keep input under 1000 characters