Update app.py

app.py

@@ -2,6 +2,9 @@
 import os, io, re, random, string, tempfile
 import spaces
 import gradio as gr
+from gradio import Server
+from gradio.data_classes import FileData
+from fastapi.responses import HTMLResponse
 from PIL import Image
 
 # --- CONSTANTS ---
@@ -546,7 +549,7 @@ def run_pipeline(enhanced, input_img, seed):
 
 
 # =============================================================================
-# ORCHESTRATOR + GRADIO UI
+# PREVIEW RENDER (CPU)
 # =============================================================================
 def _render_preview(otf_path, font_name):
     try:
@@ -574,45 +577,10 @@ def _render_preview(otf_path, font_name):
         return None
 
 
-def generate(prompt, control_image, progress=gr.Progress(track_tqdm=True)):
-    seed = random.randint(0, 2**32 - 1)
-
-    input_img = None
-    prefixes = ["Vex","Aur","Kyr","Lux","Nox","Arc","Sol","Vel","Fen","Zor","Cal","Dex","Ora","Pax","Rux"]
-    suffixes = ["ra","is","on","us","ia","el","an","ix","em","or","al","en","ax","um","yr"]
-    font_name = random.choice(prefixes) + random.choice(suffixes)
-
-    if control_image is not None:
-        input_img = control_image.convert("RGB").resize((1536, 1536))
-        enhanced = DEFAULT_IMG_PROMPT
-    else:
-        if not (prompt and prompt.strip()):
-            raise gr.Error("Provide a prompt OR a control image.")
-        enhanced = prompt  # raw user input, no refinement
-
-    # --- GPU: 3 FLUX passes ---
-    img1, img2, img3 = run_pipeline(enhanced, input_img, seed)
-
-    if not font_name:
-        font_name = "Font" + "".join(random.choices(string.ascii_uppercase, k=3))
-
-    # --- CPU: potrace vectorization + OTF build ---
-    otf_bytes = build_otf([img1, img2, img3], font_name)
-
-    out_dir = tempfile.mkdtemp()
-    otf_path = os.path.join(out_dir, f"{font_name}.otf")
-    with open(otf_path, "wb") as f:
-        f.write(otf_bytes)
-
-    gallery = [(img1, "Uppercase"), (img2, "Lowercase"), (img3, "Punctuation")]
-    preview = _render_preview(otf_path, font_name)
-    return gallery, preview, otf_path
-
-
 # =============================================================================
 # OPTIONAL CUSTOM TITLE FONT
-# Drop your own font in the repo as one of these names and the hero title will
-# use it (otherwise it falls back to the Helvetica/Archivo grotesque stack):
+# Drop your own font in the repo as one of these names and the hero wordmark
+# will use it (otherwise it falls back to the Helvetica/Archivo stack):
 #   title.otf / title.ttf / title.woff2 / title.woff   (or under assets/)
 # =============================================================================
 def _load_title_font():
@@ -640,260 +608,389 @@ def _load_title_font():
 
 TITLE_FONT_FACE, TITLE_FAMILY = _load_title_font()
 
+
 # =============================================================================
-# THEME — International Typographic Style (light grey / black / violet)
+# BACKEND SERVER (gradio.Server == FastAPI + Gradio's queue / ZeroGPU engine)
 # =============================================================================
