Upload 9 files

app.js

@@ -1,913 +1,945 @@
-'use strict';
-
-// PaddyLiteX: resolve class results beside the running app.js.
-const paddyClassResultsUrl = new URL('per_class.json', document.currentScript?.src || document.baseURI);
-
-
-// Application state is shared by the detection and benchmark views.
-const getElement = (id) => document.getElementById(id);
-const formatNumber = (value) => new Intl.NumberFormat('en-US').format(value);
-const performanceMetrics = {
-  map5095: { label: 'mAP@0.5:0.95', unit: '%' },
-  map50: { label: 'mAP@0.5', unit: '%' },
-  precision: { label: 'Precision', unit: '%' },
-  recall: { label: 'Recall', unit: '%' },
-};
-const complexityMetrics = {
-  parameters: {
-    label: 'Parameters',
-    axisLabel: 'Parameters (millions)',
-    scale: 1000000,
-    unit: 'M',
-  },
-  gflops: { label: 'GFLOPs', axisLabel: 'GFLOPs', scale: 1, unit: 'G' },
-};
-
-let benchmarkData;
-let currentStudy = 'main';
-let selectedFile = null;
-let previewUrl = null;
-let comparisonRunning = false;
-let latestResults = null;
-let classData = null;
-let classDataError = '';
-const classMetricLabels = {
-  map5095: 'AP@0.5:0.95',
-  map50: 'AP@0.5',
-  precision: 'Precision',
-  recall: 'Recall',
-};
-// Dataset class IDs supplied for this thesis. Keep names independent of scores.
-const paddyClassNames = [
-  'Rice__BacterialLeafBlight',
-  'Rice__BrownSpot',
-  'Rice__Healthy',
-  'Rice__Hispa',
-  'Rice__LeafBlast',
-  'Rice__LeafScald',
-  'Rice__LeafSmut',
-  'Rice__NarrowBrownLeafSpot',
-  'Rice__NeckBlast',
-];
-
-function classRows() {
-  const supplied = new Map((classData?.classes || []).map((row) => [row.id, row]));
-  return paddyClassNames.map((name, id) => ({
-    id,
-    name,
-    models: supplied.get(id)?.models || {},
-  }));
-}
-
-function escapeHtml(value) {
-  const entities = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
-  return String(value).replace(/[&<>"']/g, (character) => entities[character]);
-}
-
-function displayModelName(model) {
-  // Older local configurations still use the previous baseline label.
-  return model.label.replace(/\bDenseNet121\b/g, 'Yolov8n_DenseNet121');
-}
-
-function showView(viewName) {
-  document.querySelectorAll('.view').forEach((view) => {
-    const active = view.id === viewName;
-    view.hidden = !active;
-    view.classList.toggle('active', active);
-  });
-
-  document.querySelectorAll('.tab').forEach((button) => {
-    const active = button.dataset.view === viewName;
-    button.classList.toggle('active', active);
-    button.setAttribute('aria-selected', String(active));
-  });
-}
-
-async function readResponse(response) {
-  let payload;
-  try {
-    payload = await response.json();
-  } catch {
-    throw new Error('The server returned an unexpected response. Please try again.');
-  }
-
-  if (!response.ok) {
-    throw new Error(
-      typeof payload.detail === 'string' ? payload.detail : 'The request could not be completed.',
-    );
-  }
-  return payload;
-}
-
-// Detection studio
-function resultHeading(model) {
-  return `
-    <div class="card-head">
-      <p class="role">${escapeHtml(model.role)}</p>
-      <h3>${escapeHtml(displayModelName(model))}</h3>
-    </div>
-  `;
-}
-
-function showEmptyResults(message = 'Upload an image to compare predictions.') {
-  if (!benchmarkData) return;
-
-  getElement('results').innerHTML = benchmarkData.main
-    .map(
-      (model) => `
-    <article class="result-card" style="--model-color: ${model.color}">
-      ${resultHeading(model)}
-      <div class="result-stage"><p>${escapeHtml(message)}</p></div>
-      <div class="result-body">${escapeHtml(model.id)}</div>
-    </article>
-  `,
-    )
-    .join('');
-}
-
-function showLoadingResults() {
-  getElement('results').innerHTML = benchmarkData.main
-    .map(
-      (model) => `
-    <article class="result-card" style="--model-color: ${model.color}">
-      ${resultHeading(model)}
-      <div class="result-stage">
-        <div>
-          <div class="spinner" style="margin: auto"></div>
-          <p>Comparing models…</p>
-        </div>
-      </div>
-      <div class="result-body">Identical image and settings</div>
-    </article>
-  `,
-    )
-    .join('');
-}
-
-function renderResults(results) {
-  const classMappings = results
-    .filter((result) => result.status === 'success')
-    .map((result) => JSON.stringify(Object.entries(result.class_names).sort()));
-
-  if (new Set(classMappings).size > 1) {
-    getElement('message').textContent =
-      'The checkpoints have different class mappings. Verify their dataset configuration before treating this as a matched comparison.';
-  }
-
-  getElement('results').innerHTML = benchmarkData.main
-    .map((model) => {
-      const result = results.find((item) => item.id === model.id);
-      if (!result || result.status !== 'success') {
-        const description =
-          result?.status === 'unavailable' ? 'Model unavailable' : 'Inference error';
-        return `
-        <article class="result-card" style="--model-color: ${model.color}">
-          ${resultHeading(model)}
-          <div class="result-stage">
-            <p>${escapeHtml(result?.message || 'No result returned.')}</p>
-          </div>
-          <div class="result-body">${description}</div>
-        </article>
-      `;
-      }
-
-      const detections = result.detections;
-      const detectionRows = detections.length
-        ? detections
-            .map(
-              (detection) => `
-          <div class="detection-row">
-            <span>${escapeHtml(detection.class_name)}</span>
-            <strong>${(detection.confidence * 100).toFixed(1)}%</strong>
-          </div>
-        `,
-            )
-            .join('')
-        : '<p>No boxes exceeded the selected threshold. This does not confirm that the leaf is healthy.</p>';
-
-      return `
-      <article class="result-card" style="--model-color: ${model.color}">
-        ${resultHeading(model)}
-        <div class="result-stage">
-          <img src="${escapeHtml(result.image)}" alt="${escapeHtml(displayModelName(model))} annotated detection result">
-        </div>
-        <div class="result-body">
-          <strong>${detections.length} detection${detections.length === 1 ? '' : 's'}</strong>
-          ${detectionRows}
-          <a class="download-link" href="${escapeHtml(result.image)}" download="${escapeHtml(model.id)}_prediction.png">
-            Download annotated image
-          </a>
-        </div>
-      </article>
-    `;
-    })
-    .join('');
-}
-
-function updateControls() {
-  getElement('compare').disabled = !selectedFile || comparisonRunning || !benchmarkData;
-  getElement('compare').textContent = comparisonRunning
-    ? 'Comparing models…'
-    : 'Compare all three models';
-  ['file', 'clear', 'confidence', 'image-size'].forEach((id) => {
-    getElement(id).disabled = comparisonRunning;
-  });
-}
-
-function clearFile() {
-  if (comparisonRunning) return;
-  if (previewUrl) URL.revokeObjectURL(previewUrl);
-
-  selectedFile = null;
-  previewUrl = null;
-  latestResults = null;
-  getElement('file').value = '';
-  getElement('input-preview').hidden = true;
-  getElement('input-preview').removeAttribute('src');
-  getElement('upload-hint').hidden = false;
-  getElement('clear').hidden = true;
-  getElement('filename').textContent = 'No image selected';
-  getElement('message').textContent = '';
-  showEmptyResults();
-  updateControls();
-}
-
-// JPG upload compatibility: some files have an alias or no MIME type.
-function isSupportedImageFile(file) {
-  if (!file) return false;
-
-  const imageType = (file.type || '').toLowerCase();
-  const supportedTypes = [
-    'image/jpeg',
-    'image/jpg',
-    'image/pjpeg',
-    'image/png',
-    'image/webp',
-  ];
-
-  if (supportedTypes.includes(imageType)) return true;
-
-  // The existing image decoder still verifies that this is an actual image.
-  return (
-    ['', 'application/octet-stream'].includes(imageType) &&
-    /\.(jpg|jpeg|png|webp)$/i.test(file.name || '')
-  );
-}
-
-async function selectFile(file) {
-  if (comparisonRunning || !file) return;
-  getElement('message').textContent = '';
-
-  if (!isSupportedImageFile(file)) {
-    getElement('message').textContent = 'Choose a JPG, JPEG, PNG, or WebP image.';
-    return;
-  }
-  if (file.size > 10 * 1024 * 1024) {
-    getElement('message').textContent = 'Image exceeds 10 MB. Choose a smaller file.';
-    return;
-  }
-
-  let bitmap;
-  try {
-    bitmap = await createImageBitmap(file);
-    if (bitmap.width * bitmap.height > 12000000) {
-      throw new Error('Image exceeds 12 megapixels. Resize it first.');
-    }
-  } catch (error) {
-    getElement('message').textContent = error.message.startsWith('Image exceeds')
-      ? error.message
-      : 'The file cannot be decoded as an image.';
-    return;
-  } finally {
-    bitmap?.close();
-  }
-
-  if (previewUrl) URL.revokeObjectURL(previewUrl);
-  selectedFile = file;
-  latestResults = null;
-  previewUrl = URL.createObjectURL(file);
-  getElement('input-preview').src = previewUrl;
-  getElement('input-preview').hidden = false;
-  getElement('upload-hint').hidden = true;
-  getElement('clear').hidden = false;
-  getElement('filename').textContent = `${file.name} · ${(file.size / 1024).toFixed(0)} KB`;
-  showEmptyResults();
-  updateControls();
-}
-
-async function compareModels() {
-  if (!selectedFile || comparisonRunning || !benchmarkData) return;
-  comparisonRunning = true;
-  updateControls();
-  showLoadingResults();
-  getElement('message').textContent = '';
-
-  const form = new FormData();
-  form.append('file', selectedFile);
-  form.append('confidence', getElement('confidence').value);
-  form.append('image_size', getElement('image-size').value);
-
-  try {
-    const response = await PaddyLiteXBrowser.fetch('/api/compare', { method: 'POST', body: form });
-    latestResults = await readResponse(response);
-    renderResults(latestResults.results);
-  } catch (error) {
-    showEmptyResults('Comparison could not complete. See the message above.');
-    getElement('message').textContent = error.message;
-  } finally {
-    comparisonRunning = false;
-    updateControls();
-  }
-}
-
-// Benchmark charts: both bar charts and the scatter plot use these selectors.
-function formatMetric(value, metric) {
-  if (performanceMetrics[metric]) return `${value.toFixed(2)}%`;
-  if (metric === 'parameters') return `${(value / 1000000).toFixed(2)} M`;
-  return `${value.toFixed(1)} G`;
-}
-
-function axisScale(maximum) {
-  // Choose round tick values and keep all points inside the plotting area.
-  const approximateStep = ((maximum || 1) * 1.08) / 6;
-  const magnitude = 10 ** Math.floor(Math.log10(approximateStep));
-  const normalizedStep = approximateStep / magnitude;
-  const multiplier = [1, 2, 5, 10].find((value) => value >= normalizedStep);
-  const step = multiplier * magnitude;
-  const limit = Math.ceil(((maximum || 1) * 1.08) / step) * step;
-  const ticks = [];
-  for (let index = 0; index <= Math.round(limit / step); index += 1) {
-    ticks.push(Number((index * step).toPrecision(10)));
-  }
-  return { limit, ticks };
-}
-
-function renderBarChart(containerId, models, metric) {
-  const percentage = Boolean(performanceMetrics[metric]);
-  const maximum = Math.max(...models.map((model) => model[metric]));
-  const limit = percentage ? 100 : axisScale(maximum).limit;
-  const axisEnd = percentage ? '100%' : formatMetric(limit, metric);
-
-  getElement(containerId).innerHTML =
-    models
-      .map(
-        (model) => `
-    <div>
-      <div class="bar-label">
-        <span>${escapeHtml(displayModelName(model))}</span>
-        <strong>${formatMetric(model[metric], metric)}</strong>
-      </div>
-      <div class="bar-track" role="img" aria-label="${escapeHtml(displayModelName(model))}: ${formatMetric(model[metric], metric)}">
-        <div class="bar-fill" style="width: ${(model[metric] / limit) * 100}%; background: ${model.color}"></div>
-      </div>
-    </div>
-  `,
-      )
-      .join('') +
-    `
-    <div class="axis"><span>0</span><span>${axisEnd}</span></div>
-  `;
-}
-
-function renderScatterPlot(models, performanceMetric, complexityMetric) {
-  const performance = performanceMetrics[performanceMetric];
-  const complexity = complexityMetrics[complexityMetric];
-  const width = 1000;
-  const height = 340;
-  const margin = { left: 75, right: 40, top: 30, bottom: 65 };
-  const plotWidth = width - margin.left - margin.right;
-  const plotHeight = height - margin.top - margin.bottom;
-  const horizontalScale = axisScale(
-    Math.max(...models.map((model) => model[complexityMetric] / complexity.scale)),
-  );
-  const x = (value) => margin.left + (value / horizontalScale.limit) * plotWidth;
-  const y = (value) => height - margin.bottom - (value / 100) * plotHeight;
-
-  const horizontalGrid = [0, 20, 40, 60, 80, 100]
-    .map(
-      (value) => `
-    <line x1="${margin.left}" x2="${width - margin.right}" y1="${y(value)}" y2="${y(value)}" stroke="#e7edf4" />
-    <text x="${margin.left - 14}" y="${y(value) + 4}" text-anchor="end" fill="#68758a" font-size="13">${value}</text>
-  `,
-    )
-    .join('');
-
-  const horizontalTicks = horizontalScale.ticks
-    .map(
-      (value) => `
-    <text x="${x(value)}" y="${height - margin.bottom + 23}" text-anchor="middle" fill="#68758a" font-size="13">${value}</text>
-  `,
-    )
-    .join('');
-
-  const points = models
-    .map((model, index) => {
-      const pointX = x(model[complexityMetric] / complexity.scale);
-      const pointY = y(model[performanceMetric]);
-      const tooltip = `${displayModelName(model)}: ${complexity.label} ${formatMetric(model[complexityMetric], complexityMetric)}; ${performance.label} ${formatMetric(model[performanceMetric], performanceMetric)}`;
-      const label =
-        currentStudy === 'main'
-          ? `
-      <text x="${pointX}" y="${pointY + (index === 0 ? 25 : -16)}" text-anchor="middle" font-size="13" fill="${model.color}">
-        ${model.role === 'Proposed' ? 'Proposed' : escapeHtml(displayModelName(model))}
-      </text>
-    `
-          : '';
-
-      return `
-      <circle data-model-id="${escapeHtml(model.id)}" cx="${pointX}" cy="${pointY}" r="${model.role === 'Proposed' ? 9 : 7}" fill="${model.color}" stroke="white" stroke-width="2">
-        <title>${escapeHtml(tooltip)}</title>
-      </circle>
-      ${label}
-    `;
-    })
-    .join('');
-
-  getElement('scatter').innerHTML = `
-    <svg viewBox="0 0 ${width} ${height}" role="img" aria-label="${complexity.axisLabel} versus ${performance.label} (%)">
-      ${horizontalGrid}
-      ${horizontalTicks}
-      <text data-axis="x" x="${margin.left + plotWidth / 2}" y="${height - 8}" text-anchor="middle" fill="#68758a" font-size="14">${complexity.axisLabel}</text>
-      <text data-axis="y" x="18" y="${margin.top + plotHeight / 2}" transform="rotate(-90 18 ${margin.top + plotHeight / 2})" text-anchor="middle" fill="#68758a" font-size="14">${performance.label} (%)</text>
-      ${points}
-    </svg>
-  `;
-
-  getElement('scatter-metrics').textContent = `${complexity.label} vs. ${performance.label}`;
-  getElement('legend').innerHTML = models
-    .map(
-      (model) => `
-    <span><i style="background: ${model.color}"></i>${escapeHtml(displayModelName(model))}</span>
-  `,
-    )
-    .join('');
-}
-
-function renderBenchmarks() {
-  if (!benchmarkData) return;
-  const models = benchmarkData[currentStudy];
-  const performanceMetric = getElement('metric').value;
-  const complexityMetric = getElement('cost-metric').value;
-
-  renderBarChart('quality-chart', models, performanceMetric);
-  renderBarChart('cost-chart', models, complexityMetric);
-  renderScatterPlot(models, performanceMetric, complexityMetric);
-  renderClassChart();
-
-  getElement('metrics-table').innerHTML = models
-    .map(
-      (model) => `
-    <tr class="${model.role === 'Proposed' ? 'proposed' : ''}">
-      <td>${escapeHtml(displayModelName(model))}</td>
-      <td>${model.precision.toFixed(2)}%</td>
-      <td>${model.recall.toFixed(2)}%</td>
-      <td>${model.map50.toFixed(2)}%</td>
-      <td>${model.map5095.toFixed(2)}%</td>
-      <td>${formatNumber(model.parameters)}</td>
-      <td>${model.gflops.toFixed(1)}</td>
-    </tr>
-  `,
-    )
-    .join('');
-}
-
-// Class metrics come from a separate file so checkpoint paths never need editing.
-function validateClassData(data) {
-  if (data?.schema_version !== 1 || data.unit !== 'percent' || !Array.isArray(data.classes)) {
-    throw new Error('The class results file has an unsupported format.');
-  }
-  const ids = new Set();
-  for (const row of data.classes) {
-    if (
-      !Number.isInteger(row.id) ||
-      row.id < 0 ||
-      row.id >= paddyClassNames.length ||
-      ids.has(row.id) ||
-      typeof row.name !== 'string' ||
-      !row.name.trim() ||
-      !row.models ||
-      typeof row.models !== 'object' ||
-      Array.isArray(row.models)
-    ) {
-      throw new Error('Check the class IDs, names and model results in the class results file.');
-    }
-    ids.add(row.id);
-    for (const scores of Object.values(row.models)) {
-      if (!scores || typeof scores !== 'object' || Array.isArray(scores)) {
-        throw new Error('Each model must have a class metric object.');
-      }
-      for (const metric of Object.keys(classMetricLabels)) {
-        const value = scores[metric];
-        if (
-          value != null &&
-          (typeof value !== 'number' || !Number.isFinite(value) || value < 0 || value > 100)
-        ) {
-          throw new Error('Class metrics must be percentages between 0 and 100, or null.');
-        }
-      }
-    }
-  }
-  return data;
-}
-
-function classScore(row, modelId, metric) {
-  const value = row.models[modelId]?.[metric];
-  return typeof value === 'number' && Number.isFinite(value) ? value : null;
-}
-
-// Ablation studies may have class results for only some of their models.
-function classChartModels() {
-  if (!benchmarkData) return [];
-  if (currentStudy === 'main') return benchmarkData.main;
-  const rows = classRows();
-  return benchmarkData.ablation.filter((model) =>
-    rows.some((row) =>
-      Object.keys(classMetricLabels).some((metric) => classScore(row, model.id, metric) !== null),
-    ),
-  );
-}
-
-function classModelCode(model, index) {
-  if (model.role === 'Proposed') return 'P';
-  return currentStudy === 'main' ? `B${index + 1}` : `A${index + 1}`;
-}
-
-function renderClassChart() {
-  if (!benchmarkData) return;
-  const panel = getElement('class-panel');
-  panel.hidden = false;
-  const models = classChartModels();
-  const mainStudy = currentStudy === 'main';
-  getElement('class-heading').textContent = mainStudy
-    ? 'Every class, three perspectives.'
-    : 'Class results across available ablations.';
-  getElement('class-heading').nextElementSibling.textContent = mainStudy
-    ? 'Compare your two baselines and final proposed model for each class.'
-    : 'Compare the ablation models with supplied class results and the final proposed model.';
-  const metric = getElement('class-metric').value;
-  const label = classMetricLabels[metric];
-  const rows = classRows();
-  const proposed = models.find((model) => model.role === 'Proposed');
-  const order = getElement('class-order').value;
-  if (order !== 'dataset' && proposed) {
-    rows.sort((a, b) => {
-      const first = classScore(a, proposed.id, metric);
-      const second = classScore(b, proposed.id, metric);
-      if (first == null) return second == null ? a.id - b.id : 1;
-      if (second == null) return -1;
-      return (order === 'lowest' ? first - second : second - first) || a.id - b.id;
-    });
-  }
-
-  getElement('class-legend').innerHTML = models
-    .map(
-      (model) => `
-    <span><i style="background: ${model.color}"></i>${escapeHtml(model.role)} · ${escapeHtml(displayModelName(model))}</span>
-  `,
-    )
-    .join('');
-  const hasValues = rows.some((row) =>
-    models.some((model) =>
-      Object.keys(classMetricLabels).some((key) => classScore(row, model.id, key) !== null),
-    ),
-  );
-  getElement('download-class-csv').disabled = !hasValues;
-  const split = classData?.context?.split || 'test';
-  getElement('class-context').textContent = rows.length
-    ? `${split} set · ${rows.length} classes · ${label} (%)`
-    : '';
-  getElement('class-chart').innerHTML = `
-    <div class="class-axis" aria-hidden="true">
-      <span>${escapeHtml(label)} (%)</span>
-      <div>${[0, 20, 40, 60, 80, 100].map((value) => `<span>${value}%</span>`).join('')}</div>
-    </div>
-    ${rows
-      .map(
-        (row) => `
-      <div class="class-group" data-class-id="${row.id}">
-        <div class="class-name"><strong>${escapeHtml(row.name)}</strong><small>Class ${row.id}</small></div>
-        <div class="class-series">
-          ${models
-            .map((model, index) => {
-              const value = classScore(row, model.id, metric);
-              const text = value === null ? 'N/A' : `${value.toFixed(2)}%`;
-              const caption = `${row.name} · ${displayModelName(model)} · ${label}: ${text}`;
-              return `
-              <div class="class-bar" data-model-id="${escapeHtml(model.id)}" role="img" aria-label="${escapeHtml(caption)}" title="${escapeHtml(caption)}">
-                <span class="class-short" style="color: ${model.color}">${classModelCode(model, index)}</span>
-                <div class="class-track"><div class="class-fill" style="width: ${value ?? 0}%; background: ${model.color}" ${value === null ? 'hidden' : ''}></div></div>
-                <strong>${text}</strong>
-              </div>`;
-            })
-            .join('')}
-        </div>
-      </div>`,
-      )
-      .join('')}`;
-  const missingModels = currentStudy === 'ablation'
-    ? benchmarkData.ablation.length - models.length
-    : 0;
-  const coverageNote = missingModels > 0
-    ? ` Class results are available for ${models.length} of ${benchmarkData.ablation.length} ablation models. Models without supplied class results are omitted.`
-    : '';
-  getElement('class-note').textContent =
-    classDataError ||
-    (hasValues
-      ? `${split} set · percent · higher is better · 0–100% scale. N/A means no evaluated value was supplied. AP is reported per class; mAP averages across classes.${coverageNote}`
-      : 'All nine disease classes are shown. N/A means their evaluation scores have not been supplied yet.');
-}
-
-async function loadClassMetrics() {
-  try {
-    const url = new URL(paddyClassResultsUrl);
-    url.searchParams.set('v', 'c2f1-results-20261012-batch2');
-    const response = await fetch(url, { cache: 'no-store' });
-    if (!response.ok) {
-      throw new Error(`per_class.json could not load (HTTP ${response.status}). Upload it beside app.js.`);
-    }
-    const raw = await response.text();
-    let data;
-    try {
-      data = JSON.parse(raw);
-    } catch {
-      throw new Error(raw.trimStart().startsWith('<')
-        ? 'per_class.json returned an HTML page. Check its upload location beside app.js.'
-        : 'per_class.json is not valid JSON. Replace it with the supplied results file.');
-    }
-    classData = validateClassData(data);
-    classDataError = '';
-  } catch (error) {
-    classDataError = `Class results could not load. ${error.message}`;
-  }
-  renderClassChart();
-}
-
-function downloadClassMetrics() {
-  if (!classData?.classes.length || !benchmarkData) return;
-  const rows = [
-    [
-      'Class ID',
-      'Class',
-      'Model',
-      'Role',
-      'Precision (%)',
-      'Recall (%)',
-      'AP@0.5 (%)',
-      'AP@0.5:0.95 (%)',
-    ],
-  ];
-  for (const row of classRows()) {
-    for (const model of classChartModels()) {
-      rows.push([
-        row.id,
-        row.name,
-        displayModelName(model),
-        model.role,
-        ...['precision', 'recall', 'map50', 'map5095'].map(
-          (metric) => classScore(row, model.id, metric) ?? '',
-        ),
-      ]);
-    }
-  }
-  const content = rows
-    .map((row) => row.map((value) => `"${String(value).replaceAll('"', '""')}"`).join(','))
-    .join('\r\n');
-  const url = URL.createObjectURL(new Blob([content], { type: 'text/csv;charset=utf-8' }));
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = `paddylitex_${currentStudy}_per_class.csv`;
-  link.click();
-  setTimeout(() => URL.revokeObjectURL(url), 1000);
-}
-
-function renderSummaryCards() {
-  const context = benchmarkData.context;
-  const proposed = benchmarkData.main.find((model) => model.role === 'Proposed');
-  const baseline = benchmarkData.main.find((model) => model.id === 'yolov8n_densenet121');
-  getElement('test-images').textContent = formatNumber(context.images);
-  getElement('test-objects').textContent = formatNumber(context.objects);
-  getElement('test-classes').textContent = formatNumber(context.classes);
-
-  if (proposed) {
-    getElement('proposed-map5095').innerHTML = `${proposed.map5095.toFixed(2)}<span>%</span>`;
-    getElement('proposed-map50').innerHTML = `${proposed.map50.toFixed(2)}<span>%</span>`;
-  }
-  if (proposed && baseline) {
-    const improvements = [
-      { metric: 'map5095', valueId: 'map-improvement', changeId: 'map5095-change' },
-      { metric: 'map50', valueId: 'map50-improvement', changeId: 'map50-change' },
-    ];
-    for (const { metric, valueId, changeId } of improvements) {
-      const scoreGain = proposed[metric] - baseline[metric];
-      getElement(valueId).textContent =
-        `${scoreGain >= 0 ? '+' : ''}${scoreGain.toFixed(2)}%`;
-      // C2f x 1 result updates: show signed score differences.
-      getElement(valueId).style.color = scoreGain < 0 ? '#b5475a' : '';
-      const scoreLabel = getElement(valueId).nextElementSibling;
-      if (scoreLabel) {
-        scoreLabel.textContent = `${performanceMetrics[metric].label} score difference`;
-      }
-      getElement(valueId).title =
-        `Score difference: ${scoreGain.toFixed(2)} percentage points (${proposed[metric].toFixed(2)}% − ${baseline[metric].toFixed(2)}%).`;
-      getElement(changeId).textContent =
-        `${baseline[metric].toFixed(2)}% → ${proposed[metric].toFixed(2)}%`;
-    }
-    getElement('parameter-reduction').textContent =
-      `${(((baseline.parameters - proposed.parameters) / baseline.parameters) * 100).toFixed(2)}% fewer`;
-    getElement('flops-reduction').textContent =
-      `${(((baseline.gflops - proposed.gflops) / baseline.gflops) * 100).toFixed(2)}% fewer`;
-  }
-}
-
-function downloadBenchmarks() {
-  if (!benchmarkData) return;
-  const rows = [
-    [
-      'Model',
-      'Precision (%)',
-      'Recall (%)',
-      'mAP@0.5 (%)',
-      'mAP@0.5:0.95 (%)',
-      'Parameters',
-      'GFLOPs',
-    ],
-    ...benchmarkData[currentStudy].map((model) => [
-      displayModelName(model),
-      model.precision,
-      model.recall,
-      model.map50,
-      model.map5095,
-      model.parameters,
-      model.gflops,
-    ]),
-  ];
-  const content = rows
-    .map((row) => row.map((value) => `"${String(value).replaceAll('"', '""')}"`).join(','))
-    .join('\r\n');
-  const url = URL.createObjectURL(new Blob([content], { type: 'text/csv;charset=utf-8' }));
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = `paddylitex_${currentStudy}_benchmarks.csv`;
-  link.click();
-  setTimeout(() => URL.revokeObjectURL(url), 1000);
-}
-
-// Event listeners
-function markSettingsChanged() {
-  if (latestResults)
-    getElement('message').textContent = 'Settings changed. Compare again to update predictions.';
-}
-
-document.querySelectorAll('[data-view]').forEach((button) => {
-  button.addEventListener('click', () => showView(button.dataset.view));
-});
-
-document.querySelectorAll('[data-scope]').forEach((button) => {
-  button.addEventListener('click', () => {
-    currentStudy = button.dataset.scope;
-    document
-      .querySelectorAll('[data-scope]')
-      .forEach((item) => item.classList.toggle('selected', item === button));
-    renderBenchmarks();
-  });
-});
-
-getElement('metric').addEventListener('change', renderBenchmarks);
-getElement('cost-metric').addEventListener('change', renderBenchmarks);
-getElement('download-csv').addEventListener('click', downloadBenchmarks);
-getElement('class-metric').addEventListener('change', renderClassChart);
-getElement('class-order').addEventListener('change', renderClassChart);
-getElement('download-class-csv').addEventListener('click', downloadClassMetrics);
-getElement('file').addEventListener('change', (event) => selectFile(event.target.files[0]));
-getElement('clear').addEventListener('click', clearFile);
-getElement('compare').addEventListener('click', compareModels);
-getElement('image-size').addEventListener('change', markSettingsChanged);
-getElement('confidence').addEventListener('input', () => {
-  getElement('confidence-value').textContent = Number(getElement('confidence').value).toFixed(2);
-  markSettingsChanged();
-});
-
-getElement('dropzone').addEventListener('keydown', (event) => {
-  if ((event.key === 'Enter' || event.key === ' ') && !comparisonRunning) {
-    event.preventDefault();
-    getElement('file').click();
-  }
-});
-
-['dragenter', 'dragover'].forEach((eventName) => {
-  getElement('dropzone').addEventListener(eventName, (event) => {
-    event.preventDefault();
-    if (!comparisonRunning) getElement('dropzone').classList.add('dragging');
-  });
-});
-
-['dragleave', 'drop'].forEach((eventName) => {
-  getElement('dropzone').addEventListener(eventName, (event) => {
-    event.preventDefault();
-    getElement('dropzone').classList.remove('dragging');
-  });
-});
-
-getElement('dropzone').addEventListener('drop', (event) => {
-  if (!comparisonRunning) selectFile(event.dataTransfer.files[0]);
-});
-
-async function initialize() {
-  try {
-    benchmarkData = await readResponse(await PaddyLiteXBrowser.fetch('/api/benchmarks'));
-    const status = await readResponse(await PaddyLiteXBrowser.fetch('/api/status'));
-    const available = status.models.filter((model) => model.checkpoint_present).length;
-    const statusBadge = getElement('service-status');
-    // Hide the installed-checkpoint badge without claiming inference was verified.
-    statusBadge.hidden = status.inference_enabled && available === benchmarkData.main.length;
-    statusBadge.textContent = !status.inference_enabled
-      ? 'Inference paused'
-      : `${available}/${benchmarkData.main.length} checkpoints installed`;
-
-    getElement('model-list').innerHTML = benchmarkData.main
-      .map(
-        (model) => `
-      <div class="model-item">
-        <span class="model-color" style="background: ${model.color}"></span>
-        <div>
-          <strong>${escapeHtml(displayModelName(model))}</strong>
-          <small>${escapeHtml(model.role)} · ${(model.parameters / 1000000).toFixed(2)} M parameters</small>
-        </div>
-        <span class="model-state">${status.models.find((item) => item.id === model.id)?.checkpoint_present ? 'Checkpoint installed' : 'Awaiting checkpoint'}</span>
-      </div>
-    `,
-      )
-      .join('');
-
-    renderSummaryCards();
-    showEmptyResults();
-    renderBenchmarks();
-    updateControls();
-  } catch (error) {
-    getElement('service-status').hidden = false;
-    getElement('service-status').textContent = 'Service unavailable';
-    getElement('message').textContent = error.message;
-  }
-}
-
-// Presentation controls. The illustration is separate from model predictions.
-function initializePresentation() {
-  const hero = getElement('studio-hero');
-  const replayButton = getElement('replay-intro');
-  const motionButton = getElement('toggle-motion');
-  const preference =
-    typeof matchMedia === 'function'
-      ? matchMedia('(prefers-reduced-motion: reduce)')
-      : { matches: false };
-  let motionPaused = false;
-
-  function updateMotionControls() {
-    const reduced = preference.matches;
-    hero.classList.toggle('motion-paused', motionPaused || reduced);
-    replayButton.disabled = reduced;
-    motionButton.disabled = reduced;
-    motionButton.textContent = reduced
-      ? 'Motion reduced'
-      : motionPaused
-        ? 'Play motion'
-        : 'Pause motion';
-    motionButton.setAttribute('aria-pressed', String(motionPaused || reduced));
-  }
-
-  motionButton.addEventListener('click', () => {
-    motionPaused = !motionPaused;
-    updateMotionControls();
-  });
-
-  replayButton.addEventListener('click', () => {
-    if (preference.matches) return;
-    motionPaused = false;
-    updateMotionControls();
-    hero.classList.remove('intro-playing');
-    // Restart the entrance after the browser has painted the reset state.
-    requestAnimationFrame(() => requestAnimationFrame(() => hero.classList.add('intro-playing')));
-  });
-
-  getElement('start-comparison').addEventListener('click', () => {
-    getElement('studio-input').scrollIntoView({
-      behavior: preference.matches ? 'auto' : 'smooth',
-      block: 'start',
-    });
-    getElement('dropzone').focus({ preventScroll: true });
-  });
-
-  if (typeof IntersectionObserver === 'function') {
-    const observer = new IntersectionObserver(([entry]) => {
-      hero.classList.toggle('motion-offscreen', !entry.isIntersecting);
-    });
-    observer.observe(hero);
-  }
-
-  preference.addEventListener?.('change', updateMotionControls);
-  updateMotionControls();
-}
-
-initializePresentation();
-
-initialize();
-loadClassMetrics();
+'use strict';
+
+// PaddyLiteX: resolve class results beside the running app.js.
+const paddyClassResultsUrl = new URL('per_class.json', document.currentScript?.src || document.baseURI);
+
+
+// Application state is shared by the detection and benchmark views.
+const getElement = (id) => document.getElementById(id);
+const formatNumber = (value) => new Intl.NumberFormat('en-US').format(value);
+const performanceMetrics = {
+  map5095: { label: 'mAP@0.5:0.95', unit: '%' },
+  map50: { label: 'mAP@0.5', unit: '%' },
+  precision: { label: 'Precision', unit: '%' },
+  recall: { label: 'Recall', unit: '%' },
+};
+const complexityMetrics = {
+  parameters: {
+    label: 'Parameters',
+    axisLabel: 'Parameters (millions)',
+    scale: 1000000,
+    unit: 'M',
+  },
+  gflops: { label: 'GFLOPs', axisLabel: 'GFLOPs', scale: 1, unit: 'G' },
+};
+
+let benchmarkData;
+let currentStudy = 'main';
+let selectedFile = null;
+let previewUrl = null;
+let comparisonRunning = false;
+let latestResults = null;
+let classData = null;
+let classDataError = '';
+const classMetricLabels = {
+  map5095: 'AP@0.5:0.95',
+  map50: 'AP@0.5',
+  precision: 'Precision',
+  recall: 'Recall',
+};
+// Dataset class IDs supplied for this thesis. Keep names independent of scores.
+const paddyClassNames = [
+  'Rice__BacterialLeafBlight',
+  'Rice__BrownSpot',
+  'Rice__Healthy',
+  'Rice__Hispa',
+  'Rice__LeafBlast',
+  'Rice__LeafScald',
+  'Rice__LeafSmut',
+  'Rice__NarrowBrownLeafSpot',
+  'Rice__NeckBlast',
+];
+
+function classRows() {
+  const supplied = new Map((classData?.classes || []).map((row) => [row.id, row]));
+  return paddyClassNames.map((name, id) => ({
+    id,
+    name,
+    models: supplied.get(id)?.models || {},
+  }));
+}
+
+function escapeHtml(value) {
+  const entities = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+  return String(value).replace(/[&<>"']/g, (character) => entities[character]);
+}
+
+function displayModelName(model) {
+  // Older local configurations still use the previous baseline label.
+  return model.label.replace(/\bDenseNet121\b/g, 'Yolov8n_DenseNet121');
+}
+
+function showView(viewName) {
+  document.querySelectorAll('.view').forEach((view) => {
+    const active = view.id === viewName;
+    view.hidden = !active;
+    view.classList.toggle('active', active);
+  });
+
+  document.querySelectorAll('.tab').forEach((button) => {
+    const active = button.dataset.view === viewName;
+    button.classList.toggle('active', active);
+    button.setAttribute('aria-selected', String(active));
+  });
+}
+
+async function readResponse(response) {
+  let payload;
+  try {
+    payload = await response.json();
+  } catch {
+    throw new Error('The server returned an unexpected response. Please try again.');
+  }
+
+  if (!response.ok) {
+    throw new Error(
+      typeof payload.detail === 'string' ? payload.detail : 'The request could not be completed.',
+    );
+  }
+  return payload;
+}
+
+// Detection studio
+function resultHeading(model) {
+  return `
+    <div class="card-head">
+      <p class="role">${escapeHtml(model.role)}</p>
+      <h3>${escapeHtml(displayModelName(model))}</h3>
+    </div>
+  `;
+}
+
+function showEmptyResults(message = 'Upload an image to compare predictions.') {
+  if (!benchmarkData) return;
+
+  getElement('results').innerHTML = benchmarkData.main
+    .map(
+      (model) => `
+    <article class="result-card" style="--model-color: ${model.color}">
+      ${resultHeading(model)}
+      <div class="result-stage"><p>${escapeHtml(message)}</p></div>
+      <div class="result-body">${escapeHtml(model.id)}</div>
+    </article>
+  `,
+    )
+    .join('');
+}
+
+function showLoadingResults() {
+  getElement('results').innerHTML = benchmarkData.main
+    .map(
+      (model) => `
+    <article class="result-card" style="--model-color: ${model.color}">
+      ${resultHeading(model)}
+      <div class="result-stage">
+        <div>
+          <div class="spinner" style="margin: auto"></div>
+          <p>Comparing models…</p>
+        </div>
+      </div>
+      <div class="result-body">Identical image and settings</div>
+    </article>
+  `,
+    )
+    .join('');
+}
+
+function renderResults(results) {
+  const classMappings = results
+    .filter((result) => result.status === 'success')
+    .map((result) => JSON.stringify(Object.entries(result.class_names).sort()));
+
+  if (new Set(classMappings).size > 1) {
+    getElement('message').textContent =
+      'The checkpoints have different class mappings. Verify their dataset configuration before treating this as a matched comparison.';
+  }
+
+  getElement('results').innerHTML = benchmarkData.main
+    .map((model) => {
+      const result = results.find((item) => item.id === model.id);
+      if (!result || result.status !== 'success') {
+        const description =
+          result?.status === 'unavailable' ? 'Model unavailable' : 'Inference error';
+        return `
+        <article class="result-card" style="--model-color: ${model.color}">
+          ${resultHeading(model)}
+          <div class="result-stage">
+            <p>${escapeHtml(result?.message || 'No result returned.')}</p>
+          </div>
+          <div class="result-body">${description}</div>
+        </article>
+      `;
+      }
+
+      const detections = result.detections;
+      const detectionRows = detections.length
+        ? detections
+            .map(
+              (detection) => `
+          <div class="detection-row">
+            <span>${escapeHtml(detection.class_name)}</span>
+            <strong>${(detection.confidence * 100).toFixed(1)}%</strong>
+          </div>
+        `,
+            )
+            .join('')
+        : '<p>No boxes exceeded the selected threshold. This does not confirm that the leaf is healthy.</p>';
+
+      return `
+      <article class="result-card" style="--model-color: ${model.color}">
+        ${resultHeading(model)}
+        <div class="result-stage">
+          <img src="${escapeHtml(result.image)}" alt="${escapeHtml(displayModelName(model))} annotated detection result">
+        </div>
+        <div class="result-body">
+          <strong>${detections.length} detection${detections.length === 1 ? '' : 's'}</strong>
+          ${detectionRows}
+          <a class="download-link" href="${escapeHtml(result.image)}" download="${escapeHtml(model.id)}_prediction.png">
+            Download annotated image
+          </a>
+        </div>
+      </article>
+    `;
+    })
+    .join('');
+}
+
+function updateControls() {
+  getElement('compare').disabled = !selectedFile || comparisonRunning || !benchmarkData;
+  getElement('compare').textContent = comparisonRunning
+    ? 'Comparing models…'
+    : 'Compare all three models';
+  ['file', 'clear', 'confidence', 'image-size'].forEach((id) => {
+    getElement(id).disabled = comparisonRunning;
+  });
+}
+
+function clearFile() {
+  if (comparisonRunning) return;
+  if (previewUrl) URL.revokeObjectURL(previewUrl);
+
+  selectedFile = null;
+  previewUrl = null;
+  latestResults = null;
+  getElement('file').value = '';
+  getElement('input-preview').hidden = true;
+  getElement('input-preview').removeAttribute('src');
+  getElement('upload-hint').hidden = false;
+  getElement('clear').hidden = true;
+  getElement('filename').textContent = 'No image selected';
+  getElement('message').textContent = '';
+  showEmptyResults();
+  updateControls();
+}
+
+// JPG upload compatibility: some files have an alias or no MIME type.
+function isSupportedImageFile(file) {
+  if (!file) return false;
+
+  const imageType = (file.type || '').toLowerCase();
+  const supportedTypes = [
+    'image/jpeg',
+    'image/jpg',
+    'image/pjpeg',
+    'image/png',
+    'image/webp',
+  ];
+
+  if (supportedTypes.includes(imageType)) return true;
+
+  // The existing image decoder still verifies that this is an actual image.
+  return (
+    ['', 'application/octet-stream'].includes(imageType) &&
+    /\.(jpg|jpeg|png|webp)$/i.test(file.name || '')
+  );
+}
+
+async function selectFile(file) {
+  if (comparisonRunning || !file) return;
+  getElement('message').textContent = '';
+
+  if (!isSupportedImageFile(file)) {
+    getElement('message').textContent = 'Choose a JPG, JPEG, PNG, or WebP image.';
+    return;
+  }
+  if (file.size > 10 * 1024 * 1024) {
+    getElement('message').textContent = 'Image exceeds 10 MB. Choose a smaller file.';
+    return;
+  }
+
+  let bitmap;
+  try {
+    bitmap = await createImageBitmap(file);
+    if (bitmap.width * bitmap.height > 12000000) {
+      throw new Error('Image exceeds 12 megapixels. Resize it first.');
+    }
+  } catch (error) {
+    getElement('message').textContent = error.message.startsWith('Image exceeds')
+      ? error.message
+      : 'The file cannot be decoded as an image.';
+    return;
+  } finally {
+    bitmap?.close();
+  }
+
+  if (previewUrl) URL.revokeObjectURL(previewUrl);
+  selectedFile = file;
+  latestResults = null;
+  previewUrl = URL.createObjectURL(file);
+  getElement('input-preview').src = previewUrl;
+  getElement('input-preview').hidden = false;
+  getElement('upload-hint').hidden = true;
+  getElement('clear').hidden = false;
+  getElement('filename').textContent = `${file.name} · ${(file.size / 1024).toFixed(0)} KB`;
+  showEmptyResults();
+  updateControls();
+}
+
+async function compareModels() {
+  if (!selectedFile || comparisonRunning || !benchmarkData) return;
+  comparisonRunning = true;
+  updateControls();
+  showLoadingResults();
+  getElement('message').textContent = '';
+
+  const form = new FormData();
+  form.append('file', selectedFile);
+  form.append('confidence', getElement('confidence').value);
+  form.append('image_size', getElement('image-size').value);
+
+  try {
+    const response = await PaddyLiteXBrowser.fetch('/api/compare', { method: 'POST', body: form });
+    latestResults = await readResponse(response);
+    renderResults(latestResults.results);
+  } catch (error) {
+    showEmptyResults('Comparison could not complete. See the message above.');
+    getElement('message').textContent = error.message;
+  } finally {
+    comparisonRunning = false;
+    updateControls();
+  }
+}
+
+// Benchmark charts: both bar charts and the scatter plot use these selectors.
+function formatMetric(value, metric) {
+  if (performanceMetrics[metric]) return `${value.toFixed(2)}%`;
+  if (metric === 'parameters') return `${(value / 1000000).toFixed(2)} M`;
+  return `${value.toFixed(1)} G`;
+}
+
+function axisScale(maximum) {
+  // Choose round tick values and keep all points inside the plotting area.
+  const approximateStep = ((maximum || 1) * 1.08) / 6;
+  const magnitude = 10 ** Math.floor(Math.log10(approximateStep));
+  const normalizedStep = approximateStep / magnitude;
+  const multiplier = [1, 2, 5, 10].find((value) => value >= normalizedStep);
+  const step = multiplier * magnitude;
+  const limit = Math.ceil(((maximum || 1) * 1.08) / step) * step;
+  const ticks = [];
+  for (let index = 0; index <= Math.round(limit / step); index += 1) {
+    ticks.push(Number((index * step).toPrecision(10)));
+  }
+  return { limit, ticks };
+}
+
+function renderBarChart(containerId, models, metric) {
+  const percentage = Boolean(performanceMetrics[metric]);
+  const maximum = Math.max(...models.map((model) => model[metric]));
+  const limit = percentage ? 100 : axisScale(maximum).limit;
+  const axisEnd = percentage ? '100%' : formatMetric(limit, metric);
+
+  getElement(containerId).innerHTML =
+    models
+      .map(
+        (model) => `
+    <div>
+      <div class="bar-label">
+        <span>${escapeHtml(displayModelName(model))}</span>
+        <strong>${formatMetric(model[metric], metric)}</strong>
+      </div>
+      <div class="bar-track" role="img" aria-label="${escapeHtml(displayModelName(model))}: ${formatMetric(model[metric], metric)}">
+        <div class="bar-fill" style="width: ${(model[metric] / limit) * 100}%; background: ${model.color}"></div>
+      </div>
+    </div>
+  `,
+      )
+      .join('') +
+    `
+    <div class="axis"><span>0</span><span>${axisEnd}</span></div>
+  `;
+}
+
+function renderComparisonChart(containerId, models, metric) {
+  const quality = containerId === 'quality-chart';
+  const type = getElement(quality ? 'quality-chart-type' : 'cost-chart-type').value;
+  const percentage = Boolean(performanceMetrics[metric]);
+  const limit = percentage ? 100 : axisScale(Math.max(...models.map((model) => model[metric]))).limit;
+  if (type === 'bar') {
+    renderBarChart(containerId, models, metric);
+  } else {
+    PaddyLiteXCharts.renderComparison(containerId, models, metric, {
+      type, study: currentStudy, limit,
+      format: (value) => formatMetric(value, metric),
+    });
+  }
+  if (quality) {
+    getElement('quality-chart-note').textContent = ['radar', 'heatmap'].includes(type)
+      ? 'All four detection metrics (%) · shared 0–100% scale. The metric selector still controls the scatter plot.'
+      : 'Selected detection metric (%) · higher is better · scale starts at zero.';
+  }
+}
+
+function renderScatterPlot(models, performanceMetric, complexityMetric) {
+  const performance = performanceMetrics[performanceMetric];
+  const complexity = complexityMetrics[complexityMetric];
+  const width = 1000;
+  const height = 340;
+  const margin = { left: 75, right: 40, top: 30, bottom: 65 };
+  const plotWidth = width - margin.left - margin.right;
+  const plotHeight = height - margin.top - margin.bottom;
+  const horizontalScale = axisScale(
+    Math.max(...models.map((model) => model[complexityMetric] / complexity.scale)),
+  );
+  const x = (value) => margin.left + (value / horizontalScale.limit) * plotWidth;
+  const y = (value) => height - margin.bottom - (value / 100) * plotHeight;
+
+  const horizontalGrid = [0, 20, 40, 60, 80, 100]
+    .map(
+      (value) => `
+    <line x1="${margin.left}" x2="${width - margin.right}" y1="${y(value)}" y2="${y(value)}" stroke="#e7edf4" />
+    <text x="${margin.left - 14}" y="${y(value) + 4}" text-anchor="end" fill="#68758a" font-size="13">${value}</text>
+  `,
+    )
+    .join('');
+
+  const horizontalTicks = horizontalScale.ticks
+    .map(
+      (value) => `
+    <text x="${x(value)}" y="${height - margin.bottom + 23}" text-anchor="middle" fill="#68758a" font-size="13">${value}</text>
+  `,
+    )
+    .join('');
+
+  const points = models
+    .map((model, index) => {
+      const pointX = x(model[complexityMetric] / complexity.scale);
+      const pointY = y(model[performanceMetric]);
+      const tooltip = `${displayModelName(model)}: ${complexity.label} ${formatMetric(model[complexityMetric], complexityMetric)}; ${performance.label} ${formatMetric(model[performanceMetric], performanceMetric)}`;
+      const label =
+        currentStudy === 'main'
+          ? `
+      <text x="${pointX}" y="${pointY + (index === 0 ? 25 : -16)}" text-anchor="middle" font-size="13" fill="${model.color}">
+        ${model.role === 'Proposed' ? 'Proposed' : escapeHtml(displayModelName(model))}
+      </text>
+    `
+          : '';
+
+      return `
+      <circle data-model-id="${escapeHtml(model.id)}" cx="${pointX}" cy="${pointY}" r="${model.role === 'Proposed' ? 9 : 7}" fill="${model.color}" stroke="white" stroke-width="2">
+        <title>${escapeHtml(tooltip)}</title>
+      </circle>
+      ${label}
+    `;
+    })
+    .join('');
+
+  getElement('scatter').innerHTML = `
+    <svg viewBox="0 0 ${width} ${height}" role="img" aria-label="${complexity.axisLabel} versus ${performance.label} (%)">
+      ${horizontalGrid}
+      ${horizontalTicks}
+      <text data-axis="x" x="${margin.left + plotWidth / 2}" y="${height - 8}" text-anchor="middle" fill="#68758a" font-size="14">${complexity.axisLabel}</text>
+      <text data-axis="y" x="18" y="${margin.top + plotHeight / 2}" transform="rotate(-90 18 ${margin.top + plotHeight / 2})" text-anchor="middle" fill="#68758a" font-size="14">${performance.label} (%)</text>
+      ${points}
+    </svg>
+  `;
+
+  getElement('scatter-metrics').textContent = `${complexity.label} vs. ${performance.label}`;
+  getElement('legend').innerHTML = models
+    .map(
+      (model) => `
+    <span><i style="background: ${model.color}"></i>${escapeHtml(displayModelName(model))}</span>
+  `,
+    )
+    .join('');
+}
+
+function renderBenchmarks() {
+  if (!benchmarkData) return;
+  const models = benchmarkData[currentStudy];
+  const performanceMetric = getElement('metric').value;
+  const complexityMetric = getElement('cost-metric').value;
+
+  renderComparisonChart('quality-chart', models, performanceMetric);
+  renderComparisonChart('cost-chart', models, complexityMetric);
+  renderScatterPlot(models, performanceMetric, complexityMetric);
+  renderClassChart();
+
+  getElement('metrics-table').innerHTML = models
+    .map(
+      (model) => `
+    <tr class="${model.role === 'Proposed' ? 'proposed' : ''}">
+      <td>${escapeHtml(displayModelName(model))}</td>
+      <td>${model.precision.toFixed(2)}%</td>
+      <td>${model.recall.toFixed(2)}%</td>
+      <td>${model.map50.toFixed(2)}%</td>
+      <td>${model.map5095.toFixed(2)}%</td>
+      <td>${formatNumber(model.parameters)}</td>
+      <td>${model.gflops.toFixed(1)}</td>
+    </tr>
+  `,
+    )
+    .join('');
+}
+
+// Class metrics come from a separate file so checkpoint paths never need editing.
+function validateClassData(data) {
+  if (data?.schema_version !== 1 || data.unit !== 'percent' || !Array.isArray(data.classes)) {
+    throw new Error('The class results file has an unsupported format.');
+  }
+  const ids = new Set();
+  for (const row of data.classes) {
+    if (
+      !Number.isInteger(row.id) ||
+      row.id < 0 ||
+      row.id >= paddyClassNames.length ||
+      ids.has(row.id) ||
+      typeof row.name !== 'string' ||
+      !row.name.trim() ||
+      !row.models ||
+      typeof row.models !== 'object' ||
+      Array.isArray(row.models)
+    ) {
+      throw new Error('Check the class IDs, names and model results in the class results file.');
+    }
+    ids.add(row.id);
+    for (const scores of Object.values(row.models)) {
+      if (!scores || typeof scores !== 'object' || Array.isArray(scores)) {
+        throw new Error('Each model must have a class metric object.');
+      }
+      for (const metric of Object.keys(classMetricLabels)) {
+        const value = scores[metric];
+        if (
+          value != null &&
+          (typeof value !== 'number' || !Number.isFinite(value) || value < 0 || value > 100)
+        ) {
+          throw new Error('Class metrics must be percentages between 0 and 100, or null.');
+        }
+      }
+    }
+  }
+  return data;
+}
+
+function classScore(row, modelId, metric) {
+  const value = row.models[modelId]?.[metric];
+  return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+
+// Ablation studies may have class results for only some of their models.
+function classChartModels() {
+  if (!benchmarkData) return [];
+  if (currentStudy === 'main') return benchmarkData.main;
+  const rows = classRows();
+  return benchmarkData.ablation.filter((model) =>
+    rows.some((row) =>
+      Object.keys(classMetricLabels).some((metric) => classScore(row, model.id, metric) !== null),
+    ),
+  );
+}
+
+function classModelCode(model, index) {
+  if (model.role === 'Proposed') return 'P';
+  return currentStudy === 'main' ? `B${index + 1}` : `A${index + 1}`;
+}
+
+function renderClassChart() {
+  if (!benchmarkData) return;
+  const panel = getElement('class-panel');
+  panel.hidden = false;
+  const models = classChartModels();
+  const mainStudy = currentStudy === 'main';
+  getElement('class-heading').textContent = mainStudy
+    ? 'Every class, three perspectives.'
+    : 'Class results across available ablations.';
+  getElement('class-heading').nextElementSibling.textContent = mainStudy
+    ? 'Compare your two baselines and final proposed model for each class.'
+    : 'Compare the ablation models with supplied class results and the final proposed model.';
+  const metric = getElement('class-metric').value;
+  const label = classMetricLabels[metric];
+  const rows = classRows();
+  const proposed = models.find((model) => model.role === 'Proposed');
+  const order = getElement('class-order').value;
+  if (order !== 'dataset' && proposed) {
+    rows.sort((a, b) => {
+      const first = classScore(a, proposed.id, metric);
+      const second = classScore(b, proposed.id, metric);
+      if (first == null) return second == null ? a.id - b.id : 1;
+      if (second == null) return -1;
+      return (order === 'lowest' ? first - second : second - first) || a.id - b.id;
+    });
+  }
+
+  getElement('class-legend').innerHTML = models
+    .map(
+      (model) => `
+    <span><i style="background: ${model.color}"></i>${escapeHtml(model.role)} · ${escapeHtml(displayModelName(model))}</span>
+  `,
+    )
+    .join('');
+  const hasValues = rows.some((row) =>
+    models.some((model) =>
+      Object.keys(classMetricLabels).some((key) => classScore(row, model.id, key) !== null),
+    ),
+  );
+  getElement('download-class-csv').disabled = !hasValues;
+  const split = classData?.context?.split || 'test';
+  getElement('class-context').textContent = rows.length
+    ? `${split} set · ${rows.length} classes · ${label} (%)`
+    : '';
+  getElement('class-chart').innerHTML = `
+    <div class="class-axis" aria-hidden="true">
+      <span>${escapeHtml(label)} (%)</span>
+      <div>${[0, 20, 40, 60, 80, 100].map((value) => `<span>${value}%</span>`).join('')}</div>
+    </div>
+    ${rows
+      .map(
+        (row) => `
+      <div class="class-group" data-class-id="${row.id}">
+        <div class="class-name"><strong>${escapeHtml(row.name)}</strong><small>Class ${row.id}</small></div>
+        <div class="class-series">
+          ${models
+            .map((model, index) => {
+              const value = classScore(row, model.id, metric);
+              const text = value === null ? 'N/A' : `${value.toFixed(2)}%`;
+              const caption = `${row.name} · ${displayModelName(model)} · ${label}: ${text}`;
+              return `
+              <div class="class-bar" data-model-id="${escapeHtml(model.id)}" role="img" aria-label="${escapeHtml(caption)}" title="${escapeHtml(caption)}">
+                <span class="class-short" style="color: ${model.color}">${classModelCode(model, index)}</span>
+                <div class="class-track"><div class="class-fill" style="width: ${value ?? 0}%; background: ${model.color}" ${value === null ? 'hidden' : ''}></div></div>
+                <strong>${text}</strong>
+              </div>`;
+            })
+            .join('')}
+        </div>
+      </div>`,
+      )
+      .join('')}`;
+  const missingModels = currentStudy === 'ablation'
+    ? benchmarkData.ablation.length - models.length
+    : 0;
+  const coverageNote = missingModels > 0
+    ? ` Class results are available for ${models.length} of ${benchmarkData.ablation.length} ablation models. Models without supplied class results are omitted.`
+    : '';
+  getElement('class-note').textContent =
+    classDataError ||
+    (hasValues
+      ? `${split} set · percent · higher is better · 0–100% scale. N/A means no evaluated value was supplied. AP is reported per class; mAP averages across classes.${coverageNote}`
+      : 'All nine disease classes are shown. N/A means their evaluation scores have not been supplied yet.');
+  const chartType = getElement('class-chart-type').value;
+  if (chartType !== 'bar' && hasValues) {
+    PaddyLiteXCharts.renderClasses(models, rows, metric, {
+      type: chartType, study: currentStudy, label,
+    });
+    if (chartType === 'radar') {
+      getElement('class-note').textContent += ' Radar axes stay in dataset class order; model names toggle the series.';
+    }
+  }
+}
+
+async function loadClassMetrics() {
+  try {
+    const url = new URL(paddyClassResultsUrl);
+    url.searchParams.set('v', 'baseline1-charts-20261013');
+    const response = await fetch(url, { cache: 'no-store' });
+    if (!response.ok) {
+      throw new Error(`per_class.json could not load (HTTP ${response.status}). Upload it beside app.js.`);
+    }
+    const raw = await response.text();
+    let data;
+    try {
+      data = JSON.parse(raw);
+    } catch {
+      throw new Error(raw.trimStart().startsWith('<')
+        ? 'per_class.json returned an HTML page. Check its upload location beside app.js.'
+        : 'per_class.json is not valid JSON. Replace it with the supplied results file.');
+    }
+    classData = validateClassData(data);
+    classDataError = '';
+  } catch (error) {
+    classDataError = `Class results could not load. ${error.message}`;
+  }
+  renderClassChart();
+}
+
+function downloadClassMetrics() {
+  if (!classData?.classes.length || !benchmarkData) return;
+  const rows = [
+    [
+      'Class ID',
+      'Class',
+      'Model',
+      'Role',
+      'Precision (%)',
+      'Recall (%)',
+      'AP@0.5 (%)',
+      'AP@0.5:0.95 (%)',
+    ],
+  ];
+  for (const row of classRows()) {
+    for (const model of classChartModels()) {
+      rows.push([
+        row.id,
+        row.name,
+        displayModelName(model),
+        model.role,
+        ...['precision', 'recall', 'map50', 'map5095'].map(
+          (metric) => classScore(row, model.id, metric) ?? '',
+        ),
+      ]);
+    }
+  }
+  const content = rows
+    .map((row) => row.map((value) => `"${String(value).replaceAll('"', '""')}"`).join(','))
+    .join('\r\n');
+  const url = URL.createObjectURL(new Blob([content], { type: 'text/csv;charset=utf-8' }));
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `paddylitex_${currentStudy}_per_class.csv`;
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+function renderSummaryCards() {
+  const context = benchmarkData.context;
+  const proposed = benchmarkData.main.find((model) => model.role === 'Proposed');
+  const baseline = benchmarkData.main.find((model) => model.id === 'yolov8n_densenet121');
+  getElement('test-images').textContent = formatNumber(context.images);
+  getElement('test-objects').textContent = formatNumber(context.objects);
+  getElement('test-classes').textContent = formatNumber(context.classes);
+
+  if (proposed) {
+    getElement('proposed-map5095').innerHTML = `${proposed.map5095.toFixed(2)}<span>%</span>`;
+    getElement('proposed-map50').innerHTML = `${proposed.map50.toFixed(2)}<span>%</span>`;
+  }
+  if (proposed && baseline) {
+    const improvements = [
+      { metric: 'map5095', valueId: 'map-improvement', changeId: 'map5095-change' },
+      { metric: 'map50', valueId: 'map50-improvement', changeId: 'map50-change' },
+    ];
+    for (const { metric, valueId, changeId } of improvements) {
+      const scoreGain = proposed[metric] - baseline[metric];
+      getElement(valueId).textContent =
+        `${scoreGain >= 0 ? '+' : ''}${scoreGain.toFixed(2)}%`;
+      // C2f x 1 result updates: show signed score differences.
+      getElement(valueId).style.color = scoreGain < 0 ? '#b5475a' : '';
+      const scoreLabel = getElement(valueId).nextElementSibling;
+      if (scoreLabel) {
+        scoreLabel.textContent = `${performanceMetrics[metric].label} score difference`;
+      }
+      getElement(valueId).title =
+        `Score difference: ${scoreGain.toFixed(2)} percentage points (${proposed[metric].toFixed(2)}% − ${baseline[metric].toFixed(2)}%).`;
+      getElement(changeId).textContent =
+        `${baseline[metric].toFixed(2)}% → ${proposed[metric].toFixed(2)}%`;
+    }
+    getElement('parameter-reduction').textContent =
+      `${(((baseline.parameters - proposed.parameters) / baseline.parameters) * 100).toFixed(2)}% fewer`;
+    getElement('flops-reduction').textContent =
+      `${(((baseline.gflops - proposed.gflops) / baseline.gflops) * 100).toFixed(2)}% fewer`;
+  }
+}
+
+function downloadBenchmarks() {
+  if (!benchmarkData) return;
+  const rows = [
+    [
+      'Model',
+      'Precision (%)',
+      'Recall (%)',
+      'mAP@0.5 (%)',
+      'mAP@0.5:0.95 (%)',
+      'Parameters',
+      'GFLOPs',
+    ],
+    ...benchmarkData[currentStudy].map((model) => [
+      displayModelName(model),
+      model.precision,
+      model.recall,
+      model.map50,
+      model.map5095,
+      model.parameters,
+      model.gflops,
+    ]),
+  ];
+  const content = rows
+    .map((row) => row.map((value) => `"${String(value).replaceAll('"', '""')}"`).join(','))
+    .join('\r\n');
+  const url = URL.createObjectURL(new Blob([content], { type: 'text/csv;charset=utf-8' }));
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `paddylitex_${currentStudy}_benchmarks.csv`;
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+// Event listeners
+function markSettingsChanged() {
+  if (latestResults)
+    getElement('message').textContent = 'Settings changed. Compare again to update predictions.';
+}
+
+document.querySelectorAll('[data-view]').forEach((button) => {
+  button.addEventListener('click', () => showView(button.dataset.view));
+});
+
+document.querySelectorAll('[data-scope]').forEach((button) => {
+  button.addEventListener('click', () => {
+    currentStudy = button.dataset.scope;
+    document
+      .querySelectorAll('[data-scope]')
+      .forEach((item) => item.classList.toggle('selected', item === button));
+    renderBenchmarks();
+  });
+});
+
+getElement('metric').addEventListener('change', renderBenchmarks);
+getElement('quality-chart-type').addEventListener('change', renderBenchmarks);
+getElement('cost-chart-type').addEventListener('change', renderBenchmarks);
+getElement('class-chart-type').addEventListener('change', renderClassChart);
+getElement('cost-metric').addEventListener('change', renderBenchmarks);
+getElement('download-csv').addEventListener('click', downloadBenchmarks);
+getElement('class-metric').addEventListener('change', renderClassChart);
+getElement('class-order').addEventListener('change', renderClassChart);
+getElement('download-class-csv').addEventListener('click', downloadClassMetrics);
+getElement('file').addEventListener('change', (event) => selectFile(event.target.files[0]));
+getElement('clear').addEventListener('click', clearFile);
+getElement('compare').addEventListener('click', compareModels);
+getElement('image-size').addEventListener('change', markSettingsChanged);
+getElement('confidence').addEventListener('input', () => {
+  getElement('confidence-value').textContent = Number(getElement('confidence').value).toFixed(2);
+  markSettingsChanged();
+});
+
+getElement('dropzone').addEventListener('keydown', (event) => {
+  if ((event.key === 'Enter' || event.key === ' ') && !comparisonRunning) {
+    event.preventDefault();
+    getElement('file').click();
+  }
+});
+
+['dragenter', 'dragover'].forEach((eventName) => {
+  getElement('dropzone').addEventListener(eventName, (event) => {
+    event.preventDefault();
+    if (!comparisonRunning) getElement('dropzone').classList.add('dragging');
+  });
+});
+
+['dragleave', 'drop'].forEach((eventName) => {
+  getElement('dropzone').addEventListener(eventName, (event) => {
+    event.preventDefault();
+    getElement('dropzone').classList.remove('dragging');
+  });
+});
+
+getElement('dropzone').addEventListener('drop', (event) => {
+  if (!comparisonRunning) selectFile(event.dataTransfer.files[0]);
+});
+
+async function initialize() {
+  try {
+    benchmarkData = await readResponse(await PaddyLiteXBrowser.fetch('/api/benchmarks'));
+    const status = await readResponse(await PaddyLiteXBrowser.fetch('/api/status'));
+    const available = status.models.filter((model) => model.checkpoint_present).length;
+    const statusBadge = getElement('service-status');
+    // Hide the installed-checkpoint badge without claiming inference was verified.
+    statusBadge.hidden = status.inference_enabled && available === benchmarkData.main.length;
+    statusBadge.textContent = !status.inference_enabled
+      ? 'Inference paused'
+      : `${available}/${benchmarkData.main.length} checkpoints installed`;
+
+    getElement('model-list').innerHTML = benchmarkData.main
+      .map(
+        (model) => `
+      <div class="model-item">
+        <span class="model-color" style="background: ${model.color}"></span>
+        <div>
+          <strong>${escapeHtml(displayModelName(model))}</strong>
+          <small>${escapeHtml(model.role)} · ${(model.parameters / 1000000).toFixed(2)} M parameters</small>
+        </div>
+        <span class="model-state">${status.models.find((item) => item.id === model.id)?.checkpoint_present ? 'Checkpoint installed' : 'Awaiting checkpoint'}</span>
+      </div>
+    `,
+      )
+      .join('');
+
+    renderSummaryCards();
+    showEmptyResults();
+    renderBenchmarks();
+    updateControls();
+  } catch (error) {
+    getElement('service-status').hidden = false;
+    getElement('service-status').textContent = 'Service unavailable';
+    getElement('message').textContent = error.message;
+  }
+}
+
+// Presentation controls. The illustration is separate from model predictions.
+function initializePresentation() {
+  const hero = getElement('studio-hero');
+  const replayButton = getElement('replay-intro');
+  const motionButton = getElement('toggle-motion');
+  const preference =
+    typeof matchMedia === 'function'
+      ? matchMedia('(prefers-reduced-motion: reduce)')
+      : { matches: false };
+  let motionPaused = false;
+
+  function updateMotionControls() {
+    const reduced = preference.matches;
+    hero.classList.toggle('motion-paused', motionPaused || reduced);
+    replayButton.disabled = reduced;
+    motionButton.disabled = reduced;
+    motionButton.textContent = reduced
+      ? 'Motion reduced'
+      : motionPaused
+        ? 'Play motion'
+        : 'Pause motion';
+    motionButton.setAttribute('aria-pressed', String(motionPaused || reduced));
+  }
+
+  motionButton.addEventListener('click', () => {
+    motionPaused = !motionPaused;
+    updateMotionControls();
+  });
+
+  replayButton.addEventListener('click', () => {
+    if (preference.matches) return;
+    motionPaused = false;
+    updateMotionControls();
+    hero.classList.remove('intro-playing');
+    // Restart the entrance after the browser has painted the reset state.
+    requestAnimationFrame(() => requestAnimationFrame(() => hero.classList.add('intro-playing')));
+  });
+
+  getElement('start-comparison').addEventListener('click', () => {
+    getElement('studio-input').scrollIntoView({
+      behavior: preference.matches ? 'auto' : 'smooth',
+      block: 'start',
+    });
+    getElement('dropzone').focus({ preventScroll: true });
+  });
+
+  if (typeof IntersectionObserver === 'function') {
+    const observer = new IntersectionObserver(([entry]) => {
+      hero.classList.toggle('motion-offscreen', !entry.isIntersecting);
+    });
+    observer.observe(hero);
+  }
+
+  preference.addEventListener?.('change', updateMotionControls);
+  updateMotionControls();
+}
+
+initializePresentation();
+
+initialize();
+loadClassMetrics();

browser-models.json

@@ -1,81 +1,96 @@
-{
-  "ready": true,
-  "runtime": "onnxruntime-web@1.22.0/wasm",
-  "models": [
-    {
-      "id": "yolov8n",
-      "label": "YOLOv8n",
-      "names": [
-        "Rice__BacterialLeafBlight",
-        "Rice__BrownSpot",
-        "Rice__Healthy",
-        "Rice__Hispa",
-        "Rice__LeafBlast",
-        "Rice__LeafScald",
-        "Rice__LeafSmut",
-        "Rice__NarrowBrownLeafSpot",
-        "Rice__NeckBlast"
-      ],
-      "files": {
-        "320": "models/yolov8n_320.onnx",
-        "512": "models/yolov8n_512.onnx",
-        "640": "models/yolov8n_640.onnx"
-      }
-    },
-    {
-      "id": "yolov8n_densenet121",
-      "label": "Yolov8n_DenseNet121",
-      "names": [
-        "Rice__BacterialLeafBlight",
-        "Rice__BrownSpot",
-        "Rice__Healthy",
-        "Rice__Hispa",
-        "Rice__LeafBlast",
-        "Rice__LeafScald",
-        "Rice__LeafSmut",
-        "Rice__NarrowBrownLeafSpot",
-        "Rice__NeckBlast"
-      ],
-      "files": {
-        "320": "models/yolov8n_densenet121_320.onnx",
-        "512": "models/yolov8n_densenet121_512.onnx",
-        "640": "models/yolov8n_densenet121_640.onnx"
-      },
-      "checkpoint_sha256": "defcf4ff895e72763baa71005139515c84b52ead8f1b4819cd793fd94154ea42",
-      "evaluation_snapshot": "c2f1-results-20261012-batch2",
-      "onnx_sha256": {
-        "320": "9408e8a513d2fd1f7bbeeda36101a0182c74ee54f5ea7eb63087ab0e36456356",
-        "512": "17a2d6a492747dd75033e60803ac7c703f7d9029e50320ef0839a1151ae256a0",
-        "640": "eb48addb5a3109e2029a001998075bedc8cd05b6783d37be648f9b8506e613a0"
-      }
-    },
-    {
-      "id": "yolov8n_denselitex_sppf_c2psa",
-      "label": "DenseLiteX + SPPF + C2PSA",
-      "names": [
-        "Rice__BacterialLeafBlight",
-        "Rice__BrownSpot",
-        "Rice__Healthy",
-        "Rice__Hispa",
-        "Rice__LeafBlast",
-        "Rice__LeafScald",
-        "Rice__LeafSmut",
-        "Rice__NarrowBrownLeafSpot",
-        "Rice__NeckBlast"
-      ],
-      "files": {
-        "320": "models/yolov8n_denselitex_sppf_c2psa_320.onnx",
-        "512": "models/yolov8n_denselitex_sppf_c2psa_512.onnx",
-        "640": "models/yolov8n_denselitex_sppf_c2psa_640.onnx"
-      },
-      "checkpoint_sha256": "049cd63cc4ffa06c15d6e728f581bffb2b4c24f97cf0917642102aae79cc2aae",
-      "evaluation_snapshot": "c2f1-results-20261012-batch2",
-      "onnx_sha256": {
-        "320": "9278ce196a3f37cc2cbc106dc4be986758972c9cd8fefdde335bcf76d74c62e8",
-        "512": "4ef8bba2c9a07f4abda4b720dc2c91b59ffd3c455f1ee14ef7377dda3760a55a",
-        "640": "1f8e6be3aa7fb319ac251c364887eb4963bb7aa005ced158ad67ec6064b7539f"
-      }
-    }
-  ],
-  "model_file_layout": "clean-size-names-v1"
-}
+{
+  "ready": true,
+  "runtime": "onnxruntime-web@1.22.0/wasm",
+  "models": [
+    {
+      "id": "yolov8n",
+      "label": "YOLOv8n",
+      "names": [
+        "Rice__BacterialLeafBlight",
+        "Rice__BrownSpot",
+        "Rice__Healthy",
+        "Rice__Hispa",
+        "Rice__LeafBlast",
+        "Rice__LeafScald",
+        "Rice__LeafSmut",
+        "Rice__NarrowBrownLeafSpot",
+        "Rice__NeckBlast"
+      ],
+      "files": {
+        "320": "models/yolov8n_320.onnx",
+        "512": "models/yolov8n_512.onnx",
+        "640": "models/yolov8n_640.onnx"
+      },
+      "checkpoint_sha256": "1df03d8b994367b4795cd0e26b819cb0971000f40d2c6609a4d1077c573e0b83",
+      "onnx_sha256": {
+        "320": "e1deb016b84198dcb274c382443cb0796f9d2dee09e503965b768c5ad1880b98",
+        "512": "f1d486a6002a8cf93d2109f342116b3b4d8d26b7ac0198647cda62a0dc54191b",
+        "640": "6ccd67015f90e6255e6ad1547260c0cda60ca733605997194c3799ea2bea8cc8"
+      },
+      "evaluation_snapshot": "baseline1-charts-20261013",
+      "export_settings": {
+        "format": "onnx",
+        "opset": 17,
+        "batch": 1,
+        "dynamic": false,
+        "half": false,
+        "nms": false
+      }
+    },
+    {
+      "id": "yolov8n_densenet121",
+      "label": "Yolov8n_DenseNet121",
+      "names": [
+        "Rice__BacterialLeafBlight",
+        "Rice__BrownSpot",
+        "Rice__Healthy",
+        "Rice__Hispa",
+        "Rice__LeafBlast",
+        "Rice__LeafScald",
+        "Rice__LeafSmut",
+        "Rice__NarrowBrownLeafSpot",
+        "Rice__NeckBlast"
+      ],
+      "files": {
+        "320": "models/yolov8n_densenet121_320.onnx",
+        "512": "models/yolov8n_densenet121_512.onnx",
+        "640": "models/yolov8n_densenet121_640.onnx"
+      },
+      "checkpoint_sha256": "defcf4ff895e72763baa71005139515c84b52ead8f1b4819cd793fd94154ea42",
+      "evaluation_snapshot": "c2f1-results-20261012-batch2",
+      "onnx_sha256": {
+        "320": "9408e8a513d2fd1f7bbeeda36101a0182c74ee54f5ea7eb63087ab0e36456356",
+        "512": "17a2d6a492747dd75033e60803ac7c703f7d9029e50320ef0839a1151ae256a0",
+        "640": "eb48addb5a3109e2029a001998075bedc8cd05b6783d37be648f9b8506e613a0"
+      }
+    },
+    {
+      "id": "yolov8n_denselitex_sppf_c2psa",
+      "label": "DenseLiteX + SPPF + C2PSA",
+      "names": [
+        "Rice__BacterialLeafBlight",
+        "Rice__BrownSpot",
+        "Rice__Healthy",
+        "Rice__Hispa",
+        "Rice__LeafBlast",
+        "Rice__LeafScald",
+        "Rice__LeafSmut",
+        "Rice__NarrowBrownLeafSpot",
+        "Rice__NeckBlast"
+      ],
+      "files": {
+        "320": "models/yolov8n_denselitex_sppf_c2psa_320.onnx",
+        "512": "models/yolov8n_denselitex_sppf_c2psa_512.onnx",
+        "640": "models/yolov8n_denselitex_sppf_c2psa_640.onnx"
+      },
+      "checkpoint_sha256": "049cd63cc4ffa06c15d6e728f581bffb2b4c24f97cf0917642102aae79cc2aae",
+      "evaluation_snapshot": "c2f1-results-20261012-batch2",
+      "onnx_sha256": {
+        "320": "9278ce196a3f37cc2cbc106dc4be986758972c9cd8fefdde335bcf76d74c62e8",
+        "512": "4ef8bba2c9a07f4abda4b720dc2c91b59ffd3c455f1ee14ef7377dda3760a55a",
+        "640": "1f8e6be3aa7fb319ac251c364887eb4963bb7aa005ced158ad67ec6064b7539f"
+      }
+    }
+  ],
+  "model_file_layout": "clean-size-names-v1"
+}

browser-runtime.js

@@ -1,185 +1,185 @@
-/* Local adapter for the existing UI. There are no Python or Render requests. */
-(function () {
-  'use strict';
-  const root = new URL('./', document.currentScript.src);
-  const nativeFetch = window.fetch.bind(window);
-  let manifestPromise;
-  let worker;
-  let workerFailure;
-  let sequence = 0;
-  let busy = false;
-  const pending = new Map();
-  const manifest = () => manifestPromise ??= nativeFetch(new URL('browser-models.json', root), { cache: 'no-store' })
-    .then(response => { if (!response.ok) throw new Error('Browser model manifest is missing.'); return response.json(); });
-  const reply = (data, status = 200) => new Response(JSON.stringify(data), {
-    status, headers: { 'Content-Type': 'application/json' },
-  });
-
-  function getWorker() {
-    if (workerFailure) throw new Error(workerFailure);
-    if (worker) return worker;
-    worker = new Worker(new URL('detection-worker.js?v=clean-model-names-20261012', root));
-    worker.onmessage = ({ data }) => {
-      const task = pending.get(data.requestId);
-      if (!task) return;
-      if (data.stage) {
-        const message = document.getElementById('message');
-        if (message) message.textContent = data.stage;
-        return;
-      }
-      pending.delete(data.requestId);
-      if (data.error) task.reject(new Error(data.error));
-      else task.resolve(data.detections);
-    };
-    worker.onerror = () => {
-      workerFailure = 'Browser runtime could not start. Check that the vendor runtime files were uploaded.';
-      for (const task of pending.values()) task.reject(new Error(workerFailure));
-      pending.clear();
-      worker.terminate();
-      worker = null;
-    };
-    return worker;
-  }
-
-  function runModel(model, size, input, transform, confidence) {
-    const detector = getWorker();
-    const requestId = ++sequence;
-    return new Promise((resolve, reject) => {
-      pending.set(requestId, { resolve, reject });
-      // Transfer a separate tensor for each model; the original stays reusable.
-      const copy = input.slice();
-      detector.postMessage({ requestId, model, size, input: copy.buffer, transform, confidence }, [copy.buffer]);
-    });
-  }
-
-  function prepareImage(image, size) {
-    const ratio = Math.min(size / image.width, size / image.height);
-    const resizedWidth = Math.round(image.width * ratio);
-    const resizedHeight = Math.round(image.height * ratio);
-    const left = Math.round((size - resizedWidth) / 2 - 0.1);
-    const top = Math.round((size - resizedHeight) / 2 - 0.1);
-    const canvas = document.createElement('canvas');
-    canvas.width = canvas.height = size;
-    const ctx = canvas.getContext('2d', { willReadFrequently: true });
-    ctx.fillStyle = 'rgb(114, 114, 114)';
-    ctx.fillRect(0, 0, size, size);
-    ctx.drawImage(image, left, top, resizedWidth, resizedHeight);
-    const pixels = ctx.getImageData(0, 0, size, size).data;
-    const plane = size * size;
-    const input = new Float32Array(3 * plane);
-    for (let pixel = 0; pixel < plane; pixel += 1) {
-      for (let channel = 0; channel < 3; channel += 1) {
-        input[channel * plane + pixel] = pixels[pixel * 4 + channel] / 255;
-      }
-    }
-    return { input, transform: { ratio, left, top, width: image.width, height: image.height } };
-  }
-
-  function annotate(image, detections) {
-    const canvas = document.createElement('canvas');
-    canvas.width = image.width;
-    canvas.height = image.height;
-    const ctx = canvas.getContext('2d');
-    ctx.drawImage(image, 0, 0);
-    const fontSize = Math.max(12, Math.round(Math.max(image.width, image.height) / 45));
-    ctx.font = '600 ' + fontSize + 'px system-ui, sans-serif';
-    ctx.lineWidth = Math.max(2, Math.round(fontSize / 6));
-    const colors = ['#ff4848', '#ee9635', '#2aab65', '#2a98dd', '#8861d6', '#dc5697', '#b58530', '#278d84', '#cc6144'];
-    for (const detection of detections) {
-      const [x1, y1, x2, y2] = detection.box;
-      const color = colors[detection.class_id % colors.length];
-      ctx.strokeStyle = color;
-      ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
-      const label = detection.class_name + ' ' + (detection.confidence * 100).toFixed(1) + '%';
-      const labelWidth = Math.min(canvas.width, ctx.measureText(label).width + 10);
-      const labelX = Math.max(0, Math.min(x1, canvas.width - labelWidth));
-      const labelY = Math.max(0, y1 - fontSize - 8);
-      ctx.fillStyle = color;
-      ctx.fillRect(labelX, labelY, labelWidth, fontSize + 8);
-      ctx.fillStyle = '#ffffff';
-      ctx.fillText(label, labelX + 5, labelY + fontSize + 1, labelWidth - 10);
-    }
-    return canvas.toDataURL('image/png');
-  }
-
-  // JPG upload compatibility: some files have an alias or no MIME type.
-  function isSupportedImageFile(file) {
-    if (!file) return false;
-
-    const imageType = (file.type || '').toLowerCase();
-    const supportedTypes = [
-      'image/jpeg',
-      'image/jpg',
-      'image/pjpeg',
-      'image/png',
-      'image/webp',
-    ];
-
-    if (supportedTypes.includes(imageType)) return true;
-
-    // The existing image decoder still verifies that this is an actual image.
-    return (
-      ['', 'application/octet-stream'].includes(imageType) &&
-      /\.(jpg|jpeg|png|webp)$/i.test(file.name || '')
-    );
-  }
-
-  async function compare(form) {
-    if (busy) return reply({ detail: 'A comparison is already running on this device.' }, 429);
-    busy = true;
-    let image;
-    try {
-      const models = await manifest();
-      if (!models.ready || models.models.length !== 3) {
-        return reply({ detail: models.message || 'Export and upload the three ONNX models first.' }, 503);
-      }
-      const file = form.get('file');
-      const confidence = Number(form.get('confidence'));
-      const size = Number(form.get('image_size'));
-      if (!isSupportedImageFile(file)) {
-        throw new Error('Choose a JPG, JPEG, PNG, or WebP image.');
-      }
-      if (file.size > 10 * 1024 * 1024) throw new Error('Image exceeds 10 MB.');
-      if (![320, 512, 640].includes(size) || !Number.isFinite(confidence) || confidence < 0.05 || confidence > 0.95) throw new Error('Invalid detection settings.');
-      image = await createImageBitmap(file);
-      if (image.width * image.height > 12000000) throw new Error('Image exceeds 12 megapixels.');
-      const { input, transform } = prepareImage(image, size);
-      const results = [];
-      for (const model of models.models) {
-        try {
-          if (!model.files[String(size)]) throw new Error('This input size has not been exported.');
-          const detections = await runModel(model, size, input, transform, confidence);
-          results.push({ id: model.id, status: 'success', detections,
-            image: annotate(image, detections),
-            class_names: Object.fromEntries(model.names.map((name, id) => [String(id), name])) });
-        } catch (error) {
-          results.push({ id: model.id, status: 'error', message: error.message });
-        }
-      }
-      document.getElementById('message').textContent = results.some(result => result.status === 'error')
-        ? 'Some browser models could not run. See the model cards for details.'
-        : 'Comparison completed on your device.';
-      return reply({ results, image_size: [image.width, image.height], settings: { confidence, imgsz: size, iou: 0.7 } });
-    } catch (error) {
-      return reply({ detail: error.message }, 400);
-    } finally {
-      image?.close();
-      busy = false;
-    }
-  }
-
-  window.PaddyLiteXBrowser = {
-    async fetch(url, options = {}) {
-      if (url === '/api/benchmarks') return nativeFetch(new URL('results.json', root), { cache: 'no-store' });
-      if (url === '/api/status') {
-        const models = await manifest();
-        const benchmarks = await (await nativeFetch(new URL('results.json', root), { cache: 'no-store' })).json();
-        return reply({ inference_enabled: Boolean(models.ready), models: benchmarks.main.map(model => ({
-          id: model.id, checkpoint_present: Boolean(models.ready && models.models.some(item => item.id === model.id)),
-        })) });
-      }
-      if (url === '/api/compare') return compare(options.body);
-      throw new Error('Unsupported browser API route: ' + url);
-    },
-  };
-})();
+/* Local adapter for the existing UI. There are no Python or Render requests. */
+(function () {
+  'use strict';
+  const root = new URL('./', document.currentScript.src);
+  const nativeFetch = window.fetch.bind(window);
+  let manifestPromise;
+  let worker;
+  let workerFailure;
+  let sequence = 0;
+  let busy = false;
+  const pending = new Map();
+  const manifest = () => manifestPromise ??= nativeFetch(new URL('browser-models.json', root), { cache: 'no-store' })
+    .then(response => { if (!response.ok) throw new Error('Browser model manifest is missing.'); return response.json(); });
+  const reply = (data, status = 200) => new Response(JSON.stringify(data), {
+    status, headers: { 'Content-Type': 'application/json' },
+  });
+
+  function getWorker() {
+    if (workerFailure) throw new Error(workerFailure);
+    if (worker) return worker;
+    worker = new Worker(new URL('detection-worker.js?v=baseline1-charts-20261013', root));
+    worker.onmessage = ({ data }) => {
+      const task = pending.get(data.requestId);
+      if (!task) return;
+      if (data.stage) {
+        const message = document.getElementById('message');
+        if (message) message.textContent = data.stage;
+        return;
+      }
+      pending.delete(data.requestId);
+      if (data.error) task.reject(new Error(data.error));
+      else task.resolve(data.detections);
+    };
+    worker.onerror = () => {
+      workerFailure = 'Browser runtime could not start. Check that the vendor runtime files were uploaded.';
+      for (const task of pending.values()) task.reject(new Error(workerFailure));
+      pending.clear();
+      worker.terminate();
+      worker = null;
+    };
+    return worker;
+  }
+
+  function runModel(model, size, input, transform, confidence) {
+    const detector = getWorker();
+    const requestId = ++sequence;
+    return new Promise((resolve, reject) => {
+      pending.set(requestId, { resolve, reject });
+      // Transfer a separate tensor for each model; the original stays reusable.
+      const copy = input.slice();
+      detector.postMessage({ requestId, model, size, input: copy.buffer, transform, confidence }, [copy.buffer]);
+    });
+  }
+
+  function prepareImage(image, size) {
+    const ratio = Math.min(size / image.width, size / image.height);
+    const resizedWidth = Math.round(image.width * ratio);
+    const resizedHeight = Math.round(image.height * ratio);
+    const left = Math.round((size - resizedWidth) / 2 - 0.1);
+    const top = Math.round((size - resizedHeight) / 2 - 0.1);
+    const canvas = document.createElement('canvas');
+    canvas.width = canvas.height = size;
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    ctx.fillStyle = 'rgb(114, 114, 114)';
+    ctx.fillRect(0, 0, size, size);
+    ctx.drawImage(image, left, top, resizedWidth, resizedHeight);
+    const pixels = ctx.getImageData(0, 0, size, size).data;
+    const plane = size * size;
+    const input = new Float32Array(3 * plane);
+    for (let pixel = 0; pixel < plane; pixel += 1) {
+      for (let channel = 0; channel < 3; channel += 1) {
+        input[channel * plane + pixel] = pixels[pixel * 4 + channel] / 255;
+      }
+    }
+    return { input, transform: { ratio, left, top, width: image.width, height: image.height } };
+  }
+
+  function annotate(image, detections) {
+    const canvas = document.createElement('canvas');
+    canvas.width = image.width;
+    canvas.height = image.height;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(image, 0, 0);
+    const fontSize = Math.max(12, Math.round(Math.max(image.width, image.height) / 45));
+    ctx.font = '600 ' + fontSize + 'px system-ui, sans-serif';
+    ctx.lineWidth = Math.max(2, Math.round(fontSize / 6));
+    const colors = ['#ff4848', '#ee9635', '#2aab65', '#2a98dd', '#8861d6', '#dc5697', '#b58530', '#278d84', '#cc6144'];
+    for (const detection of detections) {
+      const [x1, y1, x2, y2] = detection.box;
+      const color = colors[detection.class_id % colors.length];
+      ctx.strokeStyle = color;
+      ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+      const label = detection.class_name + ' ' + (detection.confidence * 100).toFixed(1) + '%';
+      const labelWidth = Math.min(canvas.width, ctx.measureText(label).width + 10);
+      const labelX = Math.max(0, Math.min(x1, canvas.width - labelWidth));
+      const labelY = Math.max(0, y1 - fontSize - 8);
+      ctx.fillStyle = color;
+      ctx.fillRect(labelX, labelY, labelWidth, fontSize + 8);
+      ctx.fillStyle = '#ffffff';
+      ctx.fillText(label, labelX + 5, labelY + fontSize + 1, labelWidth - 10);
+    }
+    return canvas.toDataURL('image/png');
+  }
+
+  // JPG upload compatibility: some files have an alias or no MIME type.
+  function isSupportedImageFile(file) {
+    if (!file) return false;
+
+    const imageType = (file.type || '').toLowerCase();
+    const supportedTypes = [
+      'image/jpeg',
+      'image/jpg',
+      'image/pjpeg',
+      'image/png',
+      'image/webp',
+    ];
+
+    if (supportedTypes.includes(imageType)) return true;
+
+    // The existing image decoder still verifies that this is an actual image.
+    return (
+      ['', 'application/octet-stream'].includes(imageType) &&
+      /\.(jpg|jpeg|png|webp)$/i.test(file.name || '')
+    );
+  }
+
+  async function compare(form) {
+    if (busy) return reply({ detail: 'A comparison is already running on this device.' }, 429);
+    busy = true;
+    let image;
+    try {
+      const models = await manifest();
+      if (!models.ready || models.models.length !== 3) {
+        return reply({ detail: models.message || 'Export and upload the three ONNX models first.' }, 503);
+      }
+      const file = form.get('file');
+      const confidence = Number(form.get('confidence'));
+      const size = Number(form.get('image_size'));
+      if (!isSupportedImageFile(file)) {
+        throw new Error('Choose a JPG, JPEG, PNG, or WebP image.');
+      }
+      if (file.size > 10 * 1024 * 1024) throw new Error('Image exceeds 10 MB.');
+      if (![320, 512, 640].includes(size) || !Number.isFinite(confidence) || confidence < 0.05 || confidence > 0.95) throw new Error('Invalid detection settings.');
+      image = await createImageBitmap(file);
+      if (image.width * image.height > 12000000) throw new Error('Image exceeds 12 megapixels.');
+      const { input, transform } = prepareImage(image, size);
+      const results = [];
+      for (const model of models.models) {
+        try {
+          if (!model.files[String(size)]) throw new Error('This input size has not been exported.');
+          const detections = await runModel(model, size, input, transform, confidence);
+          results.push({ id: model.id, status: 'success', detections,
+            image: annotate(image, detections),
+            class_names: Object.fromEntries(model.names.map((name, id) => [String(id), name])) });
+        } catch (error) {
+          results.push({ id: model.id, status: 'error', message: error.message });
+        }
+      }
+      document.getElementById('message').textContent = results.some(result => result.status === 'error')
+        ? 'Some browser models could not run. See the model cards for details.'
+        : 'Comparison completed on your device.';
+      return reply({ results, image_size: [image.width, image.height], settings: { confidence, imgsz: size, iou: 0.7 } });
+    } catch (error) {
+      return reply({ detail: error.message }, 400);
+    } finally {
+      image?.close();
+      busy = false;
+    }
+  }
+
+  window.PaddyLiteXBrowser = {
+    async fetch(url, options = {}) {
+      if (url === '/api/benchmarks') return nativeFetch(new URL('results.json', root), { cache: 'no-store' });
+      if (url === '/api/status') {
+        const models = await manifest();
+        const benchmarks = await (await nativeFetch(new URL('results.json', root), { cache: 'no-store' })).json();
+        return reply({ inference_enabled: Boolean(models.ready), models: benchmarks.main.map(model => ({
+          id: model.id, checkpoint_present: Boolean(models.ready && models.models.some(item => item.id === model.id)),
+        })) });
+      }
+      if (url === '/api/compare') return compare(options.body);
+      throw new Error('Unsupported browser API route: ' + url);
+    },
+  };
+})();

charts.css

@@ -0,0 +1,241 @@
+/* Chart controls and alternative views; existing website styles remain intact. */
+.chart-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.chart-grid > .panel,
+#quality-chart,
+#cost-chart,
+#class-chart {
+  min-width: 0;
+}
+
+.chart-grid .panel-heading {
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.chart-dot-row .bar-label span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.chart-dot-row .bar-label strong {
+  flex-shrink: 0;
+}
+
+.chart-options {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.chart-options label {
+  display: grid;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #627487;
+}
+
+.chart-options select {
+  max-width: 180px;
+}
+
+.chart-radar {
+  width: 100%;
+  min-width: 0;
+}
+
+.chart-radar svg {
+  display: block;
+  width: 100%;
+  max-height: 590px;
+}
+
+.chart-series-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding-top: 8px;
+}
+
+.chart-series-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 10px;
+  border: 1px solid #d7e3e9;
+  border-radius: 12px;
+  background: #f4f9fb;
+  color: #344d61;
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.chart-series-toggle i {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+}
+
+.chart-series-toggle[aria-pressed="false"] {
+  opacity: 0.45;
+  text-decoration: line-through;
+}
+
+.chart-series-toggle:focus-visible {
+  outline: 3px solid #8fc7f0;
+  outline-offset: 2px;
+}
+
+.chart-tip {
+  margin: 10px 0 0;
+  color: #627487;
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+.chart-table-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+  border: 1px solid #dce6ec;
+  border-radius: 14px;
+}
+
+table.score-heatmap {
+  width: 100%;
+  min-width: 560px;
+  border-collapse: separate;
+  border-spacing: 3px;
+  table-layout: auto;
+}
+
+.score-heatmap caption {
+  padding: 10px;
+  text-align: left;
+  font-size: 12px;
+  color: #627487;
+}
+
+.score-heatmap th,
+.score-heatmap td {
+  padding: 12px 10px;
+  border: 0;
+  border-radius: 7px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.score-heatmap thead th {
+  min-width: 105px;
+  max-width: 180px;
+  white-space: normal;
+  overflow-wrap: normal;
+  background: #eef5f8;
+  color: #344d61;
+  text-align: center;
+}
+
+.score-heatmap tbody th {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  min-width: 190px;
+  max-width: 260px;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  background: #f3f8fa;
+  color: #344d61;
+  text-align: left;
+}
+
+.score-heatmap td {
+  font-weight: 700;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.heatmap-key {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  font-size: 11px;
+  color: #627487;
+}
+
+.heatmap-key i {
+  width: 120px;
+  height: 9px;
+  border-radius: 8px;
+  background: linear-gradient(to right, #f5f8fc, #1b718f);
+}
+
+.chart-dot-row {
+  padding: 10px 0;
+}
+
+.chart-dot-track {
+  position: relative;
+  height: 20px;
+  margin: 9px 7px 0;
+  border-bottom: 1px solid #d9e5ec;
+  background: repeating-linear-gradient(to right, #dce8ef 0 1px, transparent 1px 20%);
+}
+
+.chart-dot {
+  position: absolute;
+  top: 3px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  transform: translateX(-50%);
+  box-shadow: 0 0 0 3px #fff;
+}
+
+.class-dot-group {
+  padding: 20px 0;
+  border-bottom: 1px solid #dce6ec;
+}
+
+.class-dot-group h3 {
+  font-size: 14px;
+  color: #344d61;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 1050px) {
+  .chart-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 700px) {
+  .chart-options {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .chart-options label {
+    flex: 1;
+  }
+
+  .chart-options select {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .chart-radar {
+    overflow-x: auto;
+  }
+
+  .chart-radar svg {
+    min-width: 650px;
+  }
+}

charts.js

@@ -0,0 +1,193 @@
+/* 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) => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+  }[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 };
+})();

index.html

@@ -1,459 +1,496 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta
-      name="description"
-      content="Paddy disease detection: compare YOLOv8n, Yolov8n_DenseNet121 and DenseLiteX predictions and research benchmarks."
-    />
-    <title>PaddyLiteX · Thesis II</title>
-    <link rel="icon" href="./favicon.svg" />
-    <link rel="stylesheet" href="./style.css" />
-    <script src="./browser-runtime.js?v=clean-model-names-20261012" defer></script>
-    <script src="./app.js?v=hf-root-sync-20261012" defer></script>
-  </head>
-  <body>
-    <header class="topbar">
-      <a class="brand" href="/" aria-label="PaddyLiteX home">
-        <span class="brandmark"><img src="./favicon.svg" alt="" aria-hidden="true" /></span>
-        <span>
-          PaddyLiteX
-          <small>THESIS II</small>
-        </span>
-      </a>
-      <nav class="tabs" aria-label="Main views">
-        <button class="tab active" data-view="workspace" aria-selected="true">
-          Detection studio
-        </button>
-        <button class="tab" data-view="benchmarks" aria-selected="false">Model benchmarks</button>
-      </nav>
-      <span class="research">XMUM · AI Engineering</span>
-    </header>
-    <main>
-      <section id="workspace" class="view active">
-        <section class="studio-hero intro-playing" id="studio-hero" aria-labelledby="hero-title">
-          <div class="hero-glow hero-glow-mint" aria-hidden="true"></div>
-          <div class="hero-glow hero-glow-blue" aria-hidden="true"></div>
-          <div class="hero-copy">
-            <p class="hero-eyebrow">
-              <span></span>
-              COMPUTER VISION · PADDY DISEASE DETECTION
-            </p>
-            <h1 id="hero-title">
-              A closer look.
-              <br />
-              <span>A clearer comparison.</span>
-            </h1>
-            <p class="hero-description">
-              From a paddy image to three model perspectives. Explore disease detections and the
-              balance between model performance and complexity.
-            </p>
-            <div class="hero-actions">
-              <button class="hero-primary" id="start-comparison">
-                Start comparison
-                <span aria-hidden="true">↗</span>
-              </button>
-              <button class="hero-secondary" data-view="benchmarks">Explore benchmarks</button>
-            </div>
-            <div class="hero-facts" aria-label="Demonstration workflow">
-              <span>
-                <b>01</b>
-                Upload an image
-              </span>
-              <span>
-                <b>02</b>
-                Compare three models
-              </span>
-              <span>
-                <b>03</b>
-                Explore the results
-              </span>
-            </div>
-          </div>
-          <div class="hero-art" aria-label="Animated illustration of a paddy leaf">
-            <div class="leaf-orbit orbit-one" aria-hidden="true"></div>
-            <div class="leaf-orbit orbit-two" aria-hidden="true"></div>
-            <div class="leaf-visual">
-              <div class="leaf-visual-header">
-                <span class="visual-dot"></span>
-                PADDY LEAF STUDY
-                <span>01 / 03</span>
-              </div>
-              <svg class="paddy-illustration" viewBox="0 0 360 360" aria-hidden="true">
-                <defs>
-                  <linearGradient id="blade-main" x1="0" y1="1" x2="1" y2="0">
-                    <stop offset="0" stop-color="#176c51" />
-                    <stop offset="0.5" stop-color="#73ca73" />
-                    <stop offset="1" stop-color="#d5eea2" />
-                  </linearGradient>
-                  <linearGradient id="blade-side" x1="0" y1="1" x2="1" y2="0">
-                    <stop offset="0" stop-color="#277e61" />
-                    <stop offset="1" stop-color="#a0ddb7" />
-                  </linearGradient>
-                </defs>
-                <g fill="none" stroke="#a1d9cb" stroke-opacity="0.18">
-                  <circle cx="180" cy="180" r="130" />
-                  <circle cx="180" cy="180" r="95" stroke-dasharray="3 9" />
-                  <path d="M180 22v316M22 180h316" />
-                </g>
-                <path
-                  d="M133 303C132 202 182 109 287 35c-12 106-51 212-154 268Z"
-                  fill="url(#blade-main)"
-                />
-                <path
-                  d="M139 297C180 192 232 105 278 49"
-                  fill="none"
-                  stroke="#e5f3b0"
-                  stroke-width="3"
-                />
-                <g fill="none" stroke="#cff0ad" stroke-opacity="0.55" stroke-width="1.4">
-                  <path d="m160 246 51-11m-36-23 51-12m-34-19 50-14m-33-17 43-17m-30-8 36-21" />
-                  <path d="m160 246-7-49m22 15-3-48m20 17 1-42m16 11 5-38m8 13 10-31" />
-                </g>
-                <path
-                  d="M132 303C85 254 61 179 64 92c58 65 97 136 68 211Z"
-                  fill="url(#blade-side)"
-                />
-                <path
-                  d="M133 304C107 222 82 153 67 105"
-                  fill="none"
-                  stroke="#c4edc8"
-                  stroke-width="2"
-                />
-                <path
-                  d="M124 331c11-27 19-54 23-76"
-                  fill="none"
-                  stroke="#d5efa9"
-                  stroke-width="4"
-                  stroke-linecap="round"
-                />
-                <g fill="none" stroke="#adebcf" stroke-width="2" stroke-linecap="round">
-                  <path d="M103 125v-18h18M257 125v-18h-18M103 256v18h18M257 256v18h-18" />
-                </g>
-              </svg>
-              <div class="leaf-scan" aria-hidden="true"></div>
-              <div class="leaf-visual-footer">
-                <span>Leaf illustration</span>
-                <span>Research visualization</span>
-              </div>
-            </div>
-            <div class="floating-tag tag-quality">
-              <span class="tag-icon">◈</span>
-              <div>
-                <small>THE QUESTION</small>
-                <strong>How well does it detect?</strong>
-              </div>
-            </div>
-            <div class="floating-tag tag-complexity">
-              <span class="tag-icon">◎</span>
-              <div>
-                <small>THE TRADE-OFF</small>
-                <strong>How much does it cost?</strong>
-              </div>
-            </div>
-          </div>
-          <div class="hero-bottom">
-            <span class="hero-signature">
-              PaddyLiteX
-              <span>RESEARCH IN ACTION</span>
-            </span>
-            <div class="hero-motion-controls">
-              <button id="replay-intro">
-                <span aria-hidden="true">↻</span>
-                Replay intro
-              </button>
-              <button id="toggle-motion" aria-pressed="false">Pause motion</button>
-            </div>
-          </div>
-        </section>
-
-        <div class="heading">
-          <div>
-            <p class="eyebrow">PADDY DISEASE DETECTION</p>
-            <h2 class="studio-title">Detection studio</h2>
-            <p class="muted">Compare your baselines and proposed model on the same image.</p>
-          </div>
-          <span class="pill" id="service-status">Checking model availability</span>
-        </div>
-        <div class="studio-grid">
-          <section class="panel upload-panel" id="studio-input">
-            <div class="panel-heading">
-              <h2>Input image</h2>
-              <span class="micro">JPG / JPEG · PNG · WebP</span>
-            </div>
-            <label class="dropzone" id="dropzone" tabindex="0">
-              <input id="file" type="file" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp" hidden />
-              <span id="upload-hint">
-                <span class="upload-icon" aria-hidden="true">+</span>
-                <strong>Choose a paddy image</strong>
-                <span>or drag it here</span>
-                <small>Up to 10 MB · 12 megapixels</small>
-              </span>
-              <img id="input-preview" alt="Selected paddy image" hidden />
-            </label>
-            <div class="fileline">
-              <span id="filename">No image selected</span>
-              <button id="clear" class="text-button" hidden>Clear</button>
-            </div>
-            <!-- Dataset source -->
-            <aside class="dataset-source" aria-labelledby="dataset-source-title">
-              <span class="dataset-source-icon" aria-hidden="true">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
-                  <path d="M20 4c0 9-4 14-10 14a6 6 0 0 1-6-6C4 6 11 4 20 4Z" />
-                  <path d="M4 20 15 9" />
-                </svg>
-              </span>
-              <div class="dataset-source-copy">
-                <h3 id="dataset-source-title">Try a dataset image</h3>
-                <p>Download a rice leaf image from Kaggle, then upload it here to compare the models.</p>
-                <a
-                  href="https://www.kaggle.com/datasets/yusufmurtaza01/rice-leaf-diseases"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  RICE Leaf Diseases · Kaggle
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
-                    <path d="M14 4h6v6M20 4 10 14M10 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-5" />
-                  </svg>
-                  <span class="dataset-source-sr">(opens in a new tab)</span>
-                </a>
-              </div>
-            </aside>
-            <!-- End dataset source -->
-            <div class="settings">
-              <div>
-                <label for="confidence">
-                  Confidence threshold
-                  <output id="confidence-value">0.25</output>
-                </label>
-                <input
-                  type="range"
-                  id="confidence"
-                  min="0.05"
-                  max="0.95"
-                  step="0.05"
-                  value="0.25"
-                />
-              </div>
-              <div>
-                <label for="image-size">Model input size</label>
-                <select id="image-size">
-                  <option value="320">320 x 320</option>
-                  <option value="512" selected>512 x 512</option>
-                  <option value="640">640 x 640</option>
-                </select>
-              </div>
-            </div>
-            <button class="primary" id="compare" disabled>Compare all three models</button>
-            <p class="privacy">Images are processed on your device and are not uploaded to a detection server.</p>
-            <p class="message" id="message" role="status" aria-live="polite"></p>
-          </section>
-          <section class="panel guidance">
-            <div>
-              <p class="eyebrow">CONTROLLED COMPARISON</p>
-              <h2>
-                The same input.
-                <br />
-                The same settings.
-              </h2>
-              <p>
-                Each model receives the same image, confidence threshold and input size. Explore
-                bounding boxes, predicted classes and confidence side by side.
-              </p>
-            </div>
-            <div class="model-list" id="model-list"></div>
-            <div class="note">
-              <strong>Prediction confidence ≠ accuracy</strong>
-              <p>
-                An uploaded image has no ground-truth annotation. Dataset-level performance is
-                available in Model benchmarks.
-              </p>
-            </div>
-          </section>
-        </div>
-        <div class="section-heading">
-          <div>
-            <h2>Detection results</h2>
-            <p class="muted">Real model predictions appear here after comparison.</p>
-          </div>
-          <span class="micro">P3 / P4 / P5 · 9 classes</span>
-        </div>
-        <div class="result-grid" id="results"></div>
-      </section>
-      <section id="benchmarks" class="view" hidden>
-        <div class="heading">
-          <div>
-            <p class="eyebrow">RECORDED EXPERIMENTAL RESULTS</p>
-            <h1>Performance, with perspective.</h1>
-            <p class="muted">
-              Detection quality and computational complexity across the evaluated models.
-            </p>
-          </div>
-          <div class="segmented">
-            <button data-scope="main" class="selected">Main comparison</button>
-            <button data-scope="ablation">Ablation study</button>
-          </div>
-        </div>
-        <div class="stat-grid">
-          <div class="stat">
-            <small>Test images</small>
-            <strong id="test-images">803</strong>
-          </div>
-          <div class="stat">
-            <small>Annotated objects</small>
-            <strong id="test-objects">2,466</strong>
-          </div>
-          <div class="stat">
-            <small>Detection classes</small>
-            <strong id="test-classes">9</strong>
-          </div>
-          <div class="stat">
-            <small>Proposed mAP@0.5:0.95</small>
-            <strong class="green" id="proposed-map5095">
-              55.83
-              <span>%</span>
-            </strong>
-          </div>
-          <div class="stat">
-            <small>Proposed mAP@0.5</small>
-            <strong class="green" id="proposed-map50">
-              81.67
-              <span>%</span>
-            </strong>
-          </div>
-        </div>
-        <div class="chart-grid">
-          <section class="panel">
-            <div class="panel-heading">
-              <div>
-                <p class="eyebrow">DETECTION PERFORMANCE</p>
-                <h2>Quality across models</h2>
-              </div>
-              <select id="metric" aria-label="Detection metric">
-                <option value="map5095">mAP@0.5:0.95</option>
-                <option value="map50">mAP@0.5</option>
-                <option value="precision">Precision</option>
-                <option value="recall">Recall</option>
-              </select>
-            </div>
-            <div id="quality-chart" class="bars"></div>
-            <p class="chart-note">Percent · higher is better · axis starts at zero</p>
-          </section>
-          <section class="panel">
-            <div class="panel-heading">
-              <div>
-                <p class="eyebrow">COMPUTATIONAL COMPLEXITY</p>
-                <h2>Cost across models</h2>
-              </div>
-              <select id="cost-metric" aria-label="Complexity metric">
-                <option value="parameters">Parameters</option>
-                <option value="gflops">GFLOPs</option>
-              </select>
-            </div>
-            <div id="cost-chart" class="bars"></div>
-            <p class="chart-note">Lower is lighter · axis starts at zero</p>
-          </section>
-        </div>
-        <section class="panel scatter-panel">
-          <div class="panel-heading">
-            <div>
-              <p class="eyebrow">PERFORMANCE-COMPLEXITY TRADE-OFF</p>
-              <h2>Where each model stands</h2>
-            </div>
-            <span class="micro" id="scatter-metrics">Parameters vs. mAP@0.5:0.95</span>
-          </div>
-          <div id="scatter"></div>
-          <div id="legend" class="legend"></div>
-        </section>
-        <div class="insight-grid">
-          <div class="insight">
-            <small>Against Yolov8n_DenseNet121 baseline</small>
-            <strong id="map-improvement">-0.25%</strong>
-            <p>mAP@0.5:0.95 score difference</p>
-            <p class="insight-values" id="map5095-change">56.08% → 55.83%</p>
-          </div>
-          <div class="insight">
-            <small>Against Yolov8n_DenseNet121 baseline</small>
-            <strong id="map50-improvement">+0.98%</strong>
-            <p>mAP@0.5 score difference</p>
-            <p class="insight-values" id="map50-change">80.69% → 81.67%</p>
-          </div>
-          <div class="insight">
-            <small>Against Yolov8n_DenseNet121 baseline</small>
-            <strong id="parameter-reduction">68.01% fewer</strong>
-            <p>parameters</p>
-          </div>
-          <div class="insight">
-            <small>Against Yolov8n_DenseNet121 baseline</small>
-            <strong id="flops-reduction">72.59% fewer</strong>
-            <p>reported GFLOPs</p>
-          </div>
-        </div>
-        <section class="panel class-panel" id="class-panel" aria-labelledby="class-heading">
-          <div class="panel-heading">
-            <div>
-              <p class="eyebrow">CLASS-LEVEL DETECTION PERFORMANCE</p>
-              <h2 id="class-heading">Every class, three perspectives.</h2>
-              <p class="muted">
-                Compare your two baselines and final proposed model for each class.
-              </p>
-            </div>
-            <button class="secondary" id="download-class-csv" disabled>Export class CSV</button>
-          </div>
-          <div class="class-toolbar">
-            <label>
-              Performance metric
-              <select id="class-metric">
-                <option value="map5095">AP@0.5:0.95</option>
-                <option value="map50">AP@0.5</option>
-                <option value="precision">Precision</option>
-                <option value="recall">Recall</option>
-              </select>
-            </label>
-            <label>
-              Class order
-              <select id="class-order">
-                <option value="dataset">Dataset order</option>
-                <option value="lowest">Proposed: lowest first</option>
-                <option value="highest">Proposed: highest first</option>
-              </select>
-            </label>
-            <span class="micro" id="class-context"></span>
-          </div>
-          <div id="class-legend" class="legend"></div>
-          <div id="class-chart" aria-live="polite"></div>
-          <p class="chart-note" id="class-note">
-            Test-set performance · percent · higher is better · all bars use a 0-100% scale.
-          </p>
-        </section>
-        <section class="panel table-panel">
-          <div class="panel-heading">
-            <h2>Exact measurements</h2>
-            <button class="secondary" id="download-csv">Export CSV</button>
-          </div>
-          <div class="table-wrap">
-            <table>
-              <thead>
-                <tr>
-                  <th>Model</th>
-                  <th>Precision</th>
-                  <th>Recall</th>
-                  <th>mAP@0.5</th>
-                  <th>mAP@0.5:0.95</th>
-                  <th>Parameters</th>
-                  <th>GFLOPs</th>
-                </tr>
-              </thead>
-              <tbody id="metrics-table"></tbody>
-            </table>
-          </div>
-        </section>
-      </section>
-      <footer>
-        <span>PaddyLiteX · Thesis II demonstration</span>
-        <span>AIT2309246</span>
-      </footer>
-    </main>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta
+      name="description"
+      content="Paddy disease detection: compare YOLOv8n, Yolov8n_DenseNet121 and DenseLiteX predictions and research benchmarks."
+    />
+    <title>PaddyLiteX · Thesis II</title>
+    <link rel="icon" href="./favicon.svg" />
+    <link rel="stylesheet" href="./style.css" />
+    <link rel="stylesheet" href="./charts.css?v=baseline1-charts-20261013" />
+    <script src="./browser-runtime.js?v=baseline1-charts-20261013" defer></script>
+    <script src="./charts.js?v=baseline1-charts-20261013" defer></script>
+    <script src="./app.js?v=baseline1-charts-20261013" defer></script>
+  </head>
+  <body>
+    <header class="topbar">
+      <a class="brand" href="/" aria-label="PaddyLiteX home">
+        <span class="brandmark"><img src="./favicon.svg" alt="" aria-hidden="true" /></span>
+        <span>
+          PaddyLiteX
+          <small>THESIS II</small>
+        </span>
+      </a>
+      <nav class="tabs" aria-label="Main views">
+        <button class="tab active" data-view="workspace" aria-selected="true">
+          Detection studio
+        </button>
+        <button class="tab" data-view="benchmarks" aria-selected="false">Model benchmarks</button>
+      </nav>
+      <span class="research">XMUM · AI Engineering</span>
+    </header>
+    <main>
+      <section id="workspace" class="view active">
+        <section class="studio-hero intro-playing" id="studio-hero" aria-labelledby="hero-title">
+          <div class="hero-glow hero-glow-mint" aria-hidden="true"></div>
+          <div class="hero-glow hero-glow-blue" aria-hidden="true"></div>
+          <div class="hero-copy">
+            <p class="hero-eyebrow">
+              <span></span>
+              COMPUTER VISION · PADDY DISEASE DETECTION
+            </p>
+            <h1 id="hero-title">
+              A closer look.
+              <br />
+              <span>A clearer comparison.</span>
+            </h1>
+            <p class="hero-description">
+              From a paddy image to three model perspectives. Explore disease detections and the
+              balance between model performance and complexity.
+            </p>
+            <div class="hero-actions">
+              <button class="hero-primary" id="start-comparison">
+                Start comparison
+                <span aria-hidden="true">↗</span>
+              </button>
+              <button class="hero-secondary" data-view="benchmarks">Explore benchmarks</button>
+            </div>
+            <div class="hero-facts" aria-label="Demonstration workflow">
+              <span>
+                <b>01</b>
+                Upload an image
+              </span>
+              <span>
+                <b>02</b>
+                Compare three models
+              </span>
+              <span>
+                <b>03</b>
+                Explore the results
+              </span>
+            </div>
+          </div>
+          <div class="hero-art" aria-label="Animated illustration of a paddy leaf">
+            <div class="leaf-orbit orbit-one" aria-hidden="true"></div>
+            <div class="leaf-orbit orbit-two" aria-hidden="true"></div>
+            <div class="leaf-visual">
+              <div class="leaf-visual-header">
+                <span class="visual-dot"></span>
+                PADDY LEAF STUDY
+                <span>01 / 03</span>
+              </div>
+              <svg class="paddy-illustration" viewBox="0 0 360 360" aria-hidden="true">
+                <defs>
+                  <linearGradient id="blade-main" x1="0" y1="1" x2="1" y2="0">
+                    <stop offset="0" stop-color="#176c51" />
+                    <stop offset="0.5" stop-color="#73ca73" />
+                    <stop offset="1" stop-color="#d5eea2" />
+                  </linearGradient>
+                  <linearGradient id="blade-side" x1="0" y1="1" x2="1" y2="0">
+                    <stop offset="0" stop-color="#277e61" />
+                    <stop offset="1" stop-color="#a0ddb7" />
+                  </linearGradient>
+                </defs>
+                <g fill="none" stroke="#a1d9cb" stroke-opacity="0.18">
+                  <circle cx="180" cy="180" r="130" />
+                  <circle cx="180" cy="180" r="95" stroke-dasharray="3 9" />
+                  <path d="M180 22v316M22 180h316" />
+                </g>
+                <path
+                  d="M133 303C132 202 182 109 287 35c-12 106-51 212-154 268Z"
+                  fill="url(#blade-main)"
+                />
+                <path
+                  d="M139 297C180 192 232 105 278 49"
+                  fill="none"
+                  stroke="#e5f3b0"
+                  stroke-width="3"
+                />
+                <g fill="none" stroke="#cff0ad" stroke-opacity="0.55" stroke-width="1.4">
+                  <path d="m160 246 51-11m-36-23 51-12m-34-19 50-14m-33-17 43-17m-30-8 36-21" />
+                  <path d="m160 246-7-49m22 15-3-48m20 17 1-42m16 11 5-38m8 13 10-31" />
+                </g>
+                <path
+                  d="M132 303C85 254 61 179 64 92c58 65 97 136 68 211Z"
+                  fill="url(#blade-side)"
+                />
+                <path
+                  d="M133 304C107 222 82 153 67 105"
+                  fill="none"
+                  stroke="#c4edc8"
+                  stroke-width="2"
+                />
+                <path
+                  d="M124 331c11-27 19-54 23-76"
+                  fill="none"
+                  stroke="#d5efa9"
+                  stroke-width="4"
+                  stroke-linecap="round"
+                />
+                <g fill="none" stroke="#adebcf" stroke-width="2" stroke-linecap="round">
+                  <path d="M103 125v-18h18M257 125v-18h-18M103 256v18h18M257 256v18h-18" />
+                </g>
+              </svg>
+              <div class="leaf-scan" aria-hidden="true"></div>
+              <div class="leaf-visual-footer">
+                <span>Leaf illustration</span>
+                <span>Research visualization</span>
+              </div>
+            </div>
+            <div class="floating-tag tag-quality">
+              <span class="tag-icon">◈</span>
+              <div>
+                <small>THE QUESTION</small>
+                <strong>How well does it detect?</strong>
+              </div>
+            </div>
+            <div class="floating-tag tag-complexity">
+              <span class="tag-icon">◎</span>
+              <div>
+                <small>THE TRADE-OFF</small>
+                <strong>How much does it cost?</strong>
+              </div>
+            </div>
+          </div>
+          <div class="hero-bottom">
+            <span class="hero-signature">
+              PaddyLiteX
+              <span>RESEARCH IN ACTION</span>
+            </span>
+            <div class="hero-motion-controls">
+              <button id="replay-intro">
+                <span aria-hidden="true">↻</span>
+                Replay intro
+              </button>
+              <button id="toggle-motion" aria-pressed="false">Pause motion</button>
+            </div>
+          </div>
+        </section>
+
+        <div class="heading">
+          <div>
+            <p class="eyebrow">PADDY DISEASE DETECTION</p>
+            <h2 class="studio-title">Detection studio</h2>
+            <p class="muted">Compare your baselines and proposed model on the same image.</p>
+          </div>
+          <span class="pill" id="service-status">Checking model availability</span>
+        </div>
+        <div class="studio-grid">
+          <section class="panel upload-panel" id="studio-input">
+            <div class="panel-heading">
+              <h2>Input image</h2>
+              <span class="micro">JPG / JPEG · PNG · WebP</span>
+            </div>
+            <label class="dropzone" id="dropzone" tabindex="0">
+              <input id="file" type="file" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp" hidden />
+              <span id="upload-hint">
+                <span class="upload-icon" aria-hidden="true">+</span>
+                <strong>Choose a paddy image</strong>
+                <span>or drag it here</span>
+                <small>Up to 10 MB · 12 megapixels</small>
+              </span>
+              <img id="input-preview" alt="Selected paddy image" hidden />
+            </label>
+            <div class="fileline">
+              <span id="filename">No image selected</span>
+              <button id="clear" class="text-button" hidden>Clear</button>
+            </div>
+            <!-- Dataset source -->
+            <aside class="dataset-source" aria-labelledby="dataset-source-title">
+              <span class="dataset-source-icon" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
+                  <path d="M20 4c0 9-4 14-10 14a6 6 0 0 1-6-6C4 6 11 4 20 4Z" />
+                  <path d="M4 20 15 9" />
+                </svg>
+              </span>
+              <div class="dataset-source-copy">
+                <h3 id="dataset-source-title">Try a dataset image</h3>
+                <p>Download a rice leaf image from Kaggle, then upload it here to compare the models.</p>
+                <a
+                  href="https://www.kaggle.com/datasets/yusufmurtaza01/rice-leaf-diseases"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  RICE Leaf Diseases · Kaggle
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                    <path d="M14 4h6v6M20 4 10 14M10 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-5" />
+                  </svg>
+                  <span class="dataset-source-sr">(opens in a new tab)</span>
+                </a>
+              </div>
+            </aside>
+            <!-- End dataset source -->
+            <div class="settings">
+              <div>
+                <label for="confidence">
+                  Confidence threshold
+                  <output id="confidence-value">0.25</output>
+                </label>
+                <input
+                  type="range"
+                  id="confidence"
+                  min="0.05"
+                  max="0.95"
+                  step="0.05"
+                  value="0.25"
+                />
+              </div>
+              <div>
+                <label for="image-size">Model input size</label>
+                <select id="image-size">
+                  <option value="320">320 x 320</option>
+                  <option value="512" selected>512 x 512</option>
+                  <option value="640">640 x 640</option>
+                </select>
+              </div>
+            </div>
+            <button class="primary" id="compare" disabled>Compare all three models</button>
+            <p class="privacy">Images are processed on your device and are not uploaded to a detection server.</p>
+            <p class="message" id="message" role="status" aria-live="polite"></p>
+          </section>
+          <section class="panel guidance">
+            <div>
+              <p class="eyebrow">CONTROLLED COMPARISON</p>
+              <h2>
+                The same input.
+                <br />
+                The same settings.
+              </h2>
+              <p>
+                Each model receives the same image, confidence threshold and input size. Explore
+                bounding boxes, predicted classes and confidence side by side.
+              </p>
+            </div>
+            <div class="model-list" id="model-list"></div>
+            <div class="note">
+              <strong>Prediction confidence ≠ accuracy</strong>
+              <p>
+                An uploaded image has no ground-truth annotation. Dataset-level performance is
+                available in Model benchmarks.
+              </p>
+            </div>
+          </section>
+        </div>
+        <div class="section-heading">
+          <div>
+            <h2>Detection results</h2>
+            <p class="muted">Real model predictions appear here after comparison.</p>
+          </div>
+          <span class="micro">P3 / P4 / P5 · 9 classes</span>
+        </div>
+        <div class="result-grid" id="results"></div>
+      </section>
+      <section id="benchmarks" class="view" hidden>
+        <div class="heading">
+          <div>
+            <p class="eyebrow">RECORDED EXPERIMENTAL RESULTS</p>
+            <h1>Performance, with perspective.</h1>
+            <p class="muted">
+              Detection quality and computational complexity across the evaluated models.
+            </p>
+          </div>
+          <div class="segmented">
+            <button data-scope="main" class="selected">Main comparison</button>
+            <button data-scope="ablation">Ablation study</button>
+          </div>
+        </div>
+        <div class="stat-grid">
+          <div class="stat">
+            <small>Test images</small>
+            <strong id="test-images">803</strong>
+          </div>
+          <div class="stat">
+            <small>Annotated objects</small>
+            <strong id="test-objects">2,466</strong>
+          </div>
+          <div class="stat">
+            <small>Detection classes</small>
+            <strong id="test-classes">9</strong>
+          </div>
+          <div class="stat">
+            <small>Proposed mAP@0.5:0.95</small>
+            <strong class="green" id="proposed-map5095">
+              55.83
+              <span>%</span>
+            </strong>
+          </div>
+          <div class="stat">
+            <small>Proposed mAP@0.5</small>
+            <strong class="green" id="proposed-map50">
+              81.67
+              <span>%</span>
+            </strong>
+          </div>
+        </div>
+        <div class="chart-grid">
+          <section class="panel">
+            <div class="panel-heading">
+              <div>
+                <p class="eyebrow">DETECTION PERFORMANCE</p>
+                <h2>Quality across models</h2>
+              </div>
+              <div class="chart-options">
+                <label>
+                  Detection metric
+                  <select id="metric" aria-label="Detection metric">
+                <option value="map5095">mAP@0.5:0.95</option>
+                <option value="map50">mAP@0.5</option>
+                <option value="precision">Precision</option>
+                <option value="recall">Recall</option>
+              </select>
+                </label>
+                <label>
+                  Chart view
+                  <select id="quality-chart-type">
+                    <option value="bar">Bar chart</option>
+                    <option value="dot">Dot plot</option>
+                    <option value="radar">Radar · all metrics</option>
+                    <option value="heatmap">Heatmap · all metrics</option>
+                  </select>
+                </label>
+              </div>
+            </div>
+            <div id="quality-chart" class="bars"></div>
+            <p class="chart-note" id="quality-chart-note">Percent · higher is better · axis starts at zero</p>
+          </section>
+          <section class="panel">
+            <div class="panel-heading">
+              <div>
+                <p class="eyebrow">COMPUTATIONAL COMPLEXITY</p>
+                <h2>Cost across models</h2>
+              </div>
+              <div class="chart-options">
+                <label>
+                  Complexity metric
+                  <select id="cost-metric" aria-label="Complexity metric">
+                <option value="parameters">Parameters</option>
+                <option value="gflops">GFLOPs</option>
+              </select>
+                </label>
+                <label>
+                  Chart view
+                  <select id="cost-chart-type">
+                    <option value="bar">Bar chart</option>
+                    <option value="dot">Dot plot</option>
+                  </select>
+                </label>
+              </div>
+            </div>
+            <div id="cost-chart" class="bars"></div>
+            <p class="chart-note">Lower is lighter · axis starts at zero</p>
+          </section>
+        </div>
+        <section class="panel scatter-panel">
+          <div class="panel-heading">
+            <div>
+              <p class="eyebrow">PERFORMANCE-COMPLEXITY TRADE-OFF</p>
+              <h2>Where each model stands</h2>
+            </div>
+            <span class="micro" id="scatter-metrics">Parameters vs. mAP@0.5:0.95</span>
+          </div>
+          <div id="scatter"></div>
+          <div id="legend" class="legend"></div>
+        </section>
+        <div class="insight-grid">
+          <div class="insight">
+            <small>Against Yolov8n_DenseNet121 baseline</small>
+            <strong id="map-improvement">-0.25%</strong>
+            <p>mAP@0.5:0.95 score difference</p>
+            <p class="insight-values" id="map5095-change">56.08% → 55.83%</p>
+          </div>
+          <div class="insight">
+            <small>Against Yolov8n_DenseNet121 baseline</small>
+            <strong id="map50-improvement">+0.98%</strong>
+            <p>mAP@0.5 score difference</p>
+            <p class="insight-values" id="map50-change">80.69% → 81.67%</p>
+          </div>
+          <div class="insight">
+            <small>Against Yolov8n_DenseNet121 baseline</small>
+            <strong id="parameter-reduction">68.01% fewer</strong>
+            <p>parameters</p>
+          </div>
+          <div class="insight">
+            <small>Against Yolov8n_DenseNet121 baseline</small>
+            <strong id="flops-reduction">72.59% fewer</strong>
+            <p>reported GFLOPs</p>
+          </div>
+        </div>
+        <section class="panel class-panel" id="class-panel" aria-labelledby="class-heading">
+          <div class="panel-heading">
+            <div>
+              <p class="eyebrow">CLASS-LEVEL DETECTION PERFORMANCE</p>
+              <h2 id="class-heading">Every class, three perspectives.</h2>
+              <p class="muted">
+                Compare your two baselines and final proposed model for each class.
+              </p>
+            </div>
+            <button class="secondary" id="download-class-csv" disabled>Export class CSV</button>
+          </div>
+          <div class="class-toolbar">
+            <label>
+              Chart view
+              <select id="class-chart-type">
+                <option value="bar">Grouped bars</option>
+                <option value="dot">Dot plot</option>
+                <option value="heatmap">Heatmap</option>
+                <option value="radar">Radar</option>
+              </select>
+            </label>
+            <label>
+              Performance metric
+              <select id="class-metric">
+                <option value="map5095">AP@0.5:0.95</option>
+                <option value="map50">AP@0.5</option>
+                <option value="precision">Precision</option>
+                <option value="recall">Recall</option>
+              </select>
+            </label>
+            <label>
+              Class order
+              <select id="class-order">
+                <option value="dataset">Dataset order</option>
+                <option value="lowest">Proposed: lowest first</option>
+                <option value="highest">Proposed: highest first</option>
+              </select>
+            </label>
+            <span class="micro" id="class-context"></span>
+          </div>
+          <div id="class-legend" class="legend"></div>
+          <div id="class-chart" aria-live="polite"></div>
+          <p class="chart-note" id="class-note">
+            Test-set performance · percent · higher is better · all bars use a 0-100% scale.
+          </p>
+        </section>
+        <section class="panel table-panel">
+          <div class="panel-heading">
+            <h2>Exact measurements</h2>
+            <button class="secondary" id="download-csv">Export CSV</button>
+          </div>
+          <div class="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th>Model</th>
+                  <th>Precision</th>
+                  <th>Recall</th>
+                  <th>mAP@0.5</th>
+                  <th>mAP@0.5:0.95</th>
+                  <th>Parameters</th>
+                  <th>GFLOPs</th>
+                </tr>
+              </thead>
+              <tbody id="metrics-table"></tbody>
+            </table>
+          </div>
+        </section>
+      </section>
+      <footer>
+        <span>PaddyLiteX · Thesis II demonstration</span>
+        <span>AIT2309246</span>
+      </footer>
+    </main>
+  </body>
+</html>

per_class.json

@@ -1,646 +1,660 @@
-{
-  "schema_version": 1,
-  "unit": "percent",
-  "context": {
-    "source": "Class-level test-set results from my paddy disease detection experiments.",
-    "split": "test",
-    "images": 803,
-    "objects": 2466,
-    "precision_note": "Transcribed from the displayed validation tables. Values use the precision shown in the screenshots; full-precision exports may differ slightly.",
-    "model_evaluations": {
-      "yolov8n_densenet121": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_densenet121_fs",
-        "source_screenshot": "image(20261011-154943).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      },
-      "yolov8n_denselitex_sppf_c2psa": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_denselitex_sppf_c2psa_fs",
-        "source_screenshot": "image(20261011-155020).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      },
-      "yolov8n_denselitex": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_denselitex_fs",
-        "source_screenshot": "image(20261011-155244).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      },
-      "yolov8n_denselitex_sppf": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_denselitex_sppf_fs",
-        "source_screenshot": "image(20261011-155432).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      },
-      "yolov8n_denselitex_c2psa": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_denselitex_c2psa_fs",
-        "source_screenshot": "image(20261011-155504).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      },
-      "yolov8n_densenet121_sppf": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_densenet121_sppf_fs",
-        "source_screenshot": "image(20261011-155804).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      },
-      "yolov8n_densenet121_c2psa": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_densenet121_c2psa_fs",
-        "source_screenshot": "image(20261011-155818).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      },
-      "yolov8n_densenet121_sppf_c2psa": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_densenet121_sppf_c2psa_fs",
-        "source_screenshot": "image(20261011-160157).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      }
-    },
-    "last_results_update": "c2f1-results-20261012-batch2"
-  },
-  "classes": [
-    {
-      "id": 0,
-      "name": "Rice__BacterialLeafBlight",
-      "images": 183,
-      "instances": 209,
-      "models": {
-        "yolov8n": {
-          "precision": 93.3,
-          "recall": 90.9,
-          "map50": 93.9,
-          "map5095": 71.4
-        },
-        "yolov8n_densenet121": {
-          "precision": 97.2,
-          "recall": 90.0,
-          "map50": 92.6,
-          "map5095": 74.8
-        },
-        "yolov8n_denselitex_sppf_c2psa": {
-          "precision": 95.7,
-          "recall": 90.4,
-          "map50": 94.3,
-          "map5095": 72.9
-        },
-        "yolov8n_densenet121_c2psa": {
-          "precision": 99.0,
-          "recall": 90.3,
-          "map50": 93.6,
-          "map5095": 79.4
-        },
-        "yolov8n_densenet121_sppf_c2psa": {
-          "precision": 97.5,
-          "recall": 92.8,
-          "map50": 93.1,
-          "map5095": 79.0
-        },
-        "yolov8n_denselitex": {
-          "precision": 90.6,
-          "recall": 88.0,
-          "map50": 91.8,
-          "map5095": 65.2
-        },
-        "yolov8n_denselitex_sppf": {
-          "precision": 94.5,
-          "recall": 90.0,
-          "map50": 93.6,
-          "map5095": 70.0
-        },
-        "yolov8n_denselitex_c2psa": {
-          "precision": 94.0,
-          "recall": 90.0,
-          "map50": 93.5,
-          "map5095": 68.5
-        },
-        "yolov8n_densenet121_sppf": {
-          "precision": 96.8,
-          "recall": 90.0,
-          "map50": 92.9,
-          "map5095": 78.0
-        }
-      }
-    },
-    {
-      "id": 1,
-      "name": "Rice__BrownSpot",
-      "images": 174,
-      "instances": 1280,
-      "models": {
-        "yolov8n": {
-          "precision": 89.7,
-          "recall": 83.8,
-          "map50": 92.1,
-          "map5095": 57.7
-        },
-        "yolov8n_densenet121": {
-          "precision": 96.4,
-          "recall": 86.5,
-          "map50": 94.6,
-          "map5095": 62.9
-        },
-        "yolov8n_denselitex_sppf_c2psa": {
-          "precision": 90.6,
-          "recall": 85.3,
-          "map50": 93.1,
-          "map5095": 59.9
-        },
-        "yolov8n_densenet121_c2psa": {
-          "precision": 96.9,
-          "recall": 86.6,
-          "map50": 95.6,
-          "map5095": 65.7
-        },
-        "yolov8n_densenet121_sppf_c2psa": {
-          "precision": 93.7,
-          "recall": 90.7,
-          "map50": 95.3,
-          "map5095": 66.4
-        },
-        "yolov8n_denselitex": {
-          "precision": 90.5,
-          "recall": 76.7,
-          "map50": 88.8,
-          "map5095": 50.7
-        },
-        "yolov8n_denselitex_sppf": {
-          "precision": 91.5,
-          "recall": 78.5,
-          "map50": 91.0,
-          "map5095": 55.9
-        },
-        "yolov8n_denselitex_c2psa": {
-          "precision": 92.1,
-          "recall": 79.9,
-          "map50": 91.2,
-          "map5095": 54.7
-        },
-        "yolov8n_densenet121_sppf": {
-          "precision": 93.4,
-          "recall": 89.1,
-          "map50": 94.8,
-          "map5095": 64.9
-        }
-      }
-    },
-    {
-      "id": 2,
-      "name": "Rice__Healthy",
-      "images": 44,
-      "instances": 69,
-      "models": {
-        "yolov8n": {
-          "precision": 75.4,
-          "recall": 44.9,
-          "map50": 52.1,
-          "map5095": 33.6
-        },
-        "yolov8n_densenet121": {
-          "precision": 68.0,
-          "recall": 44.9,
-          "map50": 49.4,
-          "map5095": 31.7
-        },
-        "yolov8n_denselitex_sppf_c2psa": {
-          "precision": 66.9,
-          "recall": 42.0,
-          "map50": 50.0,
-          "map5095": 32.0
-        },
-        "yolov8n_densenet121_c2psa": {
-          "precision": 70.6,
-          "recall": 49.3,
-          "map50": 51.1,
-          "map5095": 32.5
-        },
-        "yolov8n_densenet121_sppf_c2psa": {
-          "precision": 71.4,
-          "recall": 47.1,
-          "map50": 51.4,
-          "map5095": 35.5
-        },
-        "yolov8n_denselitex": {
-          "precision": 65.6,
-          "recall": 40.6,
-          "map50": 51.5,
-          "map5095": 31.4
-        },
-        "yolov8n_denselitex_sppf": {
-          "precision": 70.1,
-          "recall": 40.7,
-          "map50": 48.6,
-          "map5095": 32.8
-        },
-        "yolov8n_denselitex_c2psa": {
-          "precision": 61.1,
-          "recall": 40.6,
-          "map50": 47.9,
-          "map5095": 30.6
-        },
-        "yolov8n_densenet121_sppf": {
-          "precision": 68.6,
-          "recall": 43.5,
-          "map50": 51.2,
-          "map5095": 31.0
-        }
-      }
-    },
-    {
-      "id": 3,
-      "name": "Rice__Hispa",
-      "images": 44,
-      "instances": 89,
-      "models": {
-        "yolov8n": {
-          "precision": 85.4,
-          "recall": 84.3,
-          "map50": 83.0,
-          "map5095": 54.3
-        },
-        "yolov8n_densenet121": {
-          "precision": 85.0,
-          "recall": 80.9,
-          "map50": 82.2,
-          "map5095": 52.7
-        },
-        "yolov8n_denselitex_sppf_c2psa": {
-          "precision": 84.9,
-          "recall": 79.8,
-          "map50": 79.6,
-          "map5095": 52.2
-        },
-        "yolov8n_densenet121_c2psa": {
-          "precision": 88.5,
-          "recall": 78.7,
-          "map50": 84.1,
-          "map5095": 55.1
-        },
-        "yolov8n_densenet121_sppf_c2psa": {
-          "precision": 86.7,
-          "recall": 80.9,
-          "map50": 81.6,
-          "map5095": 53.0
-        },
-        "yolov8n_denselitex": {
-          "precision": 79.3,
-          "recall": 77.5,
-          "map50": 77.8,
-          "map5095": 48.9
-        },
-        "yolov8n_denselitex_sppf": {
-          "precision": 83.2,
-          "recall": 76.4,
-          "map50": 79.3,
-          "map5095": 50.7
-        },
-        "yolov8n_denselitex_c2psa": {
-          "precision": 77.1,
-          "recall": 78.7,
-          "map50": 80.1,
-          "map5095": 51.9
-        },
-        "yolov8n_densenet121_sppf": {
-          "precision": 85.6,
-          "recall": 80.4,
-          "map50": 81.0,
-          "map5095": 52.2
-        }
-      }
-    },
-    {
-      "id": 4,
-      "name": "Rice__LeafBlast",
-      "images": 46,
-      "instances": 70,
-      "models": {
-        "yolov8n": {
-          "precision": 65.8,
-          "recall": 55.7,
-          "map50": 63.7,
-          "map5095": 39.5
-        },
-        "yolov8n_densenet121": {
-          "precision": 68.4,
-          "recall": 51.4,
-          "map50": 63.9,
-          "map5095": 40.9
-        },
-        "yolov8n_denselitex_sppf_c2psa": {
-          "precision": 71.7,
-          "recall": 57.8,
-          "map50": 67.0,
-          "map5095": 41.9
-        },
-        "yolov8n_densenet121_c2psa": {
-          "precision": 78.8,
-          "recall": 61.4,
-          "map50": 69.2,
-          "map5095": 43.0
-        },
-        "yolov8n_densenet121_sppf_c2psa": {
-          "precision": 64.9,
-          "recall": 63.4,
-          "map50": 66.2,
-          "map5095": 41.3
-        },
-        "yolov8n_denselitex": {
-          "precision": 75.1,
-          "recall": 50.0,
-          "map50": 62.0,
-          "map5095": 34.6
-        },
-        "yolov8n_denselitex_sppf": {
-          "precision": 67.3,
-          "recall": 52.9,
-          "map50": 60.3,
-          "map5095": 38.7
-        },
-        "yolov8n_denselitex_c2psa": {
-          "precision": 68.6,
-          "recall": 58.6,
-          "map50": 65.8,
-          "map5095": 37.6
-        },
-        "yolov8n_densenet121_sppf": {
-          "precision": 71.4,
-          "recall": 65.7,
-          "map50": 65.6,
-          "map5095": 42.2
-        }
-      }
-    },
-    {
-      "id": 5,
-      "name": "Rice__LeafScald",
-      "images": 46,
-      "instances": 51,
-      "models": {
-        "yolov8n": {
-          "precision": 83.8,
-          "recall": 86.3,
-          "map50": 86.7,
-          "map5095": 56.7
-        },
-        "yolov8n_densenet121": {
-          "precision": 84.1,
-          "recall": 72.6,
-          "map50": 80.6,
-          "map5095": 56.0
-        },
-        "yolov8n_denselitex_sppf_c2psa": {
-          "precision": 81.5,
-          "recall": 80.4,
-          "map50": 89.0,
-          "map5095": 60.6
-        },
-        "yolov8n_densenet121_c2psa": {
-          "precision": 88.3,
-          "recall": 76.5,
-          "map50": 86.6,
-          "map5095": 55.3
-        },
-        "yolov8n_densenet121_sppf_c2psa": {
-          "precision": 80.9,
-          "recall": 80.4,
-          "map50": 85.0,
-          "map5095": 56.5
-        },
-        "yolov8n_denselitex": {
-          "precision": 84.5,
-          "recall": 74.5,
-          "map50": 83.9,
-          "map5095": 48.2
-        },
-        "yolov8n_denselitex_sppf": {
-          "precision": 87.3,
-          "recall": 82.4,
-          "map50": 87.3,
-          "map5095": 58.2
-        },
-        "yolov8n_denselitex_c2psa": {
-          "precision": 78.9,
-          "recall": 74.5,
-          "map50": 78.1,
-          "map5095": 51.1
-        },
-        "yolov8n_densenet121_sppf": {
-          "precision": 83.9,
-          "recall": 81.9,
-          "map50": 87.9,
-          "map5095": 56.4
-        }
-      }
-    },
-    {
-      "id": 6,
-      "name": "Rice__LeafSmut",
-      "images": 175,
-      "instances": 535,
-      "models": {
-        "yolov8n": {
-          "precision": 96.4,
-          "recall": 95.4,
-          "map50": 98.0,
-          "map5095": 75.2
-        },
-        "yolov8n_densenet121": {
-          "precision": 97.4,
-          "recall": 96.2,
-          "map50": 98.0,
-          "map5095": 77.5
-        },
-        "yolov8n_denselitex_sppf_c2psa": {
-          "precision": 95.8,
-          "recall": 96.1,
-          "map50": 98.2,
-          "map5095": 76.4
-        },
-        "yolov8n_densenet121_c2psa": {
-          "precision": 98.4,
-          "recall": 95.7,
-          "map50": 97.7,
-          "map5095": 81.9
-        },
-        "yolov8n_densenet121_sppf_c2psa": {
-          "precision": 97.7,
-          "recall": 96.3,
-          "map50": 98.0,
-          "map5095": 81.8
-        },
-        "yolov8n_denselitex": {
-          "precision": 95.0,
-          "recall": 94.0,
-          "map50": 96.7,
-          "map5095": 67.2
-        },
-        "yolov8n_denselitex_sppf": {
-          "precision": 96.5,
-          "recall": 95.0,
-          "map50": 97.8,
-          "map5095": 73.8
-        },
-        "yolov8n_denselitex_c2psa": {
-          "precision": 94.6,
-          "recall": 93.8,
-          "map50": 97.1,
-          "map5095": 73.0
-        },
-        "yolov8n_densenet121_sppf": {
-          "precision": 97.0,
-          "recall": 95.8,
-          "map50": 97.7,
-          "map5095": 80.5
-        }
-      }
-    },
-    {
-      "id": 7,
-      "name": "Rice__NarrowBrownLeafSpot",
-      "images": 45,
-      "instances": 66,
-      "models": {
-        "yolov8n": {
-          "precision": 76.5,
-          "recall": 66.7,
-          "map50": 70.1,
-          "map5095": 45.7
-        },
-        "yolov8n_densenet121": {
-          "precision": 76.5,
-          "recall": 65.2,
-          "map50": 73.2,
-          "map5095": 48.0
-        },
-        "yolov8n_denselitex_sppf_c2psa": {
-          "precision": 74.5,
-          "recall": 63.6,
-          "map50": 73.0,
-          "map5095": 45.4
-        },
-        "yolov8n_densenet121_c2psa": {
-          "precision": 75.7,
-          "recall": 66.7,
-          "map50": 75.5,
-          "map5095": 48.6
-        },
-        "yolov8n_densenet121_sppf_c2psa": {
-          "precision": 71.2,
-          "recall": 74.2,
-          "map50": 79.0,
-          "map5095": 48.9
-        },
-        "yolov8n_denselitex": {
-          "precision": 77.3,
-          "recall": 60.6,
-          "map50": 70.7,
-          "map5095": 41.7
-        },
-        "yolov8n_denselitex_sppf": {
-          "precision": 73.7,
-          "recall": 62.1,
-          "map50": 70.3,
-          "map5095": 43.3
-        },
-        "yolov8n_denselitex_c2psa": {
-          "precision": 65.6,
-          "recall": 60.6,
-          "map50": 65.0,
-          "map5095": 37.8
-        },
-        "yolov8n_densenet121_sppf": {
-          "precision": 79.5,
-          "recall": 70.4,
-          "map50": 76.1,
-          "map5095": 48.3
-        }
-      }
-    },
-    {
-      "id": 8,
-      "name": "Rice__NeckBlast",
-      "images": 46,
-      "instances": 97,
-      "models": {
-        "yolov8n": {
-          "precision": 86.7,
-          "recall": 81.4,
-          "map50": 87.6,
-          "map5095": 57.7
-        },
-        "yolov8n_densenet121": {
-          "precision": 89.4,
-          "recall": 85.6,
-          "map50": 91.7,
-          "map5095": 60.3
-        },
-        "yolov8n_denselitex_sppf_c2psa": {
-          "precision": 88.0,
-          "recall": 85.6,
-          "map50": 90.7,
-          "map5095": 61.1
-        },
-        "yolov8n_densenet121_c2psa": {
-          "precision": 88.6,
-          "recall": 83.5,
-          "map50": 89.7,
-          "map5095": 58.3
-        },
-        "yolov8n_densenet121_sppf_c2psa": {
-          "precision": 90.2,
-          "recall": 85.1,
-          "map50": 90.5,
-          "map5095": 62.3
-        },
-        "yolov8n_denselitex": {
-          "precision": 86.1,
-          "recall": 84.5,
-          "map50": 86.1,
-          "map5095": 54.7
-        },
-        "yolov8n_denselitex_sppf": {
-          "precision": 88.9,
-          "recall": 86.6,
-          "map50": 91.3,
-          "map5095": 61.9
-        },
-        "yolov8n_denselitex_c2psa": {
-          "precision": 78.5,
-          "recall": 84.5,
-          "map50": 86.7,
-          "map5095": 52.2
-        },
-        "yolov8n_densenet121_sppf": {
-          "precision": 93.0,
-          "recall": 83.5,
-          "map50": 90.1,
-          "map5095": 61.0
-        }
-      }
-    }
-  ]
-}
+{
+  "schema_version": 1,
+  "unit": "percent",
+  "context": {
+    "source": "Class-level test-set results from my paddy disease detection experiments.",
+    "split": "test",
+    "images": 803,
+    "objects": 2466,
+    "precision_note": "Transcribed from the displayed validation tables. Values use the precision shown in the screenshots; full-precision exports may differ slightly.",
+    "model_evaluations": {
+      "yolov8n_densenet121": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_densenet121_fs",
+        "source_screenshot": "image(20261011-154943).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n_denselitex_sppf_c2psa": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_denselitex_sppf_c2psa_fs",
+        "source_screenshot": "image(20261011-155020).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n_denselitex": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_denselitex_fs",
+        "source_screenshot": "image(20261011-155244).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n_denselitex_sppf": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_denselitex_sppf_fs",
+        "source_screenshot": "image(20261011-155432).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n_denselitex_c2psa": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_denselitex_c2psa_fs",
+        "source_screenshot": "image(20261011-155504).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n_densenet121_sppf": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_densenet121_sppf_fs",
+        "source_screenshot": "image(20261011-155804).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n_densenet121_c2psa": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_densenet121_c2psa_fs",
+        "source_screenshot": "image(20261011-155818).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n_densenet121_sppf_c2psa": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_densenet121_sppf_c2psa_fs",
+        "source_screenshot": "image(20261011-160157).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n": {
+        "split": "test",
+        "run_name": "yolov8n_fs1",
+        "source_screenshot": "image(20261013-075958).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the three-decimal displayed per-class table.",
+        "complexity_note": "Fused model summary: 3,007,403 parameters and 8.1 GFLOPs.",
+        "training_runtime": {
+          "python": "3.10.20",
+          "ultralytics": "8.4.70",
+          "torch": "2.5.1+cu121",
+          "device": "NVIDIA GeForce RTX 4060 Laptop GPU"
+        }
+      }
+    },
+    "last_results_update": "baseline1-charts-20261013"
+  },
+  "classes": [
+    {
+      "id": 0,
+      "name": "Rice__BacterialLeafBlight",
+      "images": 183,
+      "instances": 209,
+      "models": {
+        "yolov8n": {
+          "precision": 92.8,
+          "recall": 93.3,
+          "map50": 95.2,
+          "map5095": 70.6
+        },
+        "yolov8n_densenet121": {
+          "precision": 97.2,
+          "recall": 90.0,
+          "map50": 92.6,
+          "map5095": 74.8
+        },
+        "yolov8n_denselitex_sppf_c2psa": {
+          "precision": 95.7,
+          "recall": 90.4,
+          "map50": 94.3,
+          "map5095": 72.9
+        },
+        "yolov8n_densenet121_c2psa": {
+          "precision": 99.0,
+          "recall": 90.3,
+          "map50": 93.6,
+          "map5095": 79.4
+        },
+        "yolov8n_densenet121_sppf_c2psa": {
+          "precision": 97.5,
+          "recall": 92.8,
+          "map50": 93.1,
+          "map5095": 79.0
+        },
+        "yolov8n_denselitex": {
+          "precision": 90.6,
+          "recall": 88.0,
+          "map50": 91.8,
+          "map5095": 65.2
+        },
+        "yolov8n_denselitex_sppf": {
+          "precision": 94.5,
+          "recall": 90.0,
+          "map50": 93.6,
+          "map5095": 70.0
+        },
+        "yolov8n_denselitex_c2psa": {
+          "precision": 94.0,
+          "recall": 90.0,
+          "map50": 93.5,
+          "map5095": 68.5
+        },
+        "yolov8n_densenet121_sppf": {
+          "precision": 96.8,
+          "recall": 90.0,
+          "map50": 92.9,
+          "map5095": 78.0
+        }
+      }
+    },
+    {
+      "id": 1,
+      "name": "Rice__BrownSpot",
+      "images": 174,
+      "instances": 1280,
+      "models": {
+        "yolov8n": {
+          "precision": 88.6,
+          "recall": 84.7,
+          "map50": 91.2,
+          "map5095": 58.1
+        },
+        "yolov8n_densenet121": {
+          "precision": 96.4,
+          "recall": 86.5,
+          "map50": 94.6,
+          "map5095": 62.9
+        },
+        "yolov8n_denselitex_sppf_c2psa": {
+          "precision": 90.6,
+          "recall": 85.3,
+          "map50": 93.1,
+          "map5095": 59.9
+        },
+        "yolov8n_densenet121_c2psa": {
+          "precision": 96.9,
+          "recall": 86.6,
+          "map50": 95.6,
+          "map5095": 65.7
+        },
+        "yolov8n_densenet121_sppf_c2psa": {
+          "precision": 93.7,
+          "recall": 90.7,
+          "map50": 95.3,
+          "map5095": 66.4
+        },
+        "yolov8n_denselitex": {
+          "precision": 90.5,
+          "recall": 76.7,
+          "map50": 88.8,
+          "map5095": 50.7
+        },
+        "yolov8n_denselitex_sppf": {
+          "precision": 91.5,
+          "recall": 78.5,
+          "map50": 91.0,
+          "map5095": 55.9
+        },
+        "yolov8n_denselitex_c2psa": {
+          "precision": 92.1,
+          "recall": 79.9,
+          "map50": 91.2,
+          "map5095": 54.7
+        },
+        "yolov8n_densenet121_sppf": {
+          "precision": 93.4,
+          "recall": 89.1,
+          "map50": 94.8,
+          "map5095": 64.9
+        }
+      }
+    },
+    {
+      "id": 2,
+      "name": "Rice__Healthy",
+      "images": 44,
+      "instances": 69,
+      "models": {
+        "yolov8n": {
+          "precision": 72.6,
+          "recall": 52.2,
+          "map50": 53.4,
+          "map5095": 33.2
+        },
+        "yolov8n_densenet121": {
+          "precision": 68.0,
+          "recall": 44.9,
+          "map50": 49.4,
+          "map5095": 31.7
+        },
+        "yolov8n_denselitex_sppf_c2psa": {
+          "precision": 66.9,
+          "recall": 42.0,
+          "map50": 50.0,
+          "map5095": 32.0
+        },
+        "yolov8n_densenet121_c2psa": {
+          "precision": 70.6,
+          "recall": 49.3,
+          "map50": 51.1,
+          "map5095": 32.5
+        },
+        "yolov8n_densenet121_sppf_c2psa": {
+          "precision": 71.4,
+          "recall": 47.1,
+          "map50": 51.4,
+          "map5095": 35.5
+        },
+        "yolov8n_denselitex": {
+          "precision": 65.6,
+          "recall": 40.6,
+          "map50": 51.5,
+          "map5095": 31.4
+        },
+        "yolov8n_denselitex_sppf": {
+          "precision": 70.1,
+          "recall": 40.7,
+          "map50": 48.6,
+          "map5095": 32.8
+        },
+        "yolov8n_denselitex_c2psa": {
+          "precision": 61.1,
+          "recall": 40.6,
+          "map50": 47.9,
+          "map5095": 30.6
+        },
+        "yolov8n_densenet121_sppf": {
+          "precision": 68.6,
+          "recall": 43.5,
+          "map50": 51.2,
+          "map5095": 31.0
+        }
+      }
+    },
+    {
+      "id": 3,
+      "name": "Rice__Hispa",
+      "images": 44,
+      "instances": 89,
+      "models": {
+        "yolov8n": {
+          "precision": 78.4,
+          "recall": 84.3,
+          "map50": 80.3,
+          "map5095": 53.0
+        },
+        "yolov8n_densenet121": {
+          "precision": 85.0,
+          "recall": 80.9,
+          "map50": 82.2,
+          "map5095": 52.7
+        },
+        "yolov8n_denselitex_sppf_c2psa": {
+          "precision": 84.9,
+          "recall": 79.8,
+          "map50": 79.6,
+          "map5095": 52.2
+        },
+        "yolov8n_densenet121_c2psa": {
+          "precision": 88.5,
+          "recall": 78.7,
+          "map50": 84.1,
+          "map5095": 55.1
+        },
+        "yolov8n_densenet121_sppf_c2psa": {
+          "precision": 86.7,
+          "recall": 80.9,
+          "map50": 81.6,
+          "map5095": 53.0
+        },
+        "yolov8n_denselitex": {
+          "precision": 79.3,
+          "recall": 77.5,
+          "map50": 77.8,
+          "map5095": 48.9
+        },
+        "yolov8n_denselitex_sppf": {
+          "precision": 83.2,
+          "recall": 76.4,
+          "map50": 79.3,
+          "map5095": 50.7
+        },
+        "yolov8n_denselitex_c2psa": {
+          "precision": 77.1,
+          "recall": 78.7,
+          "map50": 80.1,
+          "map5095": 51.9
+        },
+        "yolov8n_densenet121_sppf": {
+          "precision": 85.6,
+          "recall": 80.4,
+          "map50": 81.0,
+          "map5095": 52.2
+        }
+      }
+    },
+    {
+      "id": 4,
+      "name": "Rice__LeafBlast",
+      "images": 46,
+      "instances": 70,
+      "models": {
+        "yolov8n": {
+          "precision": 65.0,
+          "recall": 64.3,
+          "map50": 64.0,
+          "map5095": 40.3
+        },
+        "yolov8n_densenet121": {
+          "precision": 68.4,
+          "recall": 51.4,
+          "map50": 63.9,
+          "map5095": 40.9
+        },
+        "yolov8n_denselitex_sppf_c2psa": {
+          "precision": 71.7,
+          "recall": 57.8,
+          "map50": 67.0,
+          "map5095": 41.9
+        },
+        "yolov8n_densenet121_c2psa": {
+          "precision": 78.8,
+          "recall": 61.4,
+          "map50": 69.2,
+          "map5095": 43.0
+        },
+        "yolov8n_densenet121_sppf_c2psa": {
+          "precision": 64.9,
+          "recall": 63.4,
+          "map50": 66.2,
+          "map5095": 41.3
+        },
+        "yolov8n_denselitex": {
+          "precision": 75.1,
+          "recall": 50.0,
+          "map50": 62.0,
+          "map5095": 34.6
+        },
+        "yolov8n_denselitex_sppf": {
+          "precision": 67.3,
+          "recall": 52.9,
+          "map50": 60.3,
+          "map5095": 38.7
+        },
+        "yolov8n_denselitex_c2psa": {
+          "precision": 68.6,
+          "recall": 58.6,
+          "map50": 65.8,
+          "map5095": 37.6
+        },
+        "yolov8n_densenet121_sppf": {
+          "precision": 71.4,
+          "recall": 65.7,
+          "map50": 65.6,
+          "map5095": 42.2
+        }
+      }
+    },
+    {
+      "id": 5,
+      "name": "Rice__LeafScald",
+      "images": 46,
+      "instances": 51,
+      "models": {
+        "yolov8n": {
+          "precision": 80.3,
+          "recall": 79.9,
+          "map50": 85.6,
+          "map5095": 53.4
+        },
+        "yolov8n_densenet121": {
+          "precision": 84.1,
+          "recall": 72.6,
+          "map50": 80.6,
+          "map5095": 56.0
+        },
+        "yolov8n_denselitex_sppf_c2psa": {
+          "precision": 81.5,
+          "recall": 80.4,
+          "map50": 89.0,
+          "map5095": 60.6
+        },
+        "yolov8n_densenet121_c2psa": {
+          "precision": 88.3,
+          "recall": 76.5,
+          "map50": 86.6,
+          "map5095": 55.3
+        },
+        "yolov8n_densenet121_sppf_c2psa": {
+          "precision": 80.9,
+          "recall": 80.4,
+          "map50": 85.0,
+          "map5095": 56.5
+        },
+        "yolov8n_denselitex": {
+          "precision": 84.5,
+          "recall": 74.5,
+          "map50": 83.9,
+          "map5095": 48.2
+        },
+        "yolov8n_denselitex_sppf": {
+          "precision": 87.3,
+          "recall": 82.4,
+          "map50": 87.3,
+          "map5095": 58.2
+        },
+        "yolov8n_denselitex_c2psa": {
+          "precision": 78.9,
+          "recall": 74.5,
+          "map50": 78.1,
+          "map5095": 51.1
+        },
+        "yolov8n_densenet121_sppf": {
+          "precision": 83.9,
+          "recall": 81.9,
+          "map50": 87.9,
+          "map5095": 56.4
+        }
+      }
+    },
+    {
+      "id": 6,
+      "name": "Rice__LeafSmut",
+      "images": 175,
+      "instances": 535,
+      "models": {
+        "yolov8n": {
+          "precision": 94.4,
+          "recall": 93.8,
+          "map50": 97.7,
+          "map5095": 74.4
+        },
+        "yolov8n_densenet121": {
+          "precision": 97.4,
+          "recall": 96.2,
+          "map50": 98.0,
+          "map5095": 77.5
+        },
+        "yolov8n_denselitex_sppf_c2psa": {
+          "precision": 95.8,
+          "recall": 96.1,
+          "map50": 98.2,
+          "map5095": 76.4
+        },
+        "yolov8n_densenet121_c2psa": {
+          "precision": 98.4,
+          "recall": 95.7,
+          "map50": 97.7,
+          "map5095": 81.9
+        },
+        "yolov8n_densenet121_sppf_c2psa": {
+          "precision": 97.7,
+          "recall": 96.3,
+          "map50": 98.0,
+          "map5095": 81.8
+        },
+        "yolov8n_denselitex": {
+          "precision": 95.0,
+          "recall": 94.0,
+          "map50": 96.7,
+          "map5095": 67.2
+        },
+        "yolov8n_denselitex_sppf": {
+          "precision": 96.5,
+          "recall": 95.0,
+          "map50": 97.8,
+          "map5095": 73.8
+        },
+        "yolov8n_denselitex_c2psa": {
+          "precision": 94.6,
+          "recall": 93.8,
+          "map50": 97.1,
+          "map5095": 73.0
+        },
+        "yolov8n_densenet121_sppf": {
+          "precision": 97.0,
+          "recall": 95.8,
+          "map50": 97.7,
+          "map5095": 80.5
+        }
+      }
+    },
+    {
+      "id": 7,
+      "name": "Rice__NarrowBrownLeafSpot",
+      "images": 45,
+      "instances": 66,
+      "models": {
+        "yolov8n": {
+          "precision": 71.9,
+          "recall": 69.7,
+          "map50": 73.2,
+          "map5095": 49.5
+        },
+        "yolov8n_densenet121": {
+          "precision": 76.5,
+          "recall": 65.2,
+          "map50": 73.2,
+          "map5095": 48.0
+        },
+        "yolov8n_denselitex_sppf_c2psa": {
+          "precision": 74.5,
+          "recall": 63.6,
+          "map50": 73.0,
+          "map5095": 45.4
+        },
+        "yolov8n_densenet121_c2psa": {
+          "precision": 75.7,
+          "recall": 66.7,
+          "map50": 75.5,
+          "map5095": 48.6
+        },
+        "yolov8n_densenet121_sppf_c2psa": {
+          "precision": 71.2,
+          "recall": 74.2,
+          "map50": 79.0,
+          "map5095": 48.9
+        },
+        "yolov8n_denselitex": {
+          "precision": 77.3,
+          "recall": 60.6,
+          "map50": 70.7,
+          "map5095": 41.7
+        },
+        "yolov8n_denselitex_sppf": {
+          "precision": 73.7,
+          "recall": 62.1,
+          "map50": 70.3,
+          "map5095": 43.3
+        },
+        "yolov8n_denselitex_c2psa": {
+          "precision": 65.6,
+          "recall": 60.6,
+          "map50": 65.0,
+          "map5095": 37.8
+        },
+        "yolov8n_densenet121_sppf": {
+          "precision": 79.5,
+          "recall": 70.4,
+          "map50": 76.1,
+          "map5095": 48.3
+        }
+      }
+    },
+    {
+      "id": 8,
+      "name": "Rice__NeckBlast",
+      "images": 46,
+      "instances": 97,
+      "models": {
+        "yolov8n": {
+          "precision": 87.1,
+          "recall": 83.9,
+          "map50": 87.7,
+          "map5095": 60.0
+        },
+        "yolov8n_densenet121": {
+          "precision": 89.4,
+          "recall": 85.6,
+          "map50": 91.7,
+          "map5095": 60.3
+        },
+        "yolov8n_denselitex_sppf_c2psa": {
+          "precision": 88.0,
+          "recall": 85.6,
+          "map50": 90.7,
+          "map5095": 61.1
+        },
+        "yolov8n_densenet121_c2psa": {
+          "precision": 88.6,
+          "recall": 83.5,
+          "map50": 89.7,
+          "map5095": 58.3
+        },
+        "yolov8n_densenet121_sppf_c2psa": {
+          "precision": 90.2,
+          "recall": 85.1,
+          "map50": 90.5,
+          "map5095": 62.3
+        },
+        "yolov8n_denselitex": {
+          "precision": 86.1,
+          "recall": 84.5,
+          "map50": 86.1,
+          "map5095": 54.7
+        },
+        "yolov8n_denselitex_sppf": {
+          "precision": 88.9,
+          "recall": 86.6,
+          "map50": 91.3,
+          "map5095": 61.9
+        },
+        "yolov8n_denselitex_c2psa": {
+          "precision": 78.5,
+          "recall": 84.5,
+          "map50": 86.7,
+          "map5095": 52.2
+        },
+        "yolov8n_densenet121_sppf": {
+          "precision": 93.0,
+          "recall": 83.5,
+          "map50": 90.1,
+          "map5095": 61.0
+        }
+      }
+    }
+  ]
+}

results.json

@@ -1,210 +1,225 @@
-{
-  "context": {
-    "source": "Test-set evaluation results from my paddy disease detection experiments.",
-    "images": 803,
-    "objects": 2466,
-    "classes": 9,
-    "runs": "Each model was evaluated using one experimental run.",
-    "flops_note": "GFLOPs are taken from the model summaries.",
-    "selection_note": "The charts summarize performance on the held-out test set. They do not represent the performance on an individually uploaded image.",
-    "model_evaluations": {
-      "yolov8n_densenet121": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_densenet121_fs",
-        "source_screenshot": "image(20261011-154943).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      },
-      "yolov8n_denselitex_sppf_c2psa": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_denselitex_sppf_c2psa_fs",
-        "source_screenshot": "image(20261011-155020).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      },
-      "yolov8n_denselitex": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_denselitex_fs",
-        "source_screenshot": "image(20261011-155244).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      },
-      "yolov8n_denselitex_sppf": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_denselitex_sppf_fs",
-        "source_screenshot": "image(20261011-155432).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      },
-      "yolov8n_denselitex_c2psa": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_denselitex_c2psa_fs",
-        "source_screenshot": "image(20261011-155504).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      },
-      "yolov8n_densenet121_sppf": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_densenet121_sppf_fs",
-        "source_screenshot": "image(20261011-155804).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      },
-      "yolov8n_densenet121_c2psa": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_densenet121_c2psa_fs",
-        "source_screenshot": "image(20261011-155818).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      },
-      "yolov8n_densenet121_sppf_c2psa": {
-        "c2f_repeats": 1,
-        "split": "test",
-        "run_name": "yolov8n_densenet121_sppf_c2psa_fs",
-        "source_screenshot": "image(20261011-160157).png",
-        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
-        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
-        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
-      }
-    },
-    "last_results_update": "c2f1-results-20261012-batch2"
-  },
-  "main": [
-    {
-      "id": "yolov8n",
-      "label": "YOLOv8n",
-      "role": "Baseline 1",
-      "precision": 83.68,
-      "recall": 76.61,
-      "map50": 80.79,
-      "map5095": 54.66,
-      "parameters": 3007403,
-      "gflops": 8.1,
-      "color": "#4277ef"
-    },
-    {
-      "id": "yolov8n_densenet121",
-      "label": "Yolov8n_DenseNet121",
-      "role": "Baseline 2",
-      "precision": 84.71,
-      "recall": 74.79,
-      "map50": 80.69,
-      "map5095": 56.08,
-      "parameters": 9002123,
-      "gflops": 51.8,
-      "color": "#8265d5"
-    },
-    {
-      "id": "yolov8n_denselitex_sppf_c2psa",
-      "label": "DenseLiteX + SPPF + C2PSA",
-      "role": "Proposed",
-      "precision": 83.29,
-      "recall": 75.67,
-      "map50": 81.67,
-      "map5095": 55.83,
-      "parameters": 2879917,
-      "gflops": 14.2,
-      "color": "#129a70"
-    }
-  ],
-  "ablation": [
-    {
-      "id": "yolov8n_densenet121_sppf",
-      "label": "Yolov8n_DenseNet121 + SPPF",
-      "role": "Ablation",
-      "precision": 85.46,
-      "recall": 77.8,
-      "map50": 81.92,
-      "map5095": 57.18,
-      "parameters": 9166347,
-      "gflops": 51.9,
-      "color": "#8265d5"
-    },
-    {
-      "id": "yolov8n_densenet121_c2psa",
-      "label": "Yolov8n_DenseNet121 + C2PSA",
-      "role": "Ablation",
-      "precision": 87.19,
-      "recall": 76.51,
-      "map50": 82.55,
-      "map5095": 57.75,
-      "parameters": 9250443,
-      "gflops": 52.0,
-      "color": "#597bc8"
-    },
-    {
-      "id": "yolov8n_densenet121_sppf_c2psa",
-      "label": "Yolov8n_DenseNet121 + SPPF + C2PSA",
-      "role": "Ablation",
-      "precision": 83.81,
-      "recall": 79.01,
-      "map50": 82.25,
-      "map5095": 58.3,
-      "parameters": 9414667,
-      "gflops": 52.1,
-      "color": "#af63b7"
-    },
-    {
-      "id": "yolov8n_denselitex",
-      "label": "DenseLiteX",
-      "role": "Ablation",
-      "precision": 82.67,
-      "recall": 71.84,
-      "map50": 78.82,
-      "map5095": 49.16,
-      "parameters": 2467373,
-      "gflops": 13.9,
-      "color": "#558da5"
-    },
-    {
-      "id": "yolov8n_denselitex_sppf",
-      "label": "DenseLiteX + SPPF",
-      "role": "Ablation",
-      "precision": 83.67,
-      "recall": 73.82,
-      "map50": 79.94,
-      "map5095": 53.92,
-      "parameters": 2631597,
-      "gflops": 14.0,
-      "color": "#e09f43"
-    },
-    {
-      "id": "yolov8n_denselitex_c2psa",
-      "label": "DenseLiteX + C2PSA",
-      "role": "Ablation",
-      "precision": 78.95,
-      "recall": 73.47,
-      "map50": 78.39,
-      "map5095": 50.82,
-      "parameters": 2715693,
-      "gflops": 14.1,
-      "color": "#d36586"
-    },
-    {
-      "id": "yolov8n_denselitex_sppf_c2psa",
-      "label": "DenseLiteX + SPPF + C2PSA",
-      "role": "Proposed",
-      "precision": 83.29,
-      "recall": 75.67,
-      "map50": 81.67,
-      "map5095": 55.83,
-      "parameters": 2879917,
-      "gflops": 14.2,
-      "color": "#129a70"
-    }
-  ]
-}
+{
+  "context": {
+    "source": "Test-set evaluation results from my paddy disease detection experiments.",
+    "images": 803,
+    "objects": 2466,
+    "classes": 9,
+    "runs": "Each model was evaluated using one experimental run.",
+    "flops_note": "GFLOPs are taken from the model summaries.",
+    "selection_note": "The charts summarize performance on the held-out test set. They do not represent the performance on an individually uploaded image.",
+    "model_evaluations": {
+      "yolov8n_densenet121": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_densenet121_fs",
+        "source_screenshot": "image(20261011-154943).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n_denselitex_sppf_c2psa": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_denselitex_sppf_c2psa_fs",
+        "source_screenshot": "image(20261011-155020).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n_denselitex": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_denselitex_fs",
+        "source_screenshot": "image(20261011-155244).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n_denselitex_sppf": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_denselitex_sppf_fs",
+        "source_screenshot": "image(20261011-155432).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n_denselitex_c2psa": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_denselitex_c2psa_fs",
+        "source_screenshot": "image(20261011-155504).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n_densenet121_sppf": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_densenet121_sppf_fs",
+        "source_screenshot": "image(20261011-155804).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n_densenet121_c2psa": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_densenet121_c2psa_fs",
+        "source_screenshot": "image(20261011-155818).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n_densenet121_sppf_c2psa": {
+        "c2f_repeats": 1,
+        "split": "test",
+        "run_name": "yolov8n_densenet121_sppf_c2psa_fs",
+        "source_screenshot": "image(20261011-160157).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the displayed per-class table; rounding follows the screenshot.",
+        "complexity_note": "Parameters and GFLOPs transcribed from the displayed model summary; profiling convention awaits confirmation."
+      },
+      "yolov8n": {
+        "split": "test",
+        "run_name": "yolov8n_fs1",
+        "source_screenshot": "image(20261013-075958).png",
+        "aggregate_precision_note": "Percent metrics transcribed from the four-decimal Evaluation Summary.",
+        "class_precision_note": "Percent metrics transcribed from the three-decimal displayed per-class table.",
+        "complexity_note": "Fused model summary: 3,007,403 parameters and 8.1 GFLOPs.",
+        "training_runtime": {
+          "python": "3.10.20",
+          "ultralytics": "8.4.70",
+          "torch": "2.5.1+cu121",
+          "device": "NVIDIA GeForce RTX 4060 Laptop GPU"
+        }
+      }
+    },
+    "last_results_update": "baseline1-charts-20261013"
+  },
+  "main": [
+    {
+      "id": "yolov8n",
+      "label": "YOLOv8n",
+      "role": "Baseline 1",
+      "precision": 81.24,
+      "recall": 78.45,
+      "map50": 80.94,
+      "map5095": 54.72,
+      "parameters": 3007403,
+      "gflops": 8.1,
+      "color": "#4277ef",
+      "checkpoint": "runs/train/yolov8n/weights/best.pt"
+    },
+    {
+      "id": "yolov8n_densenet121",
+      "label": "Yolov8n_DenseNet121",
+      "role": "Baseline 2",
+      "precision": 84.71,
+      "recall": 74.79,
+      "map50": 80.69,
+      "map5095": 56.08,
+      "parameters": 9002123,
+      "gflops": 51.8,
+      "color": "#8265d5"
+    },
+    {
+      "id": "yolov8n_denselitex_sppf_c2psa",
+      "label": "DenseLiteX + SPPF + C2PSA",
+      "role": "Proposed",
+      "precision": 83.29,
+      "recall": 75.67,
+      "map50": 81.67,
+      "map5095": 55.83,
+      "parameters": 2879917,
+      "gflops": 14.2,
+      "color": "#129a70"
+    }
+  ],
+  "ablation": [
+    {
+      "id": "yolov8n_densenet121_sppf",
+      "label": "Yolov8n_DenseNet121 + SPPF",
+      "role": "Ablation",
+      "precision": 85.46,
+      "recall": 77.8,
+      "map50": 81.92,
+      "map5095": 57.18,
+      "parameters": 9166347,
+      "gflops": 51.9,
+      "color": "#8265d5"
+    },
+    {
+      "id": "yolov8n_densenet121_c2psa",
+      "label": "Yolov8n_DenseNet121 + C2PSA",
+      "role": "Ablation",
+      "precision": 87.19,
+      "recall": 76.51,
+      "map50": 82.55,
+      "map5095": 57.75,
+      "parameters": 9250443,
+      "gflops": 52.0,
+      "color": "#597bc8"
+    },
+    {
+      "id": "yolov8n_densenet121_sppf_c2psa",
+      "label": "Yolov8n_DenseNet121 + SPPF + C2PSA",
+      "role": "Ablation",
+      "precision": 83.81,
+      "recall": 79.01,
+      "map50": 82.25,
+      "map5095": 58.3,
+      "parameters": 9414667,
+      "gflops": 52.1,
+      "color": "#af63b7"
+    },
+    {
+      "id": "yolov8n_denselitex",
+      "label": "DenseLiteX",
+      "role": "Ablation",
+      "precision": 82.67,
+      "recall": 71.84,
+      "map50": 78.82,
+      "map5095": 49.16,
+      "parameters": 2467373,
+      "gflops": 13.9,
+      "color": "#558da5"
+    },
+    {
+      "id": "yolov8n_denselitex_sppf",
+      "label": "DenseLiteX + SPPF",
+      "role": "Ablation",
+      "precision": 83.67,
+      "recall": 73.82,
+      "map50": 79.94,
+      "map5095": 53.92,
+      "parameters": 2631597,
+      "gflops": 14.0,
+      "color": "#e09f43"
+    },
+    {
+      "id": "yolov8n_denselitex_c2psa",
+      "label": "DenseLiteX + C2PSA",
+      "role": "Ablation",
+      "precision": 78.95,
+      "recall": 73.47,
+      "map50": 78.39,
+      "map5095": 50.82,
+      "parameters": 2715693,
+      "gflops": 14.1,
+      "color": "#d36586"
+    },
+    {
+      "id": "yolov8n_denselitex_sppf_c2psa",
+      "label": "DenseLiteX + SPPF + C2PSA",
+      "role": "Proposed",
+      "precision": 83.29,
+      "recall": 75.67,
+      "map50": 81.67,
+      "map5095": 55.83,
+      "parameters": 2879917,
+      "gflops": 14.2,
+      "color": "#129a70"
+    }
+  ]
+}