Spaces:

n-gusion
/

nova

Running

File size: 18,775 Bytes

2a56fc9

<!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>