Upload folder using huggingface_hub

.claude/settings.local.json

@@ -57,7 +57,22 @@
       "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)"
+      "Bash(grep -n \"gpu_name_custom\" gradio_app.py)",
+      "Bash(grep -n \"Modal overlay for prompt display\" /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
+      "Bash(grep -n -A 15 \"Modal Overlay\" /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
+      "Bash(grep -n -A 3 \"close_modal_btn.click\" /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
+      "Bash(sed -n '1576p' /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
+      "Bash(grep -n -A 3 -B 3 \") as interface:\" /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
+      "Bash(grep -n -A 10 \"prompt-modal\" /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
+      "Bash(grep -n \"prompt_display = gr.State\" /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
+      "Bash(grep -n -A 10 \"view_prompt_btn.click\" /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
+      "Bash(grep -n \"close_modal_btn\" /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
+      "Bash(grep -n -A 2 \"def hide_modal\" /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
+      "Bash(sed -n '1540p' /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
+      "Bash(sed -i '' '1540s/.*/            print(\"Close modal button clicked!\")  # Debug/' /Users/deep-diver/Developers/auto-diffusers/gradio_app.py)",
+      "Bash(GRADIO_SERVER_PORT=7861 python gradio_app.py)",
+      "Bash(lsof -ti:7860)",
+      "Bash(kill 46516 80145)"
     ],
     "deny": []
   },

gradio_app.py

