Benchmark graph fix (#17296)

Co-authored-by: Glenn Jocher <glenn.jocher@ultralytics.com>
pull/17301/head
Muhammad Rizwan Munawar 2 weeks ago committed by GitHub
parent daaac35fff
commit 7cb36d64b2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 22
      docs/en/modes/benchmark.md
  2. 33
      docs/overrides/javascript/extra.js

@ -16,17 +16,19 @@ keywords: model benchmarking, YOLO11, Ultralytics, performance evaluation, expor
You may need to refresh the page to view the graphs correctly due to potential cookie issues.
<div>
<label><input type="checkbox" name="algorithm" value="YOLO11"><span>Ultralytics YOLO11</span></label>
<label><input type="checkbox" name="algorithm" value="YOLOv6"><span>YOLOv6</span></label>
<label><input type="checkbox" name="algorithm" value="YOLOv7"><span>YOLOv7</span></label>
<label><input type="checkbox" name="algorithm" value="YOLOv10"><span>YOLOv10</span></label>
<label><input type="checkbox" name="algorithm" value="YOLOv9"><span>YOLOv9</span></label>
<label><input type="checkbox" name="algorithm" value="YOLOv8"><span>Ultralytics YOLOv8</span></label>
<label><input type="checkbox" name="algorithm" value="PPYOLOE"><span>PPYOLOE</span></label>
<label><input type="checkbox" name="algorithm" value="YOLOv5"><span>Ultralytics YOLOv5</span></label>
<div style="display: flex; align-items: flex-start;">
<div style="margin-right: 20px;">
<label><input type="checkbox" name="algorithm" value="YOLO11" checked><span>Ultralytics YOLO11</span></label><br>
<label><input type="checkbox" name="algorithm" value="YOLOv6" checked><span>YOLOv6</span></label><br>
<label><input type="checkbox" name="algorithm" value="YOLOv7" checked><span>YOLOv7</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>Ultralytics YOLOv8</span></label><br>
<label><input type="checkbox" name="algorithm" value="PPYOLOE" checked><span>PPYOLOE</span></label><br>
<label><input type="checkbox" name="algorithm" value="YOLOv5" checked><span>Ultralytics YOLOv5</span></label>
</div>
<div style="flex-grow: 1;"><canvas id="chart"></canvas></div> <!-- Canva for plotting benchmarks -->
</div>
<canvas id="chart" width="400" height="200"></canvas>
## Introduction

@ -165,7 +165,7 @@ let chart = null; // chart variable will hold the reference to the current char
// This function is responsible for updating the benchmarks chart.
function updateChart() {
// If a chart instance already exists, destroy it.
if (chart) { chart.destroy(); }
if (chart) chart.destroy();
// Get the selected algorithms from the checkboxes.
const selectedAlgorithms = [...document.querySelectorAll('input[name="algorithm"]:checked')].map(e => e.value);
@ -195,7 +195,7 @@ function updateChart() {
data: { datasets },
options: {
plugins: {
legend: { display: true, position: 'top', labels: { color: '#111e68' } }, // Configure the legend.
legend: { display: true, position: 'top', labels: {color: '#808080'} }, // Configure the legend.
tooltip: {
callbacks: {
label: (tooltipItem) => {
@ -212,26 +212,29 @@ function updateChart() {
scales: {
x: {
type: 'linear', position: 'bottom',
title: { display: true, text: 'Latency T4 TensorRT10 FP16 (ms/img)', color: '#111e68' }, // X-axis title.
title: { display: true, text: 'Latency T4 TensorRT10 FP16 (ms/img)', color: '#808080'}, // X-axis title.
grid: { color: '#e0e0e0' }, // Grid line color.
ticks: { color: '#111e68' } // Tick label color.
ticks: { color: '#808080' } // Tick label color.
},
y: {
title: { display: true, text: 'mAP', color: '#111e68' }, // Y-axis title.
title: { display: true, text: 'mAP', color: '#808080'}, // Y-axis title.
grid: { color: '#e0e0e0' }, // Grid line color.
ticks: { color: '#111e68' } // Tick label color.
ticks: { color: '#808080' } // Tick label color.
}
}
}
});
}
// Add event listeners to the checkboxes to trigger the chart update.
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('input[name="algorithm"]').forEach(checkbox =>
checkbox.addEventListener('change', updateChart)
);
// Call updateChart on initial load
updateChart();
console.log("DOM loaded, initial chart render attempted");
});
// 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…
Cancel
Save