Hugging Face's logo

Spaces:
n-gusion
/
nova
Running

App Files Community
nova / index.html
n-gusion's picture
n-gusion
Add 3 files
2a56fc9 verified
Raw
History Blame Contribute Delete
18.8 kB
<!DOCTYPE html>
<html lang="pt-BR">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Assistente de IA Futurista</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @keyframes pulse {
 0%, 100% { transform: scale(1); opacity: 1; }
 50% { transform: scale(1.05); opacity: 0.8; }
 }
@keyframes float {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
 }
@keyframes rotate {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
 }
@keyframes wave {
 0% { transform: scaleY(1); }
 50% { transform: scaleY(1.5); }
 100% { transform: scaleY(1); }
 }
.avatar-pulse {
 animation: pulse 3s infinite;
 }
.avatar-float {
 animation: float 6s ease-in-out infinite;
 }
.ring-rotate {
 animation: rotate 20s linear infinite;
 }
.wave-animation {
 animation: wave 0.5s ease infinite;
 }
.glow {
 box-shadow: 0 0 20px 5px rgba(100, 149, 237, 0.7);
 }
.glow-blue {
 box-shadow: 0 0 30px 10px rgba(65, 105, 225, 0.5);
 }
.glow-purple {
 box-shadow: 0 0 30px 10px rgba(147, 112, 219, 0.5);
 }
.particle {
 position: absolute;
 background-color: rgba(100, 149, 237, 0.7);
 border-radius: 50%;
 pointer-events: none;
 }
.typing-indicator span {
 display: inline-block;
 width: 8px;
 height: 8px;
 background-color: #60a5fa;
 border-radius: 50%;
 margin: 0 2px;
 animation: bounce 1.4s infinite ease-in-out;
 }
.typing-indicator span:nth-child(2) {
 animation-delay: 0.2s;
 }
.typing-indicator span:nth-child(3) {
 animation-delay: 0.4s;
 }
@keyframes bounce {
 0%, 60%, 100% { transform: translateY(0); }
 30% { transform: translateY(-10px); }
 }
.message-transition {
 transition: all 0.3s ease;
 }
.neon-text {
 text-shadow: 0 0 5px #60a5fa, 0 0 10px #60a5fa;
 }
 </style>
</head>
<body class="bg-gray-900 text-white min-h-screen flex flex-col overflow-hidden">
 <header class="p-4 flex justify-between items-center bg-gray-800 bg-opacity-50">
 <h1 class="text-2xl font-bold neon-text">Assistente de IA</h1>
 <div class="flex space-x-4">
 <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-700 transition">
 <i class="fas fa-moon"></i>
 </button>
 <button id="settings-btn" class="p-2 rounded-full hover:bg-gray-700 transition">
 <i class="fas fa-cog"></i>
 </button>
 </div>
 </header>
<main class="flex-grow flex flex-col items-center justify-center p-4 relative">
 <!-- Avatar Container -->
 <div id="avatar-container" class="relative w-64 h-64 flex items-center justify-center mb-8 avatar-float">
 <!-- Outer Ring -->
 <div class="absolute w-full h-full rounded-full border-2 border-blue-500 border-opacity-30 ring-rotate"></div>
<!-- Middle Ring -->
 <div class="absolute w-3/4 h-3/4 rounded-full border-2 border-purple-500 border-opacity-30 ring-rotate" style="animation-direction: reverse;"></div>
<!-- Inner Ring -->
 <div class="absolute w-1/2 h-1/2 rounded-full border-2 border-blue-400 border-opacity-50 ring-rotate" style="animation-duration: 15s;"></div>
<!-- Avatar Core -->
 <div id="avatar-core" class="w-32 h-32 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center avatar-pulse glow">
 <div class="w-24 h-24 rounded-full bg-blue-700 flex items-center justify-center">
 <div class="w-16 h-16 rounded-full bg-blue-800 flex items-center justify-center">
 <div class="w-8 h-8 rounded-full bg-blue-900"></div>
 </div>
 </div>
 </div>
<!-- Particles will be added here by JS -->
 </div>
<!-- Response Container -->
 <div id="response-container" class="bg-gray-800 bg-opacity-70 rounded-lg p-4 max-w-2xl w-full min-h-32 mb-8 border border-gray-700 transition-all duration-300">
 <div id="response-text" class="text-center">
 <p class="text-gray-300">Olá! Eu sou seu assistente de IA. Como posso te ajudar hoje?</p>
 </div>
