Style Quickference sign-in and chat in black and gold

app.py

@@ -250,19 +250,30 @@ def require_login(request):
     return sid, login
 
 
+SIGN_IN_HTML = '<!doctype html>\n<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">\n<title>Quickference — Sign in</title><style>\n:root{color-scheme:dark;--gold:#ffd447;--ink:#11110f;--paper:#f5eedb}*{box-sizing:border-box}\nbody{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;min-height:100svh}\nmain{max-width:1100px;margin:auto;padding:30px 28px 40px}header{display:flex;justify-content:space-between;border-bottom:1px solid #4c4735;padding-bottom:18px;font:12px monospace;letter-spacing:.12em;color:var(--gold)}\n.hero{text-align:center;padding-top:60px}.eyebrow{font:12px monospace;letter-spacing:.22em;color:#c4bdab}\nh1{font-size:clamp(38px,9.3vw,104px);font-weight:950;letter-spacing:-.065em;line-height:1;margin:20px 0 0;color:var(--gold);transform:skew(-7deg);text-shadow:3px 3px 0 #11110f,4px 4px 0 #746126}\n.car{width:min(100%,740px);height:auto;display:block;margin:0 auto}.tagline{font-size:clamp(18px,3vw,25px);margin:0 0 27px;letter-spacing:-.03em}\n.signin{display:inline-flex;gap:14px;align-items:center;justify-content:center;background:var(--gold);color:#14130e;border:2px solid var(--gold);padding:18px 27px;font-weight:800;text-decoration:none;font-size:17px;box-shadow:5px 5px 0 #5d4f25;transition:transform .15s,box-shadow .15s}\n.signin:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #5d4f25}.signin:focus-visible{outline:3px solid white;outline-offset:6px}\n.note{max-width:440px;margin:22px auto 0;font-size:13px;line-height:1.7;color:#bbb4a2}.steps{display:flex;justify-content:center;gap:30px;margin-top:48px;padding-top:22px;border-top:1px solid #4c4735;font:12px monospace;color:#c4bdab}.steps b{color:var(--gold);margin-right:7px}\nfooter{text-align:center;margin-top:34px;font:11px monospace;color:#9b9585}@media(max-width:560px){main{padding:22px 18px}.hero{padding-top:44px}.steps{gap:17px;flex-wrap:wrap;margin-top:36px}.signin{width:100%;padding:17px 12px}header{font-size:10px}.car{margin:15px auto}}\n@media(prefers-reduced-motion:reduce){.signin{transition:none}}\n</style></head><body><main>\n<header><span>QUICKFERENCE / CHAT ENGINE</span><span>READY WHEN YOU ARE</span></header>\n<section class="hero" aria-labelledby="title"><p class="eyebrow">PICK A MODEL. START A CONVERSATION.</p><h1 id="title">QUICKFERENCE</h1>\n<svg class="car" viewBox="0 0 900 280" role="img" aria-label="Gold line drawing of a racing car with a trail of smoke, inspired by the Quickference sketch">\n<g fill="none" stroke="#8b7950" stroke-width="3" stroke-linecap="round"><path d="M70 223H795M50 237H235M660 237H828M40 162H143M64 180H155"/><path d="M650 180c34-46 79-45 75-18 27-40 65-18 44 7 52-17 72 22 28 33 37 15 16 40-20 22-27 25-67 9-53-13-26 15-63 6-74-7"/></g>\n<g stroke="#ffd447" stroke-width="4" stroke-linejoin="round"><path fill="#292619" d="M159 175l43-42 147-19 61-52 135 8 80 69 34 8 18 55-56 12H192l-43-16z"/><path fill="#171813" d="M365 119l55-44 115 7 49 47z"/><path fill="#51452a" d="M419 76l-7 47 171 6-49-47z"/><path fill="#ffd447" d="M180 157l150-17 7 26-166 18z"/><path fill="#151510" d="M340 137l246 11 51 38-289-4z"/><path fill="none" d="M468 138l-3 44M498 150h26M201 133l129 7M537 82l-72 41"/><path fill="#ffd447" d="M598 107l64-3 12 16-67 3z"/><path fill="none" d="M625 123v18M637 123v19"/>\n<g fill="#11110f"><circle cx="273" cy="195" r="48"/><circle cx="579" cy="197" r="45"/></g><g fill="#5b4c28"><circle cx="273" cy="195" r="29"/><circle cx="579" cy="197" r="27"/></g><g fill="none" stroke-width="2"><path d="M273 169v52m-26-26h52m-44-18 36 36m-36 0 36-36M579 172v50m-25-25h50m-42-17 34 34m-34 0 34-34"/></g><path fill="none" stroke="#f5eedb" stroke-width="2" d="M213 122l124-18 64-55 153 9 89 71"/></g>\n</svg>\n<p class="tagline">Your models. Your conversation.</p>\n<a class="signin" href="/login" target="_blank" rel="noopener"><span aria-hidden="true">🤗</span> Sign in with Hugging Face <span aria-hidden="true">↗</span></a>\n<p class="note">Opens Hugging Face in a new tab. Authorize inference with your account, then choose a model and chat. Your account’s model access and inference credits apply.</p>\n</section><div class="steps"><span><b>01</b>SIGN IN</span><span><b>02</b>CHECK A MODEL</span><span><b>03</b>LET IT TALK</span></div><footer>QUICKFERENCE · BUILT FOR TRYING THINGS</footer>\n</main></body></html>'
+
+
 def create_server(provider=None, secure=True):
-    theme = gr.themes.Monochrome()
-    if provider is None:
-        try:
-            theme = gr.Theme.from_hub("harsh8001/True-terminal")
-        except Exception:
-            pass
+    theme = gr.themes.Base(primary_hue="yellow", neutral_hue="stone").set(
+        body_background_fill="#11110f", body_background_fill_dark="#11110f",
+        body_text_color="#f5eedb", body_text_color_dark="#f5eedb",
+        block_background_fill="#1d1c17", block_background_fill_dark="#1d1c17",
+        block_border_color="#514a34", block_border_color_dark="#514a34",
+        block_label_text_color="#ffd447", block_label_text_color_dark="#ffd447",
+        block_title_text_color="#ffd447", block_title_text_color_dark="#ffd447",
+        input_background_fill="#11110f", input_background_fill_dark="#11110f",
+        input_border_color="#665c3b", input_border_color_dark="#665c3b",
+        button_primary_background_fill="#ffd447", button_primary_background_fill_dark="#ffd447",
+        button_primary_text_color="#11110f", button_primary_text_color_dark="#11110f",
+        button_secondary_background_fill="#302b1c", button_secondary_background_fill_dark="#302b1c",
+        button_secondary_text_color="#f5eedb", button_secondary_text_color_dark="#f5eedb",
+    )
     provider = provider or HFOAuth()
     server = FastAPI()
 
     @server.get('/', response_class=HTMLResponse)
     async def home():
-        return '<h1>Quickference</h1><p>Sign in to authorize hosted inference with your Hugging Face account.</p><a href="/login" target="_blank" rel="noopener">Sign in with Hugging Face</a>'
+        return SIGN_IN_HTML
 
     @server.get('/login')
     async def login():
@@ -632,7 +643,7 @@ with gr.Blocks(title="Quickference") as demo:
             label="Hugging Face Model ID", value=MODEL,
             info="Typing alone does not switch models. Click Check Model to apply."
         )
-        check_btn = gr.Button("Check Model")
+        check_btn = gr.Button("Check Model", variant="primary")
     model_status = gr.Markdown("Check a model to begin.")
 
     disconnect_btn = gr.Button("Reset model selection")