Update app.py

app.py

@@ -92,12 +92,12 @@ def get_stats_info() -> str:
 def create_interface():
     """Create the main Gradio interface"""
     
-    # Custom CSS for clean, professional look
+    # Simplified CSS based on original
     css = """
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
     
     .gradio-container {
-        max-width: 1400px !important;
+        max-width: 1600px !important;
         margin: 0 auto !important;
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
         background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
@@ -115,124 +115,92 @@ def create_interface():
     .prose h1, .prose h2, .prose h3,
     .gr-markdown h1, .gr-markdown h2, .gr-markdown h3 {
         color: #111827 !important;
-        font-weight: 600 !important;
+        font-weight: 700 !important;
     }
     
-    .markdown-text p, .markdown-text li,
-    .prose p, .prose li,
-    .gr-markdown p, .gr-markdown li {
+    .markdown-text p, .markdown-text li, .markdown-text ul, .markdown-text ol,
+    .prose p, .prose li, .prose ul, .prose ol,
+    .gr-markdown p, .gr-markdown li, .gr-markdown ul, .gr-markdown ol {
         color: #374151 !important;
     }
     
     .markdown-text strong, .prose strong, .gr-markdown strong {
         color: #111827 !important;
-        font-weight: 600 !important;
+        font-weight: 700 !important;
     }
     
     /* Header styling */
     .main-header {
         text-align: center;
-        padding: 2.5rem 0 3rem 0;
-        background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
+        padding: 3rem 0 4rem 0;
+        background: linear-gradient(135deg, #0c0a09 0%, #1c1917 30%, #292524 60%, #44403c 100%);
         color: white;
-        margin: -2rem -2rem 2rem -2rem;
-        border-radius: 0 0 24px 24px;
-        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2);
+        margin: -2rem -2rem 3rem -2rem;
+        border-radius: 0 0 32px 32px;
+        box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.25);
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .main-header::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(45deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 50%, rgba(236, 72, 153, 0.1) 100%);
+        z-index: 1;
     }
     
     .main-title {
-        font-size: 2.5rem !important;
-        font-weight: 700 !important;
-        margin: 0 0 0.5rem 0 !important;
-        letter-spacing: -0.025em !important;
-        color: #ffffff !important;
+        font-size: 4rem !important;
+        font-weight: 900 !important;
+        margin: 0 0 1rem 0 !important;
+        letter-spacing: -0.05em !important;
+        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 25%, #8b5cf6 50%, #a855f7 75%, #ec4899 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        position: relative;
+        z-index: 2;
     }
     
     .subtitle {
-        font-size: 1.125rem !important;
-        font-weight: 400 !important;
-        opacity: 0.9 !important;
+        font-size: 1.5rem !important;
+        font-weight: 500 !important;
+        opacity: 0.95 !important;
         margin: 0 !important;
-        color: #cbd5e1 !important;
+        position: relative;
+        z-index: 2;
+        color: #ffffff !important;
     }
     
-    /* Prompt output styling */
     .prompt-output {
-        font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
-        font-size: 14px !important;
-        line-height: 1.6 !important;
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace !important;
+        font-size: 15px !important;
+        line-height: 1.8 !important;
         background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
         border: 2px solid #e2e8f0 !important;
-        border-radius: 12px !important;
-        padding: 1.5rem !important;
-        box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.08) !important;
+        border-radius: 20px !important;
+        padding: 2.5rem !important;
+        box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.1) !important;
         transition: all 0.3s ease !important;
         color: #1f2937 !important;
     }
     
     .prompt-output:hover {
-        box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.12) !important;
-        transform: translateY(-1px) !important;
-    }
-    
-    /* Button styling */
-    .gr-button-primary {
-        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
-        border: none !important;
-        color: white !important;
-        font-weight: 500 !important;
-        padding: 0.75rem 1.5rem !important;
-        border-radius: 8px !important;
-        transition: all 0.2s ease !important;
-    }
-    
-    .gr-button-primary:hover {
-        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
-        transform: translateY(-1px) !important;
-        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
-    }
-    
-    .gr-button-secondary {
-        background: #f1f5f9 !important;
-        border: 1px solid #cbd5e1 !important;
-        color: #475569 !important;
-        font-weight: 500 !important;
-        border-radius: 8px !important;
-    }
-    
-    .gr-button-secondary:hover {
-        background: #e2e8f0 !important;
-        border-color: #94a3b8 !important;
-    }
-    
-    /* Image upload area */
-    .gr-file-upload {
-        border: 2px dashed #cbd5e1 !important;
-        border-radius: 12px !important;
-        background: #f8fafc !important;
-    }
-    
-    /* Info boxes */
-    .info-box {
-        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
-        border: 1px solid #0284c7;
-        border-radius: 12px;
-        padding: 1rem;
-        margin: 1rem 0;
+        box-shadow: 0 25px 60px -5px rgba(0, 0, 0, 0.15) !important;
+        transform: translateY(-2px) !important;
     }
     """
     
     with gr.Blocks(
-        theme=gr.themes.Soft(
-            primary_hue="blue",
-            secondary_hue="slate",
-            neutral_hue="slate"
-        ),
+        theme=gr.themes.Soft(),
         title="Frame 0 Laboratory for MIA",
         css=css
     ) as interface:
         