@@ -198,73 +198,50 @@ def create_gradio_interface():
         css="""
         /* Global Styles */
         .gradio-container {
-            background: linear-gradient(135deg, 
-                #667eea 0%, 
-                #764ba2 25%, 
-                #f093fb 50%, 
-                #f5576c 75%, 
-                #4facfe 100%) !important;
+            background: #fef7f5 !important;
             min-height: 100vh;
+            font-family: 'Georgia', 'Times New Roman', serif !important;
+        }
+        
+        /* Remove main tag margin and center */
+        main {
+            margin: 0 auto !important;
+            max-width: 100% !important;
         }
         
         .main-container {
             max-width: 1400px;
             margin: 0 auto;
-            padding: 1rem;
+            padding: 0.5rem 0.1rem;
             /* Removed position: relative that can interfere with dropdown positioning */
         }
         
-        /* Floating Background Elements */
-        .main-container::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: 
-                radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 40% 70%, rgba(124, 58, 237, 0.1) 0%, transparent 50%);
-            pointer-events: none;
-            z-index: -1;
-        }
         
-        /* Glass Morphism Effects - Fixed for Dropdown Compatibility */
+        /* Paper Card Effects */
         .glass-card {
-            background: rgba(255, 255, 255, 0.25) !important;
-            border: 1px solid rgba(255, 255, 255, 0.2) !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 */
+            background: #fefcfa !important;
+            border: 1px solid #f4e6e1 !important;
+            border-radius: 12px !important;
+            margin-bottom: 0.5rem !important;
+            padding: 0.5rem !important;
+            border-top: 3px solid #f0c5b8 !important;
         }
         
         .ultra-glass {
-            background: rgba(255, 255, 255, 0.15) !important;
-            border: 1px solid rgba(255, 255, 255, 0.3) !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 */
+            background: #fefcfa !important;
+            border: 1px solid #f4e6e1 !important;
+            border-radius: 12px !important;
+            margin-bottom: 0.5rem !important;
+            padding: 0.5rem !important;
+            border-left: 4px solid #f0c5b8 !important;
         }
         
-        /* Premium Header */
+        /* Paper Header */
         .hero-header {
-            background: linear-gradient(135deg, 
-                rgba(124, 58, 237, 0.9) 0%, 
-                rgba(236, 72, 153, 0.9) 50%, 
-                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: 10px !important;
-            box-shadow: 
-                0 20px 60px rgba(124, 58, 237, 0.3),
-                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+            background: #fdf5f3 !important;
+            border: 2px solid #f4e6e1 !important;
+            border-radius: 16px !important;
+            margin-bottom: 1rem !important;
             position: relative;
             overflow: hidden;
             width: 100% !important;
@@ -272,110 +249,146 @@ def create_gradio_interface():
             box-sizing: border-box !important;
         }
         
-        .hero-header::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, 
-                transparent, 
-                rgba(255, 255, 255, 0.2), 
-                transparent);
-            animation: shimmer 3s infinite;
+        
+        /* Paper Buttons */
+        .generate-btn {
+            background: #e67e5a !important;
+            border: 2px solid #d96b47 !important;
+            color: #fefcfa !important;
+            font-weight: 600 !important;
+            font-size: 1.3rem !important;
+            padding: 1.2rem 2.5rem !important;
+            border-radius: 12px !important;
+            transition: all 0.3s ease !important;
+            font-family: 'Georgia', serif !important;
+            letter-spacing: 0.5px !important;
         }
         
-        @keyframes shimmer {
-            0% { left: -100%; }
-            50% { left: 100%; }
-            100% { left: 100%; }
+        /* View Prompt Button */
+        .view-prompt-btn {
+            background: #f4e6e1 !important;
+            border: 1px solid #e8a491 !important;
+            color: #5a3a2a !important;
+            font-weight: 500 !important;
+            font-size: 0.9rem !important;
+            padding: 0.5rem 1rem !important;
+            border-radius: 8px !important;
+            transition: all 0.2s ease !important;
+            font-family: 'Georgia', serif !important;
+            margin-bottom: 0.5rem !important;
         }
         
-        /* Premium Buttons */
-        .generate-btn {
-            background: linear-gradient(135deg, 
-                #667eea 0%, 
-                #764ba2 50%, 
-                #f093fb 100%) !important;
-            border: none !important;
-            color: white !important;
+        .view-prompt-btn:hover {
+            background: #f0c5b8 !important;
+        }
+        
+        /* Modal Overlay - NO display property to avoid conflict */
+        .modal-overlay {
+            position: fixed !important;
+            top: 0 !important;
+            left: 0 !important;
+            width: 100vw !important;
+            height: 100vh !important;
+            background: rgba(0, 0, 0, 0.5) !important;
+            z-index: 9999 !important;
+            justify-content: center !important;
+            align-items: center !important;
+            padding: 2rem !important;
+            box-sizing: border-box !important;
+        }
+        
+        /* Modal Content */
+        .modal-content {
+            background: #fefcfa !important;
+            border: 2px solid #f0c5b8 !important;
+            border-radius: 16px !important;
+            max-width: 90vw !important;
+            max-height: 80vh !important;
+            width: 800px !important;
+            padding: 2rem !important;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
+            overflow: hidden !important;
+            flex-direction: column !important;
+        }
+        
+        /* Modal Header */
+        .modal-header {
+            justify-content: space-between !important;
+            align-items: center !important;
+            margin-bottom: 1rem !important;
+            padding-bottom: 1rem !important;
+            border-bottom: 1px solid #f0c5b8 !important;
+        }
+        
+        /* Modal Close Button */
+        .modal-close-btn {
+            background: #f4e6e1 !important;
+            border: 1px solid #e8a491 !important;
+            color: #5a3a2a !important;
             font-weight: 700 !important;
-            font-size: 1.1rem !important;
-            padding: 1rem 3rem !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;
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
-            position: relative;
-            overflow: hidden;
+            font-size: 1.2rem !important;
+            padding: 0.4rem 0.6rem !important;
+            border-radius: 6px !important;
+            min-width: 2rem !important;
+            height: 2rem !important;
+            align-items: center !important;
+            justify-content: center !important;
         }
         
-        .generate-btn::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, 
-                transparent, 
-                rgba(255, 255, 255, 0.3), 
-                transparent);
-            transition: left 0.5s;
+        .modal-close-btn:hover {
+            background: #f0c5b8 !important;
         }
         
-        .generate-btn:hover::before {
-            left: 100%;
+        /* Prompt Container */
+        .prompt-container {
+            background: #fcf3f0 !important;
+            border: 1px solid #f0c5b8 !important;
+            border-radius: 8px !important;
+            max-height: 400px !important;
+            overflow-y: auto !important;
+            flex: 1 !important;
         }
         
+        
+        
         .generate-btn:hover {
-            transform: translateY(-4px) scale(1.02) !important;
-            box-shadow: 
-                0 16px 48px rgba(102, 126, 234, 0.6),
-                inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
+            background: #d96b47 !important;
+            transform: translateY(-1px) !important;
         }
         
         .generate-btn:active {
-            transform: translateY(-2px) scale(1.01) !important;
+            transform: translateY(0px) !important;
         }
         
-        /* Section Headers */
+        /* Paper Section Headers */
         .section-header {
-            background: linear-gradient(135deg, 
-                rgba(255, 255, 255, 0.9) 0%, 
-                rgba(248, 250, 252, 0.9) 100%) !important;
-            backdrop-filter: blur(10px) !important;
-            border: 1px solid rgba(255, 255, 255, 0.4) !important;
-            border-radius: 16px !important;
-            padding: 1.5rem !important;
-            margin-bottom: 1.5rem !important;
-            box-shadow: 
-                0 4px 20px rgba(0, 0, 0, 0.08),
-                inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
+            background: #f9f0ec !important;
+            border: 1px solid #f0c5b8 !important;
+            border-radius: 8px !important;
+            padding: 0.7rem !important;
+            margin-bottom: 0.5rem !important;
         }
         
-        /* Premium Inputs - Simplified for Dropdown Compatibility */
+        /* Paper Inputs */
         input[type="text"], 
         input[type="number"], 
         textarea {
-            background: rgba(255, 255, 255, 0.9) !important;
-            border: 1px solid rgba(255, 255, 255, 0.3) !important;
-            border-radius: 12px !important;
-            padding: 0.75rem 1rem !important;
+            background: #fefcfa !important;
+            border: 2px solid #f4e6e1 !important;
+            border-radius: 8px !important;
+            padding: 0.8rem 1.2rem !important;
             font-weight: 500 !important;
-            transition: all 0.3s ease !important;
+            color: #5a3a2a !important;
+            font-family: 'Georgia', serif !important;
+            font-size: 1rem !important;
         }
         
         input[type="text"]:focus, 
         input[type="number"]:focus, 
         textarea:focus {
-            background: rgba(255, 255, 255, 0.95) !important;
-            border-color: rgba(124, 58, 237, 0.5) !important;
-            box-shadow: 
-                0 0 0 4px rgba(124, 58, 237, 0.1),
-                0 4px 20px rgba(124, 58, 237, 0.2) !important;
+            background: #fefcfa !important;
+            border-color: #e8a491 !important;
+            outline: none !important;
         }
         
         /* CRITICAL: Reset all problematic CSS for dropdowns */
@@ -500,12 +513,11 @@ def create_gradio_interface():
         }
         
         
-        /* Code Areas - Moderate Clean Styling */
+        /* Paper Code Areas */
         .code-container {
-            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;
+            background: #f9f0ec !important;
+            border: 1px solid #f0c5b8 !important;
+            border-radius: 8px !important;
             overflow: hidden !important;
         }
         
@@ -522,7 +534,9 @@ def create_gradio_interface():
         .code-container .cm-content {
             white-space: pre-wrap !important;
             padding: 1.5rem !important;
-            color: #374151 !important;
+            color: #5a3a2a !important;
+            font-size: 14px !important;
+            font-weight: 500 !important;
         }
         
         .code-container .cm-focused {
@@ -581,17 +595,18 @@ def create_gradio_interface():
         .code-container .cm-function { color: #7c2d12 !important; }
         .code-container .cm-operator { color: #374151 !important; }
         
-        /* Code header styling */
+        /* Paper Code header */
         .code-container label {
-            background: rgba(99, 102, 241, 0.1) !important;
-            color: #374151 !important;
+            background: #f5e6e0 !important;
+            color: #5a3a2a !important;
             padding: 0.75rem 1.25rem !important;
-            border-radius: 4px 4px 0 0 !important;
-            font-weight: 600 !important;
-            font-size: 0.95rem !important;
+            border-radius: 8px 8px 0 0 !important;
+            font-weight: 700 !important;
+            font-size: 1.1rem !important;
             margin: 0 !important;
             border: none !important;
-            border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
+            border-bottom: 1px solid #f0c5b8 !important;
+            font-family: 'Georgia', serif !important;
         }
         
         
@@ -615,67 +630,36 @@ def create_gradio_interface():
             background: rgba(107, 114, 128, 0.9) !important;
         }
         
-        /* Line numbers styling */
+        /* Paper Line numbers */
         .code-container .cm-lineNumbers {
-            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;
+            background: #f5e6e0 !important;
+            color: #b8847a !important;
+            border-right: 1px solid #f0c5b8 !important;
             padding-right: 0.5rem !important;
         }
         
         .code-container .cm-lineNumbers .cm-gutterElement {
-            color: rgba(156, 163, 175, 0.7) !important;
+            color: #b8847a !important;
             font-weight: 400 !important;
         }
         
-        /* Memory Analysis Cards */
+        /* Paper Memory Cards */
         .memory-card {
-            background: linear-gradient(135deg, 
-                rgba(251, 191, 36, 0.1) 0%, 
-                rgba(245, 158, 11, 0.1) 100%) !important;
-            backdrop-filter: blur(15px) !important;
-            border: 1px solid rgba(251, 191, 36, 0.2) !important;
-            border-radius: 16px !important;
-            padding: 1.5rem !important;
-            box-shadow: 
-                0 8px 32px rgba(245, 158, 11, 0.1),
-                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+            background: #fcf3f0 !important;
+            border: 1px solid #f4e6e1 !important;
+            border-radius: 12px !important;
+            padding: 0.7rem !important;
+            border-left: 4px solid #e8a491 !important;
         }
         
-        /* Labels with icons */
+        /* Paper Labels */
         label {
             font-weight: 600 !important;
-            color: rgba(30, 41, 59, 0.9) !important;
-            font-size: 0.95rem !important;
-        }
-        
-        /* Floating Animation */
-        @keyframes float {
-            0%, 100% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
-        }
-        
-        .floating {
-            animation: float 6s ease-in-out infinite;
-        }
-        
-        /* Pulse Effect */
-        @keyframes pulse-glow {
-            0%, 100% { 
-                box-shadow: 
-                    0 8px 32px rgba(102, 126, 234, 0.4),
-                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
-            }
-            50% { 
-                box-shadow: 
-                    0 12px 48px rgba(102, 126, 234, 0.6),
-                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
-            }
+            color: #5a3a2a !important;
+            font-size: 1.1rem !important;
+            font-family: 'Georgia', serif !important;
         }
         
-        .pulse-glow {
-            animation: pulse-glow 3s ease-in-out infinite;
-        }
         
         /* FINAL OVERRIDE: Nuclear option for dropdown transparency */
         [role="listbox"] {
@@ -705,28 +689,98 @@ def create_gradio_interface():
             background: #ffffff !important;
         }
         
-        /* Accordion title styling */
-        .gradio-accordion .label-wrap {
-            font-size: 1.5rem !important;
-            font-weight: 600 !important;
+        /* Accordion title styling - target the actual Gradio accordion elements */
+        button.label-wrap > span:first-child,
+        .label-wrap > span:first-child,
+        button.label-wrap span {
+            font-size: 1.1rem !important;
+            font-weight: 900 !important;
+            color: #4a2818 !important;
+            font-family: 'Georgia', serif !important;
+            line-height: 1.3 !important;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
+            letter-spacing: 0.5px !important;
+            text-transform: none !important;
         }
         
-        .gradio-accordion summary {
-            font-size: 1.5rem !important;
-            font-weight: 600 !important;
+        /* Additional targeting for accordion buttons */
+        button.label-wrap {
+            background: #f9f0ec !important;
+            padding: 0.7rem 1rem !important;
+            border-radius: 8px !important;
+            border: 1px solid #f0c5b8 !important;
+        }
+        
+        button.label-wrap:hover {
+            background: #f5e6e0 !important;
+        }
+        
+        /* Accordion title styling - focus on readability */
+        .gradio-accordion .label-wrap,
+        .gradio-accordion summary,
+        .gradio-accordion details summary,
+        details summary,
+        details > summary,
+        [data-testid="accordion"] summary,
+        [data-testid="accordion"] .label-wrap {
+            font-weight: 900 !important;
+            color: #2d1810 !important;
+            font-family: 'Georgia', serif !important;
+            line-height: 1.3 !important;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
+            padding: 1rem 1.5rem !important;
+            background: #f5f1e8 !important;
+            border-radius: 8px !important;
+            letter-spacing: 0.5px !important;
+            text-transform: none !important;
+        }
+        
+        /* Even more specific accordion targeting */
+        .gradio-container details summary,
+        .gradio-container .gradio-accordion summary,
+        .gradio-container [role="button"] {
+            font-weight: 900 !important;
+            color: #2d1810 !important;
+            font-family: 'Georgia', serif !important;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
+            background: #f5f1e8 !important;
+            padding: 1rem 1.5rem !important;
+            border-radius: 8px !important;
+            letter-spacing: 0.5px !important;
+        }
+        
+        /* Accordion hover states for better interaction */
+        .gradio-accordion summary:hover,
+        details summary:hover {
+            background: #f0ead7 !important;
+            color: #1a0f08 !important;
+        }
+        
+        /* Accordion container styling */
+        .gradio-accordion,
+        details {
+            background: #fefdfb !important;
+            border: 2px solid #f0ede6 !important;
+            border-radius: 12px !important;
+            margin-bottom: 1rem !important;
+        }
+        
+        .gradio-accordion[open],
+        details[open] {
+            border-color: #e8dcc6 !important;
+            background: #fefdfb !important;
         }
         
         /* Mobile Responsive Styles */
         @media (max-width: 768px) {
-            .main-container {
-                margin: 0 1px !important;
-                padding: 1rem !important;
-                max-width: calc(100% - 2px) !important;
+            body, html, main {
+                padding: 5px !important;
+                margin: 0 !important;
             }
             
             .gradio-container {
-                margin: 0 1px !important;
-                padding: 0 !important;
+                padding: 5px !important;
+                margin: 0 !important;
             }
             
             /* Set left/right margins to 1px for mobile */
@@ -808,23 +862,16 @@ def create_gradio_interface():
         with gr.Column(elem_classes="main-container"):
             # Ultra Premium Header
             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 class="hero-header" style="text-align: center; padding: 1rem;">
+                <h1 style="color: #5a3a2a; font-size: 2rem; margin: 0 0 0.2rem 0; font-weight: 600; font-family: 'Georgia', serif;">
+                    ✨ Auto Diffusers Config
+                </h1>
+                <h2 style="color: #8b5a4f; font-size: 1rem; margin: 0 0 0.5rem 0; font-weight: 500; font-style: italic; font-family: 'Georgia', serif;">
+                    Hardware-Optimized Code Generator
+                </h2>
+                <span style="display: inline-block; background: #fefcfa; padding: 0.3rem 0.8rem; border-radius: 8px; color: #5a3a2a; font-size: 0.85rem; border: 1px solid #f4e6e1; font-family: 'Georgia', serif; font-style: italic; font-weight: 500;">
+                    🤖 Powered by Google Gemini 2.5
+                </span>
             </div>
             """)
         
