Update app.py from anycoder

app.py

@@ -152,213 +152,266 @@ def read_file(path: str) -> str:
         content = f.read()
     return content
 
-# Apple-style CSS with mobile responsiveness
+# Enhanced Apple-style CSS - more minimalist and clean
 css = """
-/* Apple-style design with mobile responsiveness */
+/* Pure Apple Design System */
 .gradio-container {
     font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-    min-height: 100vh;
+    background: #ffffff !important;
+    color: #1d1d1f !important;
+    line-height: 1.47059 !important;
+    font-weight: 400 !important;
+    letter-spacing: -.022em !important;
 }
 
 #col-container {
     margin: 0 auto;
-    max-width: 1200px;
-    padding: 20px;
+    max-width: 980px;
+    padding: 40px 20px;
 }
 
-/* Header styling */
+/* Ultra-minimalist header */
 .gradio-container .gr-block-header {
-    background: rgba(255, 255, 255, 0.95) !important;
-    backdrop-filter: blur(20px) !important;
-    -webkit-backdrop-filter: blur(20px) !important;
-    border: 1px solid rgba(255, 255, 255, 0.2) !important;
-    border-radius: 20px !important;
-    padding: 30px !important;
-    margin-bottom: 30px !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+    margin-bottom: 60px !important;
+    box-shadow: none !important;
 }
 
 .gradio-container h1 {
-    font-weight: 700 !important;
-    font-size: 2.5rem !important;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    -webkit-background-clip: text !important;
-    -webkit-text-fill-color: transparent !important;
-    background-clip: text !important;
-    margin-bottom: 10px !important;
+    font-weight: 600 !important;
+    font-size: 3rem !important;
+    color: #1d1d1f !important;
+    text-align: center !important;
+    margin-bottom: 16px !important;
+    letter-spacing: -.003em !important;
 }
 
-/* Card styling for sections */
-.gradio-container .gr-column {
-    background: rgba(255, 255, 255, 0.95) !important;
-    backdrop-filter: blur(20px) !important;
-    -webkit-backdrop-filter: blur(20px) !important;
-    border: 1px solid rgba(255, 255, 255, 0.2) !important;
-    border-radius: 20px !important;
-    padding: 25px !important;
-    margin-bottom: 20px !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
+.gradio-container .subtitle {
+    font-size: 1.25rem !important;
+    font-weight: 400 !important;
+    color: #6e6e73 !important;
+    text-align: center !important;
+    margin-bottom: 8px !important;
+    line-height: 1.4 !important;
+}
+
+/* Clean card sections */
+.section-card {
+    background: #f2f2f7 !important;
+    border-radius: 18px !important;
+    padding: 32px !important;
+    margin-bottom: 32px !important;
+    border: none !important;
+    box-shadow: none !important;
 }
 
-/* Button styling */
+/* Apple-style buttons */
 .gradio-container .gr-button {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    background: #007aff !important;
     border: none !important;
-    border-radius: 12px !important;
+    border-radius: 8px !important;
     color: white !important;
-    font-weight: 600 !important;
-    padding: 12px 24px !important;
-    transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+    font-weight: 500 !important;
+    font-size: 17px !important;
+    padding: 16px 32px !important;
+    min-height: 44px !important;
+    transition: all 0.15s ease !important;
+    box-shadow: none !important;
+    letter-spacing: -.022em !important;
 }
 
 .gradio-container .gr-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
+    background: #0051d5 !important;
+    transform: none !important;
+    box-shadow: none !important;
 }
 
 .gradio-container .gr-button:active {
-    transform: translateY(0) !important;
+    background: #004bb8 !important;
+    transform: scale(0.98) !important;
+}
+
+/* Clean input fields */
+.gradio-container .gr-textbox,
+.gradio-container .gr-slider {
+    background: #ffffff !important;
+    border: 1px solid #d2d2d7 !important;
+    border-radius: 10px !important;
+    padding: 12px 16px !important;
+    font-size: 17px !important;
+    color: #1d1d1f !important;
+    transition: all 0.15s ease !important;
+    min-height: 44px !important;
+}
+
+.gradio-container .gr-textbox:focus,
+.gradio-container .gr-slider:focus {
+    border-color: #007aff !important;
+    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
+    outline: none !important;
 }
 
 /* Gallery styling */
 .gradio-container .gr-gallery {
-    border-radius: 16px !important;
+    border-radius: 12px !important;
+    border: 1px solid #d2d2d7 !important;
+    background: #ffffff !important;
     overflow: hidden !important;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
 }
 
-/* Input styling */
-.gradio-container .gr-textbox,
-.gradio-container .gr-slider,
-.gradio-container .gr-checkbox {
+/* Image output */
+.gradio-container .gr-image {
     border-radius: 12px !important;
-    border: 1px solid rgba(0, 0, 0, 0.1) !important;
-    background: rgba(255, 255, 255, 0.8) !important;
-    backdrop-filter: blur(10px) !important;
-    -webkit-backdrop-filter: blur(10px) !important;
+    border: 1px solid #d2d2d7 !important;
+    background: #ffffff !important;
+    overflow: hidden !important;
 }
 
-.gradio-container .gr-textbox:focus,
-.gradio-container .gr-slider:focus {
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
+/* Accordion - Apple style */
+.gradio-container .gr-accordion {
+    background: #f2f2f7 !important;
+    border: none !important;
+    border-radius: 12px !important;
+    padding: 0 !important;
+    margin-top: 24px !important;
 }
 
-/* Accordion styling */
-.gradio-container .gr-accordion {
-    border-radius: 16px !important;
-    border: 1px solid rgba(0, 0, 0, 0.1) !important;
-    background: rgba(255, 255, 255, 0.9) !important;
-    backdrop-filter: blur(10px) !important;
-    -webkit-backdrop-filter: blur(10px) !important;
+.gradio-container .gr-accordion .gr-accordion-button {
+    background: transparent !important;
+    border: none !important;
+    padding: 16px !important;
+    font-weight: 500 !important;
+    color: #1d1d1f !important;
 }
 
-/* Image output styling */
-.gradio-container .gr-image {
-    border-radius: 16px !important;
-    overflow: hidden !important;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
+/* Download button */
+.gradio-container .gr-download-button {
+    background: #34c759 !important;
+    border: none !important;
+    border-radius: 8px !important;
+    color: white !important;
+    font-weight: 500 !important;
+    font-size: 17px !important;
+    padding: 16px 32px !important;
+    min-height: 44px !important;
+}
+
+.gradio-container .gr-download-button:hover {
+    background: #30a14a !important;
 }
 
-/* Examples styling */
+/* Checkbox styling */
+.gradio-container .gr-checkbox {
+    background: #ffffff !important;
+    border: 2px solid #d2d2d7 !important;
+    border-radius: 6px !important;
+    width: 24px !important;
+    height: 24px !important;
+}
+
+.gradio-container .gr-checkbox.checked {
+    background: #007aff !important;
+    border-color: #007aff !important;
+}
+
+/* Examples section */
 .gradio-container .gr-examples {
-    border-radius: 16px !important;
-    background: rgba(255, 255, 255, 0.9) !important;
-    backdrop-filter: blur(10px) !important;
-    -webkit-backdrop-filter: blur(10px) !important;
-    padding: 20px !important;
+    background: #f2f2f7 !important;
+    border-radius: 18px !important;
+    padding: 24px !important;
+    border: none !important;
+}
+
+/* Label styling */
+.gradio-container .gr-label {
+    font-weight: 600 !important;
+    color: #1d1d1f !important;
+    font-size: 17px !important;
+    margin-bottom: 8px !important;
+    letter-spacing: -.022em !important;
 }
 
 /* Mobile responsiveness */
 @media (max-width: 768px) {
     #col-container {
-        padding: 10px !important;
+        padding: 20px 16px !important;
         max-width: 100% !important;
     }
     
-    .gradio-container .gr-block-header {
-        padding: 20px !important;
-        margin-bottom: 20px !important;
+    .gradio-container h1 {
+        font-size: 2rem !important;
+        margin-bottom: 12px !important;
     }
     
-    .gradio-container h1 {
-        font-size: 1.8rem !important;
+    .gradio-container .subtitle {
+        font-size: 1.1rem !important;
     }
     
-    .gradio-container .gr-column {
-        padding: 15px !important;
-        margin-bottom: 15px !important;
+    .section-card {
+        padding: 24px !important;
+        margin-bottom: 24px !important;
     }
     
     .gradio-container .gr-button {
-        padding: 10px 20px !important;
-        font-size: 0.9rem !important;
+        padding: 14px 28px !important;
+        font-size: 16px !important;
     }
     
     .gradio-container .gr-gallery {
-        height: 250px !important;
+        height: 200px !important;
+        columns: 2 !important;
     }
     
     .gradio-container .gr-row {
         flex-direction: column !important;
-    }
-    
-    .gradio-container .gr-slider,
-    .gradio-container .gr-textbox {
-        margin-bottom: 10px !important;
+        gap: 20px !important;
     }
 }
 
 @media (max-width: 480px) {
     .gradio-container h1 {
-        font-size: 1.5rem !important;
-    }
-    
-    .gradio-container .gr-block-header {
-        padding: 15px !important;
+        font-size: 1.75rem !important;
     }
     
-    .gradio-container .gr-column {
-        padding: 12px !important;
+    .section-card {
+        padding: 20px !important;
     }
     
     .gradio-container .gr-gallery {
-        height: 200px !important;
+        height: 180px !important;
         columns: 1 !important;
     }
 }
 
-/* Smooth animations */
+/* Remove all animations for Apple-like snappiness */
 .gradio-container * {
-    transition: all 0.3s ease !important;
+    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
+}
+
+/* Hide unnecessary elements */
+.gradio-container .gr-footer,
+.gradio-container .gr-header {
+    display: none !important;
 }
 
-/* Custom scrollbar */
+/* Clean scrollbar */
 .gradio-container ::-webkit-scrollbar {
-    width: 8px !important;
+    width: 3px !important;
 }
 
 .gradio-container ::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.1) !important;
-    border-radius: 10px !important;
+    background: transparent !important;
 }
 
 .gradio-container ::-webkit-scrollbar-thumb {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    border-radius: 10px !important;
+    background: #d2d2d7 !important;
+    border-radius: 3px !important;
 }
 
 .gradio-container ::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
-}
-
-/* Loading states */
-.gradio-container .gr-loading {
-    background: rgba(255, 255, 255, 0.95) !important;
-    backdrop-filter: blur(20px) !important;
-    -webkit-backdrop-filter: blur(20px) !important;
+    background: #007aff !important;
 }
 """
 
