Upload app.py with huggingface_hub

app.py

@@ -475,53 +475,70 @@ body::after {
     margin-left: auto;
 }
 
-/* ─── Gradio Overrides ─────────────────────────────────────────────────────── */
-.gradio-container .sidebar,
-.gradio-container aside {
-    background: var(--bg-glass-strong) !important;
-    backdrop-filter: blur(var(--blur-lg)) !important;
-    -webkit-backdrop-filter: blur(var(--blur-lg)) !important;
-    border-right: 1px solid var(--border-primary) !important;
-    padding: 80px 20px 24px !important;
-    min-width: 220px !important;
-    max-width: 240px !important;
+/* ─── Auth Accordion ──────────────────────────────────────────────────────── */
+.auth-accordion {
+    margin-bottom: 16px !important;
 }
 
-.sidebar h1, aside h1 {
+.auth-accordion .label-wrap {
+    background: var(--bg-card) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--radius-md) !important;
+    padding: 12px 16px !important;
+    cursor: pointer !important;
+    transition: all var(--transition-fast) !important;
+}
+
+.auth-accordion .label-wrap:hover {
+    border-color: var(--border-secondary) !important;
+    background: var(--bg-card-hover) !important;
+}
+
+.auth-accordion .label-wrap span {
     font-family: var(--font-sans) !important;
-    font-size: 16px !important;
-    font-weight: 700 !important;
-    letter-spacing: -0.03em !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.01em !important;
     color: var(--text-primary) !important;
-    margin-bottom: 12px !important;
+    text-transform: none !important;
 }
 
-.sidebar p, aside p {
+.auth-accordion .wrap {
+    background: var(--bg-glass) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-top: none !important;
+    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
+    padding: 16px !important;
+}
+
+.auth-accordion .wrap p {
     font-size: 12px !important;
     color: var(--text-secondary) !important;
-    line-height: 1.6 !important;
+    margin-bottom: 12px !important;
 }
 
-.sidebar button, aside button {
-    margin-top: 16px !important;
-    padding: 8px 16px !important;
-    height: 36px !important;
-    background: var(--bg-card) !important;
-    color: var(--text-primary) !important;
-    border: 1px solid var(--border-primary) !important;
+.auth-accordion button {
+    width: 100% !important;
+    padding: 10px 16px !important;
+    height: 40px !important;
+    background: var(--text-primary) !important;
+    color: var(--text-inverse) !important;
+    border: none !important;
     border-radius: var(--radius-md) !important;
     font-family: var(--font-sans) !important;
-    font-size: 12px !important;
-    font-weight: 500 !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
     cursor: pointer !important;
     transition: all var(--transition-fast) !important;
 }
 
-.sidebar button:hover, aside button:hover {
-    background: var(--bg-card-hover) !important;
-    border-color: var(--border-secondary) !important;
+.auth-accordion button:hover {
+    opacity: 0.85 !important;
+    transform: translateY(-1px) !important;
 }
 
+/* ─── Gradio Overrides ─────────────────────────────────────────────────────── */
+
 .chatbot,
 div[data-testid="chatbot"] {
     background: transparent !important;
@@ -732,25 +749,6 @@ footer, .footer, .built-with { display: none !important; }
     .hero p { font-size: 15px; }
     .features { padding: 24px 16px 40px; }
     .chat-section { padding: 24px 16px 60px; }
-    
-    .gradio-container .sidebar,
-    .gradio-container aside {
-        position: fixed !important;
-        top: 0 !important;
-        left: 0 !important;
-        bottom: 0 !important;
-        width: 280px !important;
-        max-width: 80vw !important;
-        z-index: 999 !important;
-        transform: translateX(-100%) !important;
-        transition: transform var(--transition-base) !important;
-    }
-    
-    .gradio-container .sidebar.open,
-    .gradio-container aside.open {
-        transform: translateX(0) !important;
-    }
-    
     .message { max-width: 90% !important; }
 }
 
@@ -1127,8 +1125,15 @@ with gr.Blocks(
             </div>
         """)
 
+        with gr.Accordion("Autenticación", open=False, elem_classes="auth-accordion"):
+            gr.Markdown(
+                "Inicia sesión con tu cuenta de **Hugging Face** para acceder a la inferencia del modelo."
+            )
+            login_btn = gr.LoginButton("Iniciar sesión con Hugging Face")
+
         gr.load(
             "models/OpceanAI/Yuuki-RxG",
+            accept_token=login_btn,
             provider="featherless-ai",
         )