Chiebot-Mirror
/
ultralytics
mirror of https://github.com/ultralytics/ultralytics.git
9
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Benchmark graph fix (#17296)

Browse Source 
Co-authored-by: Glenn Jocher <glenn.jocher@ultralytics.com>
pull/17301/head
Muhammad Rizwan Munawar 4 weeks ago committed by GitHub
parent daaac35fff
commit 7cb36d64b2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      docs/en/modes/benchmark.md
  2. 33
      docs/overrides/javascript/extra.js

22
docs/en/modes/benchmark.md
Unescape View File

@ -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. You may need to refresh the page to view the graphs correctly due to potential cookie issues.
<div> <div style="display: flex; align-items: flex-start;">
<label><input type="checkbox" name="algorithm" value="YOLO11"><span>Ultralytics YOLO11</span></label> <div style="margin-right: 20px;">
<label><input type="checkbox" name="algorithm" value="YOLOv6"><span>YOLOv6</span></label> <label><input type="checkbox" name="algorithm" value="YOLO11" checked><span>Ultralytics YOLO11</span></label><br>
<label><input type="checkbox" name="algorithm" value="YOLOv7"><span>YOLOv7</span></label> <label><input type="checkbox" name="algorithm" value="YOLOv6" checked><span>YOLOv6</span></label><br>
<label><input type="checkbox" name="algorithm" value="YOLOv10"><span>YOLOv10</span></label> <label><input type="checkbox" name="algorithm" value="YOLOv7" checked><span>YOLOv7</span></label><br>
<label><input type="checkbox" name="algorithm" value="YOLOv9"><span>YOLOv9</span></label> <label><input type="checkbox" name="algorithm" value="YOLOv10" checked><span>YOLOv10</span></label><br>
<label><input type="checkbox" name="algorithm" value="YOLOv8"><span>Ultralytics YOLOv8</span></label> <label><input type="checkbox" name="algorithm" value="YOLOv9" checked><span>YOLOv9</span></label><br>
<label><input type="checkbox" name="algorithm" value="PPYOLOE"><span>PPYOLOE</span></label> <label><input type="checkbox" name="algorithm" value="YOLOv8" checked><span>Ultralytics YOLOv8</span></label><br>
<label><input type="checkbox" name="algorithm" value="YOLOv5"><span>Ultralytics YOLOv5</span></label> <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> </div>
<canvas id="chart" width="400" height="200"></canvas>
## Introduction ## Introduction

33
docs/overrides/javascript/extra.js
Unescape View File

@ -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. // This function is responsible for updating the benchmarks chart.
function updateChart() { function updateChart() {
// If a chart instance already exists, destroy it. // If a chart instance already exists, destroy it.
if (chart) { chart.destroy(); } if (chart) chart.destroy();
// Get the selected algorithms from the checkboxes. // Get the selected algorithms from the checkboxes.
const selectedAlgorithms = [...document.querySelectorAll('input[name="algorithm"]:checked')].map(e => e.value); const selectedAlgorithms = [...document.querySelectorAll('input[name="algorithm"]:checked')].map(e => e.value);
@ -195,7 +195,7 @@ function updateChart() {
data: { datasets }, data: { datasets },
options: { options: {
plugins: { plugins: {
legend: { display: true, position: 'top', labels: { color: '#111e68' } }, // Configure the legend. legend: { display: true, position: 'top', labels: {color: '#808080'} }, // Configure the legend.
tooltip: { tooltip: {
callbacks: { callbacks: {
label: (tooltipItem) => { label: (tooltipItem) => {
@ -212,26 +212,29 @@ function updateChart() {
scales: { scales: {
x: { x: {
type: 'linear', position: 'bottom', 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. grid: { color: '#e0e0e0' }, // Grid line color.
ticks: { color: '#111e68' } // Tick label color. ticks: { color: '#808080' } // Tick label color.
}, },
y: { 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. 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. // Poll for Chart.js to load, then initialize checkboxes and chart
document.addEventListener("DOMContentLoaded", () => { function initializeApp() {
document.querySelectorAll('input[name="algorithm"]').forEach(checkbox => if (typeof Chart !== 'undefined') {
checkbox.addEventListener('change', updateChart) document.querySelectorAll('input[name="algorithm"]').forEach(checkbox =>
); checkbox.addEventListener('change', updateChart)
// Call updateChart on initial load );
updateChart(); updateChart();
console.log("DOM loaded, initial chart render attempted"); } else {
}); setTimeout(initializeApp, 100); // Retry every 100ms
}
}
document.addEventListener("DOMContentLoaded", initializeApp); // Initial chart rendering on page load

Write Preview
Loading…
Cancel
Save