Update app.py

app.py

@@ -89,124 +89,232 @@ def update_dimensions_from_image(image_list):
 css = """
 /* Glassmorphism Style */
 body, .gradio-container {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) !important;
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
     min-height: 100vh;
 }
 
 #col-container {
     margin: 0 auto;
-    max-width: 1200px;
-    padding: 20px;
+    max-width: 1100px;
+    padding: 30px 20px;
 }
 
-.gr-panel, .gr-box, .gr-form, .gr-input, .gr-button, 
-.block, .form, .container, [class*="panel"] {
-    background: rgba(255, 255, 255, 0.15) !important;
+/* Header Section */
+.header-section {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.badge-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 15px;
+}
+
+.title-text {
+    font-size: 2.5rem !important;
+    font-weight: 700 !important;
+    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    margin: 10px 0 5px 0 !important;
+}
+
+.subtitle-text {
+    color: rgba(255, 255, 255, 0.7) !important;
+    font-size: 1rem !important;
+    margin: 0 !important;
+}
+
+/* Glass Cards */
+.glass-card {
+    background: rgba(255, 255, 255, 0.08) !important;
     backdrop-filter: blur(20px) !important;
     -webkit-backdrop-filter: blur(20px) !important;
-    border: 1px solid rgba(255, 255, 255, 0.3) !important;
+    border: 1px solid rgba(255, 255, 255, 0.15) !important;
+    border-radius: 20px !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
+    padding: 20px !important;
+}
+
+.gr-panel, .gr-box, .gr-form, .block, .form {
+    background: rgba(255, 255, 255, 0.05) !important;
+    backdrop-filter: blur(15px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
     border-radius: 16px !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
 }
 
-.gr-button-primary {
-    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8)) !important;
-    border: 1px solid rgba(255, 255, 255, 0.4) !important;
+/* Prompt Input */
+.prompt-container textarea {
+    background: rgba(255, 255, 255, 0.08) !important;
+    border: 2px solid rgba(255, 255, 255, 0.15) !important;
+    border-radius: 14px !important;
     color: white !important;
-    font-weight: 600 !important;
+    font-size: 1rem !important;
+    padding: 15px !important;
+    min-height: 80px !important;
     transition: all 0.3s ease !important;
 }
 
-.gr-button-primary:hover {
-    background: linear-gradient(135deg, rgba(102, 126, 234, 1), rgba(118, 75, 162, 1)) !important;
-    transform: translateY(-2px) !important;
-    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4) !important;
+.prompt-container textarea:focus {
+    border-color: rgba(102, 126, 234, 0.6) !important;
+    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3) !important;
 }
 
-textarea, input[type="text"], input[type="number"] {
-    background: rgba(255, 255, 255, 0.1) !important;
-    border: 1px solid rgba(255, 255, 255, 0.25) !important;
-    border-radius: 12px !important;
+.prompt-container textarea::placeholder {
+    color: rgba(255, 255, 255, 0.4) !important;
+}
+
+/* Generate Button */
+.generate-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    border-radius: 14px !important;
     color: white !important;
+    font-weight: 600 !important;
+    font-size: 1.1rem !important;
+    padding: 14px 30px !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4) !important;
+}
+
+.generate-btn:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.6) !important;
+}
+
+/* Result Image */
+.result-container {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border-radius: 20px !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    overflow: hidden !important;
+    min-height: 400px !important;
+}
+
+.result-container img {
+    border-radius: 16px !important;
 }
 
-textarea::placeholder, input::placeholder {
-    color: rgba(255, 255, 255, 0.6) !important;
+/* Accordion */
+.gr-accordion {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 14px !important;
+    margin-top: 15px !important;
 }
 
-label, .label-wrap, span, p {
+.gr-accordion-header {
     color: rgba(255, 255, 255, 0.9) !important;
+    font-weight: 500 !important;
 }
 
-h1, h2, h3, .markdown h1 {
-    color: white !important;
-    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
+/* Gallery */
+.gallery-container {
+    background: rgba(255, 255, 255, 0.03) !important;
+    border-radius: 12px !important;
+    padding: 10px !important;
 }
 
 .gallery-container img {
     object-fit: contain;
-    border-radius: 12px !important;
+    border-radius: 10px !important;
 }
 
+/* Sliders & Inputs */
 input[type="range"] {
     accent-color: #667eea !important;
 }
 
-.gr-accordion {
-    background: rgba(255, 255, 255, 0.1) !important;
-    border-radius: 12px !important;
+label, .label-wrap, span {
+    color: rgba(255, 255, 255, 0.85) !important;
+}
+
+input[type="number"] {
+    background: rgba(255, 255, 255, 0.08) !important;
+    border: 1px solid rgba(255, 255, 255, 0.15) !important;
+    border-radius: 8px !important;
+    color: white !important;
 }
 
+/* Checkbox */
+input[type="checkbox"] {
+    accent-color: #667eea !important;
+}
+
+/* Scrollbar */
 ::-webkit-scrollbar {
-    width: 8px;
+    width: 6px;
 }
 
 ::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 4px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 4px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
 }
 
-.image-container, .image-frame {
-    border-radius: 16px !important;
-    overflow: hidden !important;
+/* Row Balance */
+.main-row {
+    gap: 25px !important;
+}
+
+.input-column {
+    flex: 1 !important;
+}
+
+.output-column {
+    flex: 1.2 !important;
 }
 """
 
 with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
     
     with gr.Column(elem_id="col-container"):
