Update app.py

app.py

@@ -87,234 +87,304 @@ def update_dimensions_from_image(image_list):
     return new_width, new_height
 
 css = """
-/* Glassmorphism Style */
+/* Candy Pastel Style */
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');
+
+* {
+    font-family: 'Nunito', sans-serif !important;
+}
+
 body, .gradio-container {
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
+    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #ffecd2 100%) !important;
     min-height: 100vh;
 }
 
+.gradio-container {
+    background: 
+        radial-gradient(circle at 20% 80%, rgba(255, 182, 193, 0.4) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(173, 216, 230, 0.4) 0%, transparent 50%),
+        radial-gradient(circle at 40% 40%, rgba(221, 160, 221, 0.3) 0%, transparent 40%),
+        linear-gradient(135deg, #fff5f5 0%, #fef3e2 50%, #f0fff4 100%) !important;
+}
+
 #col-container {
     margin: 0 auto;
-    max-width: 1100px;
-    padding: 30px 20px;
+    max-width: 1150px;
+    padding: 25px 20px;
 }
 
-/* Header Section */
-.header-section {
+/* Header */
+.header-box {
+    background: linear-gradient(135deg, #ffffff 0%, #fff5f8 100%);
+    border: 3px solid #ffb6c1;
+    border-radius: 30px;
+    padding: 25px;
     text-align: center;
-    margin-bottom: 30px;
+    margin-bottom: 25px;
+    box-shadow: 
+        0 10px 30px rgba(255, 182, 193, 0.3),
+        inset 0 -3px 0 rgba(255, 182, 193, 0.2);
 }
 
-.badge-container {
+.badge-row {
     display: flex;
     justify-content: center;
-    margin-bottom: 15px;
+    margin-bottom: 12px;
 }
 
 .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;
+    font-size: 2.4rem !important;
+    font-weight: 800 !important;
+    color: #e75480 !important;
+    margin: 8px 0 !important;
+    text-shadow: 2px 2px 0 #ffd1dc;
 }
 
 .subtitle-text {
-    color: rgba(255, 255, 255, 0.7) !important;
-    font-size: 1rem !important;
+    color: #b784a7 !important;
+    font-size: 1.05rem !important;
+    font-weight: 600 !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.15) !important;
-    border-radius: 20px !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
+/* Cards */
+.pastel-card {
+    background: linear-gradient(145deg, #ffffff, #fff8fa) !important;
+    border: 3px solid #ffc1cc !important;
+    border-radius: 24px !important;
     padding: 20px !important;
+    box-shadow: 
+        0 8px 25px rgba(255, 182, 193, 0.25),
+        inset 0 -2px 0 rgba(255, 182, 193, 0.15) !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;
+    background: #ffffff !important;
+    border: 2px solid #e8d5de !important;
+    border-radius: 20px !important;
+    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.15) !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-size: 1rem !important;
-    padding: 15px !important;
-    min-height: 80px !important;
+.prompt-box textarea {
+    background: linear-gradient(135deg, #fff9fb, #ffffff) !important;
+    border: 3px solid #ffb6c1 !important;
+    border-radius: 18px !important;
+    color: #6b4c5a !important;
+    font-size: 1.05rem !important;
+    font-weight: 600 !important;
+    padding: 18px !important;
+    min-height: 90px !important;
     transition: all 0.3s ease !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;
+.prompt-box textarea:focus {
+    border-color: #ff91a4 !important;
+    box-shadow: 0 0 0 4px rgba(255, 145, 164, 0.2) !important;
 }
 
-.prompt-container textarea::placeholder {
-    color: rgba(255, 255, 255, 0.4) !important;
+.prompt-box textarea::placeholder {
+    color: #d4a5b5 !important;
+    font-weight: 500 !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;
+.candy-btn {
+    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%) !important;
+    border: 3px solid #ff8a9e !important;
+    border-radius: 50px !important;
+    color: #a0405a !important;
+    font-weight: 800 !important;
+    font-size: 1.15rem !important;
+    padding: 16px 35px !important;
     transition: all 0.3s ease !important;
-    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4) !important;
+    box-shadow: 
+        0 6px 20px rgba(255, 154, 158, 0.4),
+        inset 0 -3px 0 rgba(255, 120, 140, 0.3) !important;
+    text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
 }
 
-.generate-btn:hover {
-    transform: translateY(-3px) !important;
-    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.6) !important;
+.candy-btn:hover {
+    transform: translateY(-3px) scale(1.02) !important;
+    box-shadow: 
+        0 10px 30px rgba(255, 154, 158, 0.5),
+        inset 0 -3px 0 rgba(255, 120, 140, 0.3) !important;
+}
+
+.candy-btn:active {
+    transform: translateY(0) scale(0.98) !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-box {
+    background: linear-gradient(145deg, #ffffff, #fff5f8) !important;
+    border: 3px solid #b5e8e3 !important;
+    border-radius: 24px !important;
+    padding: 15px !important;
+    box-shadow: 
+        0 8px 25px rgba(181, 232, 227, 0.3),
+        inset 0 -2px 0 rgba(181, 232, 227, 0.2) !important;
+    min-height: 450px !important;
 }
 
-.result-container img {
-    border-radius: 16px !important;
+.result-box img {
+    border-radius: 18px !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;
+    background: linear-gradient(145deg, #fff8fa, #ffffff) !important;
+    border: 2px solid #dda0dd !important;
+    border-radius: 18px !important;
     margin-top: 15px !important;
+    overflow: hidden !important;
 }
 
 .gr-accordion-header {
-    color: rgba(255, 255, 255, 0.9) !important;
-    font-weight: 500 !important;
+    background: linear-gradient(135deg, #f8e1f4, #fce4ec) !important;
+    color: #8b668b !important;
+    font-weight: 700 !important;
+    padding: 12px 18px !important;
 }
 
 /* Gallery */
-.gallery-container {
-    background: rgba(255, 255, 255, 0.03) !important;
+.gallery-box {
+    background: #fffbfc !important;
+    border-radius: 16px !important;
+    padding: 12px !important;
+    border: 2px dashed #f0b6c4 !important;
+}
+
+.gallery-box img {
     border-radius: 12px !important;
-    padding: 10px !important;
+    border: 2px solid #ffd1dc !important;
 }
 
-.gallery-container img {
-    object-fit: contain;
-    border-radius: 10px !important;
+/* Labels */
+label, .label-wrap, span {
+    color: #7a5a6a !important;
+    font-weight: 600 !important;
 }
 
-/* Sliders & Inputs */
+/* Sliders */
 input[type="range"] {
-    accent-color: #667eea !important;
+    accent-color: #ff91a4 !important;
 }
 
-label, .label-wrap, span {
-    color: rgba(255, 255, 255, 0.85) !important;
+input[type="range"]::-webkit-slider-track {
+    background: linear-gradient(90deg, #ffd1dc, #b5e8e3) !important;
+    border-radius: 10px !important;
 }
 
+/* Number Input */
 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;
+    background: #fff9fb !important;
+    border: 2px solid #e8d5de !important;
+    border-radius: 12px !important;
+    color: #6b4c5a !important;
+    font-weight: 600 !important;
 }
 
 /* Checkbox */
 input[type="checkbox"] {
-    accent-color: #667eea !important;
+    accent-color: #ff91a4 !important;
+    width: 18px !important;
+    height: 18px !important;
 }
 
 /* Scrollbar */
 ::-webkit-scrollbar {
-    width: 6px;
+    width: 10px;
 }
 
 ::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 3px;
+    background: #fff0f3;
+    border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 3px;
+    background: linear-gradient(180deg, #ffb6c1, #dda0dd);
+    border-radius: 5px;
 }
 
-/* Row Balance */
+/* Layout Balance */
 .main-row {
     gap: 25px !important;
+    align-items: flex-start !important;
 }
 
-.input-column {
+.input-col {
     flex: 1 !important;
 }
 
-.output-column {
-    flex: 1.2 !important;
+.output-col {
+    flex: 1.1 !important;
+}
+
+/* Settings Grid */
+.settings-row {
+    display: flex;
+    gap: 15px;
+}
+
+/* Decorative Elements */
+.deco-dots {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        radial-gradient(#ffd1dc 2px, transparent 2px),
+        radial-gradient(#b5e8e3 2px, transparent 2px);
+    background-size: 30px 30px;
+    background-position: 0 0, 15px 15px;
+    opacity: 0.3;
+    pointer-events: none;
 }
 """
 
 with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
     
     with gr.Column(elem_id="col-container"):
