Update dapp.py

dapp.py

@@ -66,6 +66,20 @@ CUSTOM_CSS = """
 /* Dark theme background */
 .gradio-container {
     background: linear-gradient(135deg, #0a0a2a 0%, #1a1a3a 100%) !important;
+    min-height: 100vh !important;
+    padding: 20px !important;
+}
+
+/* Main container */
+.container {
+    background: rgba(255, 255, 255, 0.05) !important;
+    backdrop-filter: blur(10px) !important;
+    border-radius: 20px !important;
+    padding: 30px !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
+    max-width: 1400px !important;
+    margin: 0 auto !important;
 }
 
 /* Tab styling */
@@ -97,6 +111,7 @@ CUSTOM_CSS = """
 button {
     border-radius: 8px !important;
     border: none !important;
+    transition: all 0.2s !important;
 }
 
 button.primary {
@@ -124,9 +139,10 @@ input, textarea, .gradio-dropdown {
     border-radius: 8px !important;
 }
 
-input:focus, textarea:focus {
+input:focus, textarea:focus, .gradio-dropdown:focus-within {
     border-color: #667eea !important;
     box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
+    outline: none !important;
 }
 
 /* Label styling */
@@ -195,6 +211,17 @@ label {
 ::-webkit-scrollbar-thumb:hover {
     background: rgba(102, 126, 234, 0.8);
 }
+
+/* Header styling */
+header {
+    background: transparent !important;
+    border-bottom: none !important;
+}
+
+/* Footer hiding */
+footer {
+    display: none !important;
+}
 """
 
 # ========== MODELS TAB ==========
@@ -704,14 +731,14 @@ def prev_page():
     return update_outputs_display()
 
 # ========== CREATE INTERFACE ==========
-with gr.Blocks(
-    title="StableCog Image Generator", 
-    theme=gr.themes.Soft(primary_hue="purple", secondary_hue="blue"),
-    css=CUSTOM_CSS
-) as demo:
+with gr.Blocks(title="StableCog Image Generator") as demo:
+    # Add custom CSS directly as HTML
+    gr.HTML(f"<style>{CUSTOM_CSS}</style>")
+    
     gr.Markdown("""
-    # 🎨 StableCog Image Generator
-    ### Create, browse, and manage your AI-generated images
+    <div class="container">
+        <h1 style="color: white; text-align: center; margin-bottom: 10px;">🎨 StableCog Image Generator</h1>
+        <p style="color: #bbb; text-align: center; margin-bottom: 30px;">Create, browse, and manage your AI-generated images</p>
     """)
     
     with gr.Tabs():
@@ -879,12 +906,6 @@ with gr.Blocks(
                     scheduler_dropdown, seed, init_image_url, prompt_strength
                 ],
                 outputs=[generate_output, generate_gallery, generate_raw]
-            ).then(
-                lambda: time.sleep(1),
-                outputs=[]
-            ).then(
-                load_outputs,
-                outputs=[gr.Outputs(outputs_display, outputs_gallery, outputs_raw) if 'outputs_display' in locals() else None]
             )
         
         # ========== OUTPUTS TAB ==========
@@ -926,35 +947,4 @@ with gr.Blocks(
                     )
             
             with gr.Row():
-                load_outputs_btn = gr.Button("🔄 Load My Outputs", variant="primary")
-                prev_page_btn = gr.Button("◀ Previous Page", variant="secondary")
-                next_page_btn = gr.Button("Next Page ▶", variant="secondary")
-            
-            # Add pagination JavaScript
-            js = """
-            <script>
-                window.paginationButtonClick = function(page) {
-                    const event = new CustomEvent('gradio_pagination', { detail: { page: page } });
-                    document.dispatchEvent(event);
-                }
-            </script>
-            """
-            gr.HTML(js)
-            
-            # Connect buttons
-            load_outputs_btn.click(
-                load_outputs, 
-                outputs=[outputs_display, outputs_gallery, outputs_raw]
-            )
-            
-            prev_page_btn.click(
-                prev_page,
-                outputs=[outputs_display, outputs_gallery, outputs_raw]
-            )
-            
-            next_page_btn.click(
-                next_page,
-                outputs=[outputs_display, outputs_gallery, outputs_raw]
-            )
-        
-        # ========== MODELS TAB
+                load_outputs_btn = gr.Button