-THEME = gr.themes.Base(
-    primary_hue=gr.themes.colors.violet,
-    neutral_hue=gr.themes.colors.gray,
-    radius_size=gr.themes.sizes.radius_none,
-    font=["Helvetica Neue", "Helvetica", gr.themes.GoogleFont("Archivo"), "Arial", "sans-serif"],
-    font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"],
-).set(
-    body_background_fill="#ECECEC",
-    body_background_fill_dark="#ECECEC",
-    body_text_color="#000000",
-    body_text_color_dark="#000000",
-    body_text_color_subdued="#6B6B6B",
-    body_text_color_subdued_dark="#6B6B6B",
-    background_fill_primary="#FFFFFF",
-    background_fill_primary_dark="#FFFFFF",
-    background_fill_secondary="#F4F4F4",
-    background_fill_secondary_dark="#F4F4F4",
-    block_background_fill="#FFFFFF",
-    block_background_fill_dark="#FFFFFF",
-    block_border_color="#D8D8D8",
-    block_border_color_dark="#D8D8D8",
-    block_border_width="1px",
-    block_label_text_color="#000000",
-    block_label_text_color_dark="#000000",
-    block_label_background_fill="#FFFFFF",
-    block_label_background_fill_dark="#FFFFFF",
-    block_title_text_color="#000000",
-    block_title_text_color_dark="#000000",
-    block_radius="0px",
-    block_shadow="none",
-    block_shadow_dark="none",
-    input_background_fill="#FFFFFF",
-    input_background_fill_dark="#FFFFFF",
-    input_border_color="#000000",
-    input_border_color_dark="#000000",
-    input_border_color_focus="#5F2EEA",
-    input_border_color_focus_dark="#5F2EEA",
-    input_shadow="none",
-    input_shadow_dark="none",
-    input_shadow_focus="none",
-    input_shadow_focus_dark="none",
-    shadow_drop="none",
-    shadow_drop_lg="none",
-    button_primary_background_fill="#5F2EEA",
-    button_primary_background_fill_dark="#5F2EEA",
-    button_primary_background_fill_hover="#000000",
-    button_primary_background_fill_hover_dark="#000000",
-    button_primary_text_color="#FFFFFF",
-    button_primary_text_color_dark="#FFFFFF",
-    button_primary_border_color="#5F2EEA",
-    button_primary_border_color_dark="#5F2EEA",
-    button_secondary_background_fill="#FFFFFF",
-    button_secondary_background_fill_dark="#FFFFFF",
-    button_secondary_text_color="#000000",
-    button_secondary_text_color_dark="#000000",
-    button_secondary_border_color="#000000",
-    button_secondary_border_color_dark="#000000",
-)
+app = Server()
+
+
+@app.api(name="generate", concurrency_limit=1)
+def generate(prompt: str = "", control_image: FileData = None):
+    """
+    Returns a positional tuple -> arrives on the JS client as result.data:
+        data[0] uppercase grid   (FileData .url)
+        data[1] lowercase grid   (FileData .url)
+        data[2] punctuation grid (FileData .url)
+        data[3] specimen preview (FileData .url)
+        data[4] .otf file         (FileData .url)
+        data[5] font name         (str)
+    """
+    seed = random.randint(0, 2**32 - 1)
 
-CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
-
-:root {
-    --ink: #000000;
-    --paper: #FFFFFF;
-    --bg: #ECECEC;
-    --accent: #5F2EEA;
-    --grey: #6B6B6B;
-    --hairline: #D8D8D8;
-    --grotesk: 'Helvetica Neue', Helvetica, 'Archivo', Arial, sans-serif;
-    --mono: 'JetBrains Mono', ui-monospace, monospace;
-}
+    input_img = None
+    prefixes = ["Vex","Aur","Kyr","Lux","Nox","Arc","Sol","Vel","Fen","Zor","Cal","Dex","Ora","Pax","Rux"]
+    suffixes = ["ra","is","on","us","ia","el","an","ix","em","or","al","en","ax","um","yr"]
+    font_name = random.choice(prefixes) + random.choice(suffixes)
 
-.gradio-container {
-    max-width: 100% !important;
-    width: 100% !important;
-    margin: 0 !important;
-    padding-left: clamp(20px, 5vw, 72px) !important;
-    padding-right: clamp(20px, 5vw, 72px) !important;
-    background: var(--bg) !important;
-}
+    if control_image is not None:
+        input_img = Image.open(control_image["path"]).convert("RGB").resize((1536, 1536))
+        enhanced = DEFAULT_IMG_PROMPT
+    else:
+        if not (prompt and prompt.strip()):
+            raise gr.Error("Provide a prompt OR a control image.")
+        enhanced = prompt  # raw user input, no refinement
 
