Upload app.py with huggingface_hub

app.py

@@ -44,6 +44,11 @@ AOTI_REPO = os.environ.get("F3_AOTI_REPO", "diffusers-modular/f3-small-image-dis
 AOTI_ENABLED = os.environ.get("F3_AOTI", "1") != "0"
 HF_TOKEN = os.environ.get("HF_TOKEN")
 
+# Header "button" links (klein-style pills). Point at the model cards; override via env
+# when switching to the public klein repos.
+LINK_DISTILLED = os.environ.get("F3_LINK_DISTILLED", "https://huggingface.co/black-forest-labs/flux-3-image-klein")
+LINK_BASE = os.environ.get("F3_LINK_BASE", "https://huggingface.co/black-forest-labs/flux-3-image-klein-base")
+
 MAX_SEED = 2**63 - 1
 DEFAULT_STEPS = int(os.environ.get("F3_STEPS", "16"))  # distilled default
 
@@ -375,6 +380,7 @@ RATIO_LIST = list(RATIOS.keys())
 CONFIG_JS = (
     "<script>window.F3_PRESETS = " + json.dumps(PRESETS) + ";"
     "window.F3_RATIOS = " + json.dumps(RATIO_LIST) + ";"
+    "window.F3_LINKS = " + json.dumps({"distilled": LINK_DISTILLED, "base": LINK_BASE}) + ";"
     "window.F3_PRESET_ORDER = " + json.dumps(list(PRESETS.keys())) + ";</script>"
 )
 
@@ -500,9 +506,15 @@ STYLE2 = """
 #f3-root .box.sel .h{border-color:var(--green);}
 
 /* title */
-#f3-root .titlebar{margin:0 0 16px;}
+#f3-root .titlebar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 16px;}
+#f3-root .titlebar .tb-text{min-width:0;}
 #f3-root .titlebar h1{margin:0 0 4px;font-size:22px;font-weight:650;color:var(--txt);letter-spacing:-.01em;}
 #f3-root .titlebar p{margin:0;color:var(--dim);font-size:13.5px;max-width:760px;line-height:1.5;}
+/* klein-style pill links */
+#f3-root .f3-links{display:flex;gap:8px;flex-wrap:wrap;}
+#f3-root .f3-links a,#f3-root .f3-links a:visited{text-decoration:none;font-size:12.5px;padding:6px 13px;border-radius:999px;
+  border:1px solid var(--line2);color:var(--txt);background:var(--panel);white-space:nowrap;transition:border-color .12s,color .12s;}
+#f3-root .f3-links a:hover{border-color:var(--violet);color:var(--violet);}
 
 /* reference image block (i2i) */
 #f3-root .refblock{padding:14px 18px;border-bottom:1px solid var(--line2);}
@@ -882,9 +894,15 @@ SCRIPT = r"""
   function build(root){
     const order=window.F3_PRESET_ORDER||Object.keys(window.F3_PRESETS||{});
     root.innerHTML=''
-    +'<div class="titlebar"><h1>🦊 FLUX.3 Layout Canvas</h1>'
-    + '<p>Draw a box for every element, describe it, and the step-distilled FLUX.3 model renders your layout. '
+    +'<div class="titlebar">'
+    + '<div class="tb-text"><h1>🦊 FLUX.3 Layout Canvas</h1>'
+    +   '<p>Draw a box for every element, describe it, and the step-distilled FLUX.3 model renders your layout. '
     +   'Upload a reference image to edit it with the same boxes.</p></div>'
+    + '<div class="f3-links">'
+    +   '<a href="'+((window.F3_LINKS||{}).distilled||'#')+'" target="_blank" rel="noopener">Distilled model ↗</a>'
+    +   '<a href="'+((window.F3_LINKS||{}).base||'#')+'" target="_blank" rel="noopener">Base model ↗</a>'
+    + '</div>'
+    +'</div>'
     // INPUT BAR — the type-here / drop-here controls, in their own distinct zone above the canvas
     +'<div class="inputbar">'
     +   '<div class="ib-ref">'