Benchmarks graph Javascript fix (#17700)

Co-authored-by: UltralyticsAssistant <web@ultralytics.com>
Co-authored-by: Glenn Jocher <glenn.jocher@ultralytics.com>

.github/workflows/docs.yml

@@ -48,7 +48,7 @@ jobs:
           python-version: "3.x"
       - uses: astral-sh/setup-uv@v3
       - name: Install Dependencies
-        run: uv pip install --system ruff black tqdm minify-html mkdocs-material "mkdocstrings[python]" mkdocs-jupyter mkdocs-redirects mkdocs-ultralytics-plugin mkdocs-macros-plugin
+        run: uv pip install --system ruff black tqdm mkdocs-material "mkdocstrings[python]" mkdocs-jupyter mkdocs-redirects mkdocs-ultralytics-plugin mkdocs-macros-plugin
       - name: Ruff fixes
         continue-on-error: true
         run: ruff check --fix --unsafe-fixes --select D --ignore=D100,D104,D203,D205,D212,D213,D401,D406,D407,D413 .

docs/en/modes/benchmark.md

@@ -4,14 +4,22 @@ description: Learn how to evaluate your YOLO11 model's performance in real-world
 keywords: model benchmarking, YOLO11, Ultralytics, performance evaluation, export formats, ONNX, TensorRT, OpenVINO, CoreML, TensorFlow, optimization, mAP50-95, inference time
 ---
 
+<script>
+  const script = document.createElement('script');
+  script.src = "https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js";
+  document.head.appendChild(script);
+
+  const anotherScript = document.createElement('script');
+  anotherScript.src = "../../javascript/benchmark.js";
+  document.head.appendChild(anotherScript);
+</script>
+
 # Model Benchmarking with Ultralytics YOLO
 
 <img width="1024" src="https://github.com/ultralytics/docs/releases/download/0/ultralytics-yolov8-ecosystem-integrations.avif" alt="Ultralytics YOLO ecosystem and integrations">
 
 ## Benchmark Visualization
 
-<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
-
 !!! tip "Refresh Browser"
 
     You may need to refresh the page to view the graphs correctly due to potential cookie issues.
@@ -19,7 +27,7 @@ keywords: model benchmarking, YOLO11, Ultralytics, performance evaluation, expor
 <div style="display: flex; align-items: flex-start;">
   <div style="margin-right: 20px;">
     <label><input type="checkbox" name="algorithm" value="YOLO11" checked><span>YOLO11</span></label><br>
-<label><input type="checkbox" name="algorithm" value="YOLOv10" checked><span>YOLOv10</span></label><br>
+    <label><input type="checkbox" name="algorithm" value="YOLOv10" checked><span>YOLOv10</span></label><br>
     <label><input type="checkbox" name="algorithm" value="YOLOv9" checked><span>YOLOv9</span></label><br>
     <label><input type="checkbox" name="algorithm" value="YOLOv8" checked><span>YOLOv8</span></label><br>
     <label><input type="checkbox" name="algorithm" value="YOLOv7" checked><span>YOLOv7</span></label><br>
@@ -30,7 +38,7 @@ keywords: model benchmarking, YOLO11, Ultralytics, performance evaluation, expor
     <label><input type="checkbox" name="algorithm" value="YOLOX" checked><span>YOLOX</span></label><br>
     <label><input type="checkbox" name="algorithm" value="RTDETRv2" checked><span>RTDETRv2</span></label>
 </div> 
-  <div style="flex-grow: 1;"><canvas id="chart"></canvas></div> <!-- Canva for plotting benchmarks -->
+  <div style="flex-grow: 1;"><canvas id="chart"></canvas></div>
 </div>
 
 ## Introduction

docs/overrides/javascript/benchmark.js

@@ -0,0 +1,199 @@
+// YOLO models chart ---------------------------------------------------------------------------------------------------
+const data = {
+  YOLO11: {
+    n: { speed: 1.55, mAP: 39.5 },
+    s: { speed: 2.63, mAP: 47.0 },
+    m: { speed: 5.27, mAP: 51.4 },
+    l: { speed: 6.84, mAP: 53.2 },
+    x: { speed: 12.49, mAP: 54.7 },
+  },
+  YOLOv10: {
+    n: { speed: 1.56, mAP: 39.5 },
+    s: { speed: 2.66, mAP: 46.7 },
+    m: { speed: 5.48, mAP: 51.3 },
+    b: { speed: 6.54, mAP: 52.7 },
+    l: { speed: 8.33, mAP: 53.3 },
+    x: { speed: 12.2, mAP: 54.4 },
+  },
+  YOLOv9: {
+    t: { speed: 2.3, mAP: 37.8 },
+    s: { speed: 3.54, mAP: 46.5 },
+    m: { speed: 6.43, mAP: 51.5 },
+    c: { speed: 7.16, mAP: 52.8 },
+    e: { speed: 16.77, mAP: 55.1 },
+  },
+  YOLOv8: {
+    n: { speed: 1.47, mAP: 37.3 },
+    s: { speed: 2.66, mAP: 44.9 },
+    m: { speed: 5.86, mAP: 50.2 },
+    l: { speed: 9.06, mAP: 52.9 },
+    x: { speed: 14.37, mAP: 53.9 },
+  },
+  YOLOv7: { l: { speed: 6.84, mAP: 51.4 }, x: { speed: 11.57, mAP: 53.1 } },
+  "YOLOv6-3.0": {
+    n: { speed: 1.17, mAP: 37.5 },
+    s: { speed: 2.66, mAP: 45.0 },
+    m: { speed: 5.28, mAP: 50.0 },
+    l: { speed: 8.95, mAP: 52.8 },
+  },
+  YOLOv5: {
+    s: { speed: 1.92, mAP: 37.4 },
+    m: { speed: 4.03, mAP: 45.4 },
+    l: { speed: 6.61, mAP: 49.0 },
+    x: { speed: 11.89, mAP: 50.7 },
+  },
+  "PP-YOLOE+": {
+    t: { speed: 2.84, mAP: 39.9 },
+    s: { speed: 2.62, mAP: 43.7 },
+    m: { speed: 5.56, mAP: 49.8 },
+    l: { speed: 8.36, mAP: 52.9 },
+    x: { speed: 14.3, mAP: 54.7 },
+  },
+  "DAMO-YOLO": {
+    t: { speed: 2.32, mAP: 42.0 },
+    s: { speed: 3.45, mAP: 46.0 },
+    m: { speed: 5.09, mAP: 49.2 },
+    l: { speed: 7.18, mAP: 50.8 },
+  },
+  YOLOX: {
+    s: { speed: 2.56, mAP: 40.5 },
+    m: { speed: 5.43, mAP: 46.9 },
+    l: { speed: 9.04, mAP: 49.7 },
+    x: { speed: 16.1, mAP: 51.1 },
+  },
+  RTDETRv2: {
+    s: { speed: 5.03, mAP: 48.1 },
+    m: { speed: 7.51, mAP: 51.9 },
+    l: { speed: 9.76, mAP: 53.4 },
+    x: { speed: 15.03, mAP: 54.3 },
+  },
+};
+
+let chart = null; // chart variable will hold the reference to the current chart instance.
+
+// Function to lighten a hex color by a specified amount.
+function lightenHexColor(color, amount = 0.5) {
+  const r = parseInt(color.slice(1, 3), 16);
+  const g = parseInt(color.slice(3, 5), 16);
+  const b = parseInt(color.slice(5, 7), 16);
+  const newR = Math.min(255, Math.round(r + (255 - r) * amount));
+  const newG = Math.min(255, Math.round(g + (255 - g) * amount));
+  const newB = Math.min(255, Math.round(b + (255 - b) * amount));
+  return `#${newR.toString(16).padStart(2, "0")}${newG.toString(16).padStart(2, "0")}${newB.toString(16).padStart(2, "0")}`;
+}
+
+// Function to update the benchmarks chart.
+function updateChart() {
+  if (chart) {
+    chart.destroy();
+  } // If a chart instance already exists, destroy it.
+
+  // Define a specific color map for models.
+  const colorMap = {
+    YOLO11: "#0b23a9",
+    YOLOv10: "#ff7f0e",
+    YOLOv9: "#2ca02c",
+    YOLOv8: "#d62728",
+    YOLOv7: "#9467bd",
+    "YOLOv6-3.0": "#8c564b",
+    YOLOv5: "#e377c2",
+    "PP-YOLOE+": "#7f7f7f",
+    "DAMO-YOLO": "#bcbd22",
+    YOLOX: "#17becf",
+    RTDETRv2: "#eccd22",
+  };
+
+  // Get the selected algorithms from the checkboxes.
+  const selectedAlgorithms = [
+    ...document.querySelectorAll('input[name="algorithm"]:checked'),
+  ].map((e) => e.value);
+
+  // Create the datasets for the selected algorithms.
+  const datasets = selectedAlgorithms.map((algorithm, i) => {
+    const baseColor =
+      colorMap[algorithm] || `hsl(${Math.random() * 360}, 70%, 50%)`;
+    const lineColor = i === 0 ? baseColor : lightenHexColor(baseColor, 0.6); // Lighten non-primary lines.
+
+    return {
+      label: algorithm, // Label for the data points in the legend.
+      data: Object.entries(data[algorithm]).map(([version, point]) => ({
+        x: point.speed, // Speed data points on the x-axis.
+        y: point.mAP, // mAP data points on the y-axis.
+        version: version.toUpperCase(), // Store the version as additional data.
+      })),
+      fill: false, // Don't fill the chart.
+      borderColor: lineColor, // Use the lightened color for the line.
+      tension: 0.3, // Smooth the line.
+      pointRadius: i === 0 ? 7 : 4, // Highlight primary dataset points.
+      pointHoverRadius: i === 0 ? 9 : 6, // Highlight hover for primary dataset.
+      pointBackgroundColor: lineColor, // Fill points with the line color.
+      pointBorderColor: "#ffffff", // Add a border around points for contrast.
+      borderWidth: i === 0 ? 3 : 1.5, // Slightly increase line size for the primary dataset.
+    };
+  });
+
+  if (datasets.length === 0) {
+    return;
+  } // If there are no selected algorithms, return without creating a new chart.
+
+  // Create a new chart instance.
+  chart = new Chart(document.getElementById("chart").getContext("2d"), {
+    type: "line", // Set the chart type to line.
+    data: { datasets },
+    options: {
+      plugins: {
+        legend: {
+          display: true,
+          position: "top",
+          labels: { color: "#808080" },
+        }, // Configure the legend.
+        tooltip: {
+          callbacks: {
+            label: (tooltipItem) => {
+              const { dataset, dataIndex } = tooltipItem;
+              const point = dataset.data[dataIndex];
+              return `${dataset.label}${point.version.toLowerCase()}: Speed = ${point.x}, mAP = ${point.y}`; // Custom tooltip label.
+            },
+          },
+          mode: "nearest",
+          intersect: false,
+        }, // Configure the tooltip.
+      },
+      interaction: { mode: "nearest", axis: "x", intersect: false }, // Configure the interaction mode.
+      scales: {
+        x: {
+          type: "linear",
+          position: "bottom",
+          title: {
+            display: true,
+            text: "Latency T4 TensorRT10 FP16 (ms/img)",
+            color: "#808080",
+          }, // X-axis title.
+          grid: { color: "#e0e0e0" }, // Grid line color.
+          ticks: { color: "#808080" }, // Tick label color.
+        },
+        y: {
+          title: { display: true, text: "mAP", color: "#808080" }, // Y-axis title.
+          grid: { color: "#e0e0e0" }, // Grid line color.
+          ticks: { color: "#808080" }, // Tick label color.
+        },
+      },
+    },
+  });
+}
+
+document$.subscribe(function () {
+  function initializeApp() {
+    if (typeof Chart !== "undefined") {
+      document
+        .querySelectorAll('input[name="algorithm"]')
+        .forEach((checkbox) =>
+          checkbox.addEventListener("change", updateChart),
+        );
+      updateChart();
+    } else {
+      setTimeout(initializeApp, 100); // Retry every 100ms
+    }
+  }
+  initializeApp(); // Initial chart rendering
+});

docs/overrides/javascript/extra.js

@@ -143,200 +143,3 @@ document.addEventListener("DOMContentLoaded", () => {
     widgetContainer && addInkeepWidget("SearchBar", "#inkeepSearchBar");
   });
 });
