Upload app.py with huggingface_hub

app.py

@@ -430,11 +430,6 @@ body::after {
     position: relative;
 }
 
-.chat-section > .gradio-row,
-.chat-section > .gradio-column {
-    position: relative;
-}
-
 .chat-container {
     border-radius: var(--radius-xl);
     background: var(--bg-glass);
@@ -475,15 +470,44 @@ body::after {
     margin-left: auto;
 }
 
-/* ─── Auth Login Button ───────────────────────────────────────────────────── */
-.auth-login-btn {
+/* ─── Sidebar (inline, not full-page) ─────────────────────────────────────── */
+.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: 1px solid var(--border-primary) !important;
+    border-radius: var(--radius-lg) !important;
+    padding: 20px !important;
+    margin: 0 auto 24px !important;
+    max-width: 400px !important;
+    min-width: auto !important;
     width: 100% !important;
-    margin-bottom: 16px !important;
-    padding: 10px 16px !important;
-    height: 42px !important;
-    background: var(--bg-card) !important;
+    box-shadow: var(--shadow-md) !important;
+}
+
+.sidebar h1, aside h1 {
+    font-family: var(--font-sans) !important;
+    font-size: 18px !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.03em !important;
     color: var(--text-primary) !important;
-    border: 1px solid var(--border-primary) !important;
+    margin-bottom: 8px !important;
+}
+
+.sidebar p, aside p {
+    font-size: 13px !important;
+    color: var(--text-secondary) !important;
+    line-height: 1.6 !important;
+}
+
+.sidebar button, aside button {
+    margin-top: 12px !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: 13px !important;
@@ -492,9 +516,8 @@ body::after {
     transition: all var(--transition-fast) !important;
 }
 
-.auth-login-btn:hover {
-    background: var(--bg-card-hover) !important;
-    border-color: var(--border-secondary) !important;
+.sidebar button:hover, aside button:hover {
+    opacity: 0.85 !important;
     transform: translateY(-1px) !important;
 }
 
@@ -711,6 +734,12 @@ footer, .footer, .built-with { display: none !important; }
     .features { padding: 24px 16px 40px; }
     .chat-section { padding: 24px 16px 60px; }
     .message { max-width: 90% !important; }
+    
+    .gradio-container .sidebar,
+    .gradio-container aside {
+        max-width: 100% !important;
+        margin: 0 0 16px !important;
+    }
 }
 
 /* ─── Reduced Motion ───────────────────────────────────────────────────────── */
@@ -1075,24 +1104,19 @@ with gr.Blocks(
     """)
 
     # ─── Chat Section ─────────────────────────────────────────────────────
-    login_btn = gr.LoginButton("Iniciar sesión con Hugging Face", elem_classes="auth-login-btn")
-
-    with gr.Column(elem_classes="chat-section"):
-        gr.HTML("""
-            <div class="chat-container" id="chat">
-                <div class="chat-header">
-                    <span class="chat-header-dot"></span>
-                    <h3>Chat con Yuuki-RxG</h3>
-                    <span>Featherless AI</span>
-                </div>
-            </div>
-        """)
-
-        gr.load(
-            "models/OpceanAI/Yuuki-RxG",
-            accept_token=login_btn,
-            provider="featherless-ai",
+    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."
         )
+        login_btn = gr.LoginButton("Iniciar sesión")
+
+    gr.load(
+        "models/OpceanAI/Yuuki-RxG",
+        accept_token=login_btn,
+        provider="featherless-ai",
+    )
 
     # ─── Footer ───────────────────────────────────────────────────────────
     gr.HTML("""