-        gr.Markdown("# ✨ GLM-Image Generator")
+        # Header with centered badge
+        gr.HTML("""
+            <div class="header-section">
+                <div class="badge-container">
+                    <a href="https://www.humangen.ai" target="_blank">
+                        <img src="https://img.shields.io/static/v1?label=Free%20AI%20HUB&message=humangen.ai&color=%230000ff&labelColor=%23800080&logo=huggingface&logoColor=white&style=for-the-badge" alt="badge">
+                    </a>
+                </div>
+                <h1 class="title-text">✨ GLM-Image Generator</h1>
+                <p class="subtitle-text">9B hybrid AI model for text-accurate image generation</p>
+            </div>
+        """)
         
-        with gr.Row():
-            with gr.Column():
-                prompt = gr.Text(
-                    label="Prompt",
-                    show_label=False,
-                    max_lines=4,
-                    placeholder="Enter your prompt...",
-                    container=False,
-                    scale=3
-                )
-                
-                run_button = gr.Button("🎨 Generate", variant="primary", scale=1)
+        with gr.Row(elem_classes="main-row"):
+            # Left Column - Input
+            with gr.Column(elem_classes="input-column"):
+                with gr.Group(elem_classes="glass-card"):
+                    prompt = gr.Text(
+                        label="Prompt",
+                        show_label=False,
+                        max_lines=4,
+                        placeholder="✍️ Describe the image you want to create...",
+                        container=False,
+                        elem_classes="prompt-container"
+                    )
+                    
+                    run_button = gr.Button("🎨 Generate Image", variant="primary", elem_classes="generate-btn")
                 
-                with gr.Accordion("📷 Input Images", open=True):
+                with gr.Accordion("📷 Input Images (Optional)", open=False):
                     input_images = gr.Gallery(
-                        label="Input Image(s)",
+                        label="Upload for image-to-image mode",
                         type="pil",
                         columns=3,
                         rows=1,
                         elem_classes="gallery-container"
                     )
                 
-                with gr.Accordion("⚙️ Settings", open=False):
+                with gr.Accordion("⚙️ Advanced Settings", open=False):
                     seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=42)
-                    randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
+                    randomize_seed = gr.Checkbox(label="🎲 Randomize seed", value=True)
                     
                     with gr.Row():
                         width = gr.Slider(label="Width", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=1024)
@@ -215,9 +323,10 @@ with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
                     with gr.Row():
                         num_inference_steps = gr.Slider(label="Steps", minimum=1, maximum=100, step=1, value=50)
                         guidance_scale = gr.Slider(label="Guidance", minimum=0.0, maximum=10.0, step=0.1, value=1.5)
-                
-            with gr.Column():
-                result = gr.Image(label="Result", show_label=False)
+            
+            # Right Column - Output
+            with gr.Column(elem_classes="output-column"):
+                result = gr.Image(label="Generated Image", show_label=False, elem_classes="result-container")
 
     input_images.upload(
         fn=update_dimensions_from_image,
@@ -232,4 +341,4 @@ with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
         outputs=[result, seed]
     )
 
-demo.launch(css=css)
+demo.launch()