Update app.py

app.py

@@ -313,72 +313,135 @@ def generate_image(
 
     return images[0], gr.update(visible=True)
 
-# SIMPLIFIED PROFESSIONAL UI
+# MODERN ATTRACTIVE UI
 title = r"""
-<h1 align="center">🎯 Pro AI Headshot Generator</h1>
+<h1 align="center" style="color: #2563eb; font-size: 2.5em; margin-bottom: 0.2em;">🎯 Pro AI Headshot Generator</h1>
 """
 
 description = r"""
-<b>Transform any selfie into professional headshots in seconds</b><br>
-Perfect for LinkedIn, corporate profiles, and professional portfolios.<br><br>
-
-<strong>🎯 How to get perfect headshots:</strong><br>
-1. <b>Upload</b> a clear photo of your face<br>
-2. <b>Choose</b> your preferred style<br>
-3. <b>Click Generate</b> and download your professional headshots<br><br>
-
-<em>No technical knowledge needed - we handle all the complex AI settings automatically!</em>
+<div style="text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 25px; border-radius: 15px; color: white; margin-bottom: 25px;">
+<h2 style="margin: 0; font-size: 1.5em;">✨ Transform Any Selfie Into Professional Headshots</h2>
+<p style="margin: 10px 0 0 0; font-size: 1.1em;">Perfect for LinkedIn, Corporate Profiles & Professional Portfolios</p>
+</div>
 """
 
 css = """
-.gradio-container {width: 85% !important}
-.instructions {background: #f0f8ff; padding: 15px; border-radius: 10px; border-left: 4px solid #3b82f6;}
+.gradio-container {
+    max-width: 1200px !important;
+    font-family: 'Inter', sans-serif;
+}
+.welcome-box {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 25px;
+    border-radius: 15px;
+    color: white;
+    margin-bottom: 25px;
+    text-align: center;
+}
+.instructions-box {
+    background: #f8fafc;
+    padding: 20px;
+    border-radius: 12px;
+    border-left: 4px solid #3b82f6;
+    margin-bottom: 20px;
+}
+.upload-section {
+    background: white;
+    padding: 20px;
+    border-radius: 12px;
+    border: 2px dashed #d1d5db;
+    margin-bottom: 20px;
+}
+.results-section {
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    border: 1px solid #e5e7eb;
+}
+.success-message {
+    background: #dcfce7;
+    padding: 20px;
+    border-radius: 12px;
+    border-left: 4px solid #22c55e;
+    margin-top: 20px;
+}
+.advanced-settings {
+    background: #fef3c7;
+    padding: 15px;
+    border-radius: 10px;
+    border: 1px solid #f59e0b;
+}
 """
 
-with gr.Blocks(css=css) as demo:
+with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
     gr.Markdown(title)
     gr.Markdown(description)
     
     with gr.Row():
         with gr.Column(scale=1):
-            # Instructions Box
+            # Welcome & Instructions
             with gr.Group():
                 gr.Markdown("""
-                <div class="instructions">
-                <h3>📸 Photo Tips for Best Results:</h3>
-                • Clear, well-lit face photo<br>
-                • Face should be visible and not too small<br>
-                • Avoid blurry or dark images<br>
-                • Single person in photo works best
+                <div class="instructions-box">
+                <h3>🎯 How to Create Perfect Headshots</h3>
+                <p><strong>Follow these 3 simple steps:</strong></p>
+                <ol>
+                <li><strong>Upload</strong> a clear photo of your face</li>
+                <li><strong>Choose</strong> your preferred style (optional)</li>
+                <li><strong>Generate</strong> and download your professional headshots</li>
+                </ol>
                 </div>
                 """)
             
-            # Simple Upload Section
+            # Upload Section
             with gr.Group():
-                gr.Markdown("### 1️⃣ Upload Your Photo")
+                gr.Markdown("""
+                <div class="upload-section">
+                <h3>📸 Step 1: Upload Your Photo</h3>
+                <p><em>For best results, use a clear, well-lit photo where your face is clearly visible</em></p>
+                </div>
+                """)
                 face_file = gr.Image(
-                    label="Upload your photo",
+                    label="",
                     type="filepath",
-                    height=200
+                    height=200,
+                    show_label=False
                 )
-                
-            # Style Selection - FIXED: Use actual available styles
+            
+            # Style Selection
             with gr.Group():
-                gr.Markdown("### 2️⃣ Choose Style")
+                gr.Markdown("""
+                <div style="padding: 15px; background: white; border-radius: 10px; margin-bottom: 15px;">
+                <h3>🎨 Step 2: Choose Your Style (Optional)</h3>
+                <p><em>Select a style that matches your professional needs. Leave as "No Style" for natural results.</em></p>
+                </div>
+                """)
                 style = gr.Dropdown(
                     label="Professional Style",
-                    choices=STYLE_NAMES,
-                    value=STYLE_NAMES[0] if STYLE_NAMES else DEFAULT_STYLE_NAME,
-                    info="Select the look you want for your headshots"
+                    choices=["No Style"] + STYLE_NAMES,
+                    value="No Style",
+                    info="Choose a style or keep 'No Style' for natural professional results"
                 )
-                
-            # Simple Settings (Hidden Advanced Options)
+            
+            # Advanced Settings
             with gr.Accordion("⚙️ Advanced Settings (Optional)", open=False):
+                gr.Markdown("""
+                <div class="advanced-settings">
+                <p><strong>💡 Pro Tips:</strong></p>
+                <ul>
+                <li><strong>Face Similarity:</strong> Higher = More like your photo (0.8 is perfect)</li>
+                <li><strong>Detail Quality:</strong> Higher = More detailed but may change appearance (0.55 is optimal)</li>
+                <li><strong>Custom Description:</strong> Describe how you want to appear</li>
+                </ul>
+                </div>
+                """)
+                
                 prompt = gr.Textbox(
                     label="Custom Description",
-                    placeholder="e.g., 'professional business headshot'",
-                    value="professional headshot",
-                    info="Describe how you want to appear"
+                    placeholder="Describe your desired look...",
+                    value="modern professional headshot, creative director style, soft natural lighting, authentic expression, contemporary business portrait, premium quality photo, professional yet approachable, magazine-style portrait, high-end photography",
+                    info="This describes how you'll appear in the headshot"
                 )
                 
                 with gr.Row():
@@ -388,38 +451,56 @@ with gr.Blocks(css=css) as demo:
                         maximum=1.2,
                         step=0.05,
                         value=0.80,
+                        info="How closely the headshot should resemble your face"
                     )
                     adapter_strength_ratio = gr.Slider(
                         label="Detail Quality",
-                        minimum=0.5,
+                        minimum=0.3,
                         maximum=1.2,
                         step=0.05,
-                        value=0.80,
+                        value=0.55,
+                        info="Level of detail and quality in the final image"
                     )
                 
                 enable_LCM = gr.Checkbox(
-                    label="Fast Generation Mode",
+                    label="🚀 Fast Generation Mode",
                     value=False,
-                    info="Faster results with slightly lower quality"
+                    info="Generate faster with slightly lower quality (good for testing)"
                 )
 
             # Generate Button
