Upload app.py

app.py

@@ -0,0 +1,809 @@
+import gradio as gr
+
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+/* ═══════════════════════════════════════════════════════════════
+   THEME SYSTEM - Vercel-Inspired Professional Design
+   ═══════════════════════════════════════════════════════════════ */
+
+:root {
+    /* Light Theme (Default) */
+    --bg-primary:       #ffffff;
+    --bg-secondary:     #fafafa;
+    --bg-tertiary:      #f4f4f5;
+    --bg-elevated:      #ffffff;
+    --bg-hover:         #f0f0f2;
+    
+    --border-primary:   #e4e4e7;
+    --border-secondary: #ebebef;
+    --border-subtle:    #f0f0f2;
+    
+    --text-primary:     #09090b;
+    --text-secondary:   #52525b;
+    --text-muted:       #71717a;
+    --text-faint:       #a1a1aa;
+    
+    --accent-primary:   #6366f1;
+    --accent-secondary: #818cf8;
+    --accent-subtle:    rgba(99, 102, 241, 0.08);
+    --accent-hover:     #4f46e5;
+    
+    --user-bubble:      linear-gradient(135deg, #18181b 0%, #27272a 100%);
+    --user-fg:          #ffffff;
+    --bot-bubble:       #f8f8fa;
+    --bot-fg:           #18181b;
+    --bot-border:       #e8e8ec;
+    
+    --sidebar-bg:       linear-gradient(180deg, #0a0a0b 0%, #111113 100%);
+    --sidebar-border:   #1f1f23;
+    --sidebar-text:     #fafafa;
+    --sidebar-muted:    #a1a1aa;
+    --sidebar-hover:    rgba(255, 255, 255, 0.06);
+    
+    --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.04);
+    --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.06);
+    --shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.08);
+    --shadow-glow:      0 0 20px rgba(99, 102, 241, 0.15);
+    
+    --radius-xs:        6px;
+    --radius-sm:        8px;
+    --radius-md:        12px;
+    --radius-lg:        16px;
+    --radius-xl:        20px;
+    
+    --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-mono:        'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+    
+    --transition-fast:  0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-base:  0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow:  0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+/* Dark Theme */
+.dark {
+    --bg-primary:       #09090b;
+    --bg-secondary:     #0f0f11;
+    --bg-tertiary:      #18181b;
+    --bg-elevated:      #111113;
+    --bg-hover:         #1c1c1f;
+    
+    --border-primary:   #27272a;
+    --border-secondary: #1f1f23;
+    --border-subtle:    #18181b;
+    
+    --text-primary:     #fafafa;
+    --text-secondary:   #a1a1aa;
+    --text-muted:       #71717a;
+    --text-faint:       #52525b;
+    
+    --accent-primary:   #818cf8;
+    --accent-secondary: #a5b4fc;
+    --accent-subtle:    rgba(129, 140, 248, 0.12);
+    --accent-hover:     #6366f1;
+    
+    --user-bubble:      linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
+    --user-fg:          #ffffff;
+    --bot-bubble:       #18181b;
+    --bot-fg:           #e4e4e7;
+    --bot-border:       #27272a;
+    
+    --sidebar-bg:       linear-gradient(180deg, #000000 0%, #09090b 100%);
+    --sidebar-border:   #18181b;
+    
+    --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.2);
+    --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.3);
+    --shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.4);
+    --shadow-glow:      0 0 30px rgba(99, 102, 241, 0.2);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BASE RESET & GLOBAL STYLES
+   ═══════════════════════════════════════════════════════════════ */
+
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body,
+.gradio-container,
+.gradio-container > .main,
+.gradio-container > .main > .wrap {
+    background: var(--bg-primary) !important;
+    color: var(--text-primary) !important;
+    font-family: var(--font-sans) !important;
+    font-size: 14px !important;
+    line-height: 1.6 !important;
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-font-smoothing: grayscale !important;
+    transition: background var(--transition-slow), color var(--transition-slow) !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   THEME TOGGLE BUTTON
+   ══════════════════���════════════════════════════════════════════ */
+
+.theme-toggle-wrapper {
+    position: fixed !important;
+    top: 20px !important;
+    right: 20px !important;
+    z-index: 1000 !important;
+}
+
+.theme-toggle {
+    position: relative !important;
+    width: 52px !important;
+    height: 28px !important;
+    background: var(--bg-tertiary) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: 20px !important;
+    cursor: pointer !important;
+    transition: all var(--transition-base) !important;
+    display: flex !important;
+    align-items: center !important;
+    padding: 3px !important;
+    box-shadow: var(--shadow-sm) !important;
+}
+
+.theme-toggle:hover {
+    border-color: var(--accent-primary) !important;
+    box-shadow: var(--shadow-glow) !important;
+}
+
+.theme-toggle-thumb {
+    width: 20px !important;
+    height: 20px !important;
+    background: var(--bg-primary) !important;
+    border-radius: 50% !important;
+    transition: transform var(--transition-base) var(--ease-out-expo) !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+}
+
+.dark .theme-toggle-thumb {
+    transform: translateX(24px) !important;
+    background: var(--accent-primary) !important;
+}
+
+.theme-icon {
+    font-size: 12px !important;
+    transition: opacity var(--transition-fast) !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   SIDEBAR - Professional Dashboard Style
+   ═══════════════════════════════════════════════════════════════ */
+
+.sidebar,
+aside {
+    background: var(--sidebar-bg) !important;
+    border-right: 1px solid var(--sidebar-border) !important;
+    padding: 32px 24px !important;
+    min-width: 260px !important;
+    position: relative !important;
+    overflow: hidden !important;
+}
+
+/* Subtle gradient overlay for depth */
+.sidebar::before,
+aside::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    height: 120px !important;
+    background: linear-gradient(180deg, rgba(99, 102, 241, 0.03) 0%, transparent 100%) !important;
+    pointer-events: none !important;
+}
+
+.sidebar *,
+aside * {
+    color: var(--sidebar-text) !important;
+    position: relative !important;
+}
+
+/* Logo/Brand Title */
+.sidebar h1,
+aside h1 {
+    font-family: var(--font-sans) !important;
+    font-size: 18px !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.025em !important;
+    color: #ffffff !important;
+    margin-bottom: 8px !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 10px !important;
+}
+
+.sidebar h1::before,
+aside h1::before {
+    content: '' !important;
+    width: 8px !important;
+    height: 8px !important;
+    background: var(--accent-primary) !important;
+    border-radius: 2px !important;
+    box-shadow: 0 0 12px var(--accent-primary) !important;
+    animation: pulse-glow 2s ease-in-out infinite !important;
+}
+
+@keyframes pulse-glow {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.7; transform: scale(0.95); }
+}
+
+/* Sidebar Description */
+.sidebar p,
+aside p {
+    font-size: 13px !important;
+    line-height: 1.7 !important;
+    color: var(--sidebar-muted) !important;
+    font-weight: 400 !important;
+    margin-bottom: 24px !important;
+}
+
+/* Login Button - Premium Style */
+.sidebar button,
+aside button {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    width: 100% !important;
+    margin-top: 24px !important;
+    padding: 12px 20px !important;
+    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%) !important;
+    color: #ffffff !important;
+    border: none !important;
+    border-radius: var(--radius-md) !important;
+    font-family: var(--font-sans) !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.01em !important;
+    cursor: pointer !important;
+    transition: all var(--transition-base) !important;
+    position: relative !important;
+    overflow: hidden !important;
+    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
+}
+
+.sidebar button::before,
+aside button::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: -100% !important;
+    width: 100% !important;
+    height: 100% !important;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important;
+    transition: left 0.5s ease !important;
+}
+
+.sidebar button:hover::before,
+aside button:hover::before {
+    left: 100% !important;
+}
+
+.sidebar button:hover,
+aside button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
+}
+
+.sidebar button:active,
+aside button:active {
+    transform: translateY(0) !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   MAIN CHAT CONTAINER
+   ═══════════════════════════════════════════════════════════════ */
+
+.contain,
+.gap {
+    background: var(--bg-primary) !important;
+}
+
+.chatbot,
+div[data-testid="chatbot"] {
+    background: var(--bg-primary) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--radius-lg) !important;
+    box-shadow: var(--shadow-md) !important;
+    overflow: hidden !important;
+    transition: all var(--transition-base) !important;
+}
+
+.chatbot:hover,
+div[data-testid="chatbot"]:hover {
+    box-shadow: var(--shadow-lg) !important;
+}
+
+/* Chat Header Label */
+.chatbot label,
+div[data-testid="chatbot"] > label {
+    font-family: var(--font-sans) !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.1em !important;
+    color: var(--text-muted) !important;
+    padding: 14px 20px !important;
+    border-bottom: 1px solid var(--border-primary) !important;
+    background: var(--bg-secondary) !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+}
+
+.chatbot label::before,
+div[data-testid="chatbot"] > label::before {
+    content: '●' !important;
+    color: #22c55e !important;
+    font-size: 8px !important;
+    animation: blink 2s ease-in-out infinite !important;
+}
+
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+}
+
+/* Messages Container */
+.message-wrap,
+.messages {
+    padding: 24px !important;
+    background: var(--bg-primary) !important;
+    min-height: 400px !important;
+}
+
+/* Individual Messages */
+.message {
+    max-width: 75% !important;
+    padding: 14px 18px !important;
+    border-radius: var(--radius-lg) !important;
+    font-size: 14px !important;
+    line-height: 1.7 !important;
+    font-family: var(--font-sans) !important;
+    animation: message-in 0.3s var(--ease-out-expo) !important;
+    position: relative !important;
+}
+
+@keyframes message-in {
+    from {
+        opacity: 0;
+        transform: translateY(10px) scale(0.98);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* User Messages */
+.message.user,
+.user.message {
+    background: var(--user-bubble) !important;
+    color: var(--user-fg) !important;
+    align-self: flex-end !important;
+    border-bottom-right-radius: var(--radius-xs) !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
+    margin-left: auto !important;
+}
+
+/* Bot Messages */
+.message.bot,
+.bot.message {
+    background: var(--bot-bubble) !important;
+    color: var(--bot-fg) !important;
+    align-self: flex-start !important;
+    border-bottom-left-radius: var(--radius-xs) !important;
+    border: 1px solid var(--bot-border) !important;
+    margin-right: auto !important;
+}
+
+/* Code blocks in messages */
+.message code {
+    font-family: var(--font-mono) !important;
+    font-size: 13px !important;
+    background: rgba(0, 0, 0, 0.06) !important;
+    padding: 2px 6px !important;
+    border-radius: var(--radius-xs) !important;
+}
+
+.dark .message code {
+    background: rgba(255, 255, 255, 0.08) !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   INPUT AREA
+   ═══════════════════════════════════════════════════════════════ */
+
+textarea,
+input[type="text"],
+.scroll-hide {
+    background: var(--bg-secondary) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--radius-md) !important;
+    color: var(--text-primary) !important;
+    font-family: var(--font-sans) !important;
+    font-size: 14px !important;
+    line-height: 1.6 !important;
+    padding: 14px 18px !important;
+    resize: none !important;
+    transition: all var(--transition-base) !important;
+    caret-color: var(--accent-primary) !important;
+}
+
+textarea:focus,
+input[type="text"]:focus {
+    border-color: var(--accent-primary) !important;
+    box-shadow: 0 0 0 4px var(--accent-subtle), var(--shadow-md) !important;
+    outline: none !important;
+    background: var(--bg-primary) !important;
+}
+
+textarea::placeholder,
+input[type="text"]::placeholder {
+    color: var(--text-faint) !important;
+    font-style: normal !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BUTTONS
+   ═══════════════════════════════════════════════════════════════ */
+
+button[variant="primary"],
+.submit-btn {
+    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%) !important;
+    color: #ffffff !important;
+    border: none !important;
+    border-radius: var(--radius-md) !important;
+    font-family: var(--font-sans) !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    padding: 12px 24px !important;
+    cursor: pointer !important;
+    transition: all var(--transition-base) !important;
+    position: relative !important;
+    overflow: hidden !important;
+    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3) !important;
+}
+
+button[variant="primary"]:hover,
+.submit-btn:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
+}
+
+button[variant="primary"]:active,
+.submit-btn:active {
+    transform: translateY(0) !important;
+}
+
+button[variant="secondary"] {
+    background: var(--bg-primary) !important;
+    color: var(--text-primary) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--radius-md) !important;
+    font-family: var(--font-sans) !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    padding: 12px 20px !important;
+    transition: all var(--transition-base) !important;
+    cursor: pointer !important;
+}
+
+button[variant="secondary"]:hover {
+    background: var(--bg-hover) !important;
+    border-color: var(--accent-primary) !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   LABELS & TYPOGRAPHY
+   ═══════════════════════════════════════════════════════════════ */
+
+label span,
+.label-wrap span {
+    font-family: var(--font-sans) !important;
+    font-size: 12px !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.04em !important;
+    color: var(--text-secondary) !important;
+    text-transform: uppercase !important;
+}
+
+.block,
+.gr-block {
+    border-radius: var(--radius-lg) !important;
+    border-color: var(--border-primary) !important;
+    background: var(--bg-primary) !important;
+    transition: all var(--transition-base) !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   EXAMPLES TABLE
+   ═══════════════════════════════════════════════════════════════ */
+
+.examples td {
+    border-color: var(--border-primary) !important;
+    background: var(--bg-secondary) !important;
+    font-family: var(--font-sans) !important;
+    font-size: 13px !important;
+    color: var(--text-secondary) !important;
+    border-radius: var(--radius-sm) !important;
+    padding: 12px 16px !important;
+    transition: all var(--transition-base) !important;
+    cursor: pointer !important;
+}
+
+.examples td:hover {
+    background: var(--accent-subtle) !important;
+    color: var(--accent-primary) !important;
+    border-color: var(--accent-primary) !important;
+    transform: translateY(-1px) !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   SCROLLBAR STYLING
+   ═══════════════════════════════════════════════════════════════ */
+
+::-webkit-scrollbar {
+    width: 6px !important;
+    height: 6px !important;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent !important;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border-primary) !important;
+    border-radius: 10px !important;
+    transition: background var(--transition-fast) !important;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-faint) !important;
+}
+
+/* Firefox scrollbar */
+* {
+    scrollbar-width: thin !important;
+    scrollbar-color: var(--border-primary) transparent !important;
+}
+
+/* ═══════���═══════════════════════════════════════════════════════
+   LOADING STATES & ANIMATIONS
+   ═══════════════════════════════════════════════════════════════ */
+
+.generating {
+    animation: shimmer 1.5s ease-in-out infinite !important;
+}
+
+@keyframes shimmer {
+    0% { opacity: 1; }
+    50% { opacity: 0.6; }
+    100% { opacity: 1; }
+}
+
+/* Typing indicator */
+.typing-indicator {
+    display: flex !important;
+    gap: 4px !important;
+    padding: 12px 16px !important;
+}
+
+.typing-indicator span {
+    width: 8px !important;
+    height: 8px !important;
+    background: var(--accent-primary) !important;
+    border-radius: 50% !important;
+    animation: typing-bounce 1.4s ease-in-out infinite !important;
+}
+
+.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
+.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes typing-bounce {
+    0%, 60%, 100% { transform: translateY(0); }
+    30% { transform: translateY(-6px); }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   FOOTER HIDE
+   ═══════════════════════════════════════════════════════════════ */
+
+footer,
+.footer,
+.built-with {
+    display: none !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   RESPONSIVE ADJUSTMENTS
+   ═══════════════════════════════════════════════════════════════ */
+
+@media (max-width: 768px) {
+    .sidebar,
+    aside {
+        min-width: 100% !important;
+        padding: 20px !important;
+        border-right: none !important;
+        border-bottom: 1px solid var(--sidebar-border) !important;
+    }
+    
+    .message {
+        max-width: 90% !important;
+    }
+    
+    .theme-toggle-wrapper {
+        top: 12px !important;
+        right: 12px !important;
+    }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   GLASS MORPHISM EFFECTS (Optional Premium Touch)
+   ═══════════════════════════════════════════════════════════════ */
+
+.glass-effect {
+    background: rgba(255, 255, 255, 0.7) !important;
+    backdrop-filter: blur(12px) !important;
+    -webkit-backdrop-filter: blur(12px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+
+.dark .glass-effect {
+    background: rgba(17, 17, 19, 0.8) !important;
+    border: 1px solid rgba(255, 255, 255, 0.05) !important;
+}
+"""
+
+# JavaScript for theme toggle functionality
+theme_toggle_js = """
+<script>
+(function() {
+    // Check for saved theme preference or system preference
+    function getInitialTheme() {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) return savedTheme;
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    
+    // Apply theme
+    function applyTheme(theme) {
+        if (theme === 'dark') {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+        localStorage.setItem('theme', theme);
+    }
+    
+    // Initialize theme
+    applyTheme(getInitialTheme());
+    
+    // Create and inject theme toggle button
+    function createToggle() {
+        if (document.querySelector('.theme-toggle-wrapper')) return;
+        
+        const wrapper = document.createElement('div');
+        wrapper.className = 'theme-toggle-wrapper';
+        
+        const toggle = document.createElement('button');
+        toggle.className = 'theme-toggle';
+        toggle.setAttribute('aria-label', 'Toggle theme');
+        toggle.innerHTML = `
+            <span class="theme-toggle-thumb">
+                <span class="theme-icon">${document.documentElement.classList.contains('dark') ? '🌙' : '☀️'}</span>
+            </span>
+        `;
+        
+        toggle.addEventListener('click', () => {
+            const isDark = document.documentElement.classList.contains('dark');
+            const newTheme = isDark ? 'light' : 'dark';
+            applyTheme(newTheme);
+            toggle.querySelector('.theme-icon').textContent = newTheme === 'dark' ? '🌙' : '☀️';
+        });
+        
+        wrapper.appendChild(toggle);
+        document.body.appendChild(wrapper);
+    }
+    
+    // Wait for DOM and inject toggle
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', createToggle);
+    } else {
+        createToggle();
+    }
+    
+    // Also run on Gradio updates
+    const observer = new MutationObserver(() => {
+        createToggle();
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+})();
+</script>
+"""
+
+with gr.Blocks(
+    fill_height=True,
+    css=custom_css,
+    title="Yuuki-RxG | AI Assistant",
+    head=theme_toggle_js,
+    theme=gr.themes.Base(
+        primary_hue="indigo",
+        secondary_hue="slate", 
+        neutral_hue="zinc",
+        font=gr.themes.GoogleFont("Inter"),
+        font_mono=gr.themes.GoogleFont("JetBrains Mono"),
+        radius_size=gr.themes.sizes.radius_lg,
+        spacing_size=gr.themes.sizes.spacing_md,
+        text_size=gr.themes.sizes.text_md,
+    ).set(
+        # Light mode base
+        body_background_fill="#ffffff",
+        body_text_color="#09090b",
+        background_fill_primary="#ffffff",
+        background_fill_secondary="#fafafa",
+        
+        # Borders
+        border_color_primary="#e4e4e7",
+        border_color_accent="#6366f1",
+        
+        # Accent colors
+        color_accent="#6366f1",
+        color_accent_soft="rgba(99, 102, 241, 0.08)",
+        
+        # Buttons
+        button_primary_background_fill="linear-gradient(135deg, #6366f1 0%, #4f46e5 100%)",
+        button_primary_text_color="#ffffff",
+        button_primary_background_fill_hover="#4f46e5",
+        button_secondary_background_fill="#ffffff",
+        button_secondary_border_color="#e4e4e7",
+        button_secondary_text_color="#09090b",
+        
+        # Blocks & inputs
+        block_border_color="#e4e4e7",
+        block_background_fill="#ffffff",
+        block_shadow="0 4px 12px rgba(0, 0, 0, 0.06)",
+        input_background_fill="#fafafa",
+        input_border_color="#e4e4e7",
+        input_border_color_focus="#6366f1",
+        input_shadow_focus="0 0 0 4px rgba(99, 102, 241, 0.1)",
+        
+        # Shadows
+        shadow_drop="0 4px 12px rgba(0, 0, 0, 0.06)",
+        shadow_drop_lg="0 8px 24px rgba(0, 0, 0, 0.08)",
+    )
+) as demo:
+    with gr.Sidebar():
+        gr.Markdown("# Yuuki-RxG")
+        gr.Markdown(
+            """Modelo de IA avanzado servido mediante Featherless AI. 
+            
+Inicia sesión con tu cuenta de Hugging Face para acceder a la inferencia completa del modelo."""
+        )
+        button = gr.LoginButton("🔐 Iniciar sesión con Hugging Face")
+
+    gr.load(
+        "models/OpceanAI/Yuuki-RxG",
+        accept_token=button,
+        provider="featherless-ai",
+    )
+
+if __name__ == "__main__":
+    demo.launch()