update app

app.py

@@ -7,37 +7,57 @@ import torch
 import random
 from PIL import Image
 from typing import Iterable
-from gradio.themes import Soft
+from gradio.themes import Base
 from gradio.themes.utils import colors, fonts, sizes
 
-colors.orange_red = colors.Color(
-    name="orange_red",
-    c50="#FFF0E5",
-    c100="#FFE0CC",
-    c200="#FFC299",
-    c300="#FFA366",
-    c400="#FF8533",
-    c500="#FF4500",
-    c600="#E63E00",
-    c700="#CC3700",
-    c800="#B33000",
-    c900="#992900",
-    c950="#802200",
+# ── Windows 98 Color Palettes ───────────────────────────────────────────
+
+colors.win98_blue = colors.Color(
+    name="win98_blue",
+    c50="#E6E6F5",
+    c100="#CCCCEB",
+    c200="#9999D6",
+    c300="#6666C2",
+    c400="#3333AD",
+    c500="#000080",
+    c600="#000073",
+    c700="#000066",
+    c800="#000059",
+    c900="#00004D",
+    c950="#000040",
 )
 
-class OrangeRedTheme(Soft):
+colors.win98_gray = colors.Color(
+    name="win98_gray",
+    c50="#F5F5F5",
+    c100="#EBEBEB",
+    c200="#D6D6D6",
+    c300="#C0C0C0",
+    c400="#A8A8A8",
+    c500="#808080",
+    c600="#696969",
+    c700="#555555",
+    c800="#404040",
+    c900="#2D2D2D",
+    c950="#1A1A1A",
+)
+
+
+# ── Windows 98 Theme ────────────────────────────────────────────────────
+
+class Windows98Theme(Base):
     def __init__(
         self,
         *,
-        primary_hue: colors.Color | str = colors.gray,
-        secondary_hue: colors.Color | str = colors.orange_red,
-        neutral_hue: colors.Color | str = colors.slate,
-        text_size: sizes.Size | str = sizes.text_lg,
+        primary_hue: colors.Color | str = colors.win98_gray,
+        secondary_hue: colors.Color | str = colors.win98_blue,
+        neutral_hue: colors.Color | str = colors.win98_gray,
+        text_size: sizes.Size | str = sizes.text_md,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("Outfit"), "Arial", "sans-serif",
+            "Tahoma", "MS Sans Serif", "Arial", "sans-serif",
         ),
         font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace",
+            "Courier New", "Fixedsys", "monospace",
         ),
     ):
         super().__init__(
@@ -49,34 +69,60 @@ class OrangeRedTheme(Soft):
             font_mono=font_mono,
         )
         super().set(
-            background_fill_primary="*primary_50",
-            background_fill_primary_dark="*primary_900",
-            body_background_fill="linear-gradient(135deg, *primary_200, *primary_100)",
-            body_background_fill_dark="linear-gradient(135deg, *primary_900, *primary_800)",
+            # ── Body ──
+            body_background_fill="#c0c0c0",
+            body_background_fill_dark="#c0c0c0",
+            background_fill_primary="#c0c0c0",
+            background_fill_primary_dark="#c0c0c0",
+            background_fill_secondary="#d4d0c8",
+            background_fill_secondary_dark="#d4d0c8",
+
+            # ── Blocks ──
+            block_background_fill="#c0c0c0",
+            block_border_width="2px",
+            block_shadow="none",
+            block_title_text_weight="bold",
+            block_label_background_fill="#c0c0c0",
+
+            # ── Primary Button (Navy Blue) ──
+            button_primary_background_fill="#000080",
+            button_primary_background_fill_hover="#0000a0",
+            button_primary_background_fill_dark="#000080",
+            button_primary_background_fill_hover_dark="#0000a0",
             button_primary_text_color="white",
             button_primary_text_color_hover="white",
-            button_primary_background_fill="linear-gradient(90deg, *secondary_500, *secondary_600)",
-            button_primary_background_fill_hover="linear-gradient(90deg, *secondary_600, *secondary_700)",
-            button_primary_background_fill_dark="linear-gradient(90deg, *secondary_600, *secondary_700)",
-            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_600)",
-            button_secondary_text_color="black",
-            button_secondary_text_color_hover="white",
-            button_secondary_background_fill="linear-gradient(90deg, *primary_300, *primary_300)",
-            button_secondary_background_fill_hover="linear-gradient(90deg, *primary_400, *primary_400)",
-            button_secondary_background_fill_dark="linear-gradient(90deg, *primary_500, *primary_600)",
-            button_secondary_background_fill_hover_dark="linear-gradient(90deg, *primary_500, *primary_500)",
-            slider_color="*secondary_500",
-            slider_color_dark="*secondary_600",
-            block_title_text_weight="600",
-            block_border_width="3px",
-            block_shadow="*shadow_drop_lg",
-            button_primary_shadow="*shadow_drop_lg",
-            button_large_padding="11px",
-            color_accent_soft="*primary_100",
-            block_label_background_fill="*primary_200",
+            button_primary_shadow="none",
+
+            # ── Secondary Button (Gray) ──
+            button_secondary_background_fill="#c0c0c0",
+            button_secondary_background_fill_hover="#d4d0c8",
+            button_secondary_background_fill_dark="#c0c0c0",
+            button_secondary_background_fill_hover_dark="#d4d0c8",
+            button_secondary_text_color="#000000",
+            button_secondary_text_color_hover="#000000",
+
+            button_large_padding="6px 16px",
+
+            # ── Slider ──
+            slider_color="#000080",
+            slider_color_dark="#000080",
+
+            # ── Accent ──
+            color_accent_soft="#d4d0c8",
+
+            # ── Input ──
+            input_background_fill="#ffffff",
+            input_background_fill_dark="#ffffff",
+
+            # ── Text ──
+            body_text_color="#000000",
+            body_text_color_dark="#000000",
         )
 
