Update app.py

app.py

@@ -4,7 +4,7 @@ import spaces
 import gradio as gr
 from PIL import Image
 
-# --- CONSTANTES ---
+# --- CONSTANTS ---
 POTRACE_BIN = 'potrace'
 UPM = 1000
 CROP = 8
@@ -14,19 +14,19 @@ PRECISION = 1
 HF_TOKEN = os.environ.get("HF_TOKEN", "")
 DEFAULT_IMG_PROMPT = "Design a custom typeface that takes direct inspiration on the attached control image. The font should faithfully replicate the unique style of the reference."
 
-# --- MAPPINGS 6x6 ---
+# --- 6x6 MAPPINGS ---
 MAP_UC = [['A','B','C','D','E','F'],['G','H','I','J','K','L'],['M','N','O','P','Q','R'],['S','T','U','V','W','X'],['Y','Z','Æ','Œ','Ø','ß'],['Ç','.',',',';','?','!']]
 MAP_LC = [['a','b','c','d','e','f'],['g','h','i','j','k','l'],['m','n','o','p','q','r'],['s','t','u','v','w','x'],['y','z','æ','œ','ø','Ð'],['ç',':',"'",'"','«','<']]
 MAP_PUNC = [['1','2','3','4','5','6'],['7','8','9','0','#','%'],['(','[','{','$','€','£'],['&','@','_','+','-','='],['*','/','^','°','→','—'],['`','´','ˆ','¨','˜','•']]
 
-# --- RÉFÉRENCES DE BASELINE PAR GRILLE ---
+# --- PER-GRID BASELINE REFERENCES ---
 BASELINE_REFS = {
     0: ['H', 'I', 'E', 'A', 'B', 'D', 'F', 'L', 'M', 'N', 'P', 'R', 'T', 'U', 'V', 'X', 'Y', 'Z'],
     1: ['n', 'm', 'u', 'x', 'h', 'i', 'l', 'k', 'r', 'v', 'w', 'z', 'a', 'e', 'o'],
     2: ['1', '0', '2', '4', '7', '8', '9', '#', '%', '$', '£', '&', '@', '+', '='],
 }
 
-# --- TRAITEMENT SVG ---
+# --- SVG PROCESSING ---
 def simplify_svg_path(d):
     from fontTools.pens.recordingPen import RecordingPen
     from fontTools.pens.svgPathPen import SVGPathPen
@@ -68,7 +68,7 @@ def get_char_path_rdp(pil_img, upscale=2):
     paths = re.findall(r'd="([^"]+)"', content)
     return ' '.join(simplify_svg_path(p) for p in paths).strip() if paths else ""
 