-/* Kill every radius and shadow — flat ink on paper */
-.gradio-container *,
-.gradio-container *::before,
-.gradio-container *::after {
-    border-radius: 0 !important;
-    box-shadow: none !important;
-    text-shadow: none !important;
-}
+    # --- GPU: 3 FLUX passes ---
+    img1, img2, img3 = run_pipeline(enhanced, input_img, seed)
 
-/* =========================================================================
-   MASTHEAD — wordmark left, tabular meta right, heavy rule below
-   ========================================================================= */
-#hero { padding: 22px 0 0; margin-bottom: 18px; }
-#hero .masthead {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    gap: 32px;
-    flex-wrap: wrap;
-    padding-bottom: 8px;
-}
-#hero h1 {
-    font-family: __TITLE_FAMILY__;
-    font-weight: 700;
-    font-size: clamp(44px, 8.5vw, 108px);
-    line-height: 0.82;
-    letter-spacing: -0.05em;
-    margin: 0;
-    color: var(--ink);
-}
-#hero h1 .stop { color: var(--accent); }
-#hero .meta {
-    font-family: var(--grotesk);
-    font-size: 11px;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.14em;
-    line-height: 1;
-    color: var(--ink);
-    min-width: 280px;
-    flex: 0 1 340px;
-}
-#hero .meta .row {
-    display: flex;
-    justify-content: space-between;
-    gap: 24px;
-    padding: 7px 0;
-    border-top: 1px solid var(--ink);
-}
-#hero .meta .row:first-child { border-top: none; }
-#hero .meta .k { color: var(--grey); }
-#hero .meta .v { text-align: right; }
-
-/* Component labels */
-.gradio-container label span,
-.gradio-container .gr-check-radio label span {
-    font-family: var(--grotesk) !important;
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
-    font-size: 10px !important;
-    font-weight: 500 !important;
-    color: var(--ink) !important;
-}
+    if not font_name:
+        font_name = "Font" + "".join(random.choices(string.ascii_uppercase, k=3))
 
-/* Inputs: ink rules on paper */
-.gradio-container textarea,
-.gradio-container input[type='text'],
-.gradio-container input[type='number'] {
-    font-family: var(--grotesk) !important;
-    font-size: 14px !important;
-    border: 1px solid var(--ink) !important;
-    background: var(--paper) !important;
-}
-.gradio-container textarea:focus,
-.gradio-container input:focus {
-    border-color: var(--accent) !important;
-    outline: 2px solid var(--accent) !important;
-    outline-offset: -1px;
-}
+    # --- CPU: potrace vectorization + OTF build ---
+    otf_bytes = build_otf([img1, img2, img3], font_name)
 
