GUI-Decisions Space

ambient.css

@@ -0,0 +1,48 @@
+/* The Ambient design system (vaan_db/site/public/assets/css/styles.css), the same tokens as the blog's
+   figures (systemone/blog/diagrams/_head.html): cream canvas, dark-brown ink, one orange accent. Orange is
+   the slot read, dark brown the base model writing its answer, taupe neutral structure. */
+:root {
+  --bg:#fdf6f1; --bg-2:#f8ece4; --panel:#ffffff; --panel-2:#fbf1ea;
+  --ink-panel:#1c100b; --ink-panel-2:#2a170e; --on-ink:#fbeee6; --on-ink-muted:#bfa89c;
+  --ink:#1a110d; --ink2:#6b5850; --ink3:#9a877e; --rule:rgba(58,28,12,0.11); --rule-2:rgba(58,28,12,0.06); --dot:rgba(58,28,12,0.07);
+  --shadow:0 1px 2px rgba(58,28,12,0.05), 0 12px 32px -14px rgba(58,28,12,0.18);
+  --fast:#ff5a14; --fast-2:#ff7a2e; --fast-soft:#ffe5d8;   /* ours: the slot read */
+  --slow:#3a2013; --slow-soft:#efe2d9;                     /* the baseline: writing */
+  --accent:#a3836f; --accent-soft:#f3e7df;                 /* neutral structure */
+}
+body, gradio-app, .gradio-container {
+  background:radial-gradient(var(--dot) 1.2px, transparent 1.2px) -12px -12px / 24px 24px, var(--bg) !important;
+  color:var(--ink); -webkit-font-smoothing:antialiased;
+}
+.gradio-container { max-width:1180px !important; margin:0 auto !important; }
+
+/* header, as the site's sections: orange eyebrow, tight display title, muted lede */
+.amb-head { padding:26px 4px 6px; }
+.amb-head .eyebrow { font:600 11.5px "Inter",sans-serif; letter-spacing:.26em; text-transform:uppercase; color:var(--fast); margin:0 0 10px; }
+.amb-head .title { font:800 34px/1.08 "Inter Tight","Inter",sans-serif; letter-spacing:-.03em; word-spacing:.04em; margin:0 0 12px; color:var(--ink); text-wrap:balance; }
+.amb-head .title .fast { color:var(--fast); }
+.amb-head .lede { color:var(--ink2); font-size:15.5px; line-height:1.6; margin:0 0 12px; max-width:54rem; }
+.amb-head .links { font:500 12px "JetBrains Mono",monospace; letter-spacing:.06em; color:var(--ink3); margin:0; }
+.amb-head .links a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); }
+.amb-head .links a:hover { color:var(--fast); border-color:var(--fast); }
+.amb-note { color:var(--ink3); font-size:12.5px; line-height:1.55; margin:6px 4px 0; }
+.amb-legend { display:flex; gap:18px; flex-wrap:wrap; font:500 12px "JetBrains Mono",monospace; color:var(--ink2); margin:2px 4px 0; }
+.amb-legend i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px; }
+
+/* results: the read in a dark terminal panel, like the figures' .term */
+.prose pre, .prose code { font-family:"JetBrains Mono",ui-monospace,monospace !important; }
+.prose pre { background:var(--ink-panel) !important; color:var(--on-ink) !important; border-radius:12px !important;
+  border:0 !important; box-shadow:0 18px 36px -22px rgba(42,23,14,.6); }
+.prose pre code { background:transparent !important; color:var(--on-ink) !important; }
+.prose :not(pre) > code { background:var(--accent-soft) !important; color:var(--ink) !important; border-radius:6px; padding:1px 5px; }
+.prose h3 { font:700 17px "Inter Tight","Inter",sans-serif !important; letter-spacing:-.02em; }
+.prose strong { color:var(--ink); }
+.prose table { font-variant-numeric:tabular-nums; border-collapse:collapse; background:var(--panel); }
+.prose table, .prose th, .prose td { border:1px solid var(--rule) !important; }
+.prose h2 { font:800 22px "Inter Tight","Inter",sans-serif !important; letter-spacing:-.03em; }
+.prose th { color:var(--ink3); font:500 11px "JetBrains Mono",monospace !important; letter-spacing:.12em; text-transform:uppercase; }
+
+/* tabs: an orange rule under the selected one */
+button[role="tab"] { font:600 14px "Inter",sans-serif !important; color:var(--ink2) !important; }
+button[role="tab"][aria-selected="true"] { color:var(--ink) !important; border-color:var(--fast) !important; }
+button[role="tab"][aria-selected="true"]::after { background:var(--fast) !important; }