@@ -368,77 +421,68 @@ with open('examples/0_examples.json', 'r') as file: examples = json.load(file)
 print(examples)
 
 # Gradio 6 syntax - no parameters in Blocks()
-with gr.Blocks() as demo:
+with gr.Blocks(css=css) as demo:
     with gr.Column(elem_id="col-container"):
         with gr.Column():
-            # Updated header with Apple-style branding
+            # Ultra-minimalist Apple-style header
             gr.HTML("""
             <div style="text-align: center; max-width: 600px; margin: 0 auto;">
-                <h1 style="font-weight: 700; font-size: 2.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px;">
-                    Qwen Image to LoRA
-                </h1>
-                <div class="grid-container">
-                    <p style="font-size: 1.1rem; color: #333; margin-bottom: 15px;">
-                        Generate LoRA from a few images with Apple-inspired design
-                    </p>
-                    <p style="font-size: 0.9rem; color: #666;">
-                        Demo by <a href="https://aisudo.com/" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 600;">AiSudo</a> 😊
-                        <br>
-                        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: #667eea; text-decoration: none; font-size: 0.8rem;">Built with anycoder</a>
-                    </p>
-                </div>
+                <h1>Qwen Image to LoRA</h1>
+                <p class="subtitle">Generate custom LoRA models from your images</p>
+                <p style="font-size: 14px; color: #86868b; margin-top: 16px;">
+                    Demo by <a href="https://aisudo.com/" target="_blank" style="color: #007aff; text-decoration: none;">AiSudo</a> • 
+                    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: #007aff; text-decoration: none;">Built with anycoder</a>
+                </p>
             </div>
             """)
         
         with gr.Row():
