Update app.py

app.py

@@ -601,7 +601,38 @@ def generate(prompt, control_image, seed, random_seed, progress=gr.Progress(trac
 
 
 # =============================================================================
-# THEME — type-foundry / specimen-sheet look (ink + paper + vermillion)
+# 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 Fraunces):
+#   title.otf / title.ttf / title.woff2 / title.woff   (or under assets/)
+# =============================================================================
+def _load_title_font():
+    import base64
+    fmt  = {"otf": "opentype", "ttf": "truetype", "woff": "woff", "woff2": "woff2"}
+    mime = {"otf": "font/otf", "ttf": "font/ttf", "woff": "font/woff", "woff2": "font/woff2"}
+    candidates = [
+        "title.otf", "title.ttf", "title.woff2", "title.woff",
+        "assets/title.otf", "assets/title.ttf", "assets/title.woff2", "assets/title.woff",
+    ]
+    for path in candidates:
+        if os.path.exists(path):
+            ext = path.rsplit(".", 1)[-1].lower()
+            with open(path, "rb") as fh:
+                b64 = base64.b64encode(fh.read()).decode()
+            print(f"🔤 Title font: {path}")
+            face = (
+                "@font-face {"
+                "font-family: 'TitleFont';"
+                f"src: url(data:{mime[ext]};base64,{b64}) format('{fmt[ext]}');"
+                "font-weight: 100 900; font-style: normal; font-display: swap;}"
+            )
+            return face, "'TitleFont', 'Fraunces', Georgia, serif"
+    return "", "'Fraunces', Georgia, serif"
+
+TITLE_FONT_FACE, TITLE_FAMILY = _load_title_font()
+
+# =============================================================================
+# THEME — type-foundry / specimen-sheet look (paper + ink + vermillion)
 # =============================================================================
 THEME = gr.themes.Base(
     primary_hue=gr.themes.colors.red,
@@ -662,22 +693,22 @@ CSS = """
 }
 
 /* Hero */
-#hero { padding: 22px 0 26px; border-bottom: 1px solid #DAD3C4; margin-bottom: 26px; }
+#hero { padding: 10px 0 14px; border-bottom: 1px solid #DAD3C4; margin-bottom: 14px; }
 #hero .kicker {
     font-family: 'JetBrains Mono', monospace;
     text-transform: uppercase; letter-spacing: 0.34em;
-    font-size: 10px; color: #FF5128; margin: 0 0 16px;
+    font-size: 10px; color: #FF5128; margin: 0 0 8px;
 }
 #hero h1 {
-    font-family: 'Fraunces', Georgia, serif;
-    font-weight: 900; font-size: clamp(56px, 11vw, 140px);
-    line-height: 0.84; letter-spacing: -0.035em; margin: 0; color: #1A1815;
+    font-family: __TITLE_FAMILY__;
+    font-weight: 900; font-size: clamp(34px, 6vw, 64px);
+    line-height: 0.9; letter-spacing: -0.03em; margin: 0; color: #1A1815;
 }
 #hero h1 em { font-style: italic; color: #FF5128; }
 #hero .tag {
     font-family: 'JetBrains Mono', monospace;
-    font-size: 12px; line-height: 1.7; letter-spacing: 0.02em;
-    color: #6E6A60; margin-top: 18px; max-width: 680px;
+    font-size: 11px; line-height: 1.6; letter-spacing: 0.02em;
+    color: #6E6A60; margin-top: 10px; max-width: 680px;
 }
 #hero .tag b { color: #1A1815; font-weight: 600; }
 
@@ -701,14 +732,19 @@ CSS = """
     letter-spacing: 0.16em !important;
     font-family: 'JetBrains Mono', monospace !important;
     font-weight: 600 !important;
-    font-size: 13px !important;
+    font-size: 12px !important;
     border-radius: 3px !important;
-    min-height: 52px !important;
-    box-shadow: 0 10px 26px -12px rgba(255,81,40,0.7) !important;
+    min-height: 44px !important;
+    box-shadow: 0 8px 22px -12px rgba(255,81,40,0.7) !important;
     transition: transform .12s ease, box-shadow .2s ease !important;
 }
 .go-btn:hover { transform: translateY(-1px); }
 
+/* Compaction — keep everything on one screen */
+#hero ~ .row, .gradio-container .gap { gap: 10px !important; }
+.gradio-container .padded, .gradio-container .block { padding: 10px !important; }
+.eyebrow { margin: 0 0 0 !important; }
+
 /* Status line */
 .status-line { min-height: 22px; }
 .status-line p {
@@ -725,6 +761,9 @@ CSS = """
 footer { display: none !important; }
 """
 
+# 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(
         """
@@ -745,9 +784,9 @@ with gr.Blocks(title="Typotopia", theme=THEME, css=CSS) as demo:
             prompt = gr.Textbox(
                 label="Prompt",
                 placeholder="e.g. a bold geometric sans inspired by brutalist concrete signage",
-                lines=3,
+                lines=2,
             )
-            control_image = gr.Image(label="Control image (optional)", type="pil")
+            control_image = gr.Image(label="Control image (optional)", type="pil", height=140)
             with gr.Row():
                 seed = gr.Number(label="Seed", value=0, precision=0)
                 random_seed = gr.Checkbox(label="Random seed", value=True)
@@ -755,9 +794,9 @@ with gr.Blocks(title="Typotopia", theme=THEME, css=CSS) as demo:
         with gr.Column(scale=1):
             gr.HTML("<p class='eyebrow'>02 — Specimen</p>")
             status = gr.HTML(elem_classes=["status-line"])
-            otf_file = gr.File(label="Download .otf")
-            preview = gr.Image(label="Preview", type="pil")
-            gallery = gr.Gallery(label="Generated grids", columns=3, height="auto")
+            otf_file = gr.File(label="Download .otf", height=80)
+            preview = gr.Image(label="Preview", type="pil", height=160)
+            gallery = gr.Gallery(label="Generated grids", columns=3, height=150, object_fit="contain")
 
     btn.click(
         generate,