Update app.py

app.py

@@ -4,16 +4,64 @@ import torch
 from PIL import Image
 from transformers import AutoProcessor
 from longcat_image.models import LongCatImageTransformer2DModel
-from longcat_image.pipelines import LongCatImageEditPipeline, LongCatImagePipeline
+from longcat_image.pipelines import LongCatImageEditPipeline, LongCatImageEditPipeline
 import numpy as np
 
+# 1. Define the Custom Theme Class
+# Inherit from Base for simplicity and modify core parameters.
+class AppleSoft(gr.themes.Base):
+    def __init__(
+        self,
+        # Use a deep Indigo/Blue for primary actions (like the iOS/macOS blue)
+        primary_hue=gr.themes.colors.indigo, 
+        secondary_hue=gr.themes.colors.gray,
+        neutral_hue=gr.themes.colors.neutral,
+        # Increase radius for "card" look (iOS uses large rounded corners)
+        radius_size=gr.themes.sizes.radius_lg,
+        # Set font to use a system font stack (like the old custom CSS)
+        font=[gr.themes.GoogleFont("Source Sans Pro"), "system-ui", "sans-serif"],
+        font_mono=gr.themes.GoogleFont("IBM Plex Mono"),
+        spacing_size=gr.themes.sizes.spacing_lg,
+        text_size=gr.themes.sizes.text_md,
+        **kwargs
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            radius_size=radius_size,
+            font=font,
+            font_mono=font_mono,
+            spacing_size=spacing_size,
+            text_size=text_size,
+            **kwargs
+        )
+        # 2. Use .set() to override specific CSS variables for the Apple aesthetic
+        self.set(
+            # Remove main block shadow for a flatter, modern look
+            block_shadow="none",
+            block_label_padding="*spacing_sm *spacing_lg",
+            # Apply light shadow and clean background to input/panel elements (the "card" effect)
+            block_background_fill="white",
+            block_border_width="1px",
+            block_border_color="*neutral_200",
+            # Ensure primary button looks clean and elevated
+            button_primary_background_fill="*primary_500",
+            button_primary_background_fill_hover="*primary_400",
+            button_primary_border_color="*primary_500",
+            button_primary_shadow="0 2px 8px *primary_300", # Subtle shadow for depth
+        )
+
+# Instantiate the custom theme
+apple_theme = AppleSoft()
+
 # --- Model Loading (Kept for completeness) ---
 device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
 
 # Text-to-Image Model
 t2i_model_id = 'meituan-longcat/LongCat-Image'
 print(f"🔄 Loading Text-to-Image model from {t2i_model_id}...")
-
+# ... (rest of model loading remains the same) ...
 t2i_text_processor = AutoProcessor.from_pretrained(
     t2i_model_id,
     subfolder='tokenizer'
@@ -38,7 +86,7 @@ print(f"✅ Text-to-Image model loaded successfully")
 # Image Edit Model
 edit_model_id = 'meituan-longcat/LongCat-Image-Edit'
 print(f"🔄 Loading Image Edit model from {edit_model_id}...")
-
+# ... (rest of model loading remains the same) ...
 edit_text_processor = AutoProcessor.from_pretrained(
     edit_model_id,
     subfolder='tokenizer'
@@ -139,113 +187,16 @@ t2i_example_prompts = [
     ["A cute robot sitting at a desk, digital art style", 1024, 1024, 44],
 ]
 
-# --- Custom CSS (Cleaned up for maximum layout flexibility) ---
-custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap');
-
-* {
-    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-}
-
-/* Base styling relying on fill_width=True and Gradio's structure */
-.gradio-container {
-    max-width: 100% !important; /* Allow full width */
-    margin: auto !important;
-}
-
-/* Background gradient for the overall app */
-#component-0 {
-    background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%) !important;
-}
-
-/* Tab bar styling for the segmented control look */
-.tabs {
-    border: none !important;
-    background: transparent !important;
-}
-
-.tab-nav {
-    border: none !important;
-    background: rgba(255, 255, 255, 0.8) !important;
-    backdrop-filter: blur(20px) !important;
-    border-radius: 12px !important;
-    padding: 4px !important;
-    gap: 4px !important;
-}
-
-button.selected {
-    background: white !important;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
-    border-radius: 8px !important;
-    font-weight: 500 !important;
-}
-
-/* Image and input component styling */
-.input-image, .output-image {
-    border-radius: 16px !important;
-    overflow: hidden !important;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
-}
-
-textarea, input[type="text"] {
-    border: 1px solid #d2d2d7 !important;
-    border-radius: 12px !important;
-    padding: 12px 16px !important;
-    font-size: 15px !important;
-    transition: all 0.2s ease !important;
-}
-
-textarea:focus, input[type="text"]:focus {
-    border-color: #007aff !important;
-    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
-}
-
-/* Primary Button Styling */
-.primary-btn {
-    background: linear-gradient(180deg, #007aff 0%, #0051d5 100%) !important;
-    border: none !important;
-    border-radius: 12px !important;
-    padding: 14px 28px !important;
-    font-size: 16px !important;
-    font-weight: 500 !important;
-    color: white !important;
-    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
-    transition: all 0.2s ease !important;
-}
-
-.primary-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 16px rgba(0, 122, 255, 0.4) !important;
-}
-
-/* Card Style (targets gr-panel when variant="panel" is used) */
-.card {
-    background: white !important;
-    border-radius: 16px !important;
-    padding: 24px !important;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
-}
-
-/* Mobile adjustments (retains padding) */
-@media (max-width: 768px) {
-    .gradio-container {
-        padding: 0 8px !important;
-    }
-    .card {
-        padding: 16px !important;
-    }
-}
-"""
-
 # Build Gradio interface
-# Using fill_width=True on Blocks to maximize available horizontal space
-with gr.Blocks(fill_width=True) as demo:
+# Passed theme=apple_theme here and fill_width=True for responsiveness
+with gr.Blocks(theme=apple_theme, fill_width=True) as demo:
+    # Retaining the HTML header for branding/title
     gr.HTML("""
         <div style="text-align: center; padding: 40px 20px 30px 20px;">
