Upload folder using huggingface_hub

.claude/settings.local.json

@@ -55,7 +55,9 @@
       "Bash(rm /Users/deep-diver/Developers/auto-diffusers/optimization_docs.txt)",
       "Bash(grep -n -B5 -A15 \"container\\|margin\\|padding\" /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
       "Bash(grep -n \"\\\"\\\"\\\"\" /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
-      "Bash(grep -n '\"\"\"' /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)"
+      "Bash(grep -n '\"\"\"' /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
+      "Bash(timeout 15s python gradio_app.py)",
+      "Bash(grep -n \"gpu_name_custom\" gradio_app.py)"
     ],
     "deny": []
   },

gradio_app.py

@@ -114,10 +114,10 @@ class GradioAutodiffusers:
         try:
             # Create manual hardware specs
             # Parse dtype selection
-            if dtype_selection == "Auto (Let AI decide)":
+            if dtype_selection == "Auto":
                 user_dtype = None
             else:
-                user_dtype = dtype_selection
+                user_dtype = f"torch.{dtype_selection}"
             
             manual_specs = {
                 'platform': platform,
@@ -210,7 +210,7 @@ def create_gradio_interface():
         .main-container {
             max-width: 1400px;
             margin: 0 auto;
-            padding: 2rem;
+            padding: 1rem;
             /* Removed position: relative that can interfere with dropdown positioning */
         }
         
@@ -234,20 +234,22 @@ def create_gradio_interface():
         .glass-card {
             background: rgba(255, 255, 255, 0.25) !important;
             border: 1px solid rgba(255, 255, 255, 0.2) !important;
-            border-radius: 20px !important;
+            border-radius: 8px !important;
             box-shadow: 
                 0 8px 32px rgba(0, 0, 0, 0.1),
                 inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+            margin-bottom: 1rem !important;
             /* Removed backdrop-filter and transforms that break dropdown positioning */
         }
         
         .ultra-glass {
             background: rgba(255, 255, 255, 0.15) !important;
             border: 1px solid rgba(255, 255, 255, 0.3) !important;
-            border-radius: 24px !important;
+            border-radius: 10px !important;
             box-shadow: 
                 0 12px 40px rgba(0, 0, 0, 0.15),
                 inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
+            margin-bottom: 1rem !important;
             /* Removed backdrop-filter that interferes with dropdown positioning */
         }
         
@@ -259,12 +261,15 @@ def create_gradio_interface():
                 rgba(59, 130, 246, 0.9) 100%) !important;
             backdrop-filter: blur(20px) !important;
             border: 1px solid rgba(255, 255, 255, 0.2) !important;
-            border-radius: 24px !important;
+            border-radius: 10px !important;
             box-shadow: 
                 0 20px 60px rgba(124, 58, 237, 0.3),
                 inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
             position: relative;
             overflow: hidden;
+            width: 100% !important;
+            max-width: 100% !important;
+            box-sizing: border-box !important;
         }
         
         .hero-header::before {
@@ -298,7 +303,7 @@ def create_gradio_interface():
             font-weight: 700 !important;
             font-size: 1.1rem !important;
             padding: 1rem 3rem !important;
-            border-radius: 16px !important;
+            border-radius: 8px !important;
             box-shadow: 
                 0 8px 32px rgba(102, 126, 234, 0.4),
                 inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
@@ -495,135 +500,132 @@ def create_gradio_interface():
         }
         
         
-        /* Code Areas - Ultra Premium Styling */
+        /* Code Areas - Moderate Clean Styling */
         .code-container {
-            background: linear-gradient(145deg, 
-                rgba(15, 23, 42, 0.98) 0%,
-                rgba(30, 41, 59, 0.95) 50%,
-                rgba(15, 23, 42, 0.98) 100%) !important;
-            backdrop-filter: blur(30px) !important;
-            border: 2px solid transparent !important;
-            background-clip: padding-box !important;
-            border-radius: 20px !important;
-            position: relative !important;
+            background: rgba(248, 250, 252, 0.95) !important;
+            border: 1px solid rgba(226, 232, 240, 0.8) !important;
+            border-radius: 6px !important;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
             overflow: hidden !important;
-            box-shadow: 
-                0 20px 60px rgba(0, 0, 0, 0.4),
-                0 8px 32px rgba(15, 23, 42, 0.3),
-                inset 0 1px 0 rgba(255, 255, 255, 0.1),
-                inset 0 -1px 0 rgba(71, 85, 105, 0.2) !important;
-        }
-        
-        .code-container::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(45deg, 
-                rgba(99, 102, 241, 0.1) 0%,
-                rgba(139, 92, 246, 0.1) 25%,
-                rgba(59, 130, 246, 0.1) 50%,
-                rgba(139, 92, 246, 0.1) 75%,
-                rgba(99, 102, 241, 0.1) 100%) !important;
-            border-radius: 20px !important;
-            z-index: -1 !important;
-            animation: code-shimmer 3s ease-in-out infinite !important;
-        }
-        
-        @keyframes code-shimmer {
-            0%, 100% { opacity: 0.3; }
-            50% { opacity: 0.6; }
         }
         
         /* Code editor styling */
         .code-container .cm-editor {
-            background: transparent !important;
-            border-radius: 16px !important;
+            background: #ffffff !important;
+            border-radius: 4px !important;
             font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Fira Code', monospace !important;
-            font-size: 13px !important;
-            line-height: 1.6 !important;
-        }
-        
-        .code-container .cm-focused {
-            outline: none !important;
-            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4) !important;
+            font-size: 14px !important;
+            line-height: 1.5 !important;
         }
         
