Update app.py

app.py

@@ -87,24 +87,24 @@ def update_dimensions_from_image(image_list):
     return new_width, new_height
 
 css = """
-/* Candy Pastel Style */
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');
+/* POP ART Style */
+@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&display=swap');
 
 * {
-    font-family: 'Nunito', sans-serif !important;
+    font-family: 'Comic Neue', cursive !important;
 }
 
 body, .gradio-container {
-    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #ffecd2 100%) !important;
+    background: #ffeb3b !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;
+        radial-gradient(circle at 10px 10px, #ff1744 4px, transparent 4px),
+        radial-gradient(circle at 30px 30px, #ff1744 3px, transparent 3px),
+        linear-gradient(135deg, #ffeb3b 0%, #fff176 100%) !important;
+    background-size: 40px 40px, 40px 40px, 100% 100% !important;
 }
 
 #col-container {
@@ -113,17 +113,41 @@ body, .gradio-container {
     padding: 25px 20px;
 }
 
-/* Header */
+/* Header - Comic Speech Bubble */
 .header-box {
-    background: linear-gradient(135deg, #ffffff 0%, #fff5f8 100%);
-    border: 3px solid #ffb6c1;
+    background: #ffffff;
+    border: 5px solid #000000;
     border-radius: 30px;
-    padding: 25px;
+    padding: 25px 30px;
     text-align: center;
     margin-bottom: 25px;
-    box-shadow: 
-        0 10px 30px rgba(255, 182, 193, 0.3),
-        inset 0 -3px 0 rgba(255, 182, 193, 0.2);
+    box-shadow: 8px 8px 0 #000000;
+    position: relative;
+}
+
+.header-box::after {
+    content: "";
+    position: absolute;
+    bottom: -25px;
+    left: 50px;
+    width: 0;
+    height: 0;
+    border: 20px solid transparent;
+    border-top-color: #000000;
+    border-bottom: 0;
+}
+
+.header-box::before {
+    content: "";
+    position: absolute;
+    bottom: -17px;
+    left: 53px;
+    width: 0;
+    height: 0;
+    border: 16px solid transparent;
+    border-top-color: #ffffff;
+    border-bottom: 0;
+    z-index: 1;
 }
 
 .badge-row {
@@ -133,183 +157,223 @@ body, .gradio-container {
 }
 
 .title-text {
-    font-size: 2.4rem !important;
-    font-weight: 800 !important;
-    color: #e75480 !important;
+    font-family: 'Bangers', cursive !important;
+    font-size: 3rem !important;
+    color: #ff1744 !important;
     margin: 8px 0 !important;
-    text-shadow: 2px 2px 0 #ffd1dc;
+    text-shadow: 
+        3px 3px 0 #000000,
+        -1px -1px 0 #000000,
+        1px -1px 0 #000000,
+        -1px 1px 0 #000000;
+    letter-spacing: 3px;
 }
 
 .subtitle-text {
-    color: #b784a7 !important;
-    font-size: 1.05rem !important;
-    font-weight: 600 !important;
+    font-family: 'Comic Neue', cursive !important;
+    color: #1565c0 !important;
+    font-size: 1.1rem !important;
+    font-weight: 700 !important;
     margin: 0 !important;
+    text-transform: uppercase;
 }
 
-/* Cards */
-.pastel-card {
-    background: linear-gradient(145deg, #ffffff, #fff8fa) !important;
-    border: 3px solid #ffc1cc !important;
-    border-radius: 24px !important;
+/* Cards - Bold Comic Style */
+.pop-card {
+    background: #ffffff !important;
+    border: 4px solid #000000 !important;
+    border-radius: 20px !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;
+    box-shadow: 6px 6px 0 #000000 !important;
+    position: relative;
 }
 
 .gr-panel, .gr-box, .gr-form, .block, .form {
     background: #ffffff !important;
-    border: 2px solid #e8d5de !important;
-    border-radius: 20px !important;
-    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.15) !important;
+    border: 3px solid #000000 !important;
+    border-radius: 15px !important;
+    box-shadow: 4px 4px 0 #000000 !important;
 }
 
-/* Prompt Input */
+/* Prompt Input - Speech Bubble */
 .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;
+    background: #ffffff !important;
+    border: 4px solid #000000 !important;
+    border-radius: 20px !important;
+    color: #000000 !important;
+    font-size: 1.1rem !important;
+    font-weight: 700 !important;
     padding: 18px !important;
     min-height: 90px !important;
-    transition: all 0.3s ease !important;
+    transition: all 0.2s ease !important;
+    box-shadow: 4px 4px 0 #000000 !important;
 }
 
 .prompt-box textarea:focus {
-    border-color: #ff91a4 !important;
-    box-shadow: 0 0 0 4px rgba(255, 145, 164, 0.2) !important;
+    border-color: #ff1744 !important;
+    box-shadow: 6px 6px 0 #ff1744 !important;
+    transform: translate(-2px, -2px);
 }
 
 .prompt-box textarea::placeholder {
-    color: #d4a5b5 !important;
-    font-weight: 500 !important;
-}
-
-/* Generate Button */
-.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;
+    color: #757575 !important;
+    font-weight: 600 !important;
+}
+
+/* Generate Button - POW! Style */
+.pow-btn {
+    background: linear-gradient(180deg, #ff1744 0%, #d50000 100%) !important;
+    border: 4px solid #000000 !important;
+    border-radius: 15px !important;
+    color: #ffffff !important;
+    font-family: 'Bangers', cursive !important;
+    font-weight: 400 !important;
+    font-size: 1.5rem !important;
+    letter-spacing: 2px;
     padding: 16px 35px !important;
-    transition: all 0.3s ease !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);
+    transition: all 0.15s ease !important;
+    box-shadow: 5px 5px 0 #000000 !important;
+    text-shadow: 2px 2px 0 #000000;
+    text-transform: uppercase;
 }
 
-.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;
+.pow-btn:hover {
+    transform: translate(-3px, -3px) !important;
+    box-shadow: 8px 8px 0 #000000 !important;
+    background: linear-gradient(180deg, #ff5252 0%, #ff1744 100%) !important;
 }
 
-.candy-btn:active {
-    transform: translateY(0) scale(0.98) !important;
+.pow-btn:active {
+    transform: translate(2px, 2px) !important;
+    box-shadow: 2px 2px 0 #000000 !important;
 }
 
-/* Result Image */
+/* Result Image - Comic Panel */
 .result-box {
-    background: linear-gradient(145deg, #ffffff, #fff5f8) !important;
-    border: 3px solid #b5e8e3 !important;
-    border-radius: 24px !important;
+    background: #ffffff !important;
+    border: 5px solid #000000 !important;
+    border-radius: 20px !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;
+    box-shadow: 8px 8px 0 #000000 !important;
     min-height: 450px !important;
+    position: relative;
+}
+
+.result-box::before {
+    content: "★ OUTPUT ★";
+    position: absolute;
+    top: -15px;
+    left: 20px;
+    background: #ffeb3b;
+    border: 3px solid #000000;
+    padding: 3px 15px;
+    font-family: 'Bangers', cursive !important;
+    font-size: 1rem;
+    color: #000000;
+    z-index: 10;
 }
 
 .result-box img {
-    border-radius: 18px !important;
+    border-radius: 12px !important;
+    border: 3px solid #000000 !important;
 }
 
-/* Accordion */
+/* Accordion - Comic Panels */
 .gr-accordion {
-    background: linear-gradient(145deg, #fff8fa, #ffffff) !important;
-    border: 2px solid #dda0dd !important;
-    border-radius: 18px !important;
-    margin-top: 15px !important;
+    background: #e3f2fd !important;
+    border: 3px solid #000000 !important;
+    border-radius: 15px !important;
+    margin-top: 20px !important;
     overflow: hidden !important;
+    box-shadow: 4px 4px 0 #000000 !important;
 }
 
 .gr-accordion-header {
-    background: linear-gradient(135deg, #f8e1f4, #fce4ec) !important;
-    color: #8b668b !important;
+    background: #2196f3 !important;
+    color: #ffffff !important;
     font-weight: 700 !important;
     padding: 12px 18px !important;
+    border-bottom: 3px solid #000000 !important;
+    text-transform: uppercase;
 }
 
 /* Gallery */
 .gallery-box {
-    background: #fffbfc !important;
-    border-radius: 16px !important;
+    background: #fff9c4 !important;
+    border-radius: 12px !important;
     padding: 12px !important;
-    border: 2px dashed #f0b6c4 !important;
+    border: 3px dashed #000000 !important;
 }
 
 .gallery-box img {
-    border-radius: 12px !important;
-    border: 2px solid #ffd1dc !important;
+    border-radius: 10px !important;
+    border: 3px solid #000000 !important;
 }
 
 /* Labels */
 label, .label-wrap, span {
-    color: #7a5a6a !important;
-    font-weight: 600 !important;
+    color: #000000 !important;
+    font-weight: 700 !important;
+    text-transform: uppercase;
+    font-size: 0.9rem !important;
 }
 
 /* Sliders */
 input[type="range"] {
-    accent-color: #ff91a4 !important;
+    accent-color: #ff1744 !important;
+    height: 8px !important;
 }
 
 input[type="range"]::-webkit-slider-track {
-    background: linear-gradient(90deg, #ffd1dc, #b5e8e3) !important;
-    border-radius: 10px !important;
+    background: #000000 !important;
+    border-radius: 5px !important;
+    height: 8px !important;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    background: #ffeb3b !important;
+    border: 3px solid #000000 !important;
+    width: 20px !important;
+    height: 20px !important;
 }
 
 /* Number Input */
 input[type="number"] {
-    background: #fff9fb !important;
-    border: 2px solid #e8d5de !important;
-    border-radius: 12px !important;
-    color: #6b4c5a !important;
-    font-weight: 600 !important;
+    background: #ffffff !important;
+    border: 3px solid #000000 !important;
+    border-radius: 10px !important;
+    color: #000000 !important;
+    font-weight: 700 !important;
+    box-shadow: 3px 3px 0 #000000 !important;
 }
 
 /* Checkbox */
 input[type="checkbox"] {
-    accent-color: #ff91a4 !important;
-    width: 18px !important;
-    height: 18px !important;
+    accent-color: #ff1744 !important;
+    width: 20px !important;
+    height: 20px !important;
+    border: 3px solid #000000 !important;
 }
 
 /* Scrollbar */
 ::-webkit-scrollbar {
-    width: 10px;
+    width: 12px;
 }
 
 ::-webkit-scrollbar-track {
-    background: #fff0f3;
-    border-radius: 5px;
+    background: #ffeb3b;
+    border: 2px solid #000000;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: linear-gradient(180deg, #ffb6c1, #dda0dd);
-    border-radius: 5px;
+    background: #ff1744;
+    border: 2px solid #000000;
+    border-radius: 0;
 }
 
-/* Layout Balance */
+/* Layout */
 .main-row {
-    gap: 25px !important;
+    gap: 30px !important;
     align-items: flex-start !important;
 }
 
@@ -321,59 +385,63 @@ input[type="checkbox"] {
     flex: 1.1 !important;
 }
 
-/* Settings Grid */
-.settings-row {
-    display: flex;
-    gap: 15px;
-}
-
-/* Decorative Elements */
-.deco-dots {
-    position: absolute;
+/* Halftone Pattern Overlay */
+.halftone-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
     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;
+    background-image: radial-gradient(#000000 1px, transparent 1px);
+    background-size: 4px 4px;
+    opacity: 0.03;
     pointer-events: none;
+    z-index: 9999;
+}
+
+/* Action Words */
+.action-word {
+    font-family: 'Bangers', cursive !important;
+    color: #ff1744;
+    text-shadow: 2px 2px 0 #000000;
 }
 """
 
