Update Gradio app with multiple files

app.py

@@ -172,36 +172,20 @@ def update_selection(evt: gr.SelectData, aspect_ratio):
     lora_repo = selected_lora["repo"]
     updated_text = f"### Selected: [{lora_repo}](https://huggingface.co/{lora_repo}) ✨"
     
-    # Get model card information
-    model_card_html = ""
+    # Get model card examples
+    examples_list = []
     try:
         model_card = ModelCard.load(lora_repo)
         widget_data = model_card.data.get("widget", [])
         if widget_data and len(widget_data) > 0:
-            # Get first 4 examples from widget data
-            examples_html = '<div style="margin-top: 10px;">'
-            examples_html += '<h4 style="margin-bottom: 8px; font-size: 0.9em;">Sample Images:</h4>'
-            examples_html += '<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;">'
-            
-            for i, example in enumerate(widget_data[:4]):
+            # Get examples from widget data
+            for example in widget_data[:4]:
                 if "output" in example and "url" in example["output"]:
                     image_url = f"https://huggingface.co/{lora_repo}/resolve/main/{example['output']['url']}"
-                    caption = example.get("text", f"Example {i+1}")
-                    examples_html += f'''
-                    <div style="text-align: center;">
-                        <img src="{image_url}" style="width: 100%; height: auto; border-radius: 4px;" />
-                        <p style="font-size: 0.7em; margin: 2px 0;">{caption[:30]}{'...' if len(caption) > 30 else ''}</p>
-                    </div>
-                    '''
-            
-            examples_html += '</div></div>'
-            model_card_html = examples_html
+                    prompt_text = example.get("text", "")
+                    examples_list.append([prompt_text])
     except Exception as e:
         print(f"Could not load model card for {lora_repo}: {e}")
-        model_card_html = ""
-    
-    # Combine selected info with model card examples
-    full_info = updated_text + model_card_html
     
     # Update aspect ratio if specified in LoRA config
     if "aspect" in selected_lora:
@@ -216,9 +200,10 @@ def update_selection(evt: gr.SelectData, aspect_ratio):
     
     return (
         gr.update(placeholder=new_placeholder),
-        full_info,
+        updated_text,
         evt.index,
         aspect_ratio,
+        gr.Examples(examples=examples_list, inputs=[prompt], label="Sample Prompts")
     )
 
 def handle_speed_mode(speed_mode):
@@ -480,17 +465,17 @@ def add_custom_lora(custom_lora):
                 loras.append(new_item)
                 existing_item_index = len(loras) - 1  # Get the actual index after adding
                 
-            return gr.update(visible=True, value=card), gr.update(visible=True), gr.Gallery(selected_index=None), f"Custom: {path}", existing_item_index, trigger_word
+            return gr.update(visible=True, value=card), gr.update(visible=True), gr.Gallery(selected_index=None), f"Custom: {path}", existing_item_index, trigger_word, gr.Examples(examples=[], inputs=[prompt], label="Sample Prompts")
         except Exception as e:
             full_traceback = traceback.format_exc()
             print(f"Full traceback:\n{full_traceback}")
             gr.Warning(f"Invalid LoRA: either you entered an invalid link, or a non-Qwen-Image LoRA, this was the issue: {e}")
             return gr.update(visible=True, value=f"Invalid LoRA: either you entered an invalid link, a non-Qwen-Image LoRA"), gr.update(visible=True), gr.update(), "", None, ""
     else:
-        return gr.update(visible=False), gr.update(visible=False), gr.update(), "", None, ""
+        return gr.update(visible=False), gr.update(visible=False), gr.update(), "", None, "", gr.Examples(examples=[], inputs=[prompt], label="Sample Prompts", visible=False)
 
 def remove_custom_lora():
-    return gr.update(visible=False), gr.update(visible=False), gr.update(), "", None, ""
+    return gr.update(visible=False), gr.update(visible=False), gr.update(), "", None, "", gr.Examples(examples=[], inputs=[prompt], label="Sample Prompts", visible=False), gr.Examples(examples=[], inputs=[prompt], label="Sample Prompts", visible=False)
 
 run_lora.zerogpu = True
 
@@ -526,6 +511,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css, delete_cache=(60, 60)) as app:
     with gr.Row():
         with gr.Column():
             selected_info = gr.Markdown("")
+            examples_component = gr.Examples(examples=[], inputs=[prompt], label="Sample Prompts", visible=False)
             gallery = gr.Gallery(
                 [(item["image"], item["title"]) for item in loras],
                 label="LoRA Gallery",
@@ -590,7 +576,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css, delete_cache=(60, 60)) as app:
     gallery.select(
         update_selection,
         inputs=[aspect_ratio],
-        outputs=[prompt, selected_info, selected_index, aspect_ratio]
+        outputs=[prompt, selected_info, selected_index, aspect_ratio, examples_component]
     )
     
     speed_mode.change(
@@ -602,12 +588,12 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css, delete_cache=(60, 60)) as app:
     custom_lora.input(
         add_custom_lora,
         inputs=[custom_lora],
-        outputs=[custom_lora_info, custom_lora_button, gallery, selected_info, selected_index, prompt]
+        outputs=[custom_lora_info, custom_lora_button, gallery, selected_info, selected_index, prompt, examples_component]
     )
     
     custom_lora_button.click(
         remove_custom_lora,
-        outputs=[custom_lora_info, custom_lora_button, gallery, selected_info, selected_index, custom_lora]
+        outputs=[custom_lora_info, custom_lora_button, gallery, selected_info, selected_index, custom_lora, examples_component]
     )
     
     gr.on(