update: html layout

app.py

@@ -7,35 +7,6 @@ yolov8_result = os.path.join(os.getcwd(), "data/xai/yolov8.png")
 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  
-
-🖥️ **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.  
-
-"""
-
-architecture_description_yolov8s = """
-### YOLOv8s Architecture
-
-- **Backbone**: Uses **CSPDarknet** with efficient feature extraction layers.
-- **Neck**: Incorporates **FPN** and **PANet** for multi-scale feature aggregation.
-- **Head**: Predicts bounding boxes, objectness scores, and class probabilities.
-- **Loss Functions**: **CIoU** for bounding box regression, **cross-entropy** for classification.
-- **Grid-based Prediction**: Outputs predictions per grid cell using multiple anchor boxes.
-- **Post-Processing**: **NMS** removes redundant boxes with high overlap.
-
-"""
-
 description_yolov5 = """
 **Feature Focus for Dogs:**
 - **Face & Snout**: Eyes, nose, and mouth for recognition.
@@ -273,8 +244,8 @@ with gr.Blocks(css=custom_css) as demo:
     
     with gr.Row():
         with gr.Column():
-            #gr.Markdown(architecture_description_yolov5)
-            html_content = """
+            gr.Markdown(""" ##Yolov5""")
+            html_content1 = """
                 <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">
@@ -291,12 +262,9 @@ with gr.Blocks(css=custom_css) as demo:
                   <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(html_content1)
            # gr.HTML(get_netron_html(yolov5_url))
             gr.Image(yolov5_result, label="Detections & Interpretability Map")
             gr.Markdown(description_yolov5)
@@ -304,7 +272,30 @@ with gr.Blocks(css=custom_css) as demo:
             
 
         with gr.Column():
-            gr.Markdown(architecture_description_yolov8s)
+            gr.Markdown(""" ##Yolov8s""")
+            html_content2 = """
+                <div style="display: flex; gap: 10px;">
+                  <a href="https://github.com/ultralytics/ultralytics/actions" target="_blank">
+                    <img src="https://img.shields.io/badge/YOLOv8%20CI-passing-brightgreen" alt="YOLOv8 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/ultralytics" target="_blank">
+                    <img src="https://img.shields.io/badge/docker%20pulls-500k-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_content2)
            # gr.HTML(get_netron_html(yolov8_url))
             gr.Image(yolov8_result, label="Detections & Interpretability Map")
             gr.Markdown(description_yolov8)