-            <h1 style="font-size: 48px; font-weight: 700; margin: 0; background: linear-gradient(90deg, #007aff 0%, #5856d6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
+            <h1 style="font-size: 48px; font-weight: 700; margin: 0; color: var(--primary-500);">
                 LongCat Studio
             </h1>
-            <p style="font-size: 20px; color: #86868b; margin-top: 12px; font-weight: 400;">
+            <p style="font-size: 20px; color: var(--body-text-color-subdued); margin-top: 12px; font-weight: 400;">
                 AI-powered image generation and editing
             </p>
         </div>
@@ -256,14 +207,13 @@ with gr.Blocks(fill_width=True) as demo:
         with gr.TabItem("Edit Image", id=0):
             with gr.Row(): 
                 # Left Column (Inputs)
-                with gr.Column(scale=1, min_width=0, variant="panel"): 
+                with gr.Column(scale=1, min_width=0, variant="panel"): # variant="panel" applies the card styling from theme
                     gr.Markdown("### 🖼️ Input Image & Controls")
                     input_image = gr.Image(
                         label="Upload Image",
                         type="pil",
                         sources=["upload", "clipboard"],
                         height=450,
-                        elem_classes=["input-image"]
                     )
 
                     prompt = gr.Textbox(
@@ -282,7 +232,7 @@ with gr.Blocks(fill_width=True) as demo:
                         visible=False
                     )
 
-                    edit_btn = gr.Button("Edit Image", variant="primary", size="lg", elem_classes=["primary-btn"])
+                    edit_btn = gr.Button("Edit Image", variant="primary", size="lg") 
 
                 # Right Column (Output)
                 with gr.Column(scale=1, min_width=0, variant="panel"):
@@ -291,7 +241,6 @@ with gr.Blocks(fill_width=True) as demo:
                         label="Result",
                         type="pil",
                         height=450,
-                        elem_classes=["output-image"]
                     )
 
             gr.HTML("<div style='margin: 30px 0 20px 0;'></div>")
@@ -344,7 +293,7 @@ with gr.Blocks(fill_width=True) as demo:
                         visible=False
                     )
 
-                    generate_btn = gr.Button("Generate Image", variant="primary", size="lg", elem_classes=["primary-btn"])
+                    generate_btn = gr.Button("Generate Image", variant="primary", size="lg") 
 
                 # Right Column (Output)
                 with gr.Column(scale=1, min_width=0, variant="panel"):
@@ -353,7 +302,6 @@ with gr.Blocks(fill_width=True) as demo:
                         label="Result",
                         type="pil",
                         height=550,
-                        elem_classes=["output-image"]
                     )
 
             gr.HTML("<div style='margin: 30px 0 20px 0;'></div>")
@@ -383,18 +331,18 @@ with gr.Blocks(fill_width=True) as demo:
 
     # Footer
     gr.HTML("""
-        <div style="text-align: center; margin-top: 60px; padding: 30px 20px; border-top: 1px solid #d2d2d7;">
-            <p style="color: #86868b; font-size: 13px; margin: 0;">
+        <div style="text-align: center; margin-top: 60px; padding: 30px 20px; border-top: 1px solid var(--border-color-subdued);">
+            <p style="color: var(--body-text-color-subdued); font-size: var(--text-sm); margin: 0;">
                 Powered by LongCat • Built with 
-                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: #007aff; text-decoration: none;">anycoder</a>
+                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--primary-500); text-decoration: none;">anycoder</a>
             </p>
         </div>
     """)
 
-# Launch the app with theme and custom CSS
+# Launch the app with the custom, programmatic theme
 if __name__ == "__main__":
     demo.launch(
         mcp_server=True,
-        theme=gr.themes.Soft(), 
-        css=custom_css 
+        theme=apple_theme, 
+        # Custom CSS is removed to ensure theme integrity
     )