Update app.py

app.py

@@ -52,13 +52,13 @@ def load_lora_weights(repo_id, weights_filename):
 def update_selection(selected_state: gr.SelectData, flux_loras):
     """Update UI when a LoRA is selected"""
     if selected_state.index >= len(flux_loras):
-        return "### No LoRA selected", gr.update(), None
+        return "### 📌 No style selected yet", gr.update(), None
     
     lora_repo = flux_loras[selected_state.index]["repo"]
     trigger_word = flux_loras[selected_state.index]["trigger_word"]
     
-    updated_text = f"### Selected: [{lora_repo}](https://huggingface.co/{lora_repo})"
-    new_placeholder = f"optional description, e.g. 'a man with glasses and a beard'"
+    updated_text = f"### ✅ Selected Style: {flux_loras[selected_state.index]['title']}"
+    new_placeholder = f"Optional: Add extra details, e.g., 'a man with glasses' or 'woman with long hair'"
     
     return updated_text, gr.update(placeholder=new_placeholder), selected_state.index
 
@@ -91,17 +91,17 @@ def get_huggingface_lora(link):
 def load_custom_lora(link):
     """Load custom LoRA from user input"""
     if not link:
-        return gr.update(visible=False), "", gr.update(visible=False), None, gr.Gallery(selected_index=None), "### Click on a LoRA in the gallery to select it", None
+        return gr.update(visible=False), "", gr.update(visible=False), None, gr.Gallery(selected_index=None), "### 📌 Please click on a style from the gallery below", None
     
     try:
         repo_name, weights_file, trigger_word = get_huggingface_lora(link)
         
         card = f'''
         <div style="border: 1px solid #ddd; padding: 10px; border-radius: 8px; margin: 10px 0;">
-            <span><strong>Loaded custom LoRA:</strong></span>
+            <span><strong>Custom style loaded:</strong></span>
             <div style="margin-top: 8px;">
                 <h4>{repo_name}</h4>
-                <small>{"Using: <code><b>"+trigger_word+"</b></code> as trigger word" if trigger_word else "No trigger word found"}</small>
+                <small>{"Using trigger word: <code><b>"+trigger_word+"</b></code>" if trigger_word else "No trigger word found"}</small>
             </div>
         </div>
         '''
@@ -112,10 +112,10 @@ def load_custom_lora(link):
             "trigger_word": trigger_word
         }
         
-        return gr.update(visible=True), card, gr.update(visible=True), custom_lora_data, gr.Gallery(selected_index=None), f"Custom: {repo_name}", None
+        return gr.update(visible=True), card, gr.update(visible=True), custom_lora_data, gr.Gallery(selected_index=None), f"✅ Custom Style: {repo_name}", None
     
     except Exception as e:
-        return gr.update(visible=True), f"Error: {str(e)}", gr.update(visible=False), None, gr.update(), "### Click on a LoRA in the gallery to select it", None
+        return gr.update(visible=True), f"Error: {str(e)}", gr.update(visible=False), None, gr.update(), "### 📌 Please click on a style from the gallery below", None
 
 def remove_custom_lora():
     """Remove custom LoRA"""
@@ -224,27 +224,125 @@ css = """
 #gallery{
     overflow: scroll !important
 }
+.app-intro {
+    background: linear-gradient(135deg, #f6f9fc 0%, #e9f3ff 100%);
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 20px;
+    border: 1px solid #e1e8f0;
+}
+.step-card {
+    background: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 15px;
+    margin: 10px 0;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+.tips-box {
+    background: #fff8dc;
+    border: 1px solid #ffd700;
+    border-radius: 8px;
+    padding: 12px;
+    margin-top: 15px;
+}
 """
 
 # Create Gradio interface
 with gr.Blocks(css=css) as demo:
     gr_flux_loras = gr.State(value=flux_loras_raw)
     
-    title = gr.HTML(
-        """<h1> FLUX.1 Kontext Portrait 👩🏻‍🎤
-        <br><small style="font-size: 13px; opacity: 0.75;">Flux.1 Kontext [dev] + community Flux LoRAs 🤗</small></h1>""",
-    )
+    # App title and introduction
+    with gr.Column():
+        gr.HTML(
+            """
+            <div style="text-align: center; margin-bottom: 30px;">
+                <h1 style="font-size: 2.5em; margin-bottom: 10px;">
+                    🎨 AI Portrait Style Transfer Master
+                </h1>
+                <p style="font-size: 1.2em; color: #666;">
+                    Transform your photos into various artistic styles while preserving facial features
+                </p>
+            </div>
+            """
+        )
+        
+        # Application introduction card
+        with gr.Row():
+            gr.HTML(
+                """
+                <div class="app-intro">
+                    <h2 style="margin-top: 0;">✨ Welcome to AI Portrait Style Transfer</h2>
+                    <p style="line-height: 1.8;">
+                        This is a powerful AI tool that can transform your portrait photos into various unique artistic styles.
+                        Whether it's cartoon, oil painting, sketch, or other creative styles, it preserves your facial features
+                        while giving your photos a completely new artistic expression.
+                    </p>
+                    <div style="margin-top: 15px;">
+                        <strong>🎯 Key Features:</strong>
+                        <ul style="margin-top: 8px; line-height: 1.8;">
+                            <li>Preserves original facial features, ensuring person remains recognizable</li>
+                            <li>Multiple preset artistic styles to choose from</li>
+                            <li>Supports custom descriptions for fine-tuned effects</li>
+                            <li>One-click generation, simple and fast operation</li>
+                        </ul>
+                    </div>
+                </div>
+                """
+            )
     
     selected_state = gr.State(value=None)
     custom_loaded_lora = gr.State(value=None)
     
