Update app.py

app.py

@@ -1,10 +1,166 @@
 import gradio as gr
 
-with gr.Blocks(fill_height=True) as demo:
+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');
+
+:root {
+    --ink: #0a0a0a;
+    --paper: #f5f2ed;
+    --accent: #c8a97e;
+    --muted: #8a8278;
+    --border: #d4cfc8;
+    --surface: #ede9e2;
+}
+
+* {
+    font-family: 'DM Mono', monospace;
+    box-sizing: border-box;
+}
+
+body, .gradio-container {
+    background-color: var(--paper) !important;
+    color: var(--ink) !important;
+}
+
+.gradio-container {
+    max-width: 100% !important;
+}
+
+.sidebar {
+    background-color: var(--ink) !important;
+    border-right: none !important;
+    padding: 2.5rem 2rem !important;
+}
+
+.sidebar * {
+    color: var(--paper) !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 {
+    font-size: 0.72rem !important;
+    line-height: 1.7 !important;
+    color: #9a9490 !important;
+    letter-spacing: 0.02em !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;
+}
+
+button.lg:hover {
+    background-color: var(--accent) !important;
+    color: var(--ink) !important;
+}
+
+.chatbot {
+    background-color: var(--paper) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 0 !important;
+}
+
+.message.user {
+    background-color: var(--surface) !important;
+    border-radius: 0 !important;
+    border-left: 3px solid var(--accent) !important;
+}
+
+.message.bot {
+    background-color: transparent !important;
+    border-radius: 0 !important;
+    border-left: 3px solid var(--border) !important;
+}
+
+textarea, input[type="text"] {
+    background-color: var(--paper) !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;
+}
+
+textarea:focus, input[type="text"]:focus {
+    border-color: var(--accent) !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+.submit-btn, button[variant="primary"] {
+    background-color: var(--ink) !important;
+    color: var(--paper) !important;
+    border-radius: 0 !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;
+}
+
+.submit-btn:hover, button[variant="primary"]:hover {
+    background-color: var(--accent) !important;
+}
+
+label span {
+    font-size: 0.65rem !important;
+    letter-spacing: 0.1em !important;
+    text-transform: uppercase !important;
+    color: var(--muted) !important;
+}
+
+.block {
+    border-radius: 0 !important;
+}
+
+footer {
+    display: none !important;
+}
+"""
+
+with gr.Blocks(
+    fill_height=True,
+    css=custom_css,
+    title="Yuuki-RxG",
+    theme=gr.themes.Base(
+        primary_hue="stone",
+        neutral_hue="stone",
+        font=gr.themes.GoogleFont("DM Mono"),
+    )
+) as demo:
     with gr.Sidebar():
-        gr.Markdown("# Inference Provider")
-        gr.Markdown("This Space showcases the OpceanAI/Yuuki-RxG model, served by the featherless-ai API. Sign in with your Hugging Face account to use this API.")
-        button = gr.LoginButton("Sign in")
-    gr.load("models/OpceanAI/Yuuki-RxG", accept_token=button, provider="featherless-ai")
-    
-demo.launch()
+        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",
+    )
+
+demo.launch()