Update app.py

app.py

@@ -551,11 +551,11 @@ def run_pipeline(enhanced, input_img, seed):
 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 jumps over the lazy dog"
+        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((80, 70), sample, font=font, fill="black", spacing=70)
+        draw.multiline_text((40, 30), sample, font=font, fill="black", spacing=30)
         return img
     except Exception as e:
         print(f"⚠️ Preview failed: {e}")
@@ -629,17 +629,17 @@ def _load_title_font():
 TITLE_FONT_FACE, TITLE_FAMILY = _load_title_font()
 
 # =============================================================================
-# THEME — International Typographic Style (white / black / Swiss red)
+# THEME — International Typographic Style (light grey / black / violet)
 # =============================================================================
 THEME = gr.themes.Base(
-    primary_hue=gr.themes.colors.red,
+    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="#FFFFFF",
-    body_background_fill_dark="#FFFFFF",
+    body_background_fill="#ECECEC",
+    body_background_fill_dark="#ECECEC",
     body_text_color="#000000",
     body_text_color_dark="#000000",
     body_text_color_subdued="#6B6B6B",
@@ -666,22 +666,22 @@ THEME = gr.themes.Base(
     input_background_fill_dark="#FFFFFF",
     input_border_color="#000000",
     input_border_color_dark="#000000",
-    input_border_color_focus="#E30613",
-    input_border_color_focus_dark="#E30613",
+    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="#E30613",
-    button_primary_background_fill_dark="#E30613",
+    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="#E30613",
-    button_primary_border_color_dark="#E30613",
+    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",
@@ -696,7 +696,8 @@ CSS = """
 :root {
     --ink: #000000;
     --paper: #FFFFFF;
-    --red: #E30613;
+    --bg: #ECECEC;
+    --accent: #5F2EEA;
     --grey: #6B6B6B;
     --hairline: #D8D8D8;
     --grotesk: 'Helvetica Neue', Helvetica, 'Archivo', Arial, sans-serif;
@@ -709,7 +710,7 @@ CSS = """
     margin: 0 !important;
     padding-left: clamp(20px, 5vw, 72px) !important;
     padding-right: clamp(20px, 5vw, 72px) !important;
-    background: var(--paper) !important;
+    background: var(--bg) !important;
 }
 
 /* Kill every radius and shadow — flat ink on paper */
@@ -742,7 +743,7 @@ CSS = """
     margin: 0;
     color: var(--ink);
 }
-#hero h1 .stop { color: var(--red); }
+#hero h1 .stop { color: var(--accent); }
 #hero .meta {
     font-family: var(--grotesk);
     font-size: 11px;
@@ -766,7 +767,7 @@ CSS = """
 #hero .meta .v { text-align: right; }
 
 /* =========================================================================
-   SECTION HEADS — red index, black rule
+   SECTION HEADS — violet index
    ========================================================================= */
 .eyebrow {
     font-family: var(--grotesk) !important;
@@ -775,11 +776,9 @@ CSS = """
     font-size: 11px !important;
     font-weight: 700 !important;
     color: var(--ink) !important;
-    border-top: 2px solid var(--ink);
-    padding-top: 8px !important;
     margin: 0 0 6px !important;
 }
-.eyebrow .idx { color: var(--red); margin-right: 12px; }
+.eyebrow .idx { color: var(--accent); margin-right: 12px; }
 
 /* Component labels */
 .gradio-container label span,
@@ -803,12 +802,12 @@ CSS = """
 }
 .gradio-container textarea:focus,
 .gradio-container input:focus {
-    border-color: var(--red) !important;
-    outline: 2px solid var(--red) !important;
+    border-color: var(--accent) !important;
+    outline: 2px solid var(--accent) !important;
     outline-offset: -1px;
 }
 
-/* Primary CTA — red plate, uppercase, no ornament */
+/* Primary CTA — violet plate, uppercase, no ornament */
 .go-btn {
     text-transform: uppercase !important;
     letter-spacing: 0.22em !important;
@@ -841,10 +840,8 @@ CSS = """
 #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 bar in red, flat — single gauge inside the grids block */
-
-/* Progress bar in red, flat — single gauge inside the grids block */
-.gradio-container .progress-bar { background: var(--red) !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;