Merge branch 'main' of https://github.com/Burnmydays/hf-

SCRATCHPAD.md

@@ -40,6 +40,21 @@ cd /Users/dericmchenry/Desktop/moses-sigrank
 
 ## WORK LOG (newest first)
 
+### Devin session — 2026-06-15 (visual upgrade)
+- [done] theme.py CSS upgrade — brighter default bar gradient (0.28→0.72), `.mb-row.rank1`
+  gold left-border + dominant #1 row, colored rank numbers (`.mb-rank-1/2/3`), hero upgrade
+  (32px title, `#moses-stat-strip`), `.mb-raw` color #5f573f→#7a7060, `.comp-bar` composition
+  bar, full `.sig-card` trading-card styles, and a `@media (max-width:700px)` mobile rule that
+  hides velocity/leverage columns.
+- [done] app.py UI upgrade — hero stat strip HTML; `board_html()` now adds `rank1` class to row 1
+  and `mb-rank-{1,2,3}` spans for the top 3; new `comp_bar_html(c)` and `card_html(name,m,rank,
+  total_ops,narration_text)` helpers (+ `_first_sentence` quote truncation); `profile_md` drops the
+  text composition line and accepts an optional `read` so narrate() runs once; "Share card" section
+  (gr.HTML) added to Measure-yourself tab; `run_ingest` now returns 4 outputs (profile, comp bar,
+  card, board); footer simplified (formula soup removed — belongs in README "How the numbers work").
+- [done] Verify green: `py_compile` all *.py OK · comp_bar/card/board helpers render · board contains
+  rank1 + mb-rank-1/2/3 · run_ingest returns 4 values · narrate template fallback confirmed (no torch).
+
 ### Devin session — 2026-06-15
 - [done] GPU FIX — applied `@GPU` decorator to `narrate()` in narrate.py (line 60).
   ZeroGPU needs the inference function decorated or GPU alloc never happens and the

app.py