app.py

@@ -18,7 +18,7 @@ from slotread.numbers import unwarp
 
 BASE = os.environ.get("BASE", "google/gemma-4-31B-it")
 ADAPTER = os.environ.get("ADAPTER", "infinitylogesh/GUI-Decisions-31B-LoRA")
-SLOT, VANILLA = (37, 99, 235), (234, 88, 12)  # blue: slot reads; orange: the base model writing JSON
+SLOT, VANILLA = (255, 90, 20), (58, 32, 19)  # the Ambient theme: orange the slot read, dark brown the base model writing
 MAX_PX = 3840 * 2160
 WARM = set()  # functions that have run once in this process: the first call includes CUDA warm-up
 
@@ -109,7 +109,7 @@ def decide(image, instruction, previous, compare):
         md += (f"\n\n### Base model writing JSON: `{describe(va, vd, vtext)}`\n\n"
                f"Generating its answer took **{vms:.0f} ms** (Gemma 4's native `\"point\": [y, x]` format):\n\n"
                f"```\n{raw.strip()[:400]}\n```\n\n"
-               "Blue: slot reads, with their x × y distribution as the heatmap. Orange: the base model's point.")
+               "Orange: the slot read, with its x × y distribution as the heatmap. Dark brown: the base model's point.")
     label = {k: float(p) for k, p in zip(ACTIONS, probs(lp["action"]))}
     return out.convert("RGB"), md, label
 
@@ -137,11 +137,15 @@ def box(image, description):
 HERE = os.path.dirname(os.path.abspath(__file__))
 ex = lambda f: os.path.join(HERE, "examples", f)
 rows = lambda f: [l.split("\t") for l in open(ex(f)).read().splitlines() if l.strip()]  # tab-separated examples
-INTRO = open(os.path.join(HERE, "intro.md")).read()
+INTRO = open(os.path.join(HERE, "intro.html")).read()
+CSS = open(os.path.join(HERE, "ambient.css")).read()
 HOW = open(os.path.join(HERE, "how.md")).read()
 
 with gr.Blocks(title="GUI-Decisions") as demo:
-    gr.Markdown(INTRO)
+    gr.HTML(INTRO)
+    gr.HTML('<p class="amb-note">Timings here are this Space\'s shared GPU running bf16 in plain transformers. '
+            'Served on vLLM (NVFP4, one RTX PRO 6000) a step takes ~150 ms, against ~470–550 ms for the same model '
+            'writing its native JSON.</p>')
     with gr.Tab("Computer use"):
         with gr.Row():
             with gr.Column():
@@ -152,6 +156,8 @@ with gr.Blocks(title="GUI-Decisions") as demo:
                 go = gr.Button("Decide", variant="primary")
             with gr.Column():
                 out_img = gr.Image(label="Decision")
+                gr.HTML('<div class="amb-legend"><span><i style="background:#ff5a14"></i>slot read · P(x) × P(y)</span>'
+                        '<span><i style="background:#3a2013"></i>base model writing JSON</span></div>')
                 out_md = gr.Markdown()
                 out_lab = gr.Label(label="action slot", num_top_classes=4)
         go.click(decide, [img, ins, prev, cmp], [out_img, out_md, out_lab])
@@ -170,5 +176,35 @@ with gr.Blocks(title="GUI-Decisions") as demo:
     with gr.Tab("How it works"):
         gr.Markdown(HOW)
 