-/* Primary CTA — violet plate, uppercase, no ornament */
-.go-btn {
-    text-transform: uppercase !important;
-    letter-spacing: 0.22em !important;
-    font-family: var(--grotesk) !important;
-    font-weight: 700 !important;
-    font-size: 12px !important;
-    min-height: 48px !important;
-    border: none !important;
-    transition: background-color .12s ease !important;
-}
-.go-btn:hover { background: var(--ink) !important; }
-.go-btn:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 2px; }
-
-/* Compaction — single-screen fit */
-#hero ~ .row, .gradio-container .gap { gap: 12px !important; }
-.gradio-container .padded, .gradio-container .block { padding: 10px !important; }
-.gradio-container .block { border-color: var(--hairline) !important; }
-
-/* Control image dropzone — icon only, no instruction text */
-#control-image .wrap {
-    font-size: 0 !important;
-    line-height: 0 !important;
-    gap: 0 !important;
+    out_dir = tempfile.mkdtemp()
+    otf_path = os.path.join(out_dir, f"{font_name}.otf")
+    with open(otf_path, "wb") as f:
+        f.write(otf_bytes)
+
+    uc_path = os.path.join(out_dir, "uppercase.png"); img1.save(uc_path)
+    lc_path = os.path.join(out_dir, "lowercase.png"); img2.save(lc_path)
+    pn_path = os.path.join(out_dir, "punctuation.png"); img3.save(pn_path)
+
+    preview = _render_preview(otf_path, font_name)
+    prev_path = os.path.join(out_dir, "preview.png")
+    if preview is not None:
+        preview.save(prev_path)
+    else:
+        Image.new("RGB", (1200, 300), "white").save(prev_path)
+
+    return (
+        FileData(path=uc_path),
+        FileData(path=lc_path),
+        FileData(path=pn_path),
+        FileData(path=prev_path),
+        FileData(path=otf_path),
+        font_name,
+    )
+
+
+# =============================================================================
+# FRONTEND — React (CDN + in-browser Babel, no build step), served inline.
+# Talks to the backend through the Gradio JS client so requests go through the
+# queue and ZeroGPU auth headers are forwarded (a raw fetch() would break it).
+# =============================================================================
+FRONTEND_HTML = r"""<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Typotopia</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+<style>
+/*__TITLE_FONT_FACE__*/
+:root{
+  --ink:#000; --paper:#fff; --bg:#ECECEC; --accent:#5F2EEA;
+  --grey:#6B6B6B; --hairline:#D8D8D8;
+  --grotesk:'Helvetica Neue',Helvetica,'Archivo',Arial,sans-serif;
+  --mono:'JetBrains Mono',ui-monospace,monospace;
+  --title:__TITLE_FAMILY__;
 }
-#control-image .wrap .or { display: none !important; }
-#control-image .wrap svg { width: 28px !important; height: 28px !important; }
-
-/* Compact output blocks (download + preview) */
-#otf-file { max-height: 84px !important; overflow: hidden; }
-#otf-file .unpadded_box, #otf-file .empty { min-height: 56px !important; height: 56px !important; }
-#preview-img .unpadded_box, #preview-img .empty { min-height: 96px !important; }
-
-/* Progress — single violet gauge inside the grids block */
-.gradio-container .progress-bar { background: var(--accent) !important; }
-#grids { min-height: 240px; }
-#grids .progress-text, #grids .progress-level-inner, #grids .meta-text, #grids .meta-text-center {
-    font-family: var(--mono) !important;
-    font-size: 12px !important;
-    color: var(--ink) !important;
+*{box-sizing:border-box;margin:0;padding:0;}
+html,body{background:var(--bg);color:var(--ink);font-family:var(--grotesk);-webkit-font-smoothing:antialiased;}
+::selection{background:var(--accent);color:#fff;}
+a{color:inherit;}
+.wrap{max-width:1500px;margin:0 auto;padding:clamp(20px,4vw,56px) clamp(20px,5vw,72px) 80px;}
+
+/* ---- masthead ---- */
+.masthead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
+  padding-bottom:14px;border-bottom:2px solid var(--ink);}
+.wordmark{font-family:var(--title);font-weight:800;line-height:.8;letter-spacing:-.05em;
+  font-size:clamp(48px,9vw,124px);}
+.wordmark .stop{color:var(--accent);}
+.meta{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
+  min-width:300px;flex:0 1 360px;}
+.meta .row{display:flex;justify-content:space-between;gap:24px;padding:7px 0;border-top:1px solid var(--ink);}
+.meta .row:first-child{border-top:none;}
+.meta .k{color:var(--grey);}
+.meta .v{text-align:right;}
+
+/* ---- working grid ---- */
+.work{display:grid;grid-template-columns:0.92fr 1.18fr;gap:0;margin-top:28px;border:1px solid var(--ink);}
+.col{padding:clamp(18px,2.4vw,34px);}
+.col.left{border-right:1px solid var(--ink);background:var(--paper);}
+.col.right{background:var(--paper);}
+@media(max-width:880px){.work{grid-template-columns:1fr;}.col.left{border-right:none;border-bottom:1px solid var(--ink);}}
+
+.label{font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;
+  letter-spacing:.16em;color:var(--ink);display:block;margin-bottom:10px;}
+.sub{color:var(--grey);}
+
+textarea{width:100%;min-height:120px;resize:vertical;border:1px solid var(--ink);background:var(--paper);
+  font-family:var(--grotesk);font-size:15px;line-height:1.45;padding:14px;outline:none;color:var(--ink);}
+textarea:focus{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}
+textarea::placeholder{color:var(--grey);}
+
+.dz{margin-top:22px;border:1px dashed var(--ink);background:var(--paper);min-height:120px;
+  display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;
+  transition:border-color .12s,background .12s;}
+.dz:hover,.dz.over{border-color:var(--accent);background:#FAF8FF;}
+.dz .dzhint{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);}
+.dz img{max-width:100%;max-height:200px;display:block;}
+.dz .clear{position:absolute;top:6px;right:6px;width:26px;height:26px;border:1px solid var(--ink);
+  background:var(--paper);font-family:var(--mono);font-size:13px;line-height:1;cursor:pointer;
+  display:flex;align-items:center;justify-content:center;}
+.dz .clear:hover{background:var(--ink);color:var(--paper);}
+
+.go{margin-top:24px;width:100%;min-height:54px;border:none;background:var(--accent);color:#fff;
+  font-family:var(--grotesk);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.22em;
+  cursor:pointer;transition:background .12s;}
+.go:hover{background:var(--ink);}
+.go:disabled{background:var(--grey);cursor:not-allowed;}
+
+.err{margin-top:14px;font-family:var(--mono);font-size:12px;color:#B00020;letter-spacing:.04em;}
+
+/* ---- output ---- */
+.placeholder{height:100%;min-height:280px;display:flex;align-items:center;justify-content:center;
+  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--hairline);}
+
+.specimen{border:1px solid var(--ink);background:var(--paper);overflow:hidden;}
+.specimen .bar{display:flex;justify-content:space-between;align-items:baseline;
+  padding:10px 14px;border-bottom:1px solid var(--ink);}
+.specimen .name{font-family:var(--title);font-weight:800;font-size:22px;letter-spacing:-.02em;}
+.specimen .tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);}
+.specimen .canvas{padding:18px 14px;display:flex;align-items:center;justify-content:center;background:var(--paper);}
+.specimen .canvas img{width:100%;height:auto;display:block;}
+
+.dl{margin-top:18px;display:flex;align-items:stretch;border:1px solid var(--ink);background:var(--paper);}
+.dl .info{flex:1;padding:12px 16px;}
+.dl .info .fn{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.02em;}
+.dl .info .ft{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:3px;}
+.dl a.btn{display:flex;align-items:center;padding:0 26px;background:var(--ink);color:#fff;
+  text-decoration:none;font-family:var(--grotesk);font-weight:700;font-size:12px;
+  text-transform:uppercase;letter-spacing:.18em;transition:background .12s;}
+.dl a.btn:hover{background:var(--accent);}
+
+.grids{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
+.gridcard{border:1px solid var(--ink);background:var(--paper);}
+.gridcard .gl{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
+  padding:7px 9px;border-bottom:1px solid var(--ink);color:var(--grey);}
+.gridcard img{width:100%;height:auto;display:block;}
+@media(max-width:540px){.grids{grid-template-columns:1fr;}}
+
+/* ---- loading ---- */
+.loading{height:100%;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;}
+.scan{width:64px;height:64px;border:2px solid var(--ink);position:relative;overflow:hidden;}
+.scan::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);
+  animation:scan 1.1s ease-in-out infinite;}
+@keyframes scan{0%{top:0}50%{top:calc(100% - 2px)}100%{top:0}}
+.lmsg{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
+.lsub{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--grey);}
+
+.foot{margin-top:40px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
+  text-transform:uppercase;color:var(--grey);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
+@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
+</style>
+</head>
+<body>
+<div id="root"></div>
+
+<script type="text/babel" data-type="module" data-presets="react">
+import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+const { useState, useRef, useEffect, useCallback } = React;
+
+const STAGES = [
+  "Generating uppercase",
+  "Generating lowercase",
+  "Generating punctuation",
+  "Vectorizing contours",
+  "Computing bubble kerning",
+  "Assembling OpenType",
+];
+
+let clientPromise = null;
+function getClient(){
+  if(!clientPromise) clientPromise = Client.connect(window.location.origin);
+  return clientPromise;
 }
 
-@media (prefers-reduced-motion: reduce) {
-    .gradio-container * { transition: none !important; animation: none !important; }
+function App(){
+  const [prompt,setPrompt]   = useState("");
+  const [file,setFile]       = useState(null);
+  const [fileUrl,setFileUrl] = useState(null);
+  const [over,setOver]       = useState(false);
+  const [loading,setLoading] = useState(false);
+  const [stage,setStage]     = useState(0);
+  const [err,setErr]         = useState("");
+  const [res,setRes]         = useState(null);
+  const inputRef = useRef(null);
+
+  useEffect(()=>{
+    if(!loading) return;
+    setStage(0);
+    const id = setInterval(()=>setStage(s=>Math.min(s+1, STAGES.length-1)), 12000);
+    return ()=>clearInterval(id);
+  },[loading]);
+
+  const pickFile = (f)=>{
+    if(!f) return;
+    setFile(f);
+    if(fileUrl) URL.revokeObjectURL(fileUrl);
+    setFileUrl(URL.createObjectURL(f));
+  };
+  const clearFile = (e)=>{
+    e.stopPropagation();
+    setFile(null);
+    if(fileUrl) URL.revokeObjectURL(fileUrl);
+    setFileUrl(null);
+    if(inputRef.current) inputRef.current.value = "";
+  };
+
+  const onDrop = useCallback((e)=>{
+    e.preventDefault(); setOver(false);
+    const f = e.dataTransfer.files && e.dataTransfer.files[0];
+    if(f && f.type.startsWith("image/")) pickFile(f);
+  },[fileUrl]);
+
+  const run = async ()=>{
+    setErr("");
+    if(!file && !prompt.trim()){
+      setErr("Provide a prompt or a control image.");
+      return;
+    }
+    setLoading(true); setRes(null);
+    try{
+      const client = await getClient();
+      const payload = { prompt: prompt };
+      if(file) payload.control_image = handle_file(file);
+      const result = await client.predict("/generate", payload);
+      const d = result.data;
+      setRes({
+        uc:      d[0].url,
+        lc:      d[1].url,
+        punc:    d[2].url,
+        preview: d[3].url,
+        otf:     d[4].url,
+        name:    d[5],
+      });
+    }catch(ex){
+      console.error(ex);
+      const msg = (ex && (ex.message || (ex.detail && (ex.detail.message||ex.detail)))) || "Generation failed.";
+      setErr(String(msg));
+    }finally{
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="wrap">
+      <header className="masthead">
+        <div className="wordmark">Typotopia<span className="stop">.</span></div>
+        <div className="meta">
+          <div className="row"><span className="k">Input</span><span className="v">Prompt / Control image</span></div>
+          <div className="row"><span className="k">Model</span><span className="v">FLUX.2-klein · 3× LoRA</span></div>
+          <div className="row"><span className="k">Output</span><span className="v">OpenType · GPOS kerning</span></div>
+        </div>
+      </header>
+
+      <div className="work">
+        <section className="col left">
+          <label className="label">Prompt <span className="sub">/ describe the typeface</span></label>
+          <textarea
+            value={prompt}
+            onChange={e=>setPrompt(e.target.value)}
+            placeholder="e.g. a bold geometric sans inspired by brutalist concrete signage"
+          />
+
+          <label className="label" style={{marginTop:22}}>Control image <span className="sub">/ optional</span></label>
+          <div
+            className={"dz"+(over?" over":"")}
+            onClick={()=>inputRef.current && inputRef.current.click()}
+            onDragOver={e=>{e.preventDefault();setOver(true);}}
+            onDragLeave={()=>setOver(false)}
+            onDrop={onDrop}
+          >
+            {fileUrl
+              ? (<React.Fragment><img src={fileUrl} alt="control" /><button className="clear" onClick={clearFile} title="Remove">×</button></React.Fragment>)
+              : (<span className="dzhint">Drop image · or click</span>)}
+            <input ref={inputRef} type="file" accept="image/*" hidden
+                   onChange={e=>pickFile(e.target.files && e.target.files[0])} />
+          </div>
+
+          <button className="go" onClick={run} disabled={loading}>
+            {loading ? "Generating…" : "Generate font"}
+          </button>
+          {err && <div className="err">{err}</div>}
+        </section>
+
+        <section className="col right">
+          {loading ? (
+            <div className="loading">
+              <div className="scan"></div>
+              <div className="lmsg">{STAGES[stage]}…</div>
+              <div className="lsub">This takes ~1–2 min on ZeroGPU</div>
+            </div>
+          ) : res ? (
+            <React.Fragment>
+              <div className="specimen">
+                <div className="bar">
+                  <span className="name">{res.name}</span>
+                  <span className="tag">Specimen · Regular</span>
+                </div>
+                <div className="canvas"><img src={res.preview} alt="specimen" /></div>
+              </div>
+
+              <div className="dl">
+                <div className="info">
+                  <div className="fn">{res.name}.otf</div>
+                  <div className="ft">OpenType · CFF · GPOS</div>
+                </div>
+                <a className="btn" href={res.otf} download={res.name + ".otf"}>Download</a>
+              </div>
+
+              <div className="grids">
+                <div className="gridcard"><div className="gl">Uppercase</div><img src={res.uc} alt="uppercase" /></div>
+                <div className="gridcard"><div className="gl">Lowercase</div><img src={res.lc} alt="lowercase" /></div>
+                <div className="gridcard"><div className="gl">Punctuation</div><img src={res.punc} alt="punctuation" /></div>
+              </div>
+            </React.Fragment>
+          ) : (
+            <div className="placeholder">Output appears here</div>
+          )}
+        </section>
+      </div>
+
+      <div className="foot">
+        <span>Typotopia — generative type foundry</span>
+        <span>FLUX.2-klein · fontTools · potrace</span>
+      </div>
+    </div>
+  );
 }
 
-footer { display: none !important; }
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);
+</script>
+</body>
+</html>
 """
 