<!-- Typing Indicator -->
 <div id="typing-indicator" class="hidden mt-4 flex justify-center">
 <div class="typing-indicator">
 <span></span>
 <span></span>
 <span></span>
 </div>
 </div>
 </div>
<!-- Wave Visualization -->
 <div id="wave-visualization" class="hidden h-16 w-full max-w-md flex items-end justify-center space-x-1 mb-4">
 <div class="w-2 h-4 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0s;"></div>
 <div class="w-2 h-6 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.1s;"></div>
 <div class="w-2 h-8 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.2s;"></div>
 <div class="w-2 h-10 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.3s;"></div>
 <div class="w-2 h-8 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.4s;"></div>
 <div class="w-2 h-6 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.5s;"></div>
 <div class="w-2 h-4 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.6s;"></div>
 </div>
 </main>
<!-- Input Bar -->
 <div class="p-4 bg-gray-800 bg-opacity-50 border-t border-gray-700">
 <div class="max-w-3xl mx-auto flex items-center space-x-2">
 <button id="voice-btn" class="p-3 rounded-full bg-blue-600 hover:bg-blue-700 transition">
 <i class="fas fa-microphone"></i>
 </button>
<div class="flex-grow relative">
 <input id="user-input" type="text" placeholder="Digite sua mensagem..."
class="w-full bg-gray-700 rounded-full py-3 px-4 pr-12 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button id="send-btn" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
<button id="file-btn" class="p-3 rounded-full bg-gray-700 hover:bg-gray-600 transition">
 <i class="fas fa-paperclip"></i>
 </button>
 </div>
<div id="voice-status" class="text-center mt-2 text-sm text-blue-400 hidden">
 <i class="fas fa-circle animate-pulse"></i> Gravando...
 </div>
 </div>
<!-- File Input (hidden) -->
 <input type="file" id="file-input" class="hidden">
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // Elements
 const avatarCore = document.getElementById('avatar-core');
 const avatarContainer = document.getElementById('avatar-container');
 const userInput = document.getElementById('user-input');
 const sendBtn = document.getElementById('send-btn');
 const voiceBtn = document.getElementById('voice-btn');
 const fileBtn = document.getElementById('file-btn');
 const fileInput = document.getElementById('file-input');
 const responseText = document.getElementById('response-text');
 const typingIndicator = document.getElementById('typing-indicator');
 const waveVisualization = document.getElementById('wave-visualization');
 const voiceStatus = document.getElementById('voice-status');
 const themeToggle = document.getElementById('theme-toggle');
 const responseContainer = document.getElementById('response-container');
// State
 let isListening = false;
 let isDarkMode = true;
// Theme toggle
 themeToggle.addEventListener('click', () => {
 isDarkMode = !isDarkMode;
 document.body.classList.toggle('bg-gray-100');
 document.body.classList.toggle('text-gray-900');
 document.body.classList.toggle('bg-gray-900');
 document.body.classList.toggle('text-white');
themeToggle.innerHTML = isDarkMode ? '<i class="fas fa-moon"></i>' : '<i class="fas fa-sun"></i>';
 });
// Create particles
 function createParticles() {
 for (let i = 0; i < 20; i++) {
 const particle = document.createElement('div');
 particle.classList.add('particle');
// Random size
 const size = Math.random() * 4 + 2;
 particle.style.width = `${size}px`;
 particle.style.height = `${size}px`;
// Random position
 const angle = Math.random() * Math.PI * 2;
 const distance = Math.random() * 100 + 50;
 const x = Math.cos(angle) * distance;
 const y = Math.sin(angle) * distance;
particle.style.left = `calc(50% + ${x}px)`;
 particle.style.top = `calc(50% + ${y}px)`;
// Random animation
 particle.style.animation = `float ${Math.random() * 6 + 3}s ease-in-out infinite`;
avatarContainer.appendChild(particle);
 }
 }
createParticles();
// Avatar pulse on interaction
 function pulseAvatar() {
 avatarCore.classList.remove('avatar-pulse');
 void avatarCore.offsetWidth; // Trigger reflow
 avatarCore.classList.add('avatar-pulse');
// Add glow effect
 avatarCore.classList.add('glow-blue');
 setTimeout(() => {
 avatarCore.classList.remove('glow-blue');
 }, 1000);
 }
