Spaces:
Running
Running
| /* Additional chart views for the existing PaddyLiteX benchmark interface. */ | |
| (function () { | |
| 'use strict'; | |
| const metricNames = { | |
| precision: 'Precision', | |
| recall: 'Recall', | |
| map50: 'mAP@0.5', | |
| map5095: 'mAP@0.5:0.95', | |
| }; | |
| const hiddenSeries = new Map(); | |
| const $ = (id) => document.getElementById(id); | |
| const escape = (value) => String(value).replace(/[&<>"']/g, (character) => ({ | |
| '&': '&', '<': '<', '>': '>', '"': '"', "'": ''', | |
| }[character])); | |
| const hasScore = (value) => typeof value === 'number' && Number.isFinite(value); | |
| const percent = (value) => hasScore(value) ? `${value.toFixed(2)}%` : 'N/A'; | |
| const classLabel = (name) => name.replace(/^Rice__/, '').replace(/([a-z])([A-Z])/g, '$1 $2'); | |
| const modelName = (model) => model.label.replace(/\bDenseNet121\b/g, 'Yolov8n_DenseNet121'); | |
| function legend(models, key, redraw) { | |
| if (!hiddenSeries.has(key)) hiddenSeries.set(key, new Set()); | |
| const hidden = hiddenSeries.get(key); | |
| const markup = models.map((model) => ` | |
| <button type="button" class="chart-series-toggle" data-series="${escape(model.id)}" | |
| aria-pressed="${!hidden.has(model.id)}" title="Show or hide ${escape(modelName(model))}"> | |
| <i style="background:${model.color}"></i>${escape(modelName(model))} | |
| </button>`).join(''); | |
| return { hidden, markup, bind(container) { | |
| container.querySelectorAll('[data-series]').forEach((button) => { | |
| button.addEventListener('click', () => { | |
| const id = button.dataset.series; | |
| if (hidden.has(id)) hidden.delete(id); | |
| else hidden.add(id); | |
| redraw(); | |
| }); | |
| }); | |
| } }; | |
| } | |
| function radar(axes, models, getScore, key, redraw) { | |
| const width = 900; | |
| const height = 590; | |
| const center = { x: 450, y: 285 }; | |
| const radius = 195; | |
| const point = (index, score, padding = 0) => { | |
| const angle = -Math.PI / 2 + index * 2 * Math.PI / axes.length; | |
| const distance = radius * score / 100 + padding; | |
| return { x: center.x + Math.cos(angle) * distance, | |
| y: center.y + Math.sin(angle) * distance }; | |
| }; | |
| const points = (score) => axes.map((_, index) => { | |
| const p = point(index, score); | |
| return `${p.x},${p.y}`; | |
| }).join(' '); | |
| const controls = legend(models, key, redraw); | |
| const rings = [20, 40, 60, 80, 100].map((score) => ` | |
| <polygon points="${points(score)}" fill="none" stroke="#d6e3ea" /> | |
| <text x="${center.x + 7}" y="${center.y - radius * score / 100 + 14}" | |
| fill="#617587" font-size="12">${score}%</text>`).join(''); | |
| const spokes = axes.map((axis, index) => { | |
| const edge = point(index, 100); | |
| const label = point(index, 100, 29); | |
| const anchor = Math.abs(label.x - center.x) < 15 ? 'middle' | |
| : label.x < center.x ? 'end' : 'start'; | |
| const words = axis.label.split(' '); | |
| const lines = words.length > 3 | |
| ? [words.slice(0, Math.ceil(words.length / 2)).join(' '), words.slice(Math.ceil(words.length / 2)).join(' ')] | |
| : [axis.label]; | |
| return ` | |
| <line x1="${center.x}" y1="${center.y}" x2="${edge.x}" y2="${edge.y}" stroke="#d6e3ea" /> | |
| <text x="${label.x}" y="${label.y}" text-anchor="${anchor}" fill="#344d61" font-size="14"> | |
| ${lines.map((line, i) => `<tspan x="${label.x}" dy="${i ? 17 : 0}">${i ? ' ' : ''}${escape(line)}</tspan>`).join('')} | |
| </text>`; | |
| }).join(''); | |
| let incomplete = 0; | |
| const polygons = models.map((model, modelIndex) => { | |
| if (controls.hidden.has(model.id)) return ''; | |
| const scores = axes.map((axis) => getScore(model, axis)); | |
| if (!scores.every(hasScore)) { incomplete += 1; return ''; } | |
| const vertices = scores.map((score, i) => point(i, score)); | |
| const dash = ['', '7 3', '2 3', '10 3 2 3'][modelIndex % 4]; | |
| const description = `${modelName(model)}: ${axes.map((axis, i) => `${axis.label} ${percent(scores[i])}`).join('; ')}`; | |
| return ` | |
| <polygon data-model-id="${escape(model.id)}" points="${vertices.map((p) => `${p.x},${p.y}`).join(' ')}" | |
| fill="${model.color}" fill-opacity="${models.length > 4 ? 0.025 : 0.055}" | |
| stroke="${model.color}" stroke-width="2.5" stroke-dasharray="${dash}"> | |
| <title>${escape(description)}</title> | |
| </polygon> | |
| ${vertices.map((p, i) => `<circle cx="${p.x}" cy="${p.y}" r="4" fill="${model.color}" stroke="white" stroke-width="1.5"><title>${escape(modelName(model))} · ${escape(axes[i].label)}: ${percent(scores[i])}</title></circle>`).join('')}`; | |
| }).join(''); | |
| return { controls, markup: ` | |
| <div class="chart-radar"> | |
| <svg viewBox="0 0 ${width} ${height}" role="img" aria-label="Radar chart, percentage scores on a shared zero to one hundred scale"> | |
| ${rings}${spokes}${polygons} | |
| </svg> | |
| </div> | |
| <div class="chart-series-controls">${controls.markup}</div> | |
| <p class="chart-tip">Select model names to show or hide their series. All axes use 0–100%.${incomplete ? ' Models with missing scores are omitted from the radar.' : ''}</p>` }; | |
| } | |
| function scoreColor(value) { | |
| if (!hasScore(value)) return '#edf1f5'; | |
| // A fixed 0–100% scale keeps heatmaps comparable across metrics and studies. | |
| const ratio = Math.max(0, Math.min(100, value)) / 100; | |
| const start = [245, 248, 252]; | |
| const end = [27, 113, 143]; | |
| return `rgb(${start.map((channel, i) => Math.round(channel + (end[i] - channel) * ratio)).join(',')})`; | |
| } | |
| function heatmap(rowLabels, columnLabels, getScore, caption) { | |
| return ` | |
| <div class="chart-table-scroll"> | |
| <table class="score-heatmap"> | |
| <caption>${escape(caption)}</caption> | |
| <thead><tr><th scope="col">${escape(rowLabels.heading)}</th> | |
| ${columnLabels.map((column) => `<th scope="col">${escape(column.label).replace(/_/g, '_<wbr>')}</th>`).join('')} | |
| </tr></thead> | |
| <tbody>${rowLabels.items.map((row) => ` | |
| <tr><th scope="row">${escape(row.label)}</th> | |
| ${columnLabels.map((column) => { | |
| const value = getScore(row, column); | |
| return `<td style="background:${scoreColor(value)};color:${hasScore(value) && value >= 65 ? '#fff' : '#304859'}" | |
| title="${escape(row.label)} · ${escape(column.label)}: ${percent(value)}">${percent(value)}</td>`; | |
| }).join('')} | |
| </tr>`).join('')} | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="heatmap-key"><span>0%</span><i></i><span>100%</span></div>`; | |
| } | |
| function dotRows(models, getScore, format, limit) { | |
| return models.map((model) => { | |
| const value = getScore(model); | |
| const label = hasScore(value) ? format(value) : 'N/A'; | |
| const position = hasScore(value) ? Math.max(0, Math.min(100, value / limit * 100)) : 0; | |
| return `<div class="chart-dot-row" data-model-id="${escape(model.id)}"> | |
| <div class="bar-label"><span>${escape(modelName(model))}</span><strong>${label}</strong></div> | |
| <div class="chart-dot-track" role="img" aria-label="${escape(modelName(model))}: ${label}"> | |
| ${hasScore(value) ? `<i class="chart-dot" style="left:${position}%;background:${model.color}"></i>` : ''} | |
| </div> | |
| </div>`; | |
| }).join(''); | |
| } | |
| function renderComparison(containerId, models, metric, options) { | |
| const container = $(containerId); | |
| const redraw = () => renderComparison(containerId, models, metric, options); | |
| if (options.type === 'radar') { | |
| const axes = Object.entries(metricNames).map(([id, label]) => ({ id, label })); | |
| const chart = radar(axes, models, (model, axis) => model[axis.id], `quality-${options.study}`, redraw); | |
| container.innerHTML = chart.markup; | |
| chart.controls.bind(container); | |
| } else if (options.type === 'heatmap') { | |
| container.innerHTML = heatmap( | |
| { heading: 'Model', items: models.map((model) => ({ id: model.id, label: modelName(model), model })) }, | |
| Object.entries(metricNames).map(([id, label]) => ({ id, label })), | |
| (row, column) => row.model[column.id], 'Detection performance across all four metrics (%)', | |
| ); | |
| } else { | |
| container.innerHTML = dotRows(models, (model) => model[metric], options.format, options.limit) | |
| + `<div class="axis"><span>0</span><span>${options.format(options.limit)}</span></div>`; | |
| } | |
| } | |
| function renderClasses(models, rows, metric, options) { | |
| const container = $('class-chart'); | |
| const getScore = (row, model) => row.models[model.id]?.[metric]; | |
| if (options.type === 'radar') { | |
| // Keep class axes in dataset order, even if bar/heatmap sorting was changed. | |
| const axes = [...rows].sort((a, b) => a.id - b.id) | |
| .map((row) => ({ id: row.id, label: `${row.id} · ${classLabel(row.name)}`, row })); | |
| const redraw = () => renderClasses(models, rows, metric, options); | |
| const chart = radar(axes, models, (model, axis) => getScore(axis.row, model), `classes-${options.study}`, redraw); | |
| container.innerHTML = chart.markup; | |
| chart.controls.bind(container); | |
| } else if (options.type === 'heatmap') { | |
| container.innerHTML = heatmap( | |
| { heading: 'Disease class', items: rows.map((row) => ({ label: `${row.id} · ${row.name}`, row })) }, | |
| models.map((model) => ({ label: modelName(model), model })), | |
| (row, column) => getScore(row.row, column.model), `${options.label} by disease class (%)`, | |
| ); | |
| } else { | |
| container.innerHTML = rows.map((row) => `<section class="class-dot-group" data-class-id="${row.id}"> | |
| <h3>${row.id} · ${escape(row.name)}</h3> | |
| ${dotRows(models, (model) => getScore(row, model), percent, 100)} | |
| </section>`).join('') + '<div class="axis"><span>0%</span><span>100%</span></div>'; | |
| } | |
| } | |
| window.PaddyLiteXCharts = { renderComparison, renderClasses }; | |
| })(); | |