# -*- coding: utf-8 -*- import os, io, re, random, string, tempfile import spaces import gradio as gr from PIL import Image # --- CONSTANTS --- POTRACE_BIN = 'potrace' UPM = 1000 CROP = 8 SIDEBEARING = 20 GLYPH_SCALE = 0.112 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." # --- 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','#','%'],['(','[','{','$','€','£'],['&','@','_','+','-','='],['*','/','^','°','→','—'],['`','´','ˆ','¨','˜','•']] # --- 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', '#', '%', '$', '£', '&', '@', '+', '='], } # --- SVG PROCESSING --- def simplify_svg_path(d): from fontTools.pens.recordingPen import RecordingPen from fontTools.pens.svgPathPen import SVGPathPen from fontTools.svgLib.path import parse_path rec = RecordingPen() parse_path(d, rec) svg = SVGPathPen(None) rec.replay(svg) return re.sub(r"(\d+\.\d+)", lambda m: f"{float(m.group(1)):.{PRECISION}f}", svg.getCommands()) def get_char_path_rdp(pil_img, upscale=2): import tempfile, subprocess import cv2, numpy as np rgb = np.array(pil_img.convert("RGB")) black_mask = ( (rgb[:,:,0] < 80) & (rgb[:,:,1] < 80) & (rgb[:,:,2] < 80) ).astype(np.uint8) * 255 h, w = black_mask.shape up = cv2.resize(black_mask, (w*upscale, h*upscale), interpolation=cv2.INTER_NEAREST) with tempfile.NamedTemporaryFile(suffix='.pbm', delete=False) as f: pbm = f.name with tempfile.NamedTemporaryFile(suffix='.svg', delete=False) as f: svg = f.name Image.fromarray(cv2.flip(255-up, 0)).convert('1').save(pbm) try: subprocess.run([POTRACE_BIN, pbm, '-s', '-o', svg, '--alphamax', '0.9', '--opttolerance', '0.5', '--turdsize', '30'], check=True, capture_output=True) except: return "" finally: if os.path.exists(pbm): os.unlink(pbm) if not os.path.exists(svg): return "" with open(svg) as f: content = f.read() os.unlink(svg) paths = re.findall(r'd="([^"]+)"', content) return ' '.join(simplify_svg_path(p) for p in paths).strip() if paths else "" # --- OTF CONSTRUCTION --- MIRROR_MAP = {')': '(', ']': '[', '}': '{'} ACCENT_MAP = { 'à':('a','`'),'è':('e','`'),'ì':('i','`'),'ò':('o','`'),'ù':('u','`'), 'À':('A','`'),'È':('E','`'),'Ì':('I','`'),'Ò':('O','`'),'Ù':('U','`'), 'á':('a','´'),'é':('e','´'),'í':('i','´'),'ó':('o','´'),'ú':('u','´'), 'Á':('A','´'),'É':('E','´'),'Í':('I','´'),'Ó':('O','´'),'Ú':('U','´'), 'â':('a','ˆ'),'ê':('e','ˆ'),'î':('i','ˆ'),'ô':('o','ˆ'),'û':('u','ˆ'), 'Â':('A','ˆ'),'Ê':('E','ˆ'),'Î':('I','ˆ'),'Ô':('O','ˆ'),'Û':('U','ˆ'), 'ä':('a','¨'),'ë':('e','¨'),'ï':('i','¨'),'ö':('o','¨'),'ü':('u','¨'), 'Ä':('A','¨'),'Ë':('E','¨'),'Ï':('I','¨'),'Ö':('O','¨'),'Ü':('U','¨'), 'ã':('a','˜'),'õ':('o','˜'),'ñ':('n','˜'), 'Ã':('A','˜'),'Õ':('O','˜'),'Ñ':('N','˜'), } def build_otf(images, font_name): from fontTools.fontBuilder import FontBuilder from fontTools.pens.t2CharStringPen import T2CharStringPen from fontTools.pens.boundsPen import BoundsPen from fontTools.pens.transformPen import TransformPen from fontTools.pens.recordingPen import RecordingPen from fontTools.misc.transform import Identity from fontTools.svgLib.path import parse_path from fontTools.cffLib import PrivateDict from fontTools.ttLib import newTable from fontTools.ttLib.tables import _k_e_r_n as _kern import tempfile, subprocess, cv2, numpy as np from PIL import Image, ImageDraw all_maps = [MAP_UC, MAP_LC, MAP_PUNC] glyph_data = {} for idx, img in enumerate(images): w, h = img.size arr = np.array(img.convert("RGB")) arr_up = cv2.resize(arr, (w*2, h*2), interpolation=cv2.INTER_CUBIC) img_up = Image.fromarray(arr_up) w2, h2 = img_up.size cw, ch = w2//6, h2//6 scale = 800/ch current_map = all_maps[idx] for r in range(6): for c in range(6): char = current_map[r][c] box = (c*cw, r*ch, (c+1)*cw, (r+1)*ch) d = get_char_path_rdp(img_up.crop(box), upscale=1) if not d: continue bp = BoundsPen(None) try: parse_path(d, bp) except: continue if bp.bounds: glyph_data[char] = {'d': d, 'b': bp.bounds, 'scale': scale, 'grid': idx} # Computed baseline baseline_per_grid = {} for grid_idx in range(len(all_maps)): chosen_ref = None for ref_char in BASELINE_REFS.get(grid_idx, []): if ref_char in glyph_data and glyph_data[ref_char].get('grid') == grid_idx: gd = glyph_data[ref_char] baseline_per_grid[grid_idx] = gd['b'][3] * gd['scale'] * GLYPH_SCALE chosen_ref = ref_char break if chosen_ref is None: baseline_per_grid[grid_idx] = baseline_per_grid.get(0, 0) print(f"⚠️ Grid {grid_idx}: no reference glyph found, fallback = {baseline_per_grid[grid_idx]:.1f}") else: print(f"📐 Grid {grid_idx}: baseline = {baseline_per_grid[grid_idx]:.1f} (ref '{chosen_ref}')") def get_baseline(char): if char in glyph_data: return baseline_per_grid.get(glyph_data[char]['grid'], baseline_per_grid.get(0, 0)) return baseline_per_grid.get(0, 0) dummy = PrivateDict() dummy.nominalWidthX = 0 cs = {".notdef": T2CharStringPen(600, None).getCharString(private=dummy)} metrics = {".notdef": (600, 0)} cmap, order = {}, [".notdef"] cs["space"] = T2CharStringPen(300, None).getCharString(private=dummy) metrics["space"] = (300, 0) order.append("space") cmap[32] = "space" font_recordings = {} font_bounds = {} font_widths = {} font_centers = {} for char, data in glyph_data.items(): if len(char) != 1: continue b, s = data['b'], data['scale'] width = round((b[2]-b[0]) * s * GLYPH_SCALE + SIDEBEARING * 2) tx = SIDEBEARING - b[0] * s * GLYPH_SCALE ty = get_baseline(char) transform = Identity.translate(tx, ty).scale(s * GLYPH_SCALE, -s * GLYPH_SCALE) rec = RecordingPen() parse_path(data['d'], TransformPen(rec, transform)) font_recordings[char] = rec.value font_widths[char] = width bp2 = BoundsPen(None) rec2 = RecordingPen() rec2.value = rec.value rec2.replay(bp2) bounds = bp2.bounds or (0, 0, width, 800) font_bounds[char] = bounds font_centers[char] = ((bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2) pen = T2CharStringPen(width, None) rec3 = RecordingPen() rec3.value = rec.value rec3.replay(pen) glyph_name = f"glyph{ord(char)}" cs[glyph_name] = pen.getCharString(private=dummy) order.append(glyph_name) cmap[ord(char)] = glyph_name metrics[glyph_name] = (width, 0) # Mirrors for dst_char, src_char in MIRROR_MAP.items(): if src_char not in font_recordings: continue w = font_widths[src_char] pen = T2CharStringPen(w, None) flip = TransformPen(pen, (-1, 0, 0, 1, w, 0)) rec = RecordingPen() rec.value = font_recordings[src_char] rec.replay(flip) gn = f"glyph{ord(dst_char)}" cs[gn] = pen.getCharString(private=dummy) order.append(gn) cmap[ord(dst_char)] = gn metrics[gn] = (w, 0) if src_char in font_centers: cx, cy = font_centers[src_char] font_centers[dst_char] = (w - cx, cy) # 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 w = font_widths[base_char] bb = font_bounds[base_char] ab = font_bounds[accent_char] dx = ((bb[0]+bb[2]) - (ab[0]+ab[2])) / 2 dy = bb[3] - ab[1] + 40 pen = T2CharStringPen(w, None) rec1 = RecordingPen() rec1.value = font_recordings[base_char] rec1.replay(pen) rec2 = RecordingPen() rec2.value = font_recordings[accent_char] rec2.replay(TransformPen(pen, (1, 0, 0, 1, dx, dy))) gn = f"glyph{ord(dst_char)}" cs[gn] = pen.getCharString(private=dummy) order.append(gn) cmap[ord(dst_char)] = gn metrics[gn] = (w, 0) if base_char in font_centers and accent_char in font_centers: bx, by = font_centers[base_char] ax, ay = font_centers[accent_char] font_centers[dst_char] = (bx + dx, by + dy) # Bracket mirrors MIRROR_PAIRS = {'(': ')', '[': ']', '{': '}'} for src_char, dst_char in MIRROR_PAIRS.items(): if src_char not in glyph_data: continue data = glyph_data[src_char] b, s = data['b'], data['scale'] width = round((b[2]-b[0]) * s * GLYPH_SCALE + SIDEBEARING * 2) pen = T2CharStringPen(width, None) tx = SIDEBEARING + b[2] * s * GLYPH_SCALE ty = get_baseline(src_char) transform = Identity.translate(tx, ty).scale(-s * GLYPH_SCALE, -s * GLYPH_SCALE) parse_path(data['d'], TransformPen(pen, transform)) glyph_name = f"glyph{ord(dst_char)}" if glyph_name not in cs: cs[glyph_name] = pen.getCharString(private=dummy) order.append(glyph_name) cmap[ord(dst_char)] = glyph_name metrics[glyph_name] = (width, 0) if src_char in font_centers: cx, cy = font_centers[src_char] font_centers[dst_char] = (width - cx, cy) # Combining-accent aliases ACCENT_ALIASES = { '`': [0x0060, 0x0300], '´': [0x00B4, 0x0301], 'ˆ': [0x02C6, 0x0302], '¨': [0x00A8, 0x0308], '˜': [0x02DC, 0x0303], } for base_char, codepoints in ACCENT_ALIASES.items(): if base_char not in glyph_data: continue existing_glyph_name = f"glyph{ord(base_char)}" if existing_glyph_name in cs: for cp in codepoints[1:]: if cp not in cmap: cmap[cp] = existing_glyph_name fb = FontBuilder(UPM, isTTF=False) fb.setupGlyphOrder(order) fb.setupCharacterMap(cmap) fb.setupCFF( font_name, {"FullName": font_name, "FamilyName": font_name, "Weight": "Regular"}, cs, {font_name: dummy} ) fb.setupHorizontalMetrics(metrics) fb.setupHorizontalHeader(ascent=REF["asc"], descent=REF["dsc"]) fb.setupNameTable({ "familyName": font_name, "styleName": "Regular", "uniqueFontIdentifier": f"{font_name}:Version 1.000", "fullName": font_name, "version": "Version 1.000", "psName": font_name }) fb.setupOS2( sTypoAscender=REF["tAsc"], sTypoDescender=REF["tDsc"], sTypoLineGap=REF["tGap"], usWinAscent=REF["wAsc"], usWinDescent=REF["wDsc"], sxHeight=REF["xH"], sCapHeight=REF["cH"], fsType=4, fsSelection=64 ) fb.setupPost(italicAngle=0, underlinePosition=REF["ulP"], underlineThickness=REF["ulT"]) # ------------------------------------------------------------------------- # BUBBLE KERNING — pure vector, written to GPOS (no pair-count limit) # ------------------------------------------------------------------------- try: import numpy as np from fontTools.otlLib.builder import buildValue, buildPairPosGlyphs from fontTools.ttLib import newTable from fontTools.ttLib.tables import otTables # --- 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 = [] def add_line(p0, p1): d = ((p1[0]-p0[0])**2 + (p1[1]-p0[1])**2) ** 0.5 steps = max(1, int(d / 8)) for i in range(steps + 1): t = i / steps pts.append((p0[0] + t*(p1[0]-p0[0]), p0[1] + t*(p1[1]-p0[1]))) def add_cubic(p0, p1, p2, p3): d = ((p3[0]-p0[0])**2 + (p3[1]-p0[1])**2) ** 0.5 steps = max(4, int(d * 1.5 / 8)) for i in range(steps + 1): t = i / steps mt = 1.0 - t bx = mt**3*p0[0] + 3*mt**2*t*p1[0] + 3*mt*t**2*p2[0] + t**3*p3[0] by = mt**3*p0[1] + 3*mt**2*t*p1[1] + 3*mt*t**2*p2[1] + t**3*p3[1] pts.append((bx, by)) cur = (0.0, 0.0) start = (0.0, 0.0) for op, args in recording: if op == 'moveTo': cur = args[0]; start = cur elif op == 'lineTo': add_line(cur, args[0]); cur = args[0] elif op == 'curveTo': add_cubic(cur, args[0], args[1], args[2]); cur = args[2] elif op in ('endPath', 'closePath'): if cur != start: add_line(cur, start) cur = start if not pts: return None arr = np.array(pts, dtype=np.float32) if len(arr) > n: idx = np.round(np.linspace(0, len(arr)-1, n)).astype(int) arr = arr[idx] return arr # Sampling chars_available = [c for c in font_recordings if len(c) == 1] contour_points = {} for char in chars_available: pts = sample_contour(font_recordings[char]) if pts is not None and len(pts) >= 2: contour_points[char] = pts print(f"📐 Contours sampled: {len(contour_points)} glyphs") # All-to-all computation diameter = BUBBLE_RADIUS * 2.0 gpos_pairs = {} # (glyph_name_L, glyph_name_R) -> kern_upm for l_char in contour_points: pts_L = contour_points[l_char] adv_L = float(font_widths[l_char]) lg = f"glyph{ord(l_char)}" if lg not in metrics: continue for r_char in contour_points: rg = f"glyph{ord(r_char)}" if rg not in metrics: continue pts_R_shifted = contour_points[r_char] + np.array([adv_L, 0.0], dtype=np.float32) diff = pts_L[:, np.newaxis, :] - pts_R_shifted[np.newaxis, :, :] min_dist = float(np.sqrt((diff**2).sum(axis=2)).min()) 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}") if kern_upm < KERN_THRESHOLD: gpos_pairs[(lg, rg)] = max(kern_upm, KERN_CAP) print(f"✅ Bubble Kerning (vector): {len(gpos_pairs)} pairs") if gpos_pairs: val0 = buildValue({}) pairs_for_builder = { (lg, rg): (buildValue({"XAdvance": kern}), val0) for (lg, rg), kern in gpos_pairs.items() } glyph_map = fb.font.getReverseGlyphMap() subtables = buildPairPosGlyphs(pairs_for_builder, glyph_map) lookup = otTables.Lookup() lookup.LookupType = 2 lookup.LookupFlag = 0 lookup.SubTableCount = len(subtables) lookup.SubTable = subtables lookup_list = otTables.LookupList() lookup_list.Lookup = [lookup] lookup_list.LookupCount = 1 feature_record = otTables.FeatureRecord() feature_record.FeatureTag = "kern" feature = otTables.Feature() feature.LookupListIndex = [0] feature.LookupCount = 1 feature_record.Feature = feature lang_sys = otTables.DefaultLangSys() lang_sys.ReqFeatureIndex = 0xFFFF lang_sys.FeatureIndex = [0] lang_sys.FeatureCount = 1 lang_sys.LookupOrderOffset = 0 script = otTables.Script() script.DefaultLangSys = lang_sys script.LangSysCount = 0 script.LangSysRecord = [] script_record = otTables.ScriptRecord() script_record.ScriptTag = "DFLT" script_record.Script = script script_list = otTables.ScriptList() script_list.ScriptRecord = [script_record] script_list.ScriptCount = 1 feature_list = otTables.FeatureList() feature_list.FeatureRecord = [feature_record] feature_list.FeatureCount = 1 gpos_table = otTables.GPOS() gpos_table.Version = 0x00010000 gpos_table.ScriptList = script_list gpos_table.FeatureList = feature_list gpos_table.LookupList = lookup_list gpos = newTable("GPOS") gpos.table = gpos_table fb.font["GPOS"] = gpos print(f"✅ GPOS written: {len(gpos_pairs)} kern pairs") except Exception as e: print(f"⚠️ Bubble Kerning failed: {e}") import traceback traceback.print_exc() # --- Final OTF save --- tmp_otf = f"/tmp/{font_name}.otf" fb.save(tmp_otf) with open(tmp_otf, "rb") as f: data = f.read() os.remove(tmp_otf) return data # --- 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 } # ============================================================================= # 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 from huggingface_hub import login if HF_TOKEN: login(token=HF_TOKEN) print("🚀 Loading Flux.2-klein + LoRAs ...") pipe = Flux2KleinPipeline.from_pretrained( "black-forest-labs/FLUX.2-klein-base-4B", torch_dtype=torch.bfloat16, ) pipe.load_lora_weights("ChevalierJoseph/TYPOTOPIA_APP", weight_name="typotopiaMAJ.safetensors", adapter_name="uc") 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("✅ Model ready!") # ============================================================================= # 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): gen = torch.Generator("cuda").manual_seed(int(seed)) pipe.set_adapters("uc") img1 = pipe( prompt=f"[typotopiaMAJ], {enhanced}", image=input_img, num_inference_steps=5, guidance_scale=7 if input_img else 3.5, height=1536, width=1536, generator=gen, ).images[0] pipe.set_adapters("lc") img2 = pipe( prompt="[typotopiaMIN], Design a custom lowercase typeface inspired by the attached control image.", image=img1, num_inference_steps=5, guidance_scale=7, height=1536, width=1536, generator=gen, ).images[0] pipe.set_adapters("punc") img3 = pipe( prompt="[typotopiaPONCT], Design a custom punctuation typeface inspired by the attached control image.", image=img1, num_inference_steps=5, guidance_scale=7, height=1536, width=1536, generator=gen, ).images[0] return img1, img2, img3 # ============================================================================= # ORCHESTRATOR + GRADIO UI # ============================================================================= def _render_preview(otf_path, font_name): try: from PIL import Image, ImageDraw, ImageFont sample = f"{font_name}\nAa Bb Cc 123\nThe quick brown fox" img = Image.new("RGB", (1700, 620), "white") draw = ImageDraw.Draw(img) font = ImageFont.truetype(otf_path, 150) draw.multiline_text((40, 30), sample, font=font, fill="black", spacing=30) return img except Exception as e: print(f"⚠️ Preview failed: {e}") 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): # 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', 'Helvetica Neue', Helvetica, 'Archivo', Arial, sans-serif" return "", "'Helvetica Neue', Helvetica, 'Archivo', Arial, sans-serif" TITLE_FONT_FACE, TITLE_FAMILY = _load_title_font() # ============================================================================= # THEME — International Typographic Style (light grey / black / violet) # ============================================================================= 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", ) 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; } .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; } /* 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; } /* ========================================================================= 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; } /* 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; } /* 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; } #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; } @media (prefers-reduced-motion: reduce) { .gradio-container * { transition: none !important; animation: none !important; } } 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( """

Typotopia.

InputPrompt / Control image
ModelFLUX.2-klein + LoRA
OutputOpenType · GPOS kerning
""" ) 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, ) if __name__ == "__main__": demo.queue().launch()