+    # How to use
+    with gr.Accordion("📖 How to Use (Click to expand)", open=False):
+        gr.HTML(
+            """
+            <div style="padding: 10px;">
+                <h3>🚀 Quick Start:</h3>
+                <div class="step-card">
+                    <h4>Step 1: Upload Your Photo</h4>
+                    <p>Click the upload area on the left and select a clear portrait photo. Front-facing photos work best.</p>
+                </div>
+                <div class="step-card">
+                    <h4>Step 2: Choose an Art Style</h4>
+                    <p>Browse the style gallery and click on the artistic style you like. Each style has a preview image for reference.</p>
+                </div>
+                <div class="step-card">
+                    <h4>Step 3: Add Description (Optional)</h4>
+                    <p>If needed, you can add extra descriptions in the text box, such as "wearing glasses", "smiling", etc.</p>
+                </div>
+                <div class="step-card">
+                    <h4>Step 4: Generate Image</h4>
+                    <p>Click the "Generate" button and wait for AI to process your photo. It usually takes 10-30 seconds.</p>
+                </div>
+                
+                <div class="tips-box">
+                    <h4>💡 Pro Tips:</h4>
+                    <ul style="margin-top: 8px; line-height: 1.8;">
+                        <li><strong>Photo Requirements:</strong> Upload clear front-facing portrait photos with good lighting and unobstructed face</li>
+                        <li><strong>Style Intensity:</strong> Adjust "LoRA Scale" in Advanced Settings to control the strength of style transfer</li>
+                        <li><strong>Multiple Attempts:</strong> Enable "Randomize seed" to generate different variations</li>
+                        <li><strong>Save Results:</strong> Right-click on the generated image to save it locally</li>
+                    </ul>
+                </div>
+            </div>
+            """
+        )
+    
     with gr.Row(elem_id="main_app"):
         with gr.Column(scale=4, elem_id="box_column"):
             with gr.Group(elem_id="gallery_box"):
-                input_image = gr.Image(label="Upload a picture of yourself", type="pil", height=300)
+                input_image = gr.Image(
+                    label="📸 Upload Your Portrait Photo", 
+                    type="pil", 
+                    height=300,
+                    elem_classes=["upload-area"]
+                )
                 
+                gr.Markdown("### 🎨 Choose an Art Style")
                 gallery = gr.Gallery(
-                    label="Pick a LoRA",
+                    label="Style Gallery (Click to select)",
                     allow_preview=False,
                     columns=3,
                     elem_id="gallery",
@@ -258,53 +356,58 @@ with gr.Blocks(css=css) as demo:
                     visible=False
                 )
                 custom_model_card = gr.HTML(visible=False)
-                custom_model_button = gr.Button("Remove custom LoRA", visible=False)
+                custom_model_button = gr.Button("Remove custom style", visible=False)
         
         with gr.Column(scale=5):
+            prompt_title = gr.Markdown(
+                value="### 📌 Please click on a style from the gallery on the left",
+                visible=True,
+                elem_id="selected_lora",
+            )
+            
             with gr.Row():
                 prompt = gr.Textbox(
-                    label="Editing Prompt",
-                    show_label=False,
+                    label="Additional Description (Optional)",
+                    show_label=True,
                     lines=1,
                     max_lines=1,
-                    placeholder="optional description, e.g. 'a man with glasses and a beard'",
+                    placeholder="Optional: Add extra details, e.g., 'a man with glasses' or 'woman with long hair'",
                     elem_id="prompt"
                 )
-                run_button = gr.Button("Generate", elem_id="run_button")
+                run_button = gr.Button("🎨 Generate", elem_id="run_button", variant="primary")
             
-            result = gr.Image(label="Generated Image", interactive=False)
-            reuse_button = gr.Button("Reuse this image", visible=False)
+            result = gr.Image(label="Generated Result", interactive=False)
+            reuse_button = gr.Button("♻️ Use this image as new input", visible=False)
             
-            with gr.Accordion("Advanced Settings", open=False):
+            with gr.Accordion("⚙️ Advanced Settings", open=False):
                 lora_scale = gr.Slider(
-                    label="LoRA Scale",
+                    label="Style Intensity",
                     minimum=0,
                     maximum=2,
                     step=0.1,
                     value=1.5,
-                    info="Controls the strength of the LoRA effect"
+                    info="Controls the strength of the artistic style (recommended: 1.0-1.5)"
                 )
                 seed = gr.Slider(
-                    label="Seed",
+                    label="Random Seed",
                     minimum=0,
                     maximum=MAX_SEED,
                     step=1,
                     value=0,
+                    info="Same seed will generate the same result"
+                )
+                randomize_seed = gr.Checkbox(
+                    label="Randomize seed (generate different effects each time)", 
+                    value=True
                 )
-                randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
                 guidance_scale = gr.Slider(
                     label="Guidance Scale",
                     minimum=1,
                     maximum=10,
                     step=0.1,
                     value=2.5,
+                    info="Controls how closely the image follows the prompt"
                 )
-            
-            prompt_title = gr.Markdown(
-                value="### Click on a LoRA in the gallery to select it",
-                visible=True,
-                elem_id="selected_lora",
-            )
 
     # Event handlers
     custom_model.input(