@@ -835,7 +882,7 @@ def create_gradio_interface():
             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;">
+                    <p style="margin: 0; color: #6a443a; font-size: 1.1rem; font-weight: 600; font-family: 'Georgia', serif;">
                         Configure your system hardware for optimal code generation
                     </p>
                 </div>
@@ -907,7 +954,7 @@ def create_gradio_interface():
             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;">
+                    <p style="margin: 0; color: #6a443a; font-size: 1.1rem; font-weight: 600; font-family: 'Georgia', serif;">
                         Configure the AI model and generation parameters
                     </p>
                 </div>
@@ -978,11 +1025,21 @@ def create_gradio_interface():
                     "✨ Generate Optimized Code", 
                     variant="primary", 
                     size="lg",
-                    elem_classes="generate-btn pulse-glow"
+                    elem_classes="generate-btn"
                 )
                 
         # Generated Code Section
         with gr.Group(elem_classes="ultra-glass"):
+            # Hidden button to show prompt (only visible after generation)
+            with gr.Row():
+                view_prompt_btn = gr.Button(
+                    "🔍 View Actual Prompt Sent to Gemini",
+                    variant="secondary",
+                    size="sm",
+                    visible=False,
+                    elem_classes="view-prompt-btn"
+                )
+            
             # Code Output
             code_output = gr.Code(
                 label="Generated Code",
@@ -994,6 +1051,22 @@ def create_gradio_interface():
                 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!')"
             )