-            with gr.Column():
+            with gr.Column(elem_classes=["section-card"]):
                 input_images = gr.Gallery(
-                    label="📸 Input Images", 
+                    label="Input Images", 
                     file_types=["image"],
                     show_label=True, 
-                    elem_id="gallery", 
                     columns=2, 
                     object_fit="cover", 
-                    height=300)
+                    height=250)
                 
-                lora_button = gr.Button("🚀 Generate LoRA", variant="primary", size="lg")
+                lora_button = gr.Button("Generate LoRA", size="lg")
 
-            with gr.Column():
+            with gr.Column(elem_classes=["section-card"]):
                 lora_name = gr.Textbox(
-                    label="📁 Generated LoRA", 
+                    label="Generated LoRA", 
                     lines=2, 
                     interactive=False,
-                    placeholder="LoRA will appear here after generation..."
+                    placeholder="Your LoRA will appear here..."
                 )
                 lora_download = gr.DownloadButton(
-                    label="⬇️ Download LoRA", 
+                    label="Download LoRA", 
                     interactive=False,
                     size="lg"
                 )
         
-        with gr.Column(elem_id='imagen-container') as imagen_container:
-            gr.Markdown("### 🎨 After your LoRA is ready, you can try generating images here.")
+        with gr.Column(elem_classes=["section-card"]) as imagen_container:
+            gr.Markdown("### Generate Images")
             with gr.Row():
                 with gr.Column():
                     prompt = gr.Textbox(
-                        label="💭 Prompt",
-                        show_label=True,
+                        label="Prompt",
                         lines=2,
-                        placeholder="Enter your prompt...",
-                        value="a man in a fishing boat.",
+                        placeholder="Describe what you want to generate...",
+                        value="a person in a fishing boat.",
                     )
                     
