Create app.py

app.py

@@ -0,0 +1,376 @@
+import gradio as gr
+
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+
+:root {
+    --bg:           #0a0a0a;
+    --bg-card:      #111111;
+    --bg-input:     #141414;
+    --bg-hover:     #1a1a1a;
+
+    --border:       rgba(255, 255, 255, 0.07);
+    --border-hover: rgba(255, 255, 255, 0.14);
+    --border-focus: rgba(255, 255, 255, 0.25);
+
+    --text:         #ffffff;
+    --text-muted:   #6b6b6b;
+    --text-dim:     #3d3d3d;
+
+    --green:        #22c55e;
+    --green-dim:    rgba(34, 197, 94, 0.15);
+
+    --user-bg:      #1c1c1c;
+    --bot-bg:       #111111;
+
+    --font:         'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+    --mono:         'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
+
+    --r-sm:         4px;
+    --r-md:         6px;
+    --r-lg:         8px;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+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: 13px !important;
+    line-height: 1.5 !important;
+    letter-spacing: -0.01em !important;
+    -webkit-font-smoothing: antialiased !important;
+}
+
+.sidebar, aside {
+    background: var(--bg) !important;
+    border-right: 1px solid var(--border) !important;
+    padding: 28px 20px !important;
+    min-width: 200px !important;
+    max-width: 220px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 0 !important;
+}
+
+.sidebar *, aside * { color: var(--text) !important; }
+
+.sidebar h1, aside h1 {
+    font-family: var(--font) !important;
+    font-size: 15px !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.03em !important;
+    color: var(--text) !important;
+    line-height: 1.2 !important;
+    margin-bottom: 14px !important;
+}
+
+.sidebar h1::before, aside h1::before {
+    content: '● ' !important;
+    color: var(--green) !important;
+    font-size: 10px !important;
+    letter-spacing: 0 !important;
+}
+
+.sidebar p, aside p {
+    font-size: 12px !important;
+    line-height: 1.65 !important;
+    color: var(--text-muted) !important;
+    font-weight: 400 !important;
+    letter-spacing: 0 !important;
+    margin-bottom: 0 !important;
+}
+
+.sidebar button, aside button {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 100% !important;
+    margin-top: 18px !important;
+    padding: 8px 16px !important;
+    height: 34px !important;
+    background: transparent !important;
+    color: var(--text) !important;
+    border: 1px solid var(--border-hover) !important;
+    border-radius: var(--r-md) !important;
+    font-family: var(--font) !important;
+    font-size: 12px !important;
+    font-weight: 500 !important;
+    letter-spacing: -0.01em !important;
+    cursor: pointer !important;
+    transition: border-color 0.12s, background 0.12s !important;
+}
+
+.sidebar button:hover, aside button:hover {
+    background: var(--bg-hover) !important;
+    border-color: var(--border-focus) !important;
+}
+
+.contain, .gap, .wrap,
+div[class*="col"], div[class*="row"],
+.gradio-container .block {
+    background: var(--bg) !important;
+    box-shadow: none !important;
+}
+
+.chatbot,
+div[data-testid="chatbot"] {
+    background: var(--bg-card) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--r-lg) !important;
+    box-shadow: none !important;
+    overflow: hidden !important;
+    max-height: 420px !important;
+}
+
+.chatbot .label-wrap,
+div[data-testid="chatbot"] .label-wrap {
+    background: var(--bg-card) !important;
+    border-bottom: 1px solid var(--border) !important;
+    padding: 9px 14px !important;
+}
+
+.chatbot .label-wrap span,
+div[data-testid="chatbot"] .label-wrap span {
+    font-family: var(--mono) !important;
+    font-size: 10px !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.1em !important;
+    color: var(--text-muted) !important;
+    text-transform: uppercase !important;
+}
+
+.chatbot .message-wrap,
+div[data-testid="chatbot"] .message-wrap {
+    padding: 14px !important;
+    background: var(--bg-card) !important;
+    max-height: 340px !important;
+    overflow-y: auto !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 8px !important;
+}
+
+.message {
+    max-width: 82% !important;
+    padding: 9px 13px !important;
+    border-radius: var(--r-md) !important;
+    font-family: var(--font) !important;
+    font-size: 13px !important;
+    line-height: 1.6 !important;
+    letter-spacing: 0 !important;
+}
+
+.message.user, .user.message {
+    background: var(--user-bg) !important;
+    color: var(--text) !important;
+    align-self: flex-end !important;
+    border: 1px solid var(--border) !important;
+    border-bottom-right-radius: var(--r-sm) !important;
+}
+
+.message.bot, .bot.message {
+    background: var(--bot-bg) !important;
+    color: rgba(255,255,255,0.85) !important;
+    align-self: flex-start !important;
+    border: 1px solid var(--border) !important;
+    border-bottom-left-radius: var(--r-sm) !important;
+}
+
+.message code {
+    font-family: var(--mono) !important;
+    font-size: 11px !important;
+    background: #1a1a1a !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--r-sm) !important;
+    padding: 1px 5px !important;
+    color: var(--green) !important;
+}
+
+.message pre {
+    font-family: var(--mono) !important;
+    font-size: 11px !important;
+    background: #111 !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--r-md) !important;
+    padding: 10px 12px !important;
+    color: rgba(255,255,255,0.75) !important;
+    overflow-x: auto !important;
+    margin-top: 6px !important;
+}
+
+textarea,
+input[type="text"],
+.scroll-hide {
+    background: var(--bg-input) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--r-md) !important;
+    color: var(--text) !important;
+    font-family: var(--font) !important;
+    font-size: 13px !important;
+    line-height: 1.5 !important;
+    padding: 9px 12px !important;
+    resize: none !important;
+    transition: border-color 0.12s !important;
+    caret-color: var(--green) !important;
+    letter-spacing: 0 !important;
+}
+
+textarea:focus, input[type="text"]:focus {
+    border-color: var(--border-focus) !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+textarea::placeholder, input[type="text"]::placeholder {
+    color: var(--text-dim) !important;
+}
+
+button[variant="primary"], .submit-btn {
+    background: var(--text) !important;
+    color: var(--bg) !important;
+    border: none !important;
+    border-radius: var(--r-md) !important;
+    font-family: var(--font) !important;
+    font-size: 12px !important;
+    font-weight: 600 !important;
+    height: 34px !important;
+    padding: 0 16px !important;
+    letter-spacing: -0.01em !important;
+    cursor: pointer !important;
+    transition: opacity 0.12s !important;
+}
+
+button[variant="primary"]:hover, .submit-btn:hover {
+    opacity: 0.88 !important;
+}
+
+button[variant="secondary"] {
+    background: transparent !important;
+    color: var(--text-muted) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--r-md) !important;
+    font-family: var(--font) !important;
+    font-size: 12px !important;
+    height: 32px !important;
+    padding: 0 12px !important;
+    transition: border-color 0.12s, color 0.12s !important;
+}
+
+button[variant="secondary"]:hover {
+    border-color: var(--border-focus) !important;
+    color: var(--text) !important;
+}
+
+label span, .label-wrap span {
+    font-family: var(--mono) !important;
+    font-size: 10px !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.1em !important;
+    color: var(--text-muted) !important;
+    text-transform: uppercase !important;
+}
+
+.block, .gr-block {
+    background: var(--bg) !important;
+    border-color: var(--border) !important;
+    border-radius: var(--r-lg) !important;
+    box-shadow: none !important;
+}
+
+.examples table { border: none !important; }
+
+.examples td {
+    background: var(--bg-card) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--r-sm) !important;
+    font-family: var(--font) !important;
+    font-size: 12px !important;
+    color: var(--text-muted) !important;
+    padding: 7px 11px !important;
+    cursor: pointer !important;
+    transition: border-color 0.12s, color 0.12s !important;
+}
+
+.examples td:hover {
+    border-color: var(--border-hover) !important;
+    color: var(--text) !important;
+}
+
+::-webkit-scrollbar { width: 3px; height: 3px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
+* { scrollbar-width: thin !important; scrollbar-color: var(--border-hover) transparent !important; }
+
+footer, .footer, .built-with { display: none !important; }
+
+@media (max-width: 768px) {
+    .sidebar, aside {
+        min-width: 100% !important;
+        max-width: 100% !important;
+        border-right: none !important;
+        border-bottom: 1px solid var(--border) !important;
+        padding: 20px 16px !important;
+    }
+    .message { max-width: 92% !important; }
+}
+"""
+
+with gr.Blocks(
+    fill_height=True,
+    css=custom_css,
+    title="Yuuki-RxG",
+    theme=gr.themes.Base(
+        primary_hue="zinc",
+        neutral_hue="zinc",
+        font=gr.themes.GoogleFont("Inter"),
+        font_mono=gr.themes.GoogleFont("JetBrains Mono"),
+        radius_size=gr.themes.sizes.radius_sm,
+        spacing_size=gr.themes.sizes.spacing_sm,
+    ).set(
+        body_background_fill="#0a0a0a",
+        body_text_color="#ffffff",
+        background_fill_primary="#0a0a0a",
+        background_fill_secondary="#111111",
+        border_color_primary="rgba(255,255,255,0.07)",
+        color_accent="#22c55e",
+        color_accent_soft="rgba(34,197,94,0.12)",
+        button_primary_background_fill="#ffffff",
+        button_primary_text_color="#0a0a0a",
+        button_primary_background_fill_hover="#e5e5e5",
+        button_secondary_background_fill="transparent",
+        button_secondary_border_color="rgba(255,255,255,0.07)",
+        button_secondary_text_color="#6b6b6b",
+        block_border_color="rgba(255,255,255,0.07)",
+        block_background_fill="#111111",
+        block_shadow="none",
+        input_background_fill="#141414",
+        input_border_color="rgba(255,255,255,0.07)",
+        input_border_color_focus="rgba(255,255,255,0.25)",
+        input_shadow_focus="none",
+        shadow_drop="none",
+        shadow_drop_lg="none",
+    )
+) as demo:
+    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."
+        )
+        button = gr.LoginButton("Iniciar sesión")
+
+    gr.load(
+        "models/OpceanAI/Yuuki-RxG",
+        accept_token=button,
+        provider="featherless-ai",
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+