update html

app.py

@@ -8,14 +8,20 @@ yolov5_dff = os.path.join(os.getcwd(), "data/xai/yolov5_dff.png")
 yolov8_dff = os.path.join(os.getcwd(), "data/xai/yolov8_dff.png")
 
 architecture_description_yolov5 = """
-### YOLOv5 Architecture
+### YOLOv5 Architecture  
+
+🖥️ **Backbone:** Uses **CSPDarknet53** for feature extraction with **ResNet-like** residual connections.  
+
+🔗 **Neck:** Combines **PANet** and **FPN** to aggregate features at multiple scales.  
+
+🧠 **Head:** Predicts bounding boxes (**x, y, w, h**), class probabilities, and objectness scores.  
+
+📉 **Loss Functions:**  **CIoU** for bounding box regression. and **Cross-entropy** for classification.  
+
+🗺️ **Grid-based Detection:** Divides input into grid cells predicting multiple bounding boxes.  
+
+🚫 **Non-Maximum Suppression (NMS):** Filters overlapping boxes with high confidence.  
 
-- **Backbone**: Uses **CSPDarknet53** for feature extraction with **ResNet**-like residual connections.
-- **Neck**: **PANet** and **FPN** aggregate features at multiple scales.
-- **Head**: Predicts bounding boxes (x, y, w, h), class probabilities, and objectness scores.
-- **Loss Functions**: **CIoU** for bounding box regression, **cross-entropy** for classification.
-- **Grid-based Detection**: Divides input into grid cells predicting multiple bounding boxes.
-- **Non-Maximum Suppression (NMS)**: Filters overlapping boxes with high confidence.
 """
 
 architecture_description_yolov8s = """
@@ -267,7 +273,30 @@ with gr.Blocks(css=custom_css) as demo:
     
     with gr.Row():
         with gr.Column():
-            gr.Markdown(architecture_description_yolov5)
+            #gr.Markdown(architecture_description_yolov5)
+            html_content = """
+                <div style="display: flex; gap: 10px;">
+                  <a href="https://github.com/ultralytics/yolov5/actions" target="_blank">
+                    <img src="https://img.shields.io/badge/YOLOv5%20CI-passing-brightgreen" alt="YOLOv5 CI">
+                  </a>
+                  <a href="https://doi.org/10.5281/zenodo.7347926" target="_blank">
+                    <img src="https://img.shields.io/badge/DOI-10.5281%2Fzenodo.7347926-blue" alt="DOI">
+                  </a>
+                  <a href="https://hub.docker.com/r/ultralytics/yolov5" target="_blank">
+                    <img src="https://img.shields.io/badge/docker%20pulls-361k-blue" alt="Docker Pulls">
+                  </a>
+                  <a href="https://gradient.paperspace.com" target="_blank">
+                    <img src="https://img.shields.io/badge/Run%20on%20Gradient-red" alt="Run on Gradient">
+                  </a>
+                  <a href="https://colab.research.google.com/" target="_blank">
+                    <img src="https://img.shields.io/badge/Open%20in%20Colab-orange" alt="Open in Colab">
+                  </a>
+                  <a href="https://www.kaggle.com/" target="_blank">
+                    <img src="https://img.shields.io/badge/Open%20in%20Kaggle-blue" alt="Open in Kaggle">
+                  </a>
+                </div>
+            """
+            gr.HTML(html_content)
            # gr.HTML(get_netron_html(yolov5_url))
             gr.Image(yolov5_result, label="Detections & Interpretability Map")
             gr.Markdown(description_yolov5)