Update Gradio app with multiple files

app.py

@@ -172,6 +172,37 @@ 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 = ""
+    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]):
+                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
+    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:
         if selected_lora["aspect"] == "portrait":
@@ -185,7 +216,7 @@ def update_selection(evt: gr.SelectData, aspect_ratio):
     
     return (
         gr.update(placeholder=new_placeholder),
-        updated_text,
+        full_info,
         evt.index,
         aspect_ratio,
     )
@@ -396,6 +427,33 @@ def add_custom_lora(custom_lora):
         try:
             title, repo, path, trigger_word, image = check_custom_model(custom_lora)
             print(f"Loaded custom LoRA: {repo}")
+            
+            # Get model card examples for custom LoRA
+            model_card_examples = ""
+            try:
+                model_card = ModelCard.load(repo)
+                widget_data = model_card.data.get("widget", [])
+                if widget_data and len(widget_data) > 0:
+                    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]):
+                        if "output" in example and "url" in example["output"]:
+                            image_url = f"https://huggingface.co/{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_examples = examples_html
+            except Exception as e:
+                print(f"Could not load model card examples for custom LoRA: {e}")
+            
             card = f'''
             <div class="custom_lora_card">
               <span>Loaded custom LoRA:</span>
@@ -406,6 +464,7 @@ def add_custom_lora(custom_lora):
                     <small>{"Using: <code><b>"+trigger_word+"</code></b> as the trigger word" if trigger_word else "No trigger word found. If there's a trigger word, include it in your prompt"}<br></small>
                 </div>
               </div>
+              {model_card_examples}
             </div>
             '''
             existing_item_index = next((index for (index, item) in enumerate(loras) if item['repo'] == repo), None)