-        # Header with centered badge
+        # Header
         gr.HTML("""
-            <div class="header-section">
-                <div class="badge-container">
+            <div class="header-box">
+                <div class="badge-row">
                     <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">
+                        <img src="https://img.shields.io/static/v1?label=Free%20AI%20HUB&message=humangen.ai&color=%23ff91a4&labelColor=%23b5e8e3&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>
+                <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(elem_classes="main-row"):
-            # Left Column - Input
-            with gr.Column(elem_classes="input-column"):
-                with gr.Group(elem_classes="glass-card"):
+            # Left - Input
+            with gr.Column(elem_classes="input-col"):
+                with gr.Group(elem_classes="pastel-card"):
                     prompt = gr.Text(
                         label="Prompt",
                         show_label=False,
                         max_lines=4,
-                        placeholder="✍️ Describe the image you want to create...",
+                        placeholder="🎨 Describe the image you want to create...",
                         container=False,
-                        elem_classes="prompt-container"
+                        elem_classes="prompt-box"
                     )
                     
-                    run_button = gr.Button("🎨 Generate Image", variant="primary", elem_classes="generate-btn")
+                    run_button = gr.Button("🍭 Generate Image", variant="primary", elem_classes="candy-btn")
                 
-                with gr.Accordion("📷 Input Images (Optional)", open=False):
+                with gr.Accordion("🖼️ Input Images (Optional)", open=False, elem_classes="accordion-box"):
                     input_images = gr.Gallery(
-                        label="Upload for image-to-image mode",
+                        label="Upload images",
                         type="pil",
                         columns=3,
                         rows=1,
-                        elem_classes="gallery-container"
+                        elem_classes="gallery-box"
                     )
                 
-                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)
+                with gr.Accordion("⚙️ Settings", open=False, elem_classes="accordion-box"):
+                    seed = gr.Slider(label="🎲 Seed", minimum=0, maximum=MAX_SEED, step=1, value=42)
+                    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)
@@ -324,9 +394,9 @@ with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
                         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)
             
-            # Right Column - Output
-            with gr.Column(elem_classes="output-column"):
-                result = gr.Image(label="Generated Image", show_label=False, elem_classes="result-container")
+            # Right - Output
+            with gr.Column(elem_classes="output-col"):
+                result = gr.Image(label="Result", show_label=False, elem_classes="result-box")
 
     input_images.upload(
         fn=update_dimensions_from_image,