-with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
+with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
+    
+    # Halftone overlay
+    gr.HTML('<div class="halftone-overlay"></div>')
     
     with gr.Column(elem_id="col-container"):
-        # Header
+        # Header - Comic Speech Bubble
         gr.HTML("""
             <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=%23ff91a4&labelColor=%23b5e8e3&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=%23ff1744&labelColor=%23000000&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 - Input
             with gr.Column(elem_classes="input-col"):
-                with gr.Group(elem_classes="pastel-card"):
+                with gr.Group(elem_classes="pop-card"):
                     prompt = gr.Text(
                         label="Prompt",
                         show_label=False,
                         max_lines=4,
-                        placeholder="🎨 Describe the image you want to create...",
+                        placeholder="💬 Type your image idea here...",
                         container=False,
                         elem_classes="prompt-box"
                     )
                     
-                    run_button = gr.Button("🍭 Generate Image", variant="primary", elem_classes="candy-btn")
+                    run_button = gr.Button("⚡ POW! GENERATE ⚡", variant="primary", elem_classes="pow-btn")
                 
-                with gr.Accordion("🖼️ Input Images (Optional)", open=False, elem_classes="accordion-box"):
+                with gr.Accordion("📸 INPUT IMAGES", open=False):
                     input_images = gr.Gallery(
                         label="Upload images",
                         type="pil",
@@ -382,17 +450,17 @@ with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
                         elem_classes="gallery-box"
                     )
                 
-                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.Accordion("🔧 SETTINGS", open=False):
+                    seed = gr.Slider(label="SEED", minimum=0, maximum=MAX_SEED, step=1, value=42)
+                    randomize_seed = gr.Checkbox(label="RANDOMIZE", value=True)
                     
                     with gr.Row():
-                        width = gr.Slider(label="Width", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=1024)
-                        height = gr.Slider(label="Height", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=1024)
+                        width = gr.Slider(label="WIDTH", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=1024)
+                        height = gr.Slider(label="HEIGHT", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=1024)
                     
                     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)
+                        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 - Output
             with gr.Column(elem_classes="output-col"):