Update app.py

app.py

@@ -7,18 +7,27 @@ from longcat_image.models import LongCatImageTransformer2DModel
 from longcat_image.pipelines import LongCatImageEditPipeline, LongCatImagePipeline
 import numpy as np
 
-# 1. DEFINE THE CUSTOM THEME CLASS (Fixed: Removing invalid keys)
+# 1. DEFINE THE CUSTOM APPLE THEME
 class AppleStyleTheme(gr.themes.Base):
     def __init__(
         self,
-        # Core Colors: Apple uses a specific blue, crisp grays, and clean white
+        # Apple Core Colors: System Blue, Cool Grays
         primary_hue=gr.themes.colors.blue,
         secondary_hue=gr.themes.colors.gray,
-        neutral_hue=gr.themes.colors.neutral,
-        # Core Sizing: Larger radius for that "iOS Card" look
+        neutral_hue=gr.themes.colors.gray, 
+        # Sizing: Rounded corners (iOS style) and generous spacing
         radius_size=gr.themes.sizes.radius_lg, 
-        # Core Fonts: System fonts are key for the Apple feel
-        font=["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+        # Fonts: The stack that prioritizes San Francisco (Apple's font)
+        font=[
+            "system-ui", 
+            "-apple-system", 
+            "BlinkMacSystemFont", 
+            "Segoe UI", 
+            "Roboto", 
+            "Helvetica Neue", 
+            "Arial", 
+            "sans-serif"
+        ],
         font_mono=gr.themes.GoogleFont("IBM Plex Mono"),
         spacing_size=gr.themes.sizes.spacing_lg,
         text_size=gr.themes.sizes.text_md,
@@ -35,33 +44,69 @@ class AppleStyleTheme(gr.themes.Base):
             text_size=text_size,
             **kwargs
         )
-        # Use .set() to modify specific variables. 
+        
+        # Override specific CSS variables for the "Apple Look"
         self.set(
-            # Global Backgrounds
-            body_background_fill="*neutral_50", 
-            block_background_fill="white",
+            # Backgrounds: Very light gray background, pure white cards
+            body_background_fill="#F5F5F7", # Apple's signature light gray
+            block_background_fill="#FFFFFF",
+            block_label_background_fill="#FFFFFF",
             
-            # Block (Card) Styles - Clean, thin borders, no deep shadows
-            block_border_color="*neutral_200",
+            # Borders: Very subtle, thin borders
+            block_border_color="#E5E5EA",
             block_border_width="1px",
-            block_shadow="none",
+            block_shadow="0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)", # Soft shadow
+            block_padding="*spacing_lg", 
             
-            # Primary Button Styles (The "Apple Blue" button)
-            button_primary_background_fill="*primary_600",
-            button_primary_background_fill_hover="*primary_500",
+            # Inputs: Light gray background for inputs (like iOS grouped tables)
+            input_background_fill="#F2F2F7", 
+            input_border_color="transparent",
+            input_shadow="none",
+            input_shadow_focus="0 0 0 2px #007AFF", # Apple Blue focus ring
+            
+            # Buttons: Flat Apple Blue button
+            button_primary_background_fill="#007AFF",
+            button_primary_background_fill_hover="#0071E3",
             button_primary_text_color="white",
-            button_primary_border_color="*primary_600",
+            button_primary_border_color="transparent",
+            button_primary_shadow="none",
             
-            # Input Styles
-            input_background_fill="*neutral_50",
-            input_border_color="*neutral_200",
-            input_shadow="none",
-            input_shadow_focus="0 0 0 2px *primary_200",
+            # Text
+            block_label_text_color="*neutral_500",
+            block_title_text_color="*neutral_900",
+            
+            # Tabs
+            tabs_border_color="#E5E5EA",
+            text_color="#1d1d1f",
         )
 
 # Instantiate the theme
 apple_theme = AppleStyleTheme()
 
+# 2. CUSTOM CSS FOR DARK MODE FIXES
+# This CSS targets the HTML elements specifically when Gradio is in "dark" mode.
+custom_css = """
+/* Force title color in dark mode */
+.dark #app-title {
+    color: #F5F5F7 !important;
+}
+.dark #app-subtitle {
+    color: #A1A1A6 !important;
+}
+
+/* Dark mode adjustments for the custom theme colors */
+.dark .gradio-container {
+    background-color: #000000 !important;
+}
+.dark .block.panel {
+    background-color: #1C1C1E !important; /* Apple Dark Mode Gray */
+    border-color: #2C2C2E !important;
+}
+.dark input, .dark textarea, .dark .gr-input {
+    background-color: #2C2C2E !important;
+}
+"""
+
 # --- Model Loading ---
 device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
 
@@ -193,13 +238,16 @@ t2i_example_prompts = [
 ]
 
 # Build Gradio interface
+# Theme and CSS are NOT passed here for Gradio 6 compliance
 with gr.Blocks(fill_width=True) as demo:
+    
+    # Header with IDs for CSS targeting
     gr.HTML("""
         <div style="text-align: center; padding: 40px 20px 30px 20px;">
-            <h1 style="font-size: 48px; font-weight: 700; margin: 0; color: #1d1d1f;">
+            <h1 id="app-title" style="font-size: 48px; font-weight: 700; margin: 0; color: #1d1d1f; letter-spacing: -0.02em;">
                 LongCat Studio
             </h1>
-            <p style="font-size: 20px; color: #86868b; margin-top: 12px; font-weight: 400;">
+            <p id="app-subtitle" style="font-size: 20px; color: #86868b; margin-top: 12px; font-weight: 400;">
                 AI-powered image generation and editing
             </p>
         </div>
@@ -210,6 +258,7 @@ with gr.Blocks(fill_width=True) as demo:
         with gr.TabItem("Edit Image", id=0):
             with gr.Row(): 
                 # Left Column: Inputs 
+                # scale=1 without min_width allows stacking on mobile
                 with gr.Column(scale=1, variant="panel"): 
                     gr.Markdown("### 🖼️ Input Image & Controls")
                     input_image = gr.Image(
@@ -271,13 +320,14 @@ with gr.Blocks(fill_width=True) as demo:
                         max_lines=6
                     )
 
+                    # HIDDEN SLIDERS (values passed silently)
                     t2i_width = gr.Slider(
                         minimum=512,
                         maximum=2048,
                         value=1344,
                         step=64,
                         label="Width",
-                        visible=False, # <--- Hiding Width Slider
+                        visible=False,
                     )
 
                     t2i_height = gr.Slider(
@@ -286,7 +336,7 @@ with gr.Blocks(fill_width=True) as demo:
                         value=768,
                         step=64,
                         label="Height",
-                        visible=False, # <--- Hiding Height Slider
+                        visible=False,
                     )
 
                     t2i_seed = gr.Slider(
@@ -345,8 +395,10 @@ with gr.Blocks(fill_width=True) as demo:
     """)
 
 # Launch the app
+# Theme and CSS are passed here for Gradio 6 compliance
 if __name__ == "__main__":
     demo.launch(
         mcp_server=True,
         theme=apple_theme,
+        css=custom_css
     )