-        # Header
         gr.HTML("""
         <div class="main-header">
             <div class="main-title">Frame 0 Laboratory for MIA</div>
@@ -240,32 +208,22 @@ def create_interface():
         </div>
         """)
         
-        # Main interface
         with gr.Row():
-            # Left column - Input
             with gr.Column(scale=1):
                 gr.Markdown("## Image Analysis")
                 
                 image_input = gr.Image(
-                    label="Upload Image for Analysis",
+                    label="Upload image for analysis",
                     type="pil",
-                    height=400
+                    height=500
                 )
                 
-                with gr.Row():
-                    analyze_btn = gr.Button(
-                        "🔍 Analyze Image",
-                        variant="primary",
-                        size="lg"
-                    )
-                    
-                    clear_btn = gr.Button(
-                        "🗑️ Clear",
-                        variant="secondary",
-                        size="lg"
-                    )
+                analyze_btn = gr.Button(
+                    "🔍 Analyze Image",
+                    variant="primary",
+                    size="lg"
+                )
                 
-                # Information panel
                 gr.Markdown("""
                 ### How it works:
                 
@@ -278,38 +236,29 @@ def create_interface():
                 **Supported formats:** JPG, PNG, WebP up to 1024px
                 """)
                 
-                # Statistics (collapsible)
+                # Statistics
                 with gr.Accordion("📊 Processing Stats", open=False):
                     stats_output = gr.Markdown(value="No processing completed yet.")
-                    
                     refresh_stats_btn = gr.Button("Refresh Stats", size="sm")
-                    refresh_stats_btn.click(
-                        fn=get_stats_info,
-                        outputs=stats_output
-                    )
             
-            # Right column - Output
             with gr.Column(scale=1):
                 gr.Markdown("## Results")
                 
-                # Score display
                 score_output = gr.HTML(
                     value='<div style="text-align: center; padding: 1rem;"><div style="font-size: 2rem; color: #ccc;">--</div><div style="font-size: 0.875rem; color: #999;">Quality Score</div></div>'
                 )
                 
-                # Optimized prompt
                 prompt_output = gr.Textbox(
                     label="🎯 Optimized FLUX Prompt",
                     placeholder="Upload an image to generate an optimized prompt...",
-                    lines=8,
-                    max_lines=15,
-                    elem_classes=["prompt-output"],
+                    lines=12,
+                    max_lines=20,
                     show_copy_button=True
                 )
                 
-                # Analysis report  
-                with gr.Accordion("📋 Detailed Analysis", open=True):
-                    info_output = gr.Markdown(value="")
+                info_output = gr.Markdown(value="")
+                
+                clear_btn = gr.Button("🗑️ Clear Analysis", size="sm")
         
         # Event handlers
         analyze_btn.click(
@@ -323,14 +272,20 @@ def create_interface():
             outputs=[prompt_output, info_output, score_output]
         )
         
-        # Footer
+        refresh_stats_btn.click(
+            fn=get_stats_info,
+            outputs=stats_output
+        )
+        
         gr.Markdown("""
         ---
-        **Frame 0 Laboratory for MIA** • Advanced AI Research & Development
+        ### Frame 0 Laboratory for MIA
+        
+        This system uses state-of-the-art vision-language models to analyze images and generate optimized 
+        prompts for FLUX image generation. The system applies proven optimization rules including camera 
+        configurations, lighting setups, and technical parameters for best results.
         
-        This tool uses state-of-the-art vision-language models to analyze images and generate optimized prompts 
-        for FLUX image generation. The system applies proven optimization rules including camera configurations, 
-        lighting setups, and technical parameters for best results.
+        **Frame 0 Laboratory for MIA** • Advanced AI Research & Development
         """)
     
     return interface
@@ -343,20 +298,13 @@ def main():
     # Create and launch interface
     demo = create_interface()
     
-    # Minimal launch configuration - ZeroGPU compatible
-    if ENVIRONMENT["is_spaces"]:
-        # For Hugging Face Spaces/ZeroGPU - minimal config
-        demo.launch()
-    else:
-        # For local development - full config
-        demo.launch(
-            server_name="0.0.0.0",
-            server_port=7860,
-            share=True,
-            show_error=True
-        )
-    
-    logger.info("Application launched successfully")
+    # Launch with proper configuration
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=True,
+        show_error=True
+    )
 
 
 if __name__ == "__main__":