Update app.py

app.py

@@ -1,140 +1,269 @@
 import gradio as gr
 
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@300;400&display=swap');
 
 :root {
-    --ink: #0a0a0a;
-    --paper: #f5f2ed;
-    --accent: #c8a97e;
-    --muted: #8a8278;
-    --border: #d4cfc8;
-    --surface: #ede9e2;
+    --bg:          #ffffff;
+    --bg-subtle:   #fafafa;
+    --bg-muted:    #f4f4f5;
+    --border:      #e4e4e7;
+    --border-soft: #f0f0f1;
+    --text:        #09090b;
+    --text-muted:  #71717a;
+    --text-faint:  #a1a1aa;
+    --accent:      #18181b;
+    --accent-fg:   #ffffff;
+    --user-bubble: #18181b;
+    --user-fg:     #ffffff;
+    --bot-bubble:  #f4f4f5;
+    --bot-fg:      #09090b;
+    --sidebar-bg:  #09090b;
+    --sidebar-fg:  #fafafa;
+    --sidebar-mut: #71717a;
+    --radius:      12px;
+    --radius-sm:   8px;
+    --font: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
+    --mono: 'Geist Mono', 'Fira Code', monospace;
 }
 
-* {
-    font-family: 'DM Mono', monospace;
+*, *::before, *::after {
     box-sizing: border-box;
 }
 
-body, .gradio-container {
-    background-color: var(--paper) !important;
-    color: var(--ink) !important;
+body,
+.gradio-container,
+.gradio-container > .main,
+.gradio-container > .main > .wrap {
+    background: var(--bg) !important;
+    color: var(--text) !important;
+    font-family: var(--font) !important;
+    font-size: 14px !important;
+    line-height: 1.6 !important;
+    -webkit-font-smoothing: antialiased !important;
 }
 
-.gradio-container {
-    max-width: 100% !important;
+.sidebar,
+aside {
+    background: var(--sidebar-bg) !important;
+    border-right: 1px solid #27272a !important;
+    padding: 28px 20px !important;
+    min-width: 220px !important;
 }
 
-.sidebar {
-    background-color: var(--ink) !important;
-    border-right: none !important;
-    padding: 2.5rem 2rem !important;
+.sidebar *,
+aside * {
+    color: var(--sidebar-fg) !important;
 }
 
-.sidebar * {
-    color: var(--paper) !important;
+.sidebar h1,
+aside h1 {
+    font-family: var(--font) !important;
+    font-size: 15px !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.01em !important;
+    color: #ffffff !important;
+    margin-bottom: 12px !important;
 }
 
-.sidebar h1 {
-    font-family: 'DM Serif Display', serif !important;
-    font-size: 1.6rem !important;
-    letter-spacing: -0.02em !important;
-    line-height: 1.2 !important;
-    margin-bottom: 1.5rem !important;
-    color: var(--accent) !important;
-    border-bottom: 1px solid #2a2a2a !important;
-    padding-bottom: 1rem !important;
+.sidebar p,
+aside p {
+    font-size: 12.5px !important;
+    line-height: 1.65 !important;
+    color: var(--sidebar-mut) !important;
+    font-weight: 400 !important;
 }
 
-.sidebar p {
-    font-size: 0.72rem !important;
-    line-height: 1.7 !important;
-    color: #9a9490 !important;
-    letter-spacing: 0.02em !important;
+.sidebar button,
+aside button {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 6px !important;
+    width: 100% !important;
+    margin-top: 20px !important;
+    padding: 9px 16px !important;
+    background: #27272a !important;
+    color: #fafafa !important;
+    border: 1px solid #3f3f46 !important;
+    border-radius: var(--radius-sm) !important;
+    font-family: var(--font) !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    letter-spacing: -0.01em !important;
+    cursor: pointer !important;
+    transition: background 0.15s ease, border-color 0.15s ease !important;
 }
 
-button.lg {
-    background-color: transparent !important;
-    color: var(--accent) !important;
-    border: 1px solid var(--accent) !important;
-    border-radius: 0 !important;
-    font-family: 'DM Mono', monospace !important;
-    font-size: 0.7rem !important;
-    letter-spacing: 0.12em !important;
-    text-transform: uppercase !important;
-    padding: 0.7rem 1.4rem !important;
-    transition: all 0.2s ease !important;
-    margin-top: 1.5rem !important;
-    width: 100% !important;
+.sidebar button:hover,
+aside button:hover {
+    background: #3f3f46 !important;
+    border-color: #52525b !important;
 }
 
-button.lg:hover {
-    background-color: var(--accent) !important;
-    color: var(--ink) !important;
+.contain,
+.gap {
+    background: var(--bg) !important;
 }
 
-.chatbot {
-    background-color: var(--paper) !important;
+.chatbot,
+div[data-testid="chatbot"] {
+    background: var(--bg) !important;
     border: 1px solid var(--border) !important;
-    border-radius: 0 !important;
+    border-radius: var(--radius) !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
+    overflow: hidden !important;
+}
+
+.message-wrap,
+.messages {
+    padding: 20px !important;
+    background: var(--bg) !important;
+}
+
+.message {
+    max-width: 80% !important;
+    padding: 12px 16px !important;
+    border-radius: var(--radius) !important;
+    font-size: 14px !important;
+    line-height: 1.65 !important;
+    font-family: var(--font) !important;
+}
+
+.message.user,
+.user.message {
+    background: var(--user-bubble) !important;
+    color: var(--user-fg) !important;
+    align-self: flex-end !important;
+    border-bottom-right-radius: 4px !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
 }
 
-.message.user {
-    background-color: var(--surface) !important;
-    border-radius: 0 !important;
-    border-left: 3px solid var(--accent) !important;
+.message.bot,
+.bot.message {
+    background: var(--bot-bubble) !important;
+    color: var(--bot-fg) !important;
+    align-self: flex-start !important;
+    border-bottom-left-radius: 4px !important;
+    border: 1px solid var(--border-soft) !important;
 }
 
-.message.bot {
-    background-color: transparent !important;
-    border-radius: 0 !important;
-    border-left: 3px solid var(--border) !important;
+.chatbot label,
+div[data-testid="chatbot"] > label {
+    font-family: var(--font) !important;
+    font-size: 11px !important;
+    font-weight: 500 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.08em !important;
+    color: var(--text-faint) !important;
+    padding: 12px 16px !important;
+    border-bottom: 1px solid var(--border) !important;
+    background: var(--bg-subtle) !important;
 }
 
-textarea, input[type="text"] {
-    background-color: var(--paper) !important;
+textarea,
+input[type="text"],
+.scroll-hide {
+    background: var(--bg-subtle) !important;
     border: 1px solid var(--border) !important;
-    border-radius: 0 !important;
-    color: var(--ink) !important;
-    font-family: 'DM Mono', monospace !important;
-    font-size: 0.8rem !important;
+    border-radius: var(--radius-sm) !important;
+    color: var(--text) !important;
+    font-family: var(--font) !important;
+    font-size: 14px !important;
+    line-height: 1.5 !important;
+    padding: 10px 14px !important;
+    resize: none !important;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
+    caret-color: var(--accent) !important;
 }
 
-textarea:focus, input[type="text"]:focus {
-    border-color: var(--accent) !important;
-    box-shadow: none !important;
+textarea:focus,
+input[type="text"]:focus {
+    border-color: #a1a1aa !important;
+    box-shadow: 0 0 0 3px rgba(24,24,27,0.06) !important;
     outline: none !important;
+    background: var(--bg) !important;
+}
+
+textarea::placeholder,
+input[type="text"]::placeholder {
+    color: var(--text-faint) !important;
 }
 
-.submit-btn, button[variant="primary"] {
-    background-color: var(--ink) !important;
-    color: var(--paper) !important;
-    border-radius: 0 !important;
+button[variant="primary"],
+.submit-btn {
+    background: var(--accent) !important;
+    color: var(--accent-fg) !important;
     border: none !important;
-    font-family: 'DM Mono', monospace !important;
-    font-size: 0.7rem !important;
-    letter-spacing: 0.1em !important;
-    text-transform: uppercase !important;
-    transition: background-color 0.2s ease !important;
+    border-radius: var(--radius-sm) !important;
+    font-family: var(--font) !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    padding: 9px 18px !important;
+    transition: opacity 0.15s ease !important;
+    cursor: pointer !important;
+}
+
+button[variant="primary"]:hover,
+.submit-btn:hover {
+    opacity: 0.82 !important;
+}
+
+button[variant="secondary"] {
+    background: var(--bg) !important;
+    color: var(--text) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius-sm) !important;
+    font-family: var(--font) !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    padding: 8px 14px !important;
+    transition: background 0.15s ease !important;
 }
 
-.submit-btn:hover, button[variant="primary"]:hover {
-    background-color: var(--accent) !important;
+button[variant="secondary"]:hover {
+    background: var(--bg-muted) !important;
 }
 
-label span {
-    font-size: 0.65rem !important;
-    letter-spacing: 0.1em !important;
+label span,
+.label-wrap span {
+    font-family: var(--font) !important;
+    font-size: 11px !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.04em !important;
+    color: var(--text-muted) !important;
     text-transform: uppercase !important;
-    color: var(--muted) !important;
 }
 
-.block {
-    border-radius: 0 !important;
+.block,
+.gr-block {
+    border-radius: var(--radius) !important;
+    border-color: var(--border) !important;
+    background: var(--bg) !important;
+}
+
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
+
+.examples td {
+    border-color: var(--border) !important;
+    background: var(--bg-subtle) !important;
+    font-family: var(--font) !important;
+    font-size: 13px !important;
+    color: var(--text-muted) !important;
+    border-radius: var(--radius-sm) !important;
+}
+
+.examples td:hover {
+    background: var(--bg-muted) !important;
+    color: var(--text) !important;
 }
 
-footer {
+footer,
+.footer,
+.built-with {
     display: none !important;
 }
 """
@@ -144,15 +273,33 @@ with gr.Blocks(
     css=custom_css,
     title="Yuuki-RxG",
     theme=gr.themes.Base(
-        primary_hue="stone",
-        neutral_hue="stone",
-        font=gr.themes.GoogleFont("DM Mono"),
+        primary_hue="zinc",
+        neutral_hue="zinc",
+        font=gr.themes.GoogleFont("Geist"),
+        font_mono=gr.themes.GoogleFont("Geist Mono"),
+        radius_size=gr.themes.sizes.radius_md,
+        spacing_size=gr.themes.sizes.spacing_md,
+    ).set(
+        body_background_fill="#ffffff",
+        body_text_color="#09090b",
+        background_fill_primary="#ffffff",
+        background_fill_secondary="#fafafa",
+        border_color_primary="#e4e4e7",
+        color_accent_soft="#f4f4f5",
+        button_primary_background_fill="#18181b",
+        button_primary_text_color="#ffffff",
+        button_secondary_background_fill="#ffffff",
+        button_secondary_border_color="#e4e4e7",
+        block_border_color="#e4e4e7",
+        block_background_fill="#ffffff",
+        input_background_fill="#fafafa",
+        input_border_color="#e4e4e7",
     )
 ) as demo:
     with gr.Sidebar():
         gr.Markdown("# Yuuki-RxG")
         gr.Markdown(
-            "Modelo servido via **featherless-ai**. "
+            "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")