-orange_red_theme = OrangeRedTheme()
+
+windows_98_theme = Windows98Theme()
+
+# ── Device & Model Setup ────────────────────────────────────────────────
 
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 
@@ -109,6 +155,9 @@ except Exception as e:
 
 MAX_SEED = np.iinfo(np.int32).max
 
+
+# ── Helper Functions ────────────────────────────────────────────────────
+
 def update_dimensions_on_upload(image):
     if image is None:
         return 1024, 1024
@@ -129,6 +178,7 @@ def update_dimensions_on_upload(image):
 
     return new_width, new_height
 
+
 @spaces.GPU
 def infer(
     images,
@@ -195,6 +245,7 @@ def infer(
         gc.collect()
         torch.cuda.empty_cache()
 
+
 @spaces.GPU
 def infer_example(images, prompt):
     if not images:
@@ -215,18 +266,284 @@ def infer_example(images, prompt):
     )
     return result, seed
 
+
+# ── CSS ──────────────────────────────────────────────────────────────────
+
 css = """
+/* ═══════════════════════════════════════════════
+   WINDOWS 98 RETRO THEME
+   ═══════════════════════════════════════════════ */
+
+/* ── Global Reset ── */
+*, *::before, *::after {
+    border-radius: 0px !important;
+}
+
+.gradio-container {
+    background: #c0c0c0 !important;
+}
+
+/* ── Window Frame ── */
 #col-container {
     margin: 0 auto;
     max-width: 1000px;
+    background: #c0c0c0;
+    border-top: 2px solid #ffffff;
+    border-left: 2px solid #ffffff;
+    border-right: 2px solid #404040;
+    border-bottom: 2px solid #404040;
+    box-shadow: 1px 1px 0 0 #000000;
+    padding: 2px;
+}
+
+/* ── Title Bar ── */
+#main-title {
+    background: linear-gradient(90deg, #000080, #1084d0) !important;
+    padding: 3px 8px !important;
+    margin: 0 !important;
+    border: none !important;
+    box-shadow: none !important;
+    position: relative;
+}
+
+#main-title h1 {
+    font-size: 13px !important;
+    color: white !important;
+    font-weight: bold !important;
+    margin: 0 !important;
+    padding: 1px 0 !important;
+    text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
+    font-family: "Tahoma", "MS Sans Serif", sans-serif !important;
+}
+
+/* Faux Window Controls */
+#main-title::after {
+    content: "— □ ✕";
+    position: absolute;
+    right: 4px;
+    top: 3px;
+    color: #000000;
+    font-size: 9px;
+    letter-spacing: 2px;
+    background: #c0c0c0;
+    border-top: 2px solid #ffffff;
+    border-left: 2px solid #ffffff;
+    border-right: 2px solid #808080;
+    border-bottom: 2px solid #808080;
+    padding: 0 5px;
+    font-family: "Tahoma", sans-serif;
+    line-height: 15px;
+}
+
+/* ── Description / Menu Bar ── */
+#desc-text {
+    background: #c0c0c0 !important;
+    border: none !important;
+    border-bottom: 1px solid #808080 !important;
+    padding: 4px 6px !important;
+    margin: 0 0 4px 0 !important;
+    box-shadow: none !important;
+}
+
+#desc-text p {
+    font-size: 11px !important;
+    margin: 2px 0 !important;
+    color: #000000 !important;
+}
+
+#desc-text a {
+    color: #000080 !important;
+    text-decoration: underline !important;
+}
+
+/* ── Raised Panels / Blocks ── */
+.block, .form {
+    border-top: 2px solid #ffffff !important;
+    border-left: 2px solid #ffffff !important;
+    border-right: 2px solid #808080 !important;
+    border-bottom: 2px solid #808080 !important;
+    background: #c0c0c0 !important;
+    box-shadow: none !important;
+}
+
+/* ── Sunken Text Inputs ── */
+textarea,
+input[type="text"],
+input[type="number"],
+input[type="search"] {
+    border-top: 2px solid #808080 !important;
+    border-left: 2px solid #808080 !important;
+    border-right: 2px solid #ffffff !important;
+    border-bottom: 2px solid #ffffff !important;
+    background: #ffffff !important;
+    box-shadow: none !important;
+    font-family: "Tahoma", "MS Sans Serif", sans-serif !important;
+    outline: none !important;
+}
+
+textarea:focus,
+input[type="text"]:focus,
+input[type="number"]:focus {
+    border-top: 2px solid #808080 !important;
+    border-left: 2px solid #808080 !important;
+    border-right: 2px solid #ffffff !important;
+    border-bottom: 2px solid #ffffff !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+/* ── Sunken Image / Gallery Frames ── */
+.image-frame {
+    border-top: 2px solid #808080 !important;
+    border-left: 2px solid #808080 !important;
+    border-right: 2px solid #ffffff !important;
+    border-bottom: 2px solid #ffffff !important;
+    background: #ffffff !important;
+}
+
+/* ── Upload Area ── */
+.upload-area {
+    border-top: 2px solid #808080 !important;
+    border-left: 2px solid #808080 !important;
+    border-right: 2px solid #ffffff !important;
+    border-bottom: 2px solid #ffffff !important;
+    background: #ffffff !important;
+}
+
+/* ── Buttons (Raised) ── */
+button {
+    border-top: 2px solid #ffffff !important;
+    border-left: 2px solid #ffffff !important;
+    border-right: 2px solid #808080 !important;
+    border-bottom: 2px solid #808080 !important;
+    box-shadow: none !important;
+    font-family: "Tahoma", "MS Sans Serif", sans-serif !important;
+}
+
+button:active {
+    border-top: 2px solid #808080 !important;
+    border-left: 2px solid #808080 !important;
+    border-right: 2px solid #ffffff !important;
+    border-bottom: 2px solid #ffffff !important;
+}
+
+/* ── Checkbox (Sunken) ── */
+input[type="checkbox"] {
+    border-top: 2px solid #808080 !important;
+    border-left: 2px solid #808080 !important;
+    border-right: 2px solid #ffffff !important;
+    border-bottom: 2px solid #ffffff !important;
+    background: #ffffff !important;
+}
+
+/* ── Slider ── */
+input[type="range"] {
+    border: none !important;
+    background: transparent !important;
+}
+
+/* ── Select / Dropdown (Sunken) ── */
+select {
+    border-top: 2px solid #808080 !important;
+    border-left: 2px solid #808080 !important;
+    border-right: 2px solid #ffffff !important;
+    border-bottom: 2px solid #ffffff !important;
+    background: #ffffff !important;
+}
+
+/* ── Accordion (Group Box) ── */
+.accordion {
+    border: 2px groove #c0c0c0 !important;
+    box-shadow: none !important;
+}
+
+/* ── Labels ── */
+.block-label, .label-wrap {
+    background: #c0c0c0 !important;
+}
+
+/* ── Tab Nav (if present) ── */
+.tab-nav button {
+    border-top: 2px solid #ffffff !important;
+    border-left: 2px solid #ffffff !important;
+    border-right: 2px solid #808080 !important;
+    border-bottom: none !important;
+    background: #c0c0c0 !important;
+    margin-right: 1px !important;
+}
+
+.tab-nav button.selected {
+    border-bottom: 2px solid #c0c0c0 !important;
+    position: relative;
+    z-index: 2;
+}
+
+/* ── Scrollbars (Classic Win98) ── */
+::-webkit-scrollbar {
+    width: 16px;
+    height: 16px;
+}
+
+::-webkit-scrollbar-track {
+    background: #c0c0c0;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #c0c0c0;
+    border-top: 2px solid #ffffff;
+    border-left: 2px solid #ffffff;
+    border-right: 2px solid #808080;
+    border-bottom: 2px solid #808080;
+}
+
+::-webkit-scrollbar-button {
+    display: block;
+    height: 16px;
+    width: 16px;
+    background: #c0c0c0;
+    border-top: 2px solid #ffffff;
+    border-left: 2px solid #ffffff;
+    border-right: 2px solid #808080;
+    border-bottom: 2px solid #808080;
+}
+
+::-webkit-scrollbar-corner {
+    background: #c0c0c0;
+}
+
+/* ── Progress Bar ── */
+.progress-bar {
+    background: #000080 !important;
+}
+
+/* ── Toast / Error Dialogs ── */
+.toast-wrap, .toast-body {
+    border-top: 2px solid #ffffff !important;
+    border-left: 2px solid #ffffff !important;
+    border-right: 2px solid #808080 !important;
+    border-bottom: 2px solid #808080 !important;
+    background: #c0c0c0 !important;
+    color: #000000 !important;
+}
+
+/* ── Footer ── */
+footer {
+    border-top: 1px solid #808080 !important;
+    background: #c0c0c0 !important;
 }
-#main-title h1 {font-size: 2.4em !important;}
 """
 
-with gr.Blocks() as demo:
+# ── Gradio Interface ─────────────────────────────────────────────────────
+
+with gr.Blocks(css=css, theme=windows_98_theme) as demo:
     with gr.Column(elem_id="col-container"):
         gr.Markdown("# **FireRed-Image-Edit-1.0-Fast**", elem_id="main-title")
-        gr.Markdown("Perform image edits using [FireRed-Image-Edit-1.0](https://huggingface.co/FireRedTeam/FireRed-Image-Edit-1.0) with 4-step fast inference.")
+        gr.Markdown(
+            "Perform image edits using "
+            "[FireRed-Image-Edit-1.0](https://huggingface.co/FireRedTeam/FireRed-Image-Edit-1.0) "
+            "with 4-step fast inference.",
+            elem_id="desc-text"
+        )
 
         with gr.Row(equal_height=True):
             with gr.Column():
@@ -248,13 +565,29 @@ with gr.Blocks() as demo:
                 run_button = gr.Button("Edit Image", variant="primary")
 
             with gr.Column():
-                output_image = gr.Image(label="Output Image", interactive=False, format="png", height=395)
+                output_image = gr.Image(
+                    label="Output Image",
+                    interactive=False,
+                    format="png",
+                    height=395
+                )
 
                 with gr.Accordion("Advanced Settings", open=False, visible=False):
-                    seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=0)
-                    randomize_seed = gr.Checkbox(label="Randomize Seed", value=True)
-                    guidance_scale = gr.Slider(label="Guidance Scale", minimum=1.0, maximum=10.0, step=0.1, value=1.0)
-                    steps = gr.Slider(label="Inference Steps", minimum=1, maximum=50, step=1, value=4)
+                    seed = gr.Slider(
+                        label="Seed", minimum=0,
+                        maximum=MAX_SEED, step=1, value=0
+                    )
+                    randomize_seed = gr.Checkbox(
+                        label="Randomize Seed", value=True
+                    )
+                    guidance_scale = gr.Slider(
+                        label="Guidance Scale", minimum=1.0,
+                        maximum=10.0, step=0.1, value=1.0
+                    )
+                    steps = gr.Slider(
+                        label="Inference Steps", minimum=1,
+                        maximum=50, step=1, value=4
+                    )
 
     run_button.click(
         fn=infer,
@@ -263,4 +596,8 @@ with gr.Blocks() as demo:
     )
 
 if __name__ == "__main__":
-    demo.queue(max_size=30).launch(css=css, theme=orange_red_theme, mcp_server=True, ssr_mode=False, show_error=True)
+    demo.queue(max_size=30).launch(
+        mcp_server=True,
+        ssr_mode=False,
+        show_error=True
+    )