-            submit = gr.Button("🚀 Generate Headshots", variant="primary", size="lg")
+            submit = gr.Button(
+                "✨ Generate Professional Headshots", 
+                variant="primary", 
+                size="lg",
+                elem_id="generate-btn"
+            )
 
         with gr.Column(scale=1):
             # Results Section
-            gr.Markdown("### 🎉 Your Professional Headshots")
+            gr.Markdown("""
+            <div class="results-section">
+            <h2>🎉 Your Professional Headshots</h2>
+            <p><em>Your generated headshot will appear here. Click the download button to save your professional image.</em></p>
+            </div>
+            """)
             gallery = gr.Image(
-                label="Generated Headshot",
-                height=400,
-                show_download_button=True
+                label="",
+                height=450,
+                show_download_button=True,
+                show_label=False
             )
             
             # Success Message
             success_msg = gr.Markdown("""
-            <div style='background: #d4edda; padding: 15px; border-radius: 10px; border-left: 4px solid #28a745; margin-top: 20px;'>
-            <h4>✅ Success!</h4>
-            Your professional headshot is ready! Click the download button above to save your image.
+            <div class="success-message">
+            <h3>✅ Success! Your Professional Headshot is Ready</h3>
+            <p><strong>Next Steps:</strong></p>
+            <ul>
+            <li>Click the download button above to save your headshot</li>
+            <li>Use it for LinkedIn, professional profiles, or portfolios</li>
+            <li>Need a different style? Adjust settings and generate again!</li>
+            </ul>
             </div>
             """, visible=False)
 
@@ -441,8 +522,17 @@ with gr.Blocks(css=css) as demo:
     def show_success():
         return gr.update(visible=True)
 
-    # FIXED: Proper submit function without gr.update() in inputs
+    def apply_no_style(style_name, current_prompt):
+        if style_name == "No Style":
+            return current_prompt
+        return current_prompt
+
     submit.click(
+        fn=apply_no_style,
+        inputs=[style, prompt],
+        outputs=prompt,
+        queue=False
+    ).then(
         fn=generate_image,
         inputs=[
             face_file,