-                    imagen_button = gr.Button("🎨 Generate Image", variant="primary", interactive=False, size="lg")    
+                    imagen_button = gr.Button("Generate Image", interactive=False, size="lg")    
                     
-                    with gr.Accordion("⚙️ Advanced Settings", open=False):
+                    with gr.Accordion("Settings", open=False):
                         negative_prompt = gr.Textbox(
-                            label="🚫 Negative prompt",
-                            lines=2,
-                            placeholder="Enter your negative prompt",
-                            value="blurry ugly bad"
+                            label="Negative Prompt",
+                            lines=1,
+                            placeholder="What to avoid...",
+                            value="blurry, low quality"
                         )
                         num_inference_steps = gr.Slider(
-                            label="🔄 Steps",
+                            label="Steps",
                             minimum=1,
                             maximum=50,
                             step=1,
@@ -446,48 +490,38 @@ with gr.Blocks() as demo:
                         )
                         with gr.Row():
                             width = gr.Slider(
-                                label="📏 Width",
+                                label="Width",
                                 minimum=512,
                                 maximum=1280,
                                 step=32,
                                 value=768, 
                             )
-
                             height = gr.Slider(
-                                label="📐 Height",
+                                label="Height",
                                 minimum=512,
                                 maximum=1280,
                                 step=32,
                                 value=1024,
                             )