@@ -5,6 +5,7 @@ Board ranks by Net Volumetric Yield (Υ). Four raw integers drive everything.
 """
 import gradio as gr
 import math as _math
+import re as _re
 from metrics import compute, SEED
 from ingest import ingest_meta
 from theme import CSS
@@ -57,9 +58,10 @@ def board_html(extra=None):
         orders=_math.log10(ymax/y) if y>0 else 99
         barpct=max(2,100*(1-orders/5))
         d=f"{m['dev10x']:.2f}" if m['dev10x'] is not None else "\u2014"
-        cls="mb-row you" if you else "mb-row"
+        rank_cls = f"mb-rank-{i}" if i <= 3 else ""
+        cls = "mb-row you" if you else ("mb-row rank1" if i==1 else "mb-row")
         out.append(f'<div class="{cls}">'
-            f'<span class="mb-rank">{i}</span>'
+            f'<span class="mb-rank {rank_cls}">{i}</span>'
             f'<span class="mb-op"><b>{n}</b><br><span class="mb-raw">R {_fmt_int(m["raw"]["cache_read"])} \u00b7 C {_fmt_int(m["raw"]["cache_create"])} \u00b7 I {_fmt_int(m["raw"]["input"])} \u00b7 O {_fmt_int(m["raw"]["output"])}</span></span>'
             f'<span class="mb-num">{m["snr"]:.3f}</span>'
             f'<span class="mb-num">{d}</span>'
@@ -82,11 +84,61 @@ def classify(m):
     if v>=0.8 and l<2:  return "Volatile Ingestor \u00b7 generates, doesn't retain"
     return "Transient \u00b7 low on both axes"
 
-def profile_md(name, m, rank, total_ops):
+def comp_bar_html(c):
+    return (f'<div class="comp-bar">'
+            f'<div class="comp-read" style="width:{c["read"]:.1f}%"></div>'
+            f'<div class="comp-create" style="width:{c["create"]:.1f}%"></div>'
+            f'<div class="comp-output" style="width:{c["output"]:.1f}%"></div>'
+            f'<div class="comp-input" style="width:{c["input"]:.3f}%"></div>'
+            f'</div>'
+            f'<div style="font-size:10px;color:#8a7f68;margin-bottom:8px">'
+            f'read {c["read"]:.1f}% \u00b7 create {c["create"]:.1f}% \u00b7 output {c["output"]:.1f}% \u00b7 input {c["input"]:.3f}%'
+            f'</div>')
+
+def _first_sentence(text, limit=120):
+    t = _re.sub(r"[*_`>#]", "", text or "").replace("\n", " ").strip()
+    parts = _re.split(r"(?<=[.!?])\s", t, maxsplit=1)
+    s = parts[0] if parts else t
+    if len(s) > limit:
+        s = s[:limit].rstrip() + "\u2026"
+    return s
+
+def card_html(name, m, rank, total_ops, narration_text):
+    archetype = classify(m).split("\u00b7")[0].strip()
+    c = m["composition"]
+    if m["transmission"] is not None:
+        cascade = (
+            f'<div class="sig-card-cascade-box">{m["transmission"]:.1f}\u00d7<small>trans</small></div>'
+            f'<span class="sig-card-cascade-arrow">\u2192</span>'
+            f'<div class="sig-card-cascade-box">{m["commitment"]:.1f}\u00d7<small>commit</small></div>'
+            f'<span class="sig-card-cascade-arrow">\u2192</span>'
+            f'<div class="sig-card-cascade-box">{m["reuse"]:.1f}\u00d7<small>reuse</small></div>'
+            f'<span class="sig-card-cascade-arrow">=</span>'
+            f'<div class="sig-card-cascade-box">{m["leverage"]:,.0f}\u00d7<small>leverage</small></div>'
+        )
+    else:
+        cascade = '<div class="sig-card-cascade-box">\u2014<small>non-compounding</small></div>'
+    quote = _first_sentence(narration_text)
+    return (
+        '<div class="sig-card">'
+        '<div class="sig-card-watermark">MO\u00a7ES\u2122 SIGRANK</div>'
+        f'<div class="sig-card-name">{name}</div>'
+        f'<div class="sig-card-archetype">{archetype}</div>'
+        f'<div class="sig-card-yield">{m["yield"]:,.0f}</div>'
+        '<div class="sig-card-yield-label">net volumetric yield</div>'
+        f'<div class="sig-card-rank">#<span>{rank}</span> of {total_ops} operators</div>'
+        f'<div class="sig-card-cascade">{cascade}</div>'
+        f'{comp_bar_html(c)}'
+        f'<div class="sig-card-quote">{quote}</div>'
+        '<div class="sig-card-footer"><span>sigrank.hf.space</span><span>\u03a5=(C\u00b7O)/I\u00b2</span></div>'
+        '</div>'
+    )
+
+def profile_md(name, m, rank, total_ops, read=None):
     c=m["composition"]; r=m["raw"]
     d=f"{m['dev10x']:.3f}" if m['dev10x'] is not None else "\u2014 non-compounding (no cache_create)"
-    klass = classify(m)
-    read = narrate(name, m, klass)
+    if read is None:
+        read = narrate(name, m, classify(m))
     cav = m.get("_caveat")
     cav_line = f"\n\n`\u26a0 {cav}`" if cav else ""
     cost_note = " (list-price estimate)" if m.get("cost_estimated") else " (from ccusage)"
@@ -104,8 +156,6 @@ ranked **#{rank}** of {total_ops} by \u03a5{cav_line}
 | cache_read | {r['cache_read']:,} |
 | **total** | **{m['total']:,}** |
 
-composition — read {c['read']:.2f}% \u00b7 create {c['create']:.2f}% \u00b7 output {c['output']:.2f}% \u00b7 input {c['input']:.3f}%
-
 ### board metrics
 | metric | value | |
 |---|---|---|
@@ -131,9 +181,9 @@ def run_ingest(blob, name):
         return ("Paste your `npx ccusage@latest --json` output, your "
                 "`ccusage codex --json` output, or four numbers: "
                 "input output cache_create cache_read.\n\n"
-                f"_parser said: {e}_"), board_html()
+                f"_parser said: {e}_"), "", "", board_html()
     if i+o+cw+cr==0:
-        return "Got zeros — check your paste.", board_html()
+        return "Got zeros — check your paste.", "", "", board_html()
     m=compute(i,o,cw,cr, cost_usd=meta.get("cost"))
     if meta.get("estimated"):
         m["_caveat"]=meta.get("caveat")
@@ -148,7 +198,11 @@ def run_ingest(blob, name):
     rows=[(nn,compute(*vv)) for nn,vv in base.items() if nn!=name]+[(name,m)]
     rows.sort(key=lambda r:r[1]['yield'],reverse=True)
     rank=next(idx for idx,(nn,_) in enumerate(rows,1) if nn==name)
-    return profile_md(name,m,rank,len(rows)), board_html((name,m))
+    read = narrate(name, m, classify(m))
+    return (profile_md(name,m,rank,len(rows),read),
+            comp_bar_html(m["composition"]),
+            card_html(name,m,rank,len(rows),read),
+            board_html((name,m)))
 
 # ---------- UI ----------
 _blocks_kw = {"title": "MO\u00a7ES SigRank"}
@@ -160,6 +214,11 @@ with _b as demo:
     with gr.Column(elem_id="moses-hero"):
         gr.HTML("<h1>MO§ES\u2122 SigRank</h1>"
                 "<p>the diagnostic x-ray of the token economy \u00b7 ranked by \u03a5 (Net Volumetric Yield) \u00b7 volume can't buy rank</p>")
+        gr.HTML('<div id="moses-stat-strip">'
+                '<div>operators ranked <span>7</span></div>'
+                '<div>MO§ES leads by <span>3,141\u00d7</span></div>'
+                '<div>architecture beats budget</div>'
+                '</div>')
 
     with gr.Tab("Leaderboard"):
         gr.Markdown("Ranked by **Υ = (Cache·Output)/Input²**. Raw Read·Create·In·Out stacked under each operator. $/1M is blended cost — efficient architecture is also the cheapest.")
@@ -182,10 +241,14 @@ with _b as demo:
                           placeholder='{"totals":{"inputTokens":...}}   or   1251211 11296121 128196310 2555179769')
         go = gr.Button("Compute my SigRank", variant="primary", elem_id="compute-btn")
         prof = gr.Markdown(elem_id="moses-profile")
+        prof_bar = gr.HTML()
+        gr.Markdown("### share card")
+        card = gr.HTML()
+        gr.Markdown("*Screenshot to share \u00b7 right-click \u2192 Save image*", elem_id="moses-foot")
         gr.Markdown("### your placement")
         gr.Markdown("*Live placement against the curated field — your row is transient (not saved to the board).*", elem_id="moses-foot")
         ob = gr.HTML(board_html())
-        go.click(run_ingest, [blob, nm], [prof, ob])
+        go.click(run_ingest, [blob, nm], [prof, prof_bar, card, ob])
         gr.Examples(
             examples=[
                 ['{"totals":{"inputTokens":1251211,"outputTokens":11296121,"cacheCreationTokens":128196310,"cacheReadTokens":2555179769}}','MO§ES'],
@@ -193,10 +256,9 @@ with _b as demo:
             ],
             inputs=[blob, nm])
 
-    gr.Markdown(elem_id="moses-foot", value="""**Four integers in, full ledger out.** input · output · cache_create · cache_read.
-SNR=O/(I+O) · 10x DEV=log₁₀(cascade) · Velocity=O/I · Leverage=C/I ·
-Efficiency=(C+O)/I÷4 · Avg $/1M=blended cost · Υ=(C·O)/I². Wild-corpus values
-provisional; MO§ES row from verified ccusage data. Codex rows estimated via 2:1 anchor.""")
+    gr.Markdown(elem_id="moses-foot", value="""Four integers in, full ledger out. 
+Architecture is the only variable that matters. 
+Wild-corpus values provisional · MO§ES row verified ccusage · [How it works ↗](#)""")
 
 if __name__ == "__main__":
     try:

theme.py

@@ -13,10 +13,26 @@ CSS = """
 .gradio-container { background: var(--moses-bg) !important; max-width: 1100px !important; margin: 0 auto !important; }
 .dark .gradio-container, body { background: var(--moses-bg) !important; }
 
-#moses-hero { border-bottom: 1px solid var(--moses-gold); padding: 8px 0 16px; margin-bottom: 8px; }
-#moses-hero h1 { color: var(--moses-gold) !important; font-size: 26px !important; letter-spacing: 0.14em !important;
-  font-weight: 700 !important; margin: 0 !important; }
-#moses-hero p { color: var(--moses-dim) !important; font-size: 13px !important; margin: 4px 0 0 !important; letter-spacing: 0.04em; }
+#moses-hero {
+  border-bottom: 1px solid var(--moses-gold);
+  padding: 16px 0 20px;
+  margin-bottom: 12px;
+  position: relative;
+}
+#moses-hero h1 {
+  color: var(--moses-gold) !important;
+  font-size: 32px !important;
+  letter-spacing: 0.16em !important;
+  font-weight: 700 !important;
+  margin: 0 !important;
+}
+#moses-hero p { color: var(--moses-dim) !important; font-size: 12px !important; margin: 6px 0 0 !important; }
+/* stat strip */
+#moses-stat-strip {
+  display: flex; gap: 24px; margin-top: 10px;
+  font-size: 11px; color: var(--moses-dim); letter-spacing: 0.04em;
+}
+#moses-stat-strip span { color: var(--moses-ink); font-weight: 700; }
 
 .tabs, .tabitem { background: transparent !important; border: none !important; }
 button.selected { color: var(--moses-gold) !important; border-bottom: 2px solid var(--moses-gold) !important; }
@@ -62,15 +78,89 @@ button.primary:hover, #compute-btn:hover { background: #d8a449 !important; }
 .mb-row { border-bottom: 1px solid #3A3324; color: #8a7f68; font-size: 12px; }
 .mb-row.you { background: rgba(196,146,58,0.10); color: #E8E0CF; }
 .mb-row.you b { color: #C4923A; }
+.mb-row.rank1 {
+  border-left: 3px solid var(--moses-gold);
+  background: rgba(196,146,58,0.12) !important;
+  color: var(--moses-ink) !important;
+}
+.mb-row.rank1 .mb-yval { color: var(--moses-gold); font-size: 14px; }
+.mb-rank-1 { color: var(--moses-gold); font-weight: 700; }
+.mb-rank-2 { color: #a0a0a0; }
+.mb-rank-3 { color: #8a6a3a; }
 .mb-row b { color: #E8E0CF; font-family: var(--font-sans, sans-serif); font-size: 13px; }
-.mb-raw { color: #5f573f; font-size: 9.5px; }
+.mb-raw { color: #7a7060; font-size: 9.5px; }
 .mb-num { text-align: right; }
 .mb-y { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 20px; }
 .mb-bar { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 14px;
-  background: linear-gradient(90deg, rgba(196,146,58,0.15), rgba(196,146,58,0.55)); border-radius: 2px; }
+  background: linear-gradient(90deg, rgba(196,146,58,0.28), rgba(196,146,58,0.72)); border-radius: 2px; }
 .mb-row.you .mb-bar { background: linear-gradient(90deg, rgba(196,146,58,0.4), #C4923A); }
 .mb-yval { position: relative; z-index: 2; color: #E8E0CF; font-weight: 700; font-size: 12px; padding-right: 4px; }
 .mb-foot { color: #5f573f; font-size: 10.5px; padding: 10px 8px 0; line-height: 1.6; }
 
+/* composition bar */
+.comp-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 6px 0 10px; width: 100%; }
+.comp-read { background: var(--moses-gold); }
+.comp-create { background: #8a6a3a; }
+.comp-output { background: #5a7a5a; }
+.comp-input { background: #3a4a5a; }
+
+/* trading card */
+.sig-card {
+  width: 380px; min-height: 500px;
+  background: linear-gradient(160deg, #1E1B15 60%, #2a2318);
+  border: 1px solid var(--moses-gold);
+  border-radius: 12px;
+  padding: 28px 24px 20px;
+  font-family: ui-monospace, monospace;
+  position: relative;
+  box-shadow: 0 0 40px rgba(196,146,58,0.12), inset 0 1px 0 rgba(196,146,58,0.2);
+}
+.sig-card-watermark {
+  position: absolute; top: 14px; right: 16px;
+  font-size: 9px; color: var(--moses-dim); letter-spacing: 0.1em;
+}
+.sig-card-name { color: var(--moses-gold); font-size: 22px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 4px; }
+.sig-card-archetype {
+  display: inline-block; font-size: 10px; letter-spacing: 0.08em;
+  border: 1px solid var(--moses-gold); color: var(--moses-gold);
+  padding: 2px 8px; border-radius: 2px; margin-bottom: 20px; text-transform: uppercase;
+}
+.sig-card-yield { font-size: 52px; font-weight: 700; color: var(--moses-ink); line-height: 1; }
+.sig-card-yield-label { font-size: 10px; color: var(--moses-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; }
+.sig-card-rank { font-size: 13px; color: var(--moses-dim); margin-bottom: 16px; }
+.sig-card-rank span { color: var(--moses-ink); font-weight: 700; }
+.sig-card-cascade {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11px; margin-bottom: 16px;
+}
+.sig-card-cascade-box {
+  border: 1px solid #3A3324; padding: 4px 8px; border-radius: 3px;
+  color: var(--moses-ink); text-align: center; min-width: 52px;
+}
+.sig-card-cascade-box small { display: block; color: var(--moses-dim); font-size: 9px; }
+.sig-card-cascade-arrow { color: var(--moses-dim); }
+.sig-card-quote {
+  font-size: 11px; color: var(--moses-dim);
+  border-left: 2px solid var(--moses-gold);
+  padding: 8px 12px; margin-top: 16px; line-height: 1.5;
+  font-style: italic;
+}
+.sig-card-footer {
+  position: absolute; bottom: 16px; left: 24px; right: 24px;
+  font-size: 9px; color: #5f573f; letter-spacing: 0.06em;
+  border-top: 1px solid #3A3324; padding-top: 8px;
+  display: flex; justify-content: space-between;
+}
+
 footer { display: none !important; }
+
+@media (max-width: 700px) {
+  .mb-head, .mb-row {
+    grid-template-columns: 22px 1fr 0.5fr 0.5fr 1fr;
+    font-size: 11px;
+  }
+  /* hide velocity and leverage columns on mobile */
+  .mb-head span:nth-child(5), .mb-head span:nth-child(6),
+  .mb-row span:nth-child(5), .mb-row span:nth-child(6) { display: none; }
+}
 """