+            
+        # Modal with CSS styling
+        with gr.Group(visible=False, elem_classes="modal-overlay") as prompt_modal:
+            with gr.Column(elem_classes="modal-content"):
+                with gr.Row(elem_classes="modal-header"):
+                    gr.Markdown("### 📋 Actual Prompt Sent to Gemini API")
+                    close_modal_btn = gr.Button("×", variant="secondary", size="sm", elem_classes="modal-close-btn")
+                prompt_display = gr.Code(
+                    label="Full Prompt",
+                    language="markdown",
+                    lines=20,
+                    interactive=False,
+                    show_label=False,
+                    elem_classes="prompt-container",
+                    value=""
+                )
                 
         def on_gpu_vendor_change(vendor):
             """Handle GPU vendor selection and update series dropdown."""
@@ -1412,40 +1485,83 @@ def create_gradio_interface():
 
 """
             
-            # STEP 2: Generate the optimized code WITH memory analysis information
+            # STEP 2: Get the actual prompt that will be sent to Gemini
+            actual_prompt = app.get_generation_prompt(
+                model_name, prompt_text, (int(height), int(width)), int(inference_steps),
+                {
+                    'platform': platform,
+                    'architecture': 'manual_input',
+                    'cpu_count': 8,
+                    'python_version': '3.11',
+                    'cuda_available': 'nvidia' in final_gpu_name.lower() if final_gpu_name else False,
+                    'mps_available': platform == 'Darwin' and 'apple' in final_gpu_name.lower() if final_gpu_name else False,
+                    'torch_version': '2.0+',
+                    'manual_input': True,
+                    'ram_gb': int(ram_gb) if ram_gb else 16,
+                    'user_dtype': f"torch.{dtype_selection}" if dtype_selection != "Auto" else None,
+                    'gpu_info': [{'name': final_gpu_name, 'memory_mb': int(vram_gb) * 1024}] if final_gpu_name and vram_gb else None
+                },
+                optimization_profile="balanced"
+            )
+            
+            # STEP 3: Generate the optimized code WITH memory analysis information
             generated_code = app.generate_code_with_manual_specs(
                 final_gpu_name, vram_gb, ram_gb, platform,
                 model_name, prompt_text, dtype_selection, width, height, inference_steps,
                 memory_analysis_data
             )
             
-            # STEP 3: Prepend memory analysis header to the generated code
+            # STEP 4: Prepend memory analysis header to the generated code
             final_code = memory_header + generated_code if memory_header and not generated_code.startswith("Error") else generated_code
             
-            # STEP 4: Create code summary
+            # STEP 5: Create code summary
             summary = create_code_summary(generated_code, model_name, final_gpu_name, vram_gb)
             
-            return summary, final_code
+            return summary, final_code, actual_prompt
                 
         # Add states for tracking code view and storing full code
         code_collapsed = gr.State(value=False)
         full_code_storage = gr.State(value="")
+        prompt_storage = gr.State(value="")
         
         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(
+            summary, full_code, actual_prompt = generate_with_combined_gpu_name(
                 gpu_vendor, gpu_series, gpu_model, vram_gb, ram_gb, platform,
                 model_name, dtype_selection, width, height, inference_steps
             )
-            return full_code, full_code, False  # display_code, stored_code, reset_collapsed_state
+            # Show the view prompt button after generation
+            return full_code, full_code, False, gr.update(visible=True), actual_prompt  # display_code, stored_code, reset_collapsed_state, show_button, prompt
+        
+        # Modal functions
+        def show_modal(prompt):
+            return gr.update(visible=True), prompt
         
+        def hide_modal():
+            print("Close modal button clicked!")  # Debug
+            return gr.update(visible=False), ""
+        
+        # Generate button click
         generate_btn.click(
             generate_and_store_code,
             inputs=[
                 gpu_vendor, gpu_series, gpu_model, vram_gb, ram_gb, platform,
                 model_name, dtype_selection, width, height, inference_steps
             ],
-            outputs=[code_output, full_code_storage, code_collapsed]
+            outputs=[code_output, full_code_storage, code_collapsed, view_prompt_btn, prompt_storage]
+        )
+        
+        # View prompt button click
+        view_prompt_btn.click(
+            show_modal,
+            inputs=[prompt_storage],
+            outputs=[prompt_modal, prompt_display]
+        )
+        
+        # Close modal button click
+        close_modal_btn.click(
+            hide_modal,
+            outputs=[prompt_modal, prompt_display]
         )