Compact chat layout while retaining editable prompt and temperature

app.py

@@ -253,7 +253,7 @@ def require_login(request):
 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><a href="https://dumbbutt.tech" style="color:#ffd447">Website</a> · <a href="https://huggingface.co/dumbbutt0" style="color:#ffd447">Hugging Face</a> · <a href="https://x.com/dummbutt0" style="color:#ffd447">X</a></footer>\n</main></body></html>'
 
 
-MOBILE_CSS = '\n.gradio-container {width:100% !important; max-width:1120px !important; margin:auto; padding:20px !important; box-sizing:border-box;}\n.gradio-container *, .gradio-container *::before, .gradio-container *::after {box-sizing:border-box;}\n#qf-model-row {align-items:stretch;}\n#qf-model-select {min-width:0 !important; flex:1 1 360px !important;}\n#qf-model-check {min-width:140px; flex:0 0 160px !important;}\n#qf-model-select input {min-width:0; text-overflow:ellipsis;}\n#qf-model-select [role="option"] {white-space:normal !important; overflow-wrap:anywhere;}\n.gradio-container .prose, .gradio-container .prose code {overflow-wrap:anywhere;}\n#qf-chat {height:520px !important; min-height:260px;}\n#qf-message textarea {font-size:16px !important;}\n.gradio-container button:focus-visible, .gradio-container a:focus-visible {outline:2px solid #ffd447; outline-offset:3px;}\n@media (max-width:640px) {\n .gradio-container {padding:12px !important;}\n #qf-model-row {flex-direction:column !important; gap:10px;}\n #qf-model-select, #qf-model-check {width:100% !important; flex:0 1 auto !important; min-width:0 !important;}\n .gradio-container button {min-height:44px;}\n .gradio-container input, .gradio-container textarea, .gradio-container select {font-size:16px !important;}\n .gradio-container .prose h1 {font-size:26px; line-height:1.2;}\n #qf-chat {height:52vh !important; height:52svh !important; min-height:260px; max-height:520px;}\n #qf-chat .message {max-width:100% !important;}\n #qf-chat pre {max-width:100%; overflow-x:auto; white-space:pre;}\n .gradio-container .gallery, .gradio-container .dataset {min-width:0 !important; max-width:100%;}\n .gradio-container .dataset button {white-space:normal !important; text-align:left; overflow-wrap:anywhere;}\n #qf-footer {line-height:2; padding-bottom:env(safe-area-inset-bottom, 0px);}\n}\n'
+MOBILE_CSS = '\n.gradio-container {width:100% !important; max-width:1120px !important; margin:auto; padding:20px !important; box-sizing:border-box;}\n.gradio-container *, .gradio-container *::before, .gradio-container *::after {box-sizing:border-box;}\n#qf-model-row {align-items:stretch;}\n#qf-model-select {min-width:0 !important; flex:1 1 360px !important;}\n#qf-model-check {min-width:140px; flex:0 0 160px !important;}\n#qf-model-select input {min-width:0; text-overflow:ellipsis;}\n#qf-model-select [role="option"] {white-space:normal !important; overflow-wrap:anywhere;}\n.gradio-container .prose, .gradio-container .prose code {overflow-wrap:anywhere;}\n#qf-chat {height:520px !important; min-height:260px;}\n#qf-message textarea {font-size:16px !important;}\n.gradio-container button:focus-visible, .gradio-container a:focus-visible {outline:2px solid #ffd447; outline-offset:3px;}\n@media (max-width:640px) {\n .gradio-container {padding:12px !important;}\n #qf-model-row {flex-direction:column !important; gap:10px;}\n #qf-model-select, #qf-model-check {width:100% !important; flex:0 1 auto !important; min-width:0 !important;}\n .gradio-container button {min-height:44px;}\n .gradio-container input, .gradio-container textarea, .gradio-container select {font-size:16px !important;}\n .gradio-container .prose h1 {font-size:26px; line-height:1.2;}\n #qf-chat {height:52vh !important; height:52svh !important; min-height:260px; max-height:520px;}\n #qf-chat .message {max-width:100% !important;}\n #qf-chat pre {max-width:100%; overflow-x:auto; white-space:pre;}\n .gradio-container .gallery, .gradio-container .dataset {min-width:0 !important; max-width:100%;}\n .gradio-container .dataset button {white-space:normal !important; text-align:left; overflow-wrap:anywhere;}\n #qf-footer {line-height:2; padding-bottom:env(safe-area-inset-bottom, 0px);}\n}\n\n#qf-new-chat {width:auto; min-width:110px; max-width:160px; align-self:flex-end;}\n#qf-active-model {font-size:12px; margin:0;}\n#qf-heading h1 {margin:0;}\n@media(max-width:640px){\n .gradio-container {padding:8px !important; gap:8px !important;}\n #qf-heading h1 {font-size:21px !important;}\n #qf-chat {height:48vh !important; height:48svh !important; min-height:220px;}\n #qf-new-chat {min-height:44px; margin:0;}\n #qf-footer {font-size:12px;}\n}\n'
 
 
 def create_server(provider=None, secure=True):
@@ -663,63 +663,64 @@ def respond_stream(message, history, sys_prompt, temp, request: gr.Request):
 # --------------------------------------------------
 
 with gr.Blocks(title="Quickference") as demo:
-    gr.Markdown("# ⚡ Quickference\nChoose a model, lock it in, then chat.")
-    auth_status = gr.Markdown("Checking sign-in…")
-    gr.Markdown("[Sign out](/logout). Your OAuth token stays on this server. Model access and inference credits belong to your HF account.")
+    gr.Markdown("# ⚡ Quickference", elem_id="qf-heading")
+    with gr.Accordion("Account", open=False):
+        auth_status = gr.Markdown("Checking sign-in…")
+        gr.Markdown("[Sign out](/logout). Model access and inference credits belong to your HF account.")
     demo.load(show_identity, inputs=None, outputs=auth_status, api_name="identity")
 
     # --------------------------------------------------
     # MODEL CHECKER
     # --------------------------------------------------
 
-    gr.Markdown("---")
-    active_model_display = gr.Markdown("No active model.")
-    with gr.Row(elem_id="qf-model-row"):
-        model_input = gr.Dropdown(
-            label="Hugging Face Model", choices=[MODEL], value=MODEL, elem_id="qf-model-select", min_width=0,
-            filterable=True, allow_custom_value=True,
-            info="Typing alone does not switch models. Click Check Model to apply."
-        )
-        check_btn = gr.Button("Check Model", variant="primary", elem_id="qf-model-check")
-    refresh_btn = gr.Button("Refresh models")
-    catalog_status = gr.Markdown("Loading hosted models…")
-    refresh_btn.click(refresh_models, inputs=None, outputs=[model_input, catalog_status], api_name="refresh_models")
-    demo.load(refresh_models, inputs=None, outputs=[model_input, catalog_status], api_name=False)
-    model_status = gr.Markdown("Check a model to begin.")
+    active_model_display = gr.Markdown("Select a model below to begin.", elem_id="qf-active-model")
+    with gr.Accordion("Select / change model", open=False):
+        with gr.Row(elem_id="qf-model-row"):
+            model_input = gr.Dropdown(
+                label="Hugging Face Model", choices=[MODEL], value=MODEL, elem_id="qf-model-select", min_width=0,
+                filterable=True, allow_custom_value=True,
+                info="Typing alone does not switch models. Click Check Model to apply."
+            )
+            check_btn = gr.Button("Check Model", variant="primary", elem_id="qf-model-check")
+        refresh_btn = gr.Button("Refresh models")
+        catalog_status = gr.Markdown("Loading hosted models…")
+        refresh_btn.click(refresh_models, inputs=None, outputs=[model_input, catalog_status], api_name="refresh_models")
+        demo.load(refresh_models, inputs=None, outputs=[model_input, catalog_status], api_name=False)
+        model_status = gr.Markdown("Check a model to begin.")
 
-    disconnect_btn = gr.Button("Reset model selection")
-    disconnect_btn.click(disconnect, inputs=None, outputs=[active_model_display, model_status], api_name="disconnect")
-    check_btn.click(check_model, inputs=model_input, outputs=[model_status, active_model_display])
+        disconnect_btn = gr.Button("Reset model selection")
+        disconnect_btn.click(disconnect, inputs=None, outputs=[active_model_display, model_status], api_name="disconnect")
+        check_btn.click(check_model, inputs=model_input, outputs=[model_status, active_model_display])
 
 
     # --------------------------------------------------
     # CHAT SETTINGS AND ORIGINAL EXAMPLES
     # --------------------------------------------------
 
-    gr.Markdown("Choose a template below the chat to load its prompt and settings. Start a new conversation when changing roles.")
+
     system_prompt = gr.Textbox(label="System Prompt", value=default_prompt, lines=6, render=False)
     temperature = gr.Slider(
         minimum=0.0, maximum=1.5, value=0.7, step=0.1,
         label="Temperature", render=False,
         info="Lower = more focused, higher = more creative"
     )
-    new_chat_btn = gr.Button("New chat", variant="secondary")
+    new_chat_btn = gr.Button("New chat", variant="secondary", elem_id="qf-new-chat")
     chat_event_start = set(demo.fns)
     chat = gr.ChatInterface(
         fn=respond_stream,
         chatbot=gr.Chatbot(elem_id="qf-chat", height=520),
-        textbox=gr.Textbox(elem_id="qf-message", placeholder="Type your message…", lines=1, max_lines=6),
+        textbox=gr.Textbox(elem_id="qf-message", show_label=False, placeholder="Type your message…", lines=1, max_lines=6),
         autofocus=False,
         fill_height=False,
         additional_inputs_accordion="Prompt and temperature",
         api_name="chat",
-        title="Quickference Chat Engine",
-        description="Stream answers and switch verified models while preserving chat history.",
+        title=None,
+        description=None,
         additional_inputs=[system_prompt, temperature],
         cache_examples=False,
         save_history=False,
         examples=EXAMPLE_TEMPLATES,
-        example_labels=["Batman: investigate the damage", "Poetry: write with constraints", "Incident response: diagnose an outage"],
+        example_labels=["Batman", "Poetry", "Incident response"],
     )
     chat_events = [demo.fns[key].get_config() for key in demo.fns if key not in chat_event_start and demo.fns[key].queue]
     new_chat_btn.click(