// Simulate typing
 function showTyping() {
 typingIndicator.classList.remove('hidden');
 waveVisualization.classList.remove('hidden');
// Randomly pulse the avatar while typing
 const typingInterval = setInterval(() => {
 if (Math.random() > 0.7) {
 pulseAvatar();
 }
 }, 1000);
return typingInterval;
 }
// Simulate AI response
 function simulateAIResponse(message) {
 // Clear previous response
 responseText.innerHTML = '';
// Show typing indicator
 const typingInterval = showTyping();
// Generate a response after a delay
 setTimeout(() => {
 clearInterval(typingInterval);
 typingIndicator.classList.add('hidden');
 waveVisualization.classList.add('hidden');
// Sample responses
 const responses = [
 `Entendi que você disse: "${message}". Como posso te ajudar com isso?`,
 `Interessante! "${message}" é um tópico fascinante. O que mais você gostaria de saber?`,
 `Ótima pergunta! "${message}" pode ser abordado de várias maneiras. Vamos explorar juntos?`,
 `Recebi sua mensagem: "${message}". Estou processando as melhores informações para você.`,
 `"${message}" - isso me lembra algo importante. Deixe-me verificar meus conhecimentos...`
 ];
const randomResponse = responses[Math.floor(Math.random() * responses.length)];
// Animate the response
 let i = 0;
 const speed = 30; // milliseconds per character
function typeWriter() {
 if (i < randomResponse.length) {
 responseText.innerHTML += randomResponse.charAt(i);
 i++;
// Pulse avatar with some words
 if (randomResponse.charAt(i) === ' ' || i % 10 === 0) {
 if (Math.random() > 0.7) {
 pulseAvatar();
 }
 }
setTimeout(typeWriter, speed);
 } else {
 // Final pulse
 pulseAvatar();
 }
 }
typeWriter();
// Animate container
 responseContainer.classList.add('glow-purple');
 setTimeout(() => {
 responseContainer.classList.remove('glow-purple');
 }, 1000);
}, 2000 + Math.random() * 2000);
 }
// Handle send button
 sendBtn.addEventListener('click', () => {
 const message = userInput.value.trim();
 if (message) {
 pulseAvatar();
 simulateAIResponse(message);
 userInput.value = '';
 }
 });
// Handle enter key
 userInput.addEventListener('keypress', (e) => {
 if (e.key === 'Enter') {
 const message = userInput.value.trim();
 if (message) {
 pulseAvatar();
 simulateAIResponse(message);
 userInput.value = '';
 }
 }
 });
// Handle voice button
 voiceBtn.addEventListener('click', () => {
 isListening = !isListening;
if (isListening) {
 voiceBtn.classList.remove('bg-blue-600');
 voiceBtn.classList.add('bg-red-600');
 voiceBtn.innerHTML = '<i class="fas fa-microphone-slash"></i>';
 voiceStatus.classList.remove('hidden');
// Simulate listening with random pulses
 const listenInterval = setInterval(() => {
 pulseAvatar();
 }, 800 + Math.random() * 1000);
// Stop after random time (simulating user speaking)
 setTimeout(() => {
 clearInterval(listenInterval);
 voiceBtn.click(); // Toggle off
// Simulate a random message
 const phrases = [
 "Como posso configurar meu dispositivo?",
 "Quais são as notícias mais recentes?",
 "Me explique sobre inteligência artificial",
 "Qual é a previsão do tempo para amanhã?",
 "Como fazer um bolo de chocolate?"
 ];
const randomPhrase = phrases[Math.floor(Math.random() * phrases.length)];
 simulateAIResponse(randomPhrase);
 }, 3000 + Math.random() * 4000);
} else {
 voiceBtn.classList.add('bg-blue-600');
 voiceBtn.classList.remove('bg-red-600');
 voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
 voiceStatus.classList.add('hidden');
 }
 });
// Handle file button
 fileBtn.addEventListener('click', () => {
 fileInput.click();
 });
fileInput.addEventListener('change', (e) => {
 if (fileInput.files.length > 0) {
 pulseAvatar();
 const fileName = fileInput.files[0].name;
 simulateAIResponse(`Recebi o arquivo: ${fileName}. O que você gostaria que eu faça com ele?`);
 }
 });
// Initial animation
 setTimeout(() => {
 pulseAvatar();
 }, 1000);
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=n-gusion/nova" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>