-# Inject the chosen title font-family + (optional) embedded @font-face.
-CSS = CSS.replace("__TITLE_FAMILY__", TITLE_FAMILY) + TITLE_FONT_FACE
-
-with gr.Blocks(title="Typotopia", theme=THEME, css=CSS) as demo:
-    gr.HTML(
-        """
-        <div id="hero">
-          <div class="masthead">
-            <h1>Typotopia<span class="stop">.</span></h1>
-            <div class="meta">
-              <div class="row"><span class="k">Input</span><span class="v">Prompt / Control image</span></div>
-              <div class="row"><span class="k">Model</span><span class="v">FLUX.2-klein + LoRA</span></div>
-              <div class="row"><span class="k">Output</span><span class="v">OpenType · GPOS kerning</span></div>
-            </div>
-          </div>
-        </div>
-        """
-    )
-    with gr.Row(equal_height=False):
-        with gr.Column(scale=1):
-            prompt = gr.Textbox(
-                label="Prompt",
-                placeholder="e.g. a bold geometric sans inspired by brutalist concrete signage",
-                lines=2,
-            )
-            control_image = gr.Image(label="Control image (optional)", type="pil", height=140, elem_id="control-image")
-            btn = gr.Button("Generate font", variant="primary", elem_classes=["go-btn"])
-        with gr.Column(scale=1):
-            otf_file = gr.File(label="Download .otf", height=56, elem_id="otf-file")
-            preview = gr.Image(label="Preview", type="pil", height=150, elem_id="preview-img")
-            gallery = gr.Gallery(label="Generated grids", columns=3, height=150, object_fit="contain", elem_id="grids")
-
-    btn.click(
-        generate,
-        inputs=[prompt, control_image],
-        outputs=[gallery, preview, otf_file],
-        show_progress="full",
-        show_progress_on=gallery,
-    )
+FRONTEND_HTML = (
+    FRONTEND_HTML
+    .replace("__TITLE_FAMILY__", TITLE_FAMILY)
+    .replace("/*__TITLE_FONT_FACE__*/", TITLE_FONT_FACE)
+)
+
+
+@app.get("/", response_class=HTMLResponse)
+async def homepage():
+    return FRONTEND_HTML
+
 
-if __name__ == "__main__":
-    demo.queue().launch()
-    
+app.launch(show_error=True)