HongChuang/ultralytics-ascend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Simplify chart legend (#18878)

Browse source 
Co-authored-by: UltralyticsAssistant <web@ultralytics.com>
This commit is contained in:
Glenn Jocher 2025-01-25 17:56:20 +01:00 • committed by GitHub
parent 9181ff62f5
commit 40c86827e5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 64 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

30
docs/en/modes/benchmark.md
View file

@ -4,16 +4,6 @@ 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">
@ -24,22 +14,10 @@ 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 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="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>
<label><input type="checkbox" name="algorithm" value="YOLOv6-3.0" checked><span>YOLOv6-3.0</span></label><br>
<label><input type="checkbox" name="algorithm" value="YOLOv5" checked><span>YOLOv5</span></label><br>
<label><input type="checkbox" name="algorithm" value="PP-YOLOE+" checked><span>PP-YOLOE+</span></label><br>
<label><input type="checkbox" name="algorithm" value="DAMO-YOLO" checked><span>DAMO-YOLO</span></label><br>
<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>
</div>
<script async src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script defer src="../../javascript/benchmark.js"></script>
<canvas id="modelComparisonChart" width="1024" height="400"></canvas>
## Introduction

58
docs/overrides/javascript/benchmark.js
View file

@ -69,7 +69,7 @@ const data = {
},
};
let chart = null; // chart variable will hold the reference to the current chart instance.
let modelComparisonChart = 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) {
@ -83,9 +83,9 @@ function lightenHexColor(color, amount = 0.5) {
}
// Function to update the benchmarks chart.
function updateChart() {
if (chart) {
chart.destroy();
function updateChart(initialDatasets = []) {
if (modelComparisonChart) {
modelComparisonChart.destroy();
} // If a chart instance already exists, destroy it.
// Define a specific color map for models.
@ -103,10 +103,9 @@ function updateChart() {
RTDETRv2: "#eccd22",
};
// Get the selected algorithms from the checkboxes.
const selectedAlgorithms = [
...document.querySelectorAll('input[name="algorithm"]:checked'),
].map((e) => e.value);
// Get the selected algorithms from the initialDatasets or all if empty.
const selectedAlgorithms =
initialDatasets.length > 0 ? initialDatasets : Object.keys(data);
// Create the datasets for the selected algorithms.
const datasets = selectedAlgorithms.map((algorithm, i) => {
@ -123,29 +122,38 @@ function updateChart() {
})),
fill: false, // Don't fill the chart.
borderColor: lineColor, // Use the lightened color for the line.
tension: 0.3, // Smooth the line.
tension: 0.2, // 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.
hidden: !selectedAlgorithms.includes(algorithm),
};
});
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"), {
modelComparisonChart = new Chart(
document.getElementById("modelComparisonChart").getContext("2d"),
{
type: "line", // Set the chart type to line.
data: { datasets },
options: {
//aspectRatio: 2.5, // higher is wider
plugins: {
legend: {
display: true,
position: "top",
position: "right",
align: "start", // start, end, center
labels: { color: "#808080" },
onClick: (e, legendItem, legend) => {
const index = legendItem.datasetIndex;
const ci = legend.chart;
const meta = ci.getDatasetMeta(index);
meta.hidden =
meta.hidden === null ? !ci.data.datasets[index].hidden : null;
ci.update();
},
}, // Configure the legend.
tooltip: {
callbacks: {
@ -168,28 +176,24 @@ function updateChart() {
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.
},
grid: { color: "#e0e0e0" },
ticks: { color: "#808080" },
},
y: {
title: { display: true, text: "mAP", color: "#808080" }, // Y-axis title.
grid: { color: "#e0e0e0" }, // Grid line color.
ticks: { color: "#808080" }, // Tick label color.
title: { display: true, text: "COCO mAP 50-95", color: "#808080" },
grid: { color: "#e0e0e0" },
ticks: { color: "#808080" },
},
},
},
});
},
);
}
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