-
-// YOLO models chart ---------------------------------------------------------------------------------------------------
-const data = {
-  YOLO11: {
-    n: { speed: 1.55, mAP: 39.5 },
-    s: { speed: 2.63, mAP: 47.0 },
-    m: { speed: 5.27, mAP: 51.4 },
-    l: { speed: 6.84, mAP: 53.2 },
-    x: { speed: 12.49, mAP: 54.7 },
-  },
-  YOLOv10: {
-    n: { speed: 1.56, mAP: 39.5 },
-    s: { speed: 2.66, mAP: 46.7 },
-    m: { speed: 5.48, mAP: 51.3 },
-    b: { speed: 6.54, mAP: 52.7 },
-    l: { speed: 8.33, mAP: 53.3 },
-    x: { speed: 12.2, mAP: 54.4 },
-  },
-  YOLOv9: {
-    t: { speed: 2.3, mAP: 37.8 },
-    s: { speed: 3.54, mAP: 46.5 },
-    m: { speed: 6.43, mAP: 51.5 },
-    c: { speed: 7.16, mAP: 52.8 },
-    e: { speed: 16.77, mAP: 55.1 },
-  },
-  YOLOv8: {
-    n: { speed: 1.47, mAP: 37.3 },
-    s: { speed: 2.66, mAP: 44.9 },
-    m: { speed: 5.86, mAP: 50.2 },
-    l: { speed: 9.06, mAP: 52.9 },
-    x: { speed: 14.37, mAP: 53.9 },
-  },
-  YOLOv7: { l: { speed: 6.84, mAP: 51.4 }, x: { speed: 11.57, mAP: 53.1 } },
-  "YOLOv6-3.0": {
-    n: { speed: 1.17, mAP: 37.5 },
-    s: { speed: 2.66, mAP: 45.0 },
-    m: { speed: 5.28, mAP: 50.0 },
-    l: { speed: 8.95, mAP: 52.8 },
-  },
-  YOLOv5: {
-    s: { speed: 1.92, mAP: 37.4 },
-    m: { speed: 4.03, mAP: 45.4 },
-    l: { speed: 6.61, mAP: 49.0 },
-    x: { speed: 11.89, mAP: 50.7 },
-  },
-  "PP-YOLOE+": {
-    t: { speed: 2.84, mAP: 39.9 },
-    s: { speed: 2.62, mAP: 43.7 },
-    m: { speed: 5.56, mAP: 49.8 },
-    l: { speed: 8.36, mAP: 52.9 },
-    x: { speed: 14.3, mAP: 54.7 },
-  },
-  "DAMO-YOLO": {
-    t: { speed: 2.32, mAP: 42.0 },
-    s: { speed: 3.45, mAP: 46.0 },
-    m: { speed: 5.09, mAP: 49.2 },
-    l: { speed: 7.18, mAP: 50.8 },
-  },
-  YOLOX: {
-    s: { speed: 2.56, mAP: 40.5 },
-    m: { speed: 5.43, mAP: 46.9 },
-    l: { speed: 9.04, mAP: 49.7 },
-    x: { speed: 16.1, mAP: 51.1 },
-  },
-  RTDETRv2: {
-    s: { speed: 5.03, mAP: 48.1 },
-    m: { speed: 7.51, mAP: 51.9 },
-    l: { speed: 9.76, mAP: 53.4 },
-    x: { speed: 15.03, mAP: 54.3 },
-  },
-};
-
-let chart = null; // chart variable will hold the reference to the current chart instance.
-
-// Function to lighten a hex color by a specified amount.
-function lightenHexColor(color, amount = 0.5) {
-  const r = parseInt(color.slice(1, 3), 16);
-  const g = parseInt(color.slice(3, 5), 16);
-  const b = parseInt(color.slice(5, 7), 16);
-  const newR = Math.min(255, Math.round(r + (255 - r) * amount));
-  const newG = Math.min(255, Math.round(g + (255 - g) * amount));
-  const newB = Math.min(255, Math.round(b + (255 - b) * amount));
-  return `#${newR.toString(16).padStart(2, "0")}${newG.toString(16).padStart(2, "0")}${newB.toString(16).padStart(2, "0")}`;
-}
-
-// Function to update the benchmarks chart.
-function updateChart() {
-  if (chart) {
-    chart.destroy();
-  } // If a chart instance already exists, destroy it.
-
-  // Define a specific color map for models.
-  const colorMap = {
-    YOLO11: "#0b23a9",
-    YOLOv10: "#ff7f0e",
-    YOLOv9: "#2ca02c",
-    YOLOv8: "#d62728",
-    YOLOv7: "#9467bd",
-    "YOLOv6-3.0": "#8c564b",
-    YOLOv5: "#e377c2",
-    "PP-YOLOE+": "#7f7f7f",
-    "DAMO-YOLO": "#bcbd22",
-    YOLOX: "#17becf",
-    RTDETRv2: "#eccd22",
-  };
-
-  // Get the selected algorithms from the checkboxes.
-  const selectedAlgorithms = [
-    ...document.querySelectorAll('input[name="algorithm"]:checked'),
-  ].map((e) => e.value);
-
-  // Create the datasets for the selected algorithms.
-  const datasets = selectedAlgorithms.map((algorithm, i) => {
-    const baseColor =
-      colorMap[algorithm] || `hsl(${Math.random() * 360}, 70%, 50%)`;
-    const lineColor = i === 0 ? baseColor : lightenHexColor(baseColor, 0.6); // Lighten non-primary lines.
-
-    return {
-      label: algorithm, // Label for the data points in the legend.
-      data: Object.entries(data[algorithm]).map(([version, point]) => ({
-        x: point.speed, // Speed data points on the x-axis.
-        y: point.mAP, // mAP data points on the y-axis.
-        version: version.toUpperCase(), // Store the version as additional data.
-      })),
-      fill: false, // Don't fill the chart.
-      borderColor: lineColor, // Use the lightened color for the line.
-      tension: 0.3, // Smooth the line.
-      pointRadius: i === 0 ? 7 : 4, // Highlight primary dataset points.
-      pointHoverRadius: i === 0 ? 9 : 6, // Highlight hover for primary dataset.
-      pointBackgroundColor: lineColor, // Fill points with the line color.
-      pointBorderColor: "#ffffff", // Add a border around points for contrast.
-      borderWidth: i === 0 ? 3 : 1.5, // Slightly increase line size for the primary dataset.
-    };
-  });
-
-  if (datasets.length === 0) {
-    return;
-  } // If there are no selected algorithms, return without creating a new chart.
-
-  // Create a new chart instance.
-  chart = new Chart(document.getElementById("chart").getContext("2d"), {
-    type: "line", // Set the chart type to line.
-    data: { datasets },
-    options: {
-      plugins: {
-        legend: {
-          display: true,
-          position: "top",
-          labels: { color: "#808080" },
-        }, // Configure the legend.
-        tooltip: {
-          callbacks: {
-            label: (tooltipItem) => {
-              const { dataset, dataIndex } = tooltipItem;
-              const point = dataset.data[dataIndex];
-              return `${dataset.label}${point.version.toLowerCase()}: Speed = ${point.x}, mAP = ${point.y}`; // Custom tooltip label.
-            },
-          },
-          mode: "nearest",
-          intersect: false,
-        }, // Configure the tooltip.
-      },
-      interaction: { mode: "nearest", axis: "x", intersect: false }, // Configure the interaction mode.
-      scales: {
-        x: {
-          type: "linear",
-          position: "bottom",
-          title: {
-            display: true,
-            text: "Latency T4 TensorRT10 FP16 (ms/img)",
-            color: "#808080",
-          }, // X-axis title.
-          grid: { color: "#e0e0e0" }, // Grid line color.
-          ticks: { color: "#808080" }, // Tick label color.
-        },
-        y: {
-          title: { display: true, text: "mAP", color: "#808080" }, // Y-axis title.
-          grid: { color: "#e0e0e0" }, // Grid line color.
-          ticks: { color: "#808080" }, // Tick label color.
-        },
-      },
-    },
-  });
-}
-
-// Poll for Chart.js to load, then initialize checkboxes and chart
-function initializeApp() {
-  if (typeof Chart !== "undefined") {
-    document
-      .querySelectorAll('input[name="algorithm"]')
-      .forEach((checkbox) => checkbox.addEventListener("change", updateChart));
-    updateChart();
-  } else {
-    setTimeout(initializeApp, 100); // Retry every 100ms
-  }
-}
-document.addEventListener("DOMContentLoaded", initializeApp); // Initial chart rendering on page load