+        /* Enable soft wrapping for code content */
         .code-container .cm-content {
+            white-space: pre-wrap !important;
             padding: 1.5rem !important;
-            color: #e2e8f0 !important;
+            color: #374151 !important;
+        }
+        
+        .code-container .cm-focused {
+            outline: none !important;
+            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
         }
         
         .code-container .cm-line {
             padding-left: 0.5rem !important;
+            white-space: pre-wrap !important;
+            word-wrap: break-word !important;
+            overflow-wrap: break-word !important;
         }
         
-        /* Syntax highlighting for Python */
-        .code-container .cm-keyword { color: #f472b6 !important; }
-        .code-container .cm-string { color: #34d399 !important; }
-        .code-container .cm-comment { color: #94a3b8 !important; font-style: italic !important; }
-        .code-container .cm-number { color: #fbbf24 !important; }
-        .code-container .cm-variable { color: #60a5fa !important; }
-        .code-container .cm-function { color: #a78bfa !important; }
-        .code-container .cm-operator { color: #fb7185 !important; }
+        /* Force wrapping ONLY - NO SCROLLING */
+        .code-container .cm-editor {
+            white-space: pre-wrap !important;
+            overflow-x: hidden !important;
+        }
+        
+        .code-container .cm-scroller {
+            overflow-x: hidden !important;
+            width: 100% !important;
+        }
+        
+        .code-container .cm-editor .cm-content {
+            white-space: pre-wrap !important;
+            word-break: break-all !important;
+            overflow-wrap: anywhere !important;
+            width: 100% !important;
+            max-width: 100% !important;
+        }
+        
+        .code-container .cm-editor .cm-line {
+            white-space: pre-wrap !important;
+            word-break: break-all !important;
+            overflow-wrap: anywhere !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            box-sizing: border-box !important;
+        }
+        
+        /* Force the entire code container to have no horizontal overflow */
+        .code-container,
+        .code-container * {
+            overflow-x: hidden !important;
+            max-width: 100% !important;
+        }
+        
+        /* Moderate syntax highlighting for Python */
+        .code-container .cm-keyword { color: #7c3aed !important; }
+        .code-container .cm-string { color: #059669 !important; }
+        .code-container .cm-comment { color: #6b7280 !important; font-style: italic !important; }
+        .code-container .cm-number { color: #dc2626 !important; }
+        .code-container .cm-variable { color: #1e40af !important; }
+        .code-container .cm-function { color: #7c2d12 !important; }
+        .code-container .cm-operator { color: #374151 !important; }
         
         /* Code header styling */
         .code-container label {
-            background: linear-gradient(90deg, 
-                rgba(99, 102, 241, 0.9) 0%,
-                rgba(139, 92, 246, 0.9) 50%,
-                rgba(59, 130, 246, 0.9) 100%) !important;
-            color: white !important;
-            padding: 1rem 1.5rem !important;
-            border-radius: 16px 16px 0 0 !important;
+            background: rgba(99, 102, 241, 0.1) !important;
+            color: #374151 !important;
+            padding: 0.75rem 1.25rem !important;
+            border-radius: 4px 4px 0 0 !important;
             font-weight: 600 !important;
-            font-size: 1rem !important;
-            letter-spacing: 0.025em !important;
-            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
+            font-size: 0.95rem !important;
             margin: 0 !important;
             border: none !important;
-            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2) !important;
+            border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
         }
         
         
         /* Custom scrollbar for code area */
         .code-container .cm-scroller::-webkit-scrollbar {
-            width: 8px !important;
-            height: 8px !important;
+            width: 6px !important;
+            height: 6px !important;
         }
         
         .code-container .cm-scroller::-webkit-scrollbar-track {
-            background: rgba(15, 23, 42, 0.3) !important;
-            border-radius: 4px !important;
+            background: rgba(243, 244, 246, 0.8) !important;
+            border-radius: 3px !important;
         }
         
         .code-container .cm-scroller::-webkit-scrollbar-thumb {
-            background: linear-gradient(135deg, 
-                rgba(99, 102, 241, 0.6) 0%,
-                rgba(139, 92, 246, 0.6) 100%) !important;
-            border-radius: 4px !important;
-            border: 1px solid rgba(255, 255, 255, 0.1) !important;
+            background: rgba(156, 163, 175, 0.8) !important;
+            border-radius: 3px !important;
         }
         
         .code-container .cm-scroller::-webkit-scrollbar-thumb:hover {
-            background: linear-gradient(135deg, 
-                rgba(99, 102, 241, 0.8) 0%,
-                rgba(139, 92, 246, 0.8) 100%) !important;
+            background: rgba(107, 114, 128, 0.9) !important;
         }
         
         /* Line numbers styling */
         .code-container .cm-lineNumbers {
-            background: rgba(15, 23, 42, 0.3) !important;
-            color: rgba(148, 163, 184, 0.6) !important;
-            border-right: 1px solid rgba(71, 85, 105, 0.3) !important;
+            background: rgba(249, 250, 251, 0.8) !important;
+            color: rgba(156, 163, 175, 0.8) !important;
+            border-right: 1px solid rgba(229, 231, 235, 0.8) !important;
             padding-right: 0.5rem !important;
         }
         
         .code-container .cm-lineNumbers .cm-gutterElement {
-            color: rgba(148, 163, 184, 0.5) !important;
-            font-weight: 500 !important;
+            color: rgba(156, 163, 175, 0.7) !important;
+            font-weight: 400 !important;
         }
         
         /* Memory Analysis Cards */
@@ -703,6 +705,17 @@ def create_gradio_interface():
             background: #ffffff !important;
         }
         
+        /* Accordion title styling */
+        .gradio-accordion .label-wrap {
+            font-size: 1.5rem !important;
+            font-weight: 600 !important;
+        }
+        
+        .gradio-accordion summary {
+            font-size: 1.5rem !important;
+            font-weight: 600 !important;
+        }
+        
         /* Mobile Responsive Styles */
         @media (max-width: 768px) {
             .main-container {
@@ -794,100 +807,50 @@ def create_gradio_interface():
         
         with gr.Column(elem_classes="main-container"):
             # Ultra Premium Header
-            with gr.Row():
-                with gr.Column(scale=1):
-                    gr.HTML("""
-                    <div class="hero-header floating" style="text-align: center; padding: 1.5rem 1rem; margin-bottom: 1.5rem; position: relative;">
-                        <div style="position: relative; z-index: 2;">
-                            <h1 style="color: white; font-size: 2.2rem; margin: 0; font-weight: 800; text-shadow: 0 4px 8px rgba(0,0,0,0.3); letter-spacing: -0.02em; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
-                                ✨ Auto Diffusers Config
-                            </h1>
-                            <h2 style="color: rgba(255,255,255,0.95); font-size: 1.2rem; margin: 0.3rem 0 0.8rem 0; font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">
-                                Hardware-Optimized Code Generator
-                            </h2>
-                            <p style="color: rgba(255,255,255,0.9); font-size: 1rem; margin: 0; font-weight: 400; text-shadow: 0 2px 4px rgba(0,0,0,0.2); max-width: 500px; margin: 0 auto; line-height: 1.5;">
-                                Generate optimized diffusion model code for your hardware
-                            </p>
-                            <div style="margin-top: 1rem;">
-                                <span style="display: inline-block; background: rgba(255,255,255,0.2); padding: 0.5rem 1rem; border-radius: 20px; color: white; font-size: 0.9rem; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3);">
-                                    🤖 Powered by Google Gemini 2.5
-                                </span>
-                            </div>
-                        </div>
+            gr.HTML("""
+            <div class="hero-header floating" style="text-align: center; padding: 1.5rem 1rem; margin-bottom: 1rem; position: relative;">
+                <div style="position: relative; z-index: 2;">
+                    <h1 style="color: white; font-size: 2.2rem; margin: 0; font-weight: 800; text-shadow: 0 4px 8px rgba(0,0,0,0.3); letter-spacing: -0.02em; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
+                        ✨ Auto Diffusers Config
+                    </h1>
+                    <h2 style="color: rgba(255,255,255,0.95); font-size: 1.2rem; margin: 0.3rem 0 0.8rem 0; font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">
+                        Hardware-Optimized Code Generator
+                    </h2>
+                    <p style="color: rgba(255,255,255,0.9); font-size: 1rem; margin: 0; font-weight: 400; text-shadow: 0 2px 4px rgba(0,0,0,0.2); max-width: 500px; margin: 0 auto; line-height: 1.5;">
+                        Generate optimized diffusion model code for your hardware
+                    </p>
+                    <div style="margin-top: 1rem;">
+                        <span style="display: inline-block; background: rgba(255,255,255,0.2); padding: 0.5rem 1rem; border-radius: 20px; color: white; font-size: 0.9rem; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3);">
+                            🤖 Powered by Google Gemini 2.5
+                        </span>
                     </div>
-                    """)
+                </div>
+            </div>
+            """)
         
         # Main Content Area
         
         # Hardware Selection Section
         with gr.Group(elem_classes="glass-card"):
-            gr.HTML("""
-            <div class="section-header" style="text-align: center;">
-                <h3 style="margin: 0 0 0.5rem 0; color: #1e293b; font-size: 1.5rem; font-weight: 700;">
-                    ⚙️ Hardware Specifications
-                </h3>
-                <p style="margin: 0; color: #64748b; font-size: 1rem; font-weight: 500;">
-                    Configure your system hardware for optimal code generation
-                </p>
-            </div>
-            """)
-            
-            with gr.Row():
-                with gr.Column(scale=1):
+            with gr.Accordion("⚙️ Hardware Specifications", open=False) as hardware_accordion:
+                gr.HTML("""
+                <div class="section-header" style="text-align: center;">
+                    <p style="margin: 0; color: #64748b; font-size: 1rem; font-weight: 500;">
+                        Configure your system hardware for optimal code generation
+                    </p>
+                </div>
+                """)
+                
+                # Platform, VRAM, and RAM in a single row
+                with gr.Row():
                     platform = gr.Dropdown(
                         choices=["Linux", "Darwin", "Windows"],
                         label="🖥️ Platform",
                         value="Linux",
                         info="Your operating system"
                     )
-                    
-                    gpu_vendor = gr.Dropdown(
-                        choices=[
-                            "Custom (Manual Input)",
-                            "NVIDIA Consumer (GeForce RTX)",
-                            "NVIDIA Professional (RTX A-Series)", 
-                            "NVIDIA Data Center",
-                            "Apple Silicon",
-                            "AMD",
-                            "Intel",
-                            "CPU Only"
-                        ],
-                        label="🎮 GPU Vendor/Category",
-                        value="Custom (Manual Input)",
-                        info="Select your GPU category"
-                    )
-                    
-                    gpu_series = gr.Dropdown(
-                        choices=[],
-                        label="📊 GPU Series",
-                        visible=False,
-                        interactive=True,
-                        info="Choose your GPU series"
-                    )
-                    
-                    gpu_model = gr.Dropdown(
-                        choices=[],
-                        label="🔧 GPU Model",
-                        visible=False,
-                        interactive=True,
-                        info="Select your specific GPU model"
-                    )
-                    
-                    gpu_name_custom = gr.Textbox(
-                        label="💾 Custom GPU Name",
-                        placeholder="e.g., RTX 4090, GTX 1080 Ti",
-                        visible=True,
-                        info="Enter your GPU name manually"
-                    )
-                    
-                    gpu_name = gr.Textbox(
-                        label="Selected GPU",
-                        visible=False
-                    )
-                
-                with gr.Column(scale=1):
                     vram_gb = gr.Number(
-                        label="🎯 VRAM/Memory (GB)",
+                        label="🎯 VRAM (GB)",
                         value=8,
                         minimum=0,
                         maximum=200,
@@ -901,87 +864,116 @@ def create_gradio_interface():
                         info="Total system memory"
                     )
                 
+                # GPU configuration on separate lines
+                gpu_vendor = gr.Dropdown(
+                    choices=[
+                        "Custom (Manual Input)",
+                        "NVIDIA Consumer (GeForce RTX)",
+                        "NVIDIA Professional (RTX A-Series)", 
+                        "NVIDIA Data Center",
+                        "Apple Silicon",
+                        "AMD",
+                        "Intel",
+                        "CPU Only"
+                    ],
+                    label="🎮 GPU Vendor/Category",
+                    value="Custom (Manual Input)",
+                    info="Select your GPU category"
+                )
+                
+                gpu_series = gr.Dropdown(
+                    choices=[],
+                    label="📊 GPU Series",
+                    visible=False,
+                    interactive=True,
+                    info="Choose your GPU series"
+                )
+                
+                gpu_model = gr.Dropdown(
+                    choices=[],
+                    label="🔧 GPU Model",
+                    visible=False,
+                    interactive=True,
+                    info="Select your specific GPU model"
+                )
+                
+                gpu_name = gr.Textbox(
+                    label="Selected GPU",
+                    visible=False
+                )
+                
         # Model Configuration Section
         with gr.Group(elem_classes="glass-card"):
-            gr.HTML("""
-            <div class="section-header" style="text-align: center;">
-                <h3 style="margin: 0 0 0.5rem 0; color: #1e293b; font-size: 1.5rem; font-weight: 700;">
-                    🤖 Model Configuration
-                </h3>
-                <p style="margin: 0; color: #64748b; font-size: 1rem; font-weight: 500;">
-                    Configure the AI model and generation parameters
-                </p>
-            </div>
-            """)
-            
-            with gr.Row():
-                with gr.Column(scale=1):
-                    model_name = gr.Textbox(
-                        label="🏷️ Model Name",
-                        value="black-forest-labs/FLUX.1-schnell",
-                        placeholder="e.g., black-forest-labs/FLUX.1-schnell",
-                        info="HuggingFace model identifier"
+            with gr.Accordion("🤖 Model Configuration", open=False) as model_accordion:
+                gr.HTML("""
+                <div class="section-header" style="text-align: center;">
+                    <p style="margin: 0; color: #64748b; font-size: 1rem; font-weight: 500;">
+                        Configure the AI model and generation parameters
+                    </p>
+                </div>
+                """)
+                
+                # Model Name - Full width on its own row
+                model_name = gr.Textbox(
+                    label="🏷️ Model Name",
+                    value="black-forest-labs/FLUX.1-schnell",
+                    placeholder="e.g., black-forest-labs/FLUX.1-schnell",
+                    info="HuggingFace model identifier"
+                )
+                
+                # Other parameters in 4-column layout
+                with gr.Row():
+                    width = gr.Number(
+                        label="📏 Width (px)",
+                        value=1360,
+                        minimum=256,
+                        maximum=2048,
+                        step=64,
+                        info="Image width"
+                    )
+                    height = gr.Number(
+                        label="📐 Height (px)", 
+                        value=768,
+                        minimum=256,
+                        maximum=2048,
+                        step=64,
+                        info="Image height"
                     )
-                    
                     dtype_selection = gr.Dropdown(
-                        choices=["Auto (Let AI decide)", "torch.float32", "torch.float16", "torch.bfloat16"],
-                        label="⚡ Data Type (dtype)",
-                        value="Auto (Let AI decide)",
-                        info="Precision mode - Auto is recommended"
+                        choices=["Auto", "float32", "float16", "bfloat16"],
+                        label="⚡ dtype",
+                        value="Auto",
+                        info="Precision mode"
                     )
-                
-                with gr.Column(scale=1):
-                    with gr.Row():
-                        width = gr.Number(
-                            label="📏 Width (px)",
-                            value=1360,
-                            minimum=256,
-                            maximum=2048,
-                            step=64,
-                            info="Image width"
-                        )
-                        height = gr.Number(
-                            label="📐 Height (px)", 
-                            value=768,
-                            minimum=256,
-                            maximum=2048,
-                            step=64,
-                            info="Image height"
-                        )
-                    
                     inference_steps = gr.Number(
-                        label="🔄 Inference Steps",
+                        label="🔄 Inf. Steps",
                         value=4,
                         minimum=1,
                         maximum=50,
-                        info="Number of denoising steps (higher = better quality, slower)"
+                        info="Denoising steps"
                     )
                 
-        # Memory Analysis Section
-        with gr.Group(elem_classes="ultra-glass"):
-            gr.HTML("""
-            <div class="section-header" style="text-align: center;">
-                <h3 style="margin: 0 0 0.5rem 0; color: #1e293b; font-size: 1.5rem; font-weight: 700;">
-                    🧠 Memory Analysis
-                </h3>
-                <p style="margin: 0; color: #64748b; font-size: 1rem; font-weight: 500;">
-                    Real-time analysis of model memory requirements and optimization strategies
-                </p>
-            </div>
-            """)
+                # Memory Analysis Subsection (inside Model Configuration)
+                gr.HTML("""
+                <div style="margin: 1.5rem 0 0.5rem 0; padding-top: 1rem; border-top: 1px solid rgba(226, 232, 240, 0.6);">
+                    <h4 style="margin: 0 0 0.5rem 0; color: #374151; font-size: 1.1rem; font-weight: 600;">
+                        🧠 Memory Analysis
+                    </h4>
+                    <p style="margin: 0; color: #6b7280; font-size: 0.9rem;">
+                        Real-time analysis of model memory requirements and optimization strategies
+                    </p>
+                </div>
+                """)
+                
+                memory_analysis_output = gr.Markdown(
+                    value="✨ Select a model and configure your hardware to see memory requirements and optimization recommendations.",
+                    elem_classes="memory-card"
+                )
             
-            memory_analysis_output = gr.Markdown(
-                value="✨ Select a model and configure your hardware to see memory requirements and optimization recommendations.",
-                elem_classes="memory-card"
-            )
                 
         # Generate Button
         with gr.Row():
             with gr.Column():
-                gr.HTML("""
-                <div style="text-align: center; margin: 2rem 0;">
-                </div>
-                """)
                 generate_btn = gr.Button(
                     "✨ Generate Optimized Code", 
                     variant="primary", 
@@ -991,85 +983,54 @@ def create_gradio_interface():
                 
         # Generated Code Section
         with gr.Group(elem_classes="ultra-glass"):
-            gr.HTML("""
-            <div class="section-header" style="text-align: center; position: relative; overflow: hidden;">
-                <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); border-radius: 16px; z-index: -1;"></div>
-                <h3 style="margin: 0 0 0.5rem 0; color: #1e293b; font-size: 1.5rem; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-                    💻 Generated Code
-                </h3>
-                <p style="margin: 0; color: #64748b; font-size: 1rem; font-weight: 500;">
-                    ✨ Ultra-optimized Python code with hardware-specific acceleration
-                </p>
-                <div style="margin-top: 1rem; padding: 0.75rem 1.5rem; background: linear-gradient(90deg, rgba(34, 197, 94, 0.1), rgba(59, 130, 246, 0.1)); border-radius: 12px; border: 1px solid rgba(34, 197, 94, 0.2);">
-                    <span style="color: #059669; font-weight: 600; font-size: 0.9rem;">
-                        🚀 Ready-to-run • Memory optimized • Performance tuned
-                    </span>
-                </div>
-            </div>
-            """)
-            
-            # Code Summary
-            code_summary = gr.Markdown(
-                value="🎯 Generated code summary will appear here after generation.",
-                elem_classes="memory-card"
-            )
-            
             # Code Output
             code_output = gr.Code(
-                label="🚀 Hardware-Optimized Diffusion Pipeline",
+                label="Generated Code",
                 language="python",
                 lines=20,
                 interactive=True,
                 show_label=True,
                 elem_classes="code-container",
-                value="# 🎨 Your optimized diffusion code will appear here after generation\n# Click 'Generate Optimized Code' to create hardware-specific Python code\n\nprint('✨ Ready to generate amazing AI art with optimized performance!')"
+                show_line_numbers=False,
+                value="# Your optimized diffusion code will appear here after generation\n# Click 'Generate Optimized Code' to create hardware-specific Python code\n\nprint('Ready to generate AI art with optimized performance!')"
             )
                 
         def on_gpu_vendor_change(vendor):
             """Handle GPU vendor selection and update series dropdown."""
             if vendor == "Custom (Manual Input)":
-                return (gr.update(visible=True), 
-                        gr.update(visible=False, choices=[]), 
+                return (gr.update(visible=False, choices=[]), 
                         gr.update(visible=False, choices=[]),
                         "", gr.update())
             elif vendor == "CPU Only":
-                return (gr.update(visible=False), 
-                        gr.update(visible=False, choices=[]), 
+                return (gr.update(visible=False, choices=[]), 
                         gr.update(visible=False, choices=[]),
                         "", 0)
             elif vendor == "NVIDIA Consumer (GeForce RTX)":
-                return (gr.update(visible=False), 
-                        gr.update(visible=True, choices=["RTX 50 Series", "RTX 40 Series", "RTX 30 Series"]), 
+                return (gr.update(visible=True, choices=["RTX 50 Series", "RTX 40 Series", "RTX 30 Series"]), 
                         gr.update(visible=False, choices=[]),
                         "", gr.update())
             elif vendor == "NVIDIA Professional (RTX A-Series)":
-                return (gr.update(visible=False), 
-                        gr.update(visible=True, choices=["RTX A6000 Series", "RTX A5000 Series", "RTX A4000 Series"]), 
+                return (gr.update(visible=True, choices=["RTX A6000 Series", "RTX A5000 Series", "RTX A4000 Series"]), 
                         gr.update(visible=False, choices=[]),
                         "", gr.update())
             elif vendor == "NVIDIA Data Center":
-                return (gr.update(visible=False), 
-                        gr.update(visible=True, choices=["Blackwell (B-Series)", "Hopper (H-Series)", "Ada Lovelace (L-Series)", "Ampere (A-Series)", "Volta/Tesla"]), 
+                return (gr.update(visible=True, choices=["Blackwell (B-Series)", "Hopper (H-Series)", "Ada Lovelace (L-Series)", "Ampere (A-Series)", "Volta/Tesla"]), 
                         gr.update(visible=False, choices=[]),
                         "", gr.update())
             elif vendor == "Apple Silicon":
-                return (gr.update(visible=False), 
-                        gr.update(visible=True, choices=["M4 Series", "M3 Series", "M2 Series", "M1 Series"]), 
+                return (gr.update(visible=True, choices=["M4 Series", "M3 Series", "M2 Series", "M1 Series"]), 
                         gr.update(visible=False, choices=[]),
                         "", gr.update())
             elif vendor == "AMD":
-                return (gr.update(visible=False), 
-                        gr.update(visible=True, choices=["Radeon RX 7000", "Radeon RX 6000", "Instinct MI Series"]), 
+                return (gr.update(visible=True, choices=["Radeon RX 7000", "Radeon RX 6000", "Instinct MI Series"]), 
                         gr.update(visible=False, choices=[]),
                         "", gr.update())
             elif vendor == "Intel":
-                return (gr.update(visible=False), 
-                        gr.update(visible=True, choices=["Arc A-Series"]), 
+                return (gr.update(visible=True, choices=["Arc A-Series"]), 
                         gr.update(visible=False, choices=[]),
                         "", gr.update())
             else:
-                return (gr.update(visible=True), 
-                        gr.update(visible=False, choices=[]), 
+                return (gr.update(visible=False, choices=[]), 
                         gr.update(visible=False, choices=[]),
                         "", gr.update())
 
@@ -1146,10 +1107,10 @@ def create_gradio_interface():
             else:
                 return model, gr.update()
 
-        def get_final_gpu_name(vendor, series, model, custom_name):
-            """Get the final GPU name based on vendor selection or custom input."""
+        def get_final_gpu_name(vendor, series, model):
+            """Get the final GPU name based on vendor selection."""
             if vendor == "Custom (Manual Input)":
-                return custom_name
+                return "Custom GPU"
             elif vendor == "CPU Only":
                 return ""
             elif model and "(" in model and "GB" in model:
@@ -1157,7 +1118,44 @@ def create_gradio_interface():
             elif model:
                 return model
             else:
-                return custom_name
+                return vendor if vendor != "Custom (Manual Input)" else "Custom GPU"
+        
+        def update_hardware_accordion_title(platform, gpu_vendor, gpu_model, vram_gb, ram_gb):
+            """Update hardware accordion title with current configuration."""
+            final_gpu = get_final_gpu_name(gpu_vendor, "", gpu_model)
+            if not final_gpu:
+                final_gpu = gpu_vendor if gpu_vendor != "Custom (Manual Input)" else "Custom GPU"
+            
+            # Extract GPU name and VRAM for cleaner display
+            gpu_display = final_gpu
+            if gpu_model and "(" in gpu_model and "GB" in gpu_model:
+                # Extract clean GPU name with VRAM from model selection
+                gpu_display = gpu_model
+            elif final_gpu and vram_gb:
+                gpu_display = f"{final_gpu} ({vram_gb}GB)"
+            
+            return f"⚙️ Hardware: {platform} | {gpu_display} | {ram_gb}GB RAM"
+        
+        def update_model_accordion_title(model_name, dtype_selection, width, height, inference_steps, memory_analysis_text=""):
+            """Update model accordion title with current configuration including memory info."""
+            model_short = model_name.split("/")[-1] if "/" in model_name else model_name
+            dtype_short = dtype_selection
+            
+            # Extract memory info for title
+            memory_info = ""
+            if memory_analysis_text and not memory_analysis_text.startswith("Select a model") and "Error" not in memory_analysis_text:
+                lines = memory_analysis_text.split('\n')
+                for line in lines:
+                    if "Memory Requirements:" in line or "estimated" in line.lower():
+                        if "GB" in line:
+                            import re
+                            gb_match = re.search(r'(\d+\.?\d*)\s*GB', line)
+                            if gb_match:
+                                memory_info = f" | {gb_match.group(1)}GB req"
+                                break
+            
+            return f"🤖 Model: {model_short} | {dtype_short} | {width}×{height} | {inference_steps} steps{memory_info}"
+        
                 
         def update_memory_analysis(model_name, vram_gb):
             """Update memory analysis in real-time based on selections."""
@@ -1195,7 +1193,7 @@ def create_gradio_interface():
         gpu_vendor.change(
             on_gpu_vendor_change,
             inputs=[gpu_vendor],
-            outputs=[gpu_name_custom, gpu_series, gpu_model, gpu_name, vram_gb]
+            outputs=[gpu_series, gpu_model, gpu_name, vram_gb]
         ).then(
             update_memory_analysis,
             inputs=[model_name, vram_gb],
@@ -1218,12 +1216,6 @@ def create_gradio_interface():
             outputs=memory_analysis_output
         )
         
-        # Update memory analysis when custom GPU name changes
-        gpu_name_custom.change(
-            update_memory_analysis,
-            inputs=[model_name, vram_gb],
-            outputs=memory_analysis_output
-        )
         
         # Update memory analysis when model name or VRAM changes
         model_name.change(
@@ -1244,6 +1236,53 @@ def create_gradio_interface():
             inputs=[model_name, vram_gb],
             outputs=memory_analysis_output
         )
+        
+        # Create wrapper functions that return gr.update for accordion labels
+        def update_hardware_accordion(platform, gpu_vendor, gpu_model, vram_gb, ram_gb):
+            title = update_hardware_accordion_title(platform, gpu_vendor, gpu_model, vram_gb, ram_gb)
+            return gr.update(label=title)
+        
+        def update_model_accordion(model_name, dtype_selection, width, height, inference_steps, memory_analysis_text=""):
+            title = update_model_accordion_title(model_name, dtype_selection, width, height, inference_steps, memory_analysis_text)
+            return gr.update(label=title)
+        
+        # Load initial accordion titles on startup
+        interface.load(
+            update_hardware_accordion,
+            inputs=[platform, gpu_vendor, gpu_model, vram_gb, ram_gb],
+            outputs=hardware_accordion
+        )
+        
+        interface.load(
+            update_model_accordion,
+            inputs=[model_name, dtype_selection, width, height, inference_steps, memory_analysis_output],
+            outputs=model_accordion
+        )
+        
+        # Accordion title update event handlers
+        
+        # Hardware accordion title updates
+        for component in [platform, gpu_vendor, gpu_model, vram_gb, ram_gb]:
+            component.change(
+                update_hardware_accordion,
+                inputs=[platform, gpu_vendor, gpu_model, vram_gb, ram_gb],
+                outputs=hardware_accordion
+            )
+        
+        # Model accordion title updates (including memory analysis)
+        for component in [model_name, dtype_selection, width, height, inference_steps]:
+            component.change(
+                update_model_accordion,
+                inputs=[model_name, dtype_selection, width, height, inference_steps, memory_analysis_output],
+                outputs=model_accordion
+            )
+        
+        # Update model accordion when memory analysis changes
+        memory_analysis_output.change(
+            update_model_accordion,
+            inputs=[model_name, dtype_selection, width, height, inference_steps, memory_analysis_output],
+            outputs=model_accordion
+        )
                 
         def create_code_summary(generated_code, model_name, final_gpu_name, vram_gb):
             """Create a concise summary of the generated code."""
@@ -1309,9 +1348,9 @@ def create_gradio_interface():
             
             return '\n'.join(filtered_lines)
 
-        def generate_with_combined_gpu_name(gpu_vendor, gpu_series, gpu_model, gpu_name_custom, vram_gb, ram_gb, platform, model_name, dtype_selection, width, height, inference_steps):
-            """Generate code with the correct GPU name from multi-level selection or custom input, including memory analysis."""
-            final_gpu_name = get_final_gpu_name(gpu_vendor, gpu_series, gpu_model, gpu_name_custom)
+        def generate_with_combined_gpu_name(gpu_vendor, gpu_series, gpu_model, vram_gb, ram_gb, platform, model_name, dtype_selection, width, height, inference_steps):
+            """Generate code with the correct GPU name from multi-level selection, including memory analysis."""
+            final_gpu_name = get_final_gpu_name(gpu_vendor, gpu_series, gpu_model)
             
             # Constant prompt text
             prompt_text = "A cat holding a sign that says hello world"
@@ -1392,47 +1431,25 @@ def create_gradio_interface():
         code_collapsed = gr.State(value=False)
         full_code_storage = gr.State(value="")
         
-        def generate_and_store_code(gpu_vendor, gpu_series, gpu_model, gpu_name_custom, vram_gb, ram_gb, platform, model_name, dtype_selection, width, height, inference_steps):
-            """Generate code and return summary, code for display, and full code for storage."""
+        def generate_and_store_code(gpu_vendor, gpu_series, gpu_model, vram_gb, ram_gb, platform, model_name, dtype_selection, width, height, inference_steps):
+            """Generate code and return code for display and full code for storage."""
             summary, full_code = generate_with_combined_gpu_name(
-                gpu_vendor, gpu_series, gpu_model, gpu_name_custom, vram_gb, ram_gb, platform,
+                gpu_vendor, gpu_series, gpu_model, vram_gb, ram_gb, platform,
                 model_name, dtype_selection, width, height, inference_steps
             )
-            return summary, full_code, full_code, False  # summary, display_code, stored_code, reset_collapsed_state
+            return full_code, full_code, False  # display_code, stored_code, reset_collapsed_state
         
         generate_btn.click(
             generate_and_store_code,
             inputs=[
-                gpu_vendor, gpu_series, gpu_model, gpu_name_custom, vram_gb, ram_gb, platform,
+                gpu_vendor, gpu_series, gpu_model, vram_gb, ram_gb, platform,
                 model_name, dtype_selection, width, height, inference_steps
             ],
-            outputs=[code_summary, code_output, full_code_storage, code_collapsed]
+            outputs=[code_output, full_code_storage, code_collapsed]
         )
                 
                 
         
-        # Ultra Premium Footer
-        gr.HTML("""
-        <div class="ultra-glass" style="text-align: center; padding: 3rem 2rem; margin-top: 4rem; position: relative; overflow: hidden;">
-            <div style="position: relative; z-index: 2;">
-                <h4 style="color: #1e293b; font-size: 1.3rem; margin: 0 0 1rem 0; font-weight: 700;">
-                    ✨ Pro Tips & Insights
-                </h4>
-                <p style="color: #475569; font-size: 1rem; margin: 0 0 1.5rem 0; font-weight: 500; line-height: 1.6; max-width: 600px; margin: 0 auto;">
-                    🚀 The generated code includes hardware-specific optimizations for memory efficiency and peak performance<br>
-                    🎯 Fine-tuned for your exact GPU configuration and model requirements
-                </p>
-                <div style="margin-top: 2rem;">
-                    <span style="display: inline-block; background: rgba(124, 58, 237, 0.1); padding: 0.75rem 1.5rem; border-radius: 20px; color: #7c3aed; font-size: 0.9rem; backdrop-filter: blur(10px); border: 1px solid rgba(124, 58, 237, 0.2); margin: 0 0.5rem;">
-                        🤖 Powered by Google Gemini 2.5
-                    </span>
-                    <span style="display: inline-block; background: rgba(236, 72, 153, 0.1); padding: 0.75rem 1.5rem; border-radius: 20px; color: #ec4899; font-size: 0.9rem; backdrop-filter: blur(10px); border: 1px solid rgba(236, 72, 153, 0.2); margin: 0 0.5rem;">
-                        ❤️ Built for the Community
-                    </span>
-                </div>
-            </div>
-        </div>
-        """)
     
     return interface
 
@@ -1442,7 +1459,7 @@ def main():
         interface = create_gradio_interface()
         interface.launch(
             server_name="0.0.0.0",
-            server_port=7860,
+            server_port=7861,
             share=True,
             show_error=True
         )