Update app.py

app.py

@@ -207,45 +207,182 @@ def generate_poster(
 def create_interface():
     """Create Gradio interface"""
     
-    with gr.Blocks(
-        theme=gr.themes.Soft(),
-        css="""
-        .preserve-aspect-ratio img {
-            object-fit: contain !important;
-            width: auto !important;
-            max-height: 512px !important;
-        }
-        """
-    ) as demo:
-        gr.HTML("<div style='text-align: center; width: 100%; margin: 20px 0;'><h1 style='margin: 0; font-size: 2.5em;'>PosterCraft-v1_RL</h1></div>")
-
-        with gr.Row():
-            with gr.Column(scale=1):
-                gr.Markdown("### 1. Configuration")
-                prompt_input = gr.Textbox(label="Prompt", lines=3, placeholder="Enter your creative prompt...")
-                enable_recap_checkbox = gr.Checkbox(label="Enable Prompt Recap", value=True, info=f"Uses {DEFAULT_QWEN_MODEL_PATH} for rewriting.")
-                
-                with gr.Row():
-                    width_input = gr.Slider(label="Width", minimum=256, maximum=2048, value=832, step=64)
-                    height_input = gr.Slider(label="Height", minimum=256, maximum=2048, value=1216, step=64)
-                gr.Markdown("Tip: Recommended size is 832x1216 for best results.")
-                
-                num_inference_steps_input = gr.Slider(label="Inference Steps", minimum=1, maximum=100, value=28, step=1)
-                guidance_scale_input = gr.Slider(label="Guidance Scale (CFG)", minimum=0.0, maximum=20.0, value=3.5, step=0.1)
-                seed_number_input = gr.Number(label="Seed", value=-1, minimum=-1, step=1, info="Leave blank or set to -1 for a random seed.")
-                generate_button = gr.Button("Generate Image", variant="primary")
-
-            with gr.Column(scale=1):
-                gr.Markdown("### 2. Results")
-                image_output = gr.Image(label="Generated Image", type="pil", show_download_button=True, height=512, container=False, elem_classes=["preserve-aspect-ratio"])
-                recapped_prompt_output = gr.Textbox(label="Final Prompt Used", lines=5, interactive=False)
-                status_output = gr.Textbox(label="Status Log", lines=4, interactive=False)
+    custom_css = """
+.gradio-container {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.contain {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 15px;
+    padding: 25px;
+    margin: 15px auto;
+    max-width: 1200px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.title-container {
+    text-align: center;
+    margin-bottom: 25px;
+    padding: 20px;
+    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
+    border-radius: 12px;
+    box-shadow: 0 5px 20px rgba(255, 107, 107, 0.3);
+}
+
+.title-container h1 {
+    color: white;
+    font-size: 2.2em;
+    font-weight: bold;
+    margin: 0;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.section-header {
+    background: linear-gradient(135deg, #a8edea, #fed6e3);
+    padding: 12px;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    border-left: 4px solid #ff6b6b;
+}
+
+.section-header h3 {
+    margin: 0;
+    color: #333;
+    font-weight: 600;
+}
+
+.input-group {
+    background: rgba(255, 255, 255, 0.8);
+    padding: 18px;
+    border-radius: 12px;
+    margin-bottom: 15px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
+}
+
+.result-section {
+    background: rgba(255, 255, 255, 0.9);
+    padding: 18px;
+    border-radius: 12px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
+}
+
+.tip-box {
+    background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
+    padding: 10px;
+    border-radius: 6px;
+    margin: 8px 0;
+    border-left: 3px solid #f39c12;
+    color: #8b4513;
+    font-weight: 500;
+}
+
+button.primary {
+    background: linear-gradient(135deg, #ff6b6b, #ee5a52) !important;
+    border: none !important;
+    border-radius: 20px !important;
+    padding: 12px 25px !important;
+    color: white !important;
+    font-weight: bold !important;
+    font-size: 15px !important;
+    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4) !important;
+    transition: all 0.2s ease-in-out;
+}
+
+button.primary:hover {
+    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6) !important;
+    transform: translateY(-2px);
+    opacity: 0.95 !important;
+}
+
+.examples .gallery {
+    gap: 8px !important;
+}
+
+.examples .gallery-item {
+    border-radius: 8px !important;
+    background-color: #f0f0f0 !important;
+    border: 1px solid #ddd !important;
+    padding: 10px !important;
+    text-align: left !important;
+    transition: background-color 0.2s, border-color 0.2s;
+}
+
+.examples .gallery-item:hover {
+    background-color: #e0e0e0 !important;
+    border-color: #ccc !important;
+}
+
+.examples .gallery-item span {
+    font-size: 14px !important;
+    white-space: normal !important;
+    width: 100% !important;
+}
+
+.image-output-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 512px;
+    background: #f0f2f5;
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.image-output-container img {
+    max-height: 512px;
+    max-width: 100%;
+    object-fit: contain;
+}
+"""
+    
+    with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
+        with gr.Column(elem_classes="contain"):
+            gr.HTML('<div class="title-container"><h1>🎨 PosterCraft-v1.0</h1></div>')
+            
+            with gr.Row(equal_height=False):
+                with gr.Column(scale=1, elem_classes="input-group"):
+                    gr.HTML('<div class="section-header"><h3>⚙️ 1. Configuration</h3></div>')
+                    prompt_input = gr.Textbox(label="💡 Prompt", lines=3, placeholder="Enter your creative prompt...")
+                    
+                    enable_recap_checkbox = gr.Checkbox(label="🔄 Enable Prompt Recap", value=True, info=f"Uses {DEFAULT_QWEN_MODEL_PATH} for rewriting.")
+
+                    gr.Examples(
+                        examples=[
+                            ["Urban Canvas Street Art Expo poster with bold graffiti-style lettering and dynamic colorful splashes"],
+                            ["This poster for 'PixelPlay Retro Game Console' features the console with classic 8-bit game graphics, evoking nostalgia and fun with a vibrant, playful, and retro-gaming aesthetic."],
+                            ["Poster about Mars Tourism Campaign, text:\"NEXT STOP MARS\\nBOOK YOUR TICKET NOW\", astronaut_on_red_planet, rocket_launch, sunrise_horizon_glow, retro_futurism_style, dust_clouds, panoramic_view, bold_headline_text, sci-fi_palette, highres, 16x9_ratio"],
+                            ["This intriguing poster for \"CODE OF THE SAMURAI\" presents a stark contrast. On one side, a traditional samurai warrior in full armor, holding a katana, is depicted in a sepia-toned, historical style. On the other side, a futuristic cyborg warrior with glowing blue optics and sleek armor is shown in a cool, modern, digital style. The two figures are back-to-back, divided by a shimmering energy line. The title \"CODE OF THE SAMURAI\" is written in a font that blends traditional Japanese calligraphy with modern digital elements, in a metallic silver, positioned horizontally across the center where the two styles meet. The tagline, \"HONOR IS TIMELESS,\" is in a smaller, clean white sans-serif font at the bottom. The layout highlights the duality and the clash or merging of ancient traditions with future technology."]
+                        ],
+                        inputs=[prompt_input],
+                        label="📝 Example Prompts",
+                        examples_per_page=5,
+                    )
+                    
+                    with gr.Row():
+                        width_input = gr.Slider(label="📐 Width", minimum=256, maximum=2048, value=832, step=64)
+                        height_input = gr.Slider(label="📏 Height", minimum=256, maximum=2048, value=1216, step=64)
+                    gr.HTML('<div class="tip-box">💡 Tip: Recommended size is 832x1216 for best results.</div>')
+                    
+                    num_inference_steps_input = gr.Slider(label="🔄 Inference Steps", minimum=1, maximum=100, value=28, step=1)
+                    guidance_scale_input = gr.Slider(label="🎯 Guidance Scale (CFG)", minimum=0.0, maximum=20.0, value=3.5, step=0.1)
+                    seed_number_input = gr.Number(label="🎲 Seed", value=-1, minimum=-1, step=1, info="Leave blank or set to -1 for a random seed.")
+                    generate_button = gr.Button("🚀 Generate Image", variant="primary")
+
+                with gr.Column(scale=1, elem_classes="result-section"):
+                    gr.HTML('<div class="section-header"><h3>🎨 2. Results</h3></div>')
+                    with gr.Box(elem_classes=["image-output-container"]):
+                        image_output = gr.Image(label="🖼️ Generated Image", type="pil", show_download_button=True, show_label=False, elem_classes=["image-output"])
+                    recapped_prompt_output = gr.Textbox(label="📝 Final Prompt Used", lines=5, interactive=False)
+                    status_output = gr.Textbox(label="📊 Status Log", lines=4, interactive=False)
 
         inputs_list = [
             prompt_input, enable_recap_checkbox, height_input, width_input,
             num_inference_steps_input, guidance_scale_input, seed_number_input
         ]
-        outputs_list = [image_output, recapped_prompt_output, status_output]
+        outputs_list = [image_output, status_output, recapped_prompt_output]
         
         generate_button.click(fn=generate_poster, inputs=inputs_list, outputs=outputs_list)