## Introduction
diff --git a/docs/overrides/javascript/benchmark.js b/docs/overrides/javascript/benchmark.js
new file mode 100644
index 00000000..65efb863
--- /dev/null
+++ b/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
+});
diff --git a/docs/overrides/javascript/extra.js b/docs/overrides/javascript/extra.js
index 3c3ad2b6..2de7572e 100644
--- a/docs/overrides/javascript/extra.js
+++ b/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
## Benchmark Visualization
-
-
!!! 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