Benchmarks graph Javascript fix (#17700)
Co-authored-by: UltralyticsAssistant <web@ultralytics.com> Co-authored-by: Glenn Jocher <glenn.jocher@ultralytics.com>
This commit is contained in:
Muhammad Rizwan Munawar
GitHub
parent
9ca990c303
commit
3e48829cd6
4 changed files with 212 additions and 202 deletions
2
.github/workflows/docs.yml
vendored
2
.github/workflows/docs.yml
vendored
|
|
@ -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 .
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
199
docs/overrides/javascript/benchmark.js
Normal file
199
docs/overrides/javascript/benchmark.js
Normal file
|
|
@ -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
|
||||
});
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue