Upload app.py with huggingface_hub

app.py

@@ -706,21 +706,17 @@ label span, .label-wrap span {
 /* ─── Hide Gradio Footer ───────────────────────────────────────────────────── */
 footer, .footer, .built-with { display: none !important; }
 
-/* ─── Animations ───────────────────────────────────────────────────────────── */
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.hero { animation: fadeInUp 0.6s ease-out; }
-.features-grid { animation: fadeInUp 0.6s ease-out 0.1s both; }
-.chat-section { animation: fadeInUp 0.6s ease-out 0.2s both; }
+/* ─── Animations (anime.js handles all) ────────────────────────────────────── */
+.hero { opacity: 0; }
+.hero-badge { opacity: 0; }
+.hero h1 { opacity: 0; }
+.hero p { opacity: 0; }
+.hero-cta { opacity: 0; }
+.features-grid { opacity: 1; }
+.feature-card { opacity: 0; }
+.chat-section { opacity: 1; }
+.chat-container { opacity: 0; }
+.footer { opacity: 0; }
 
 /* ─── Responsive ───────────────────────────────────────────────────────────── */
 @media (max-width: 768px) {
@@ -764,6 +760,15 @@ footer, .footer, .built-with { display: none !important; }
 
 # ─── Custom JS ────────────────────────────────────────────────────────────────
 custom_js = """
+(function() {
+    const script = document.createElement('script');
+    script.src = 'https://cdn.jsdelivr.net/npm/animejs@4.0.0/lib/anime.min.js';
+    script.onload = function() {
+        initAnimations();
+    };
+    document.head.appendChild(script);
+})();
+
 function initTheme() {
     const stored = localStorage.getItem('theme');
     const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -778,6 +783,12 @@ function toggleTheme() {
     document.documentElement.setAttribute('data-theme', next);
     localStorage.setItem('theme', next);
     updateThemeIcon(next);
+    anime({
+        targets: '.theme-toggle',
+        rotate: [0, 360],
+        duration: 400,
+        easing: 'easeInOutQuad'
+    });
 }
 
 function updateThemeIcon(theme) {
@@ -804,6 +815,206 @@ function setupNavbar() {
     document.body.insertBefore(navbar, document.body.firstChild);
 }
 
+function initAnimations() {
+    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (prefersReduced) {
+        document.querySelectorAll('.hero, .hero-badge, .hero h1, .hero p, .hero-cta, .features-grid, .feature-card, .chat-section, .footer').forEach(el => {
+            el.style.opacity = '1';
+        });
+        return;
+    }
+
+    // Navbar slide down
+    anime({
+        targets: '.navbar',
+        translateY: [-60, 0],
+        opacity: [0, 1],
+        duration: 600,
+        easing: 'easeOutExpo'
+    });
+
+    // Hero entrance timeline
+    const heroTL = anime.timeline({ easing: 'easeOutExpo' });
+    heroTL
+        .add({
+            targets: '.hero-badge',
+            opacity: [0, 1],
+            translateY: [15, 0],
+            scale: [0.95, 1],
+            duration: 500
+        })
+        .add({
+            targets: '.hero h1',
+            opacity: [0, 1],
+            translateY: [25, 0],
+            duration: 700
+        }, '-=300')
+        .add({
+            targets: '.hero p',
+            opacity: [0, 1],
+            translateY: [20, 0],
+            duration: 600
+        }, '-=400')
+        .add({
+            targets: '.hero-cta',
+            opacity: [0, 1],
+            translateY: [20, 0],
+            duration: 600
+        }, '-=350');
+
+    // Floating orbs animation
+    anime({
+        targets: 'body::after',
+        translateX: ['-52%', '-48%'],
+        translateY: ['-2%', '2%'],
+        duration: 8000,
+        loop: true,
+        direction: 'alternate',
+        easing: 'easeInOutSine'
+    });
+
+    // Feature cards stagger on scroll
+    const scrollObserver = anime.scroll('.features', {
+        repeat: false,
+        threshold: 0.2,
+        onEnter: () => {
+            anime({
+                targets: '.feature-card',
+                opacity: [0, 1],
+                translateY: [30, 0],
+                delay: anime.stagger(120, { start: 100 }),
+                duration: 700,
+                easing: 'easeOutExpo'
+            });
+        }
+    });
+
+    // Chat section on scroll
+    anime.scroll('.chat-section', {
+        repeat: false,
+        threshold: 0.15,
+        onEnter: () => {
+            anime({
+                targets: '.chat-container',
+                opacity: [0, 1],
+                translateY: [25, 0],
+                scale: [0.98, 1],
+                duration: 600,
+                easing: 'easeOutExpo'
+            });
+        }
+    });
+
+    // Footer on scroll
+    anime.scroll('.footer', {
+        repeat: false,
+        threshold: 0.5,
+        onEnter: () => {
+            anime({
+                targets: '.footer',
+                opacity: [0, 1],
+                translateY: [15, 0],
+                duration: 500,
+                easing: 'easeOutExpo'
+            });
+        }
+    });
+
+    // Button hover micro-interactions
+    document.querySelectorAll('.btn-primary').forEach(btn => {
+        btn.addEventListener('mouseenter', () => {
+            anime({
+                targets: btn,
+                scale: 1.03,
+                duration: 200,
+                easing: 'easeOutQuad'
+            });
+        });
+        btn.addEventListener('mouseleave', () => {
+            anime({
+                targets: btn,
+                scale: 1,
+                duration: 200,
+                easing: 'easeOutQuad'
+            });
+        });
+    });
+
+    document.querySelectorAll('.btn-secondary').forEach(btn => {
+        btn.addEventListener('mouseenter', () => {
+            anime({
+                targets: btn,
+                scale: 1.02,
+                duration: 200,
+                easing: 'easeOutQuad'
+            });
+        });
+        btn.addEventListener('mouseleave', () => {
+            anime({
+                targets: btn,
+                scale: 1,
+                duration: 200,
+                easing: 'easeOutQuad'
+            });
+        });
+    });
+
+    // Feature card hover
+    document.querySelectorAll('.feature-card').forEach(card => {
+        card.addEventListener('mouseenter', () => {
+            anime({
+                targets: card.querySelector('.feature-icon'),
+                scale: 1.1,
+                rotate: '5deg',
+                duration: 300,
+                easing: 'easeOutQuad'
+            });
+        });
+        card.addEventListener('mouseleave', () => {
+            anime({
+                targets: card.querySelector('.feature-icon'),
+                scale: 1,
+                rotate: '0deg',
+                duration: 300,
+                easing: 'easeOutQuad'
+            });
+        });
+    });
+
+    // Logo pulse
+    anime({
+        targets: '.navbar-logo',
+        boxShadow: [
+            '0 0 20px rgba(34, 197, 94, 0.15)',
+            '0 0 35px rgba(34, 197, 94, 0.3)',
+            '0 0 20px rgba(34, 197, 94, 0.15)'
+        ],
+        duration: 3000,
+        loop: true,
+        easing: 'easeInOutSine'
+    });
+
+    // Badge dot pulse
+    anime({
+        targets: '.hero-badge-dot',
+        scale: [1, 1.3, 1],
+        opacity: [1, 0.6, 1],
+        duration: 2000,
+        loop: true,
+        easing: 'easeInOutSine'
+    });
+
+    // Chat header dot pulse
+    anime({
+        targets: '.chat-header-dot',
+        scale: [1, 1.4, 1],
+        opacity: [1, 0.5, 1],
+        duration: 2500,
+        loop: true,
+        easing: 'easeInOutSine'
+    });
+}
+
 document.addEventListener('DOMContentLoaded', () => {
     initTheme();
     setupNavbar();
@@ -900,30 +1111,31 @@ with gr.Blocks(
     """)
 
     # Chat Section
-    with gr.Group(elem_classes="chat-section"):
-        gr.HTML("""
-            <div class="chat-container" id="chat">
+    gr.HTML("""
+        <section class="chat-section" id="chat">
+            <div class="chat-container">
                 <div class="chat-header">
                     <span class="chat-header-dot"></span>
                     <h3>Chat con Yuuki-RxG</h3>
                     <span>Featherless AI</span>
                 </div>
             </div>
-        """)
-        
-        with gr.Sidebar():
-            gr.Markdown("# Yuuki-RxG")
-            gr.Markdown(
-                "Modelo servido via featherless-ai. "
-                "Inicia sesión con tu cuenta de Hugging Face para acceder a la inferencia."
-            )
-            button = gr.LoginButton("Iniciar sesión")
-
-        gr.load(
-            "models/OpceanAI/Yuuki-RxG",
-            accept_token=button,
-            provider="featherless-ai",
+        </section>
+    """)
+    
+    with gr.Sidebar():
+        gr.Markdown("# Yuuki-RxG")
+        gr.Markdown(
+            "Modelo servido via featherless-ai. "
+            "Inicia sesión con tu cuenta de Hugging Face para acceder a la inferencia."
         )
+        button = gr.LoginButton("Iniciar sesión")
+
+    gr.load(
+        "models/OpceanAI/Yuuki-RxG",
+        accept_token=button,
+        provider="featherless-ai",
+    )
 
     # Footer
     gr.HTML("""