display models cards

app.py

@@ -2,7 +2,7 @@ import os
 import gradio as gr
 import asyncio
 from dotenv import load_dotenv
-from huggingface_hub import InferenceClient
+from huggingface_hub import InferenceClient, hf_hub_download, model_info
 from functools import partial
 
 # Load environment variables
@@ -24,6 +24,29 @@ AVAILABLE_MODELS = [
 # Initialize inference client
 inference_client = InferenceClient(token=HF_TOKEN)
 
+def get_model_card_html(model_name, title):
+    """Fetch and format model card information."""
+    try:
+        info = model_info(model_name, token=HF_TOKEN)
+        
+        return f"""
+<div class="model-card-container">
+    <h3>{info.modelId}</h3>
+    <p><strong>Pipeline Tag:</strong> {info.pipeline_tag or 'Not specified'}</p>
+    <p><strong>Downloads:</strong> {info.downloads:,}</p>
+    <p><strong>Likes:</strong> {info.likes:,}</p>
+    <p><a href="https://huggingface.co/{model_name}" target="_blank">View on Hugging Face</a></p>
+</div>
+"""
+    except Exception as e:
+        return f"""
+<div class="model-card-container">
+    <h3>{model_name}</h3>
+    <p>Unable to load full model card information.</p>
+    <p><a href="https://huggingface.co/{model_name}" target="_blank">View on Hugging Face</a></p>
+</div>
+"""
+
 async def get_model_response(prompt, model_name, temperature_value, do_sample, max_tokens):
     """Get response from a Hugging Face model."""
     try:
@@ -133,6 +156,18 @@ def update_slider_state(enabled):
 # Create the Gradio interface
 with gr.Blocks(css="""
     .disabled-slider { opacity: 0.5; pointer-events: none; }
+    .model-card-container {
+        background-color: #f8f9fa;
+        font-size: 14px;
+        color: #666;
+    }
+    .model-card-container h3 {
+        margin: 0;
+        color: black;
+    }
+    .model-card-container p {
+        margin: 5px 0;
+    }
 """) as demo:
     gr.Markdown("# LLM Comparison Tool")
     gr.Markdown("Using HuggingFace's Inference API, compare outputs from different `text-generation` models side by side.")
@@ -154,6 +189,10 @@ with gr.Blocks(css="""
                 value=AVAILABLE_MODELS[0],
                 label="Select Model 1"
             )
+            model1_card = gr.HTML(
+                value=get_model_card_html(AVAILABLE_MODELS[0], "Model 1 Information"),
+                elem_classes=["model-card-container"]
+            )
             do_sample1 = gr.Checkbox(
                 label="Enable sampling (random outputs)",
                 value=False
@@ -187,6 +226,10 @@ with gr.Blocks(css="""
                 value=AVAILABLE_MODELS[1],
                 label="Select Model 2"
             )
+            model2_card = gr.HTML(
+                value=get_model_card_html(AVAILABLE_MODELS[1], "Model 2 Information"),
+                elem_classes=["model-card-container"]
+            )
             do_sample2 = gr.Checkbox(
                 label="Enable sampling (random outputs)",
                 value=False
@@ -230,6 +273,20 @@ with gr.Blocks(css="""
         queue=True  # Enable queuing for streaming updates
     )
 
+    # Update model cards when models are changed
+    model1_dropdown.change(
+        fn=lambda x: get_model_card_html(x, "Model 1 Information"),
+        inputs=[model1_dropdown],
+        outputs=[model1_card]
+    )
+
+    model2_dropdown.change(
+        fn=lambda x: get_model_card_html(x, "Model 2 Information"),
+        inputs=[model2_dropdown],
+        outputs=[model2_card]
+    )
+
+    # Existing event handlers
     do_sample1.change(
         fn=update_slider_state,
         inputs=[do_sample1],