+# the Ambient theme: Inter / Inter Tight / JetBrains Mono, cream canvas, dark-brown ink, orange accent (light only)
+ORANGE = gr.themes.Color(c50="#fff4ee", c100="#ffe5d8", c200="#ffc9ad", c300="#ffa77d", c400="#ff7a2e", c500="#ff5a14",
+                         c600="#e64a08", c700="#bf3c06", c800="#8f2e07", c900="#5e1f06", c950="#3a1304")
+WARM = gr.themes.Color(c50="#fdf6f1", c100="#f8ece4", c200="#efe2d9", c300="#d9c6ba", c400="#9a877e", c500="#6b5850",
+                       c600="#4f3d35", c700="#3a2013", c800="#2a170e", c900="#1c100b", c950="#1a110d")
+LIGHT = dict(
+    body_background_fill="#fdf6f1", body_text_color="#1a110d", body_text_color_subdued="#6b5850",
+    background_fill_primary="#ffffff", background_fill_secondary="#fbf1ea",
+    block_background_fill="#ffffff", block_border_color="rgba(58,28,12,0.11)", block_border_width="1px",
+    block_label_background_fill="#fbf1ea", block_label_text_color="#6b5850", block_title_text_color="#6b5850",
+    block_shadow="0 1px 2px rgba(58,28,12,0.05), 0 12px 32px -14px rgba(58,28,12,0.18)",
+    border_color_primary="rgba(58,28,12,0.11)", border_color_accent="#ff5a14",
+    input_background_fill="#fdf6f1", input_border_color="rgba(58,28,12,0.11)", input_border_color_focus="#ff7a2e",
+    button_primary_background_fill="#ff5a14", button_primary_background_fill_hover="#ff7a2e",
+    button_primary_text_color="#ffffff", button_primary_border_color="#ff5a14",
+    button_secondary_background_fill="#ffffff", button_secondary_background_fill_hover="#fbf1ea",
+    button_secondary_text_color="#1a110d", button_secondary_border_color="rgba(58,28,12,0.11)",
+    color_accent="#ff5a14", color_accent_soft="#ffe5d8", link_text_color="#ff5a14", link_text_color_hover="#e64a08",
+    checkbox_background_color_selected="#ff5a14", checkbox_border_color_selected="#ff5a14", slider_color="#ff5a14",
+    loader_color="#ff5a14", code_background_fill="#f3e7df", table_even_background_fill="#ffffff",
+    table_odd_background_fill="#fbf1ea", table_border_color="rgba(58,28,12,0.11)",
+)
+THEME = gr.themes.Base(primary_hue=ORANGE, secondary_hue=WARM, neutral_hue=WARM, radius_size=gr.themes.sizes.radius_lg,
+                       font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
+                       font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"])
+THEME.set(block_radius="16px", **LIGHT, **{k + "_dark": v for k, v in LIGHT.items() if hasattr(THEME, k + "_dark")})
+HEAD = ('<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700'
+        '&family=Inter+Tight:wght@700;800&family=JetBrains+Mono:wght@400;500;600&display=swap">')
+LIGHT_ONLY = "() => { document.body.classList.remove('dark'); document.documentElement.classList.remove('dark'); }"
+
 if __name__ == "__main__":
-    demo.queue().launch()
+    demo.queue().launch(theme=THEME, css=CSS, head=HEAD, js=LIGHT_ONLY)

intro.html

@@ -0,0 +1,14 @@
+<div class="amb-head">
+  <p class="eyebrow">Slot reading · GUI-Decisions</p>
+  <p class="title">Computer-use steps, <span class="fast">read</span> in one forward pass</p>
+  <p class="lede">Give it a screenshot and an instruction. Instead of <em>writing</em> <code>{"action": "click", "point": [412, 288]}</code>
+  token by token, the model fills a fixed template of slots, and every answer is read from one forward pass: the action, and the
+  point as a 256-bin distribution over x and over y. Nothing is decoded; the heatmap is that distribution.</p>
+  <p class="links">
+    <a href="https://logeshumapathi.com/blog/2026/10/06/slot-reading.html">blog post</a> ·
+    <a href="https://github.com/infinitylogesh/gui-decisions">code</a> ·
+    <a href="https://huggingface.co/infinitylogesh/GUI-Decisions-31B-LoRA">GUI-Decisions-31B-LoRA</a> ·
+    <a href="https://huggingface.co/infinitylogesh/GUI-Decisions-31B">GUI-Decisions-31B</a> ·
+    <a href="https://huggingface.co/infinitylogesh/GUI-Decisions-2B-LoRA">GUI-Decisions-2B-LoRA</a>
+  </p>
+</div>