-# --- CONSTRUCTION OTF ---
+# --- OTF CONSTRUCTION ---
 MIRROR_MAP = {')': '(', ']': '[', '}': '{'}
 
 ACCENT_MAP = {
@@ -125,7 +125,7 @@ def build_otf(images, font_name):
                 if bp.bounds:
                     glyph_data[char] = {'d': d, 'b': bp.bounds, 'scale': scale, 'grid': idx}
 
-    # Baseline calculée
+    # Computed baseline
     baseline_per_grid = {}
     for grid_idx in range(len(all_maps)):
         chosen_ref = None
@@ -137,9 +137,9 @@ def build_otf(images, font_name):
                 break
         if chosen_ref is None:
             baseline_per_grid[grid_idx] = baseline_per_grid.get(0, 0)
-            print(f"⚠️  Grille {grid_idx} : aucun caractère de référence trouvé, fallback = {baseline_per_grid[grid_idx]:.1f}")
+            print(f"⚠️  Grid {grid_idx}: no reference glyph found, fallback = {baseline_per_grid[grid_idx]:.1f}")
         else:
-            print(f"📐 Grille {grid_idx} : baseline = {baseline_per_grid[grid_idx]:.1f} (réf '{chosen_ref}')")
+            print(f"📐 Grid {grid_idx}: baseline = {baseline_per_grid[grid_idx]:.1f} (ref '{chosen_ref}')")
 
     def get_baseline(char):
         if char in glyph_data:
@@ -190,7 +190,7 @@ def build_otf(images, font_name):
         cmap[ord(char)] = glyph_name
         metrics[glyph_name] = (width, 0)
 
-    # Miroirs
+    # Mirrors
     for dst_char, src_char in MIRROR_MAP.items():
         if src_char not in font_recordings:
             continue
@@ -209,7 +209,7 @@ def build_otf(images, font_name):
             cx, cy = font_centers[src_char]
             font_centers[dst_char] = (w - cx, cy)
 
-    # Accentués
+    # Accented
     for dst_char, (base_char, accent_char) in ACCENT_MAP.items():
         if base_char not in font_recordings or accent_char not in font_recordings:
             continue
@@ -235,7 +235,7 @@ def build_otf(images, font_name):
             ax, ay = font_centers[accent_char]
             font_centers[dst_char] = (bx + dx, by + dy)
 
-    # Miroirs bracket
+    # Bracket mirrors
     MIRROR_PAIRS = {'(': ')', '[': ']', '{': '}'}
     for src_char, dst_char in MIRROR_PAIRS.items():
         if src_char not in glyph_data:
@@ -258,7 +258,7 @@ def build_otf(images, font_name):
                 cx, cy = font_centers[src_char]
                 font_centers[dst_char] = (width - cx, cy)
 
-    # Alias accents combinants
+    # Combining-accent aliases
     ACCENT_ALIASES = {
         '`': [0x0060, 0x0300], '´': [0x00B4, 0x0301],
         'ˆ': [0x02C6, 0x0302], '¨': [0x00A8, 0x0308], '˜': [0x02DC, 0x0303],
@@ -305,7 +305,7 @@ def build_otf(images, font_name):
     fb.setupPost(italicAngle=0, underlinePosition=REF["ulP"], underlineThickness=REF["ulT"])
 
     # -------------------------------------------------------------------------
-    # BUBBLE KERNING — vectoriel pur, écrit en GPOS (pas de limite de paires)
+    # BUBBLE KERNING — pure vector, written to GPOS (no pair-count limit)
     # -------------------------------------------------------------------------
     try:
         import numpy as np
@@ -313,11 +313,11 @@ def build_otf(images, font_name):
         from fontTools.ttLib import newTable
         from fontTools.ttLib.tables import otTables
 
-        # --- Paramètres ---
-        BUBBLE_RADIUS  = 10   # rayon de la bulle en UPM, doit être < SIDEBEARING (20)
-        N_SAMPLES      = 300  # points échantillonnés par contour
-        KERN_THRESHOLD = -2   # paires dont kern ≥ seuil ignorées (bruit sub-UPM)
-        KERN_CAP       = -280 # plancher anti-collision
+        # --- Parameters ---
+        BUBBLE_RADIUS  = 10   # bubble radius in UPM, must be < SIDEBEARING (20)
+        N_SAMPLES      = 300  # sampled points per contour
+        KERN_THRESHOLD = -2   # pairs with kern >= threshold are skipped (sub-UPM noise)
+        KERN_CAP       = -280 # anti-collision floor
 
         def sample_contour(recording, n=N_SAMPLES):
             pts = []
@@ -362,7 +362,7 @@ def build_otf(images, font_name):
                 arr = arr[idx]
             return arr
 
-        # Échantillonnage
+        # Sampling
         chars_available = [c for c in font_recordings if len(c) == 1]
         contour_points  = {}
         for char in chars_available:
@@ -370,11 +370,11 @@ def build_otf(images, font_name):
             if pts is not None and len(pts) >= 2:
                 contour_points[char] = pts
 
-        print(f"📐 Contours échantillonnés : {len(contour_points)} glyphes")
+        print(f"📐 Contours sampled: {len(contour_points)} glyphs")
 
-        # Calcul all-to-all
+        # All-to-all computation
         diameter   = BUBBLE_RADIUS * 2.0
-        gpos_pairs = {}   # (glyph_name_L, glyph_name_R) → kern_upm
+        gpos_pairs = {}   # (glyph_name_L, glyph_name_R) -> kern_upm
 
         for l_char in contour_points:
             pts_L = contour_points[l_char]
@@ -394,12 +394,12 @@ def build_otf(images, font_name):
                 kern_upm = int(round(diameter - min_dist))
 
                 if l_char in ('A','V','W') and r_char in ('A','V','W'):
-                    print(f"  {l_char}→{r_char} : min_dist={min_dist:.1f}  kern={kern_upm}")
+                    print(f"  {l_char}->{r_char} : min_dist={min_dist:.1f}  kern={kern_upm}")
 
                 if kern_upm < KERN_THRESHOLD:
                     gpos_pairs[(lg, rg)] = max(kern_upm, KERN_CAP)
 
-        print(f"✅ Bubble Kerning vectoriel : {len(gpos_pairs)} paires")
+        print(f"✅ Bubble Kerning (vector): {len(gpos_pairs)} pairs")
 
         if gpos_pairs:
             val0 = buildValue({})
@@ -460,14 +460,14 @@ def build_otf(images, font_name):
             gpos                = newTable("GPOS")
             gpos.table          = gpos_table
             fb.font["GPOS"]     = gpos
-            print(f"✅ GPOS écrit : {len(gpos_pairs)} paires kern")
+            print(f"✅ GPOS written: {len(gpos_pairs)} kern pairs")
 
     except Exception as e:
         print(f"⚠️ Bubble Kerning failed: {e}")
         import traceback
         traceback.print_exc()
 
-    # --- Sauvegarde finale en OTF ---
+    # --- Final OTF save ---
     tmp_otf = f"/tmp/{font_name}.otf"
     fb.save(tmp_otf)
     with open(tmp_otf, "rb") as f:
@@ -475,15 +475,15 @@ def build_otf(images, font_name):
     os.remove(tmp_otf)
     return data
 
-# --- MÉTRIQUES DE RÉFÉRENCE (Helvetica LT Std Regular) ---
+# --- REFERENCE METRICS (Helvetica LT Std Regular) ---
 REF = {
     "asc": 718, "dsc": -282, "tAsc": 718, "tDsc": -282, "tGap": 200,
     "wAsc": 931, "wDsc": 225, "xH": 524, "cH": 718, "ulP": -75, "ulT": 50
 }
 
 # =============================================================================
-# CHARGEMENT DU MODÈLE (au scope module, une seule fois au démarrage du Space)
-# ZeroGPU : .to("cuda") ici est OK, l'init CUDA réelle est différée par `spaces`.
+# MODEL LOADING (module scope, once at Space startup)
+# ZeroGPU: .to("cuda") here is fine, the real CUDA init is deferred by `spaces`.
 # =============================================================================
 import torch
 from diffusers import Flux2KleinPipeline
@@ -501,12 +501,12 @@ pipe.load_lora_weights("ChevalierJoseph/TYPOTOPIA_APP", weight_name="typotopiaMA
 pipe.load_lora_weights("ChevalierJoseph/TYPOTOPIA_APP", weight_name="typotopiaMIN.safetensors", adapter_name="lc")
 pipe.load_lora_weights("ChevalierJoseph/TYPOTOPIA_APP", weight_name="typotopiaPONCT.safetensors", adapter_name="punc")
 pipe.to("cuda")
-print("✅ Modèle prêt !")
+print("✅ Model ready!")
 
 
 # =============================================================================
-# INFÉRENCE GPU — uniquement les 3 passes FLUX sous @spaces.GPU
-# duration = temps max d'allocation GPU (compte sur le quota ZeroGPU).
+# GPU INFERENCE — only the 3 FLUX passes run under @spaces.GPU
+# duration = max GPU allocation per request (counts against the ZeroGPU quota).
 # =============================================================================
 @spaces.GPU(duration=180)
 def run_pipeline(enhanced, input_img, seed):
@@ -546,7 +546,7 @@ def run_pipeline(enhanced, input_img, seed):
 
 
 # =============================================================================
-# ORCHESTRATEUR + UI GRADIO
+# ORCHESTRATOR + GRADIO UI
 # =============================================================================
 def _render_preview(otf_path, font_name):
     try:
@@ -558,7 +558,7 @@ def _render_preview(otf_path, font_name):
         draw.multiline_text((40, 40), sample, font=font, fill="black", spacing=24)
         return img
     except Exception as e:
-        print(f"⚠️ Aperçu impossible: {e}")
+        print(f"⚠️ Preview failed: {e}")
         return None
 
 
@@ -577,16 +577,16 @@ def generate(prompt, control_image, seed, random_seed, progress=gr.Progress(trac
         enhanced = DEFAULT_IMG_PROMPT
     else:
         if not (prompt and prompt.strip()):
-            raise gr.Error("Donne un prompt OU une image de contrôle.")
-        enhanced = prompt  # input utilisateur brut, aucun raffinement
+            raise gr.Error("Provide a prompt OR a control image.")
+        enhanced = prompt  # raw user input, no refinement
 
-    # --- GPU : 3 passes FLUX ---
+    # --- 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 : vectorisation potrace + build OTF ---
+    # --- CPU: potrace vectorization + OTF build ---
     otf_bytes = build_otf([img1, img2, img3], font_name)
 
     out_dir = tempfile.mkdtemp()
@@ -594,36 +594,167 @@ def generate(prompt, control_image, seed, random_seed, progress=gr.Progress(trac
     with open(otf_path, "wb") as f:
         f.write(otf_bytes)
 
-    gallery = [(img1, "Majuscules"), (img2, "Minuscules"), (img3, "Ponctuation")]
+    gallery = [(img1, "Uppercase"), (img2, "Lowercase"), (img3, "Punctuation")]
     preview = _render_preview(otf_path, font_name)
-    status = f"✅ **{font_name}** — seed `{seed}`"
+    status = f"<span class='dot'></span> <b>{font_name}</b> &nbsp;·&nbsp; seed <code>{seed}</code>"
     return gallery, preview, otf_path, status
 
 
-with gr.Blocks(title="Typotopia", theme=gr.themes.Soft()) as demo:
-    gr.Markdown(
-        "# 🔤 Typotopia\n"
-        "Génère une police OpenType complète (.otf) depuis un **prompt** ou une "
-        "**image de contrôle**. FLUX.2-klein + LoRAs (ZeroGPU) → vectorisation potrace "
-        "→ fontTools avec kerning vectoriel."
+# =============================================================================
+# THEME — type-foundry / specimen-sheet look (ink + paper + vermillion)
+# =============================================================================
+THEME = gr.themes.Base(
+    primary_hue=gr.themes.colors.red,
+    neutral_hue=gr.themes.colors.stone,
+    font=[gr.themes.GoogleFont("Instrument Sans"), "ui-sans-serif", "sans-serif"],
+    font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"],
+).set(
+    body_background_fill="#0E0E0D",
+    body_background_fill_dark="#0E0E0D",
+    body_text_color="#EDE8DC",
+    body_text_color_dark="#EDE8DC",
+    body_text_color_subdued="#8A857A",
+    body_text_color_subdued_dark="#8A857A",
+    background_fill_primary="#141413",
+    background_fill_primary_dark="#141413",
+    background_fill_secondary="#1B1A18",
+    background_fill_secondary_dark="#1B1A18",
+    block_background_fill="#141413",
+    block_background_fill_dark="#141413",
+    block_border_color="#2A2825",
+    block_border_color_dark="#2A2825",
+    block_border_width="1px",
+    block_label_text_color="#8A857A",
+    block_label_text_color_dark="#8A857A",
+    block_label_background_fill="#141413",
+    block_label_background_fill_dark="#141413",
+    block_title_text_color="#EDE8DC",
+    block_title_text_color_dark="#EDE8DC",
+    block_radius="3px",
+    input_background_fill="#1B1A18",
+    input_background_fill_dark="#1B1A18",
+    input_border_color="#2A2825",
+    input_border_color_dark="#2A2825",
+    input_border_color_focus="#FF5128",
+    input_border_color_focus_dark="#FF5128",
+    button_primary_background_fill="#FF5128",
+    button_primary_background_fill_dark="#FF5128",
+    button_primary_background_fill_hover="#FF6B47",
+    button_primary_background_fill_hover_dark="#FF6B47",
+    button_primary_text_color="#0E0E0D",
+    button_primary_text_color_dark="#0E0E0D",
+    button_primary_border_color="#FF5128",
+    button_primary_border_color_dark="#FF5128",
+)
+
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;1,9..144,900&family=JetBrains+Mono:wght@400;600&display=swap');
+
+.gradio-container {
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+    background:
+        radial-gradient(1100px 520px at 88% -12%, rgba(255,81,40,0.12), transparent 60%),
+        radial-gradient(820px 460px at -8% 112%, rgba(255,81,40,0.07), transparent 55%) !important;
+}
+
+/* Hero */
+#hero { padding: 22px 4px 26px; border-bottom: 1px solid #2A2825; margin-bottom: 26px; }
+#hero .kicker {
+    font-family: 'JetBrains Mono', monospace;
+    text-transform: uppercase; letter-spacing: 0.34em;
+    font-size: 10px; color: #FF5128; margin: 0 0 16px;
+}
+#hero h1 {
+    font-family: 'Fraunces', Georgia, serif;
+    font-weight: 900; font-size: clamp(56px, 11vw, 132px);
+    line-height: 0.84; letter-spacing: -0.035em; margin: 0; color: #EDE8DC;
+}
+#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: #8A857A; margin-top: 18px; max-width: 620px;
+}
+#hero .tag b { color: #EDE8DC; font-weight: 600; }
+
+/* Section eyebrow labels */
+.eyebrow {
+    font-family: 'JetBrains Mono', monospace !important;
+    text-transform: uppercase; letter-spacing: 0.22em;
+    font-size: 10px !important; color: #6E6A60 !important; margin: 4px 0 2px !important;
+}
+
+/* Component labels in mono */
+.gradio-container label span,
+.gradio-container .gr-check-radio label span {
+    font-family: 'JetBrains Mono', monospace !important;
+    letter-spacing: 0.06em; font-size: 11px !important; color: #8A857A !important;
+}
+
+/* Primary CTA */
+.go-btn {
+    text-transform: uppercase !important;
+    letter-spacing: 0.16em !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    font-weight: 600 !important;
+    font-size: 13px !important;
+    border-radius: 3px !important;
+    min-height: 52px !important;
+    box-shadow: 0 0 0 1px rgba(255,81,40,0.4), 0 12px 30px -12px rgba(255,81,40,0.6) !important;
+    transition: transform .12s ease, box-shadow .2s ease !important;
+}
+.go-btn:hover { transform: translateY(-1px); }
+
+/* Status line */
+.status-line { min-height: 22px; }
+.status-line p {
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 13px !important; color: #EDE8DC !important; margin: 0 !important;
+}
+.status-line code { color: #FF5128; background: transparent; }
+.status-line .dot {
+    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
+    background: #FF5128; margin-right: 8px;
+    box-shadow: 0 0 10px rgba(255,81,40,0.9);
+}
+
+footer { display: none !important; }
+"""
+
+with gr.Blocks(title="Typotopia", theme=THEME, css=CSS) as demo:
+    gr.HTML(
+        """
+        <div id="hero">
+          <p class="kicker">Generative type foundry</p>
+          <h1>Typo<em>topia</em></h1>
+          <p class="tag">
+            From a single <b>prompt</b> or a <b>control image</b> to a complete OpenType file.
+            FLUX.2-klein + custom LoRAs on <b>ZeroGPU</b> &rarr; potrace vectorization
+            &rarr; fontTools assembly with pure-vector kerning.
+          </p>
+        </div>
+        """
     )
-    with gr.Row():
+    with gr.Row(equal_height=False):
         with gr.Column(scale=1):
+            gr.HTML("<p class='eyebrow'>01 — Brief</p>")
             prompt = gr.Textbox(
                 label="Prompt",
-                placeholder="ex. a bold geometric sans inspired by brutalist concrete signage",
+                placeholder="e.g. a bold geometric sans inspired by brutalist concrete signage",
                 lines=3,
             )
-            control_image = gr.Image(label="Image de contrôle (optionnelle)", type="pil")
+            control_image = gr.Image(label="Control image (optional)", type="pil")
             with gr.Row():
                 seed = gr.Number(label="Seed", value=0, precision=0)
-                random_seed = gr.Checkbox(label="Seed aléatoire", value=True)
-            btn = gr.Button("Générer la police", variant="primary")
+                random_seed = gr.Checkbox(label="Random seed", value=True)
+            btn = gr.Button("Generate font", variant="primary", elem_classes=["go-btn"])
         with gr.Column(scale=1):
-            status = gr.Markdown()
-            preview = gr.Image(label="Aperçu", type="pil")
-            gallery = gr.Gallery(label="Grilles générées", columns=3, height="auto")
-            otf_file = gr.File(label="Télécharger le .otf")
+            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")
 
     btn.click(
         generate,
@@ -632,4 +763,4 @@ with gr.Blocks(title="Typotopia", theme=gr.themes.Soft()) as demo:
     )
 
 if __name__ == "__main__":
-    demo.queue().launch()
+    demo.queue().launch()