-                        with gr.Row():
-                            seed = gr.Slider(
-                                label="🎲 Seed",
-                                minimum=0,
-                                maximum=MAX_SEED,
-                                step=1,
-                                value=42,
-                            )
-                            guidance_scale = gr.Slider(
-                                label="🎯 Guidance scale",
-                                minimum=0.0,
-                                maximum=10.0,
-                                step=0.1,
-                                value=3.5,
-                            )
-                            randomize_seed = gr.Checkbox(label="🔀 Randomize seed", value=False)
+                        seed = gr.Slider(
+                            label="Seed",
+                            minimum=0,
+                            maximum=MAX_SEED,
+                            step=1,
+                            value=42,
+                        )
+                        randomize_seed = gr.Checkbox(label="Randomize Seed", value=False)
 
                 with gr.Column():
                     output_image = gr.Image(
-                        label="🖼️ Generated Image", 
-                        show_label=True,
-                        height=400
+                        label="Generated Image", 
+                        height=350
                     )
                     
         gr.Examples(
             examples=examples, 
             inputs=[input_images],
-            label="📚 Examples"
+            label="Examples"
         )
         gr.Markdown(read_file("static/footer.md"))
 
@@ -521,27 +555,53 @@ if __name__ == "__main__":
     # Gradio 6 syntax - all launch parameters go here
     demo.launch(
         mcp_server=True, 
-        css=css,
-        theme=gr.themes.Soft(
-            primary_hue="indigo",
-            secondary_hue="purple",
-            neutral_hue="slate",
-            font=gr.themes.GoogleFont("Inter"),
-            text_size="lg",
-            spacing_size="lg",
-            radius_size="md"
+        theme=gr.themes.Base(
+            primary_hue="blue",
+            secondary_hue="gray",
+            neutral_hue="gray",
+            font=[
+                gr.themes.GoogleFont("Inter"),
+                "ui-sans-serif",
+                "system-ui",
+                "sans-serif"
+            ],
+            font_mono=[
+                gr.themes.GoogleFont("JetBrains Mono"),
+                "ui-monospace",
+                "Consolas",
+                "monospace"
+            ]
         ).set(
-            button_primary_background_fill="linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-            button_primary_background_fill_hover="linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%)",
-            block_background_fill="rgba(255, 255, 255, 0.95)",
-            block_background_fill_dark="rgba(30, 30, 30, 0.95)",
-            block_border_width="1px",
-            block_border_color="rgba(255, 255, 255, 0.2)",
-            block_shadow="0 8px 32px rgba(0, 0, 0, 0.1)",
-            block_label_text_weight="600",
-            block_title_text_weight="700",
+            body_background_fill="white",
+            body_background_fill_dark="#000000",
+            button_primary_background_fill="#007aff",
+            button_primary_background_fill_hover="#0051d5",
+            button_primary_background_fill_active="#004bb8",
+            button_primary_text_color="white",
+            button_secondary_background_fill="#f2f2f7",
+            button_secondary_background_fill_hover="#e5e5ea",
+            block_background_fill="white",
+            block_background_fill_dark="#1c1c1e",
+            block_border_width="0px",
+            block_border_color="#d2d2d7",
+            block_border_color_dark="#38383a",
+            block_radius="18px",
+            block_shadow="none",
+            block_label_text_color="#1d1d1f",
+            block_label_text_color_dark="#f2f2f2",
+            block_title_text_color="#1d1d1f",
+            block_title_text_color_dark="#f2f2f2",
+            input_background_fill="white",
+            input_background_fill_dark="#1c1c1e",
+            input_border_color="#d2d2d7",
+            input_border_color_dark="#38383a",
+            input_border_width="1px",
+            input_radius="10px",
+            input_shadow="none",
+            input_text_color="#1d1d1f",
+            input_text_color_dark="#f2f2f2",
         ),
         footer_links=[
             {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}
         ]
-    )
+    )