index.html

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bean Leaf Classifier — ViT</title>
<style>
  :root {
    --bg: #fbfbfa; --card: #fff; --fg: #1a1a19; --muted: #6b6b68;
    --line: #e4e4e1; --accent: #2f6f4e; --bar-bg: #f0f0ee;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #191918; --card: #222221; --fg: #ececea; --muted: #9a9a96;
      --line: #33332f; --accent: #6bbb8e; --bar-bg: #2c2c2a;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; padding: 2rem 1rem; background: var(--bg); color: var(--fg);
    font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  .wrap { max-width: 640px; margin: 0 auto; }
  h1 { font-size: 1.4rem; margin: 0 0 .3rem; letter-spacing: -.01em; }
  .sub { color: var(--muted); margin: 0 0 1.5rem; font-size: .92rem; }
  .card {
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: 1.1rem; margin-bottom: 1rem;
  }
  .drop {
    border: 1.5px dashed var(--line); border-radius: 9px; padding: 1.6rem 1rem;
    text-align: center; color: var(--muted); cursor: pointer; font-size: .92rem;
    transition: border-color .15s, color .15s;
  }
  .drop:hover, .drop.over { border-color: var(--accent); color: var(--fg); }
  .drop input { display: none; }
  #preview { display: none; max-width: 100%; max-height: 260px; border-radius: 8px;
             margin: .9rem auto 0; }
  .status { color: var(--muted); font-size: .87rem; min-height: 1.3em; margin: .8rem 0 0; }
  .bar-row { margin: .6rem 0; }
  .bar-top { display: flex; justify-content: space-between; font-size: .87rem; margin-bottom: .25rem; }
  .bar { height: 7px; background: var(--bar-bg); border-radius: 4px; overflow: hidden; }
  .bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px;
              transition: width .25s ease; }
  .meta { font-size: .82rem; color: var(--muted); border-top: 1px solid var(--line);
          padding-top: .9rem; margin-top: .3rem; }
  .meta a { color: inherit; }
  code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
  table { width: 100%; border-collapse: collapse; font-size: .87rem; margin-top: .4rem; }
  td { padding: .22rem 0; color: var(--muted); }
  td:first-child { color: var(--fg); font-family: ui-monospace, Menlo, monospace; width: 42%; }
</style>
</head>
<body>
<div class="wrap">
  <h1>Bean Leaf Classifier — ViT</h1>
  <p class="sub">
    Vision Transformer fine-tuné sur le dataset <code>beans</code> —
    accuracy sur le test : <b>96.09%</b>.
    Déposez une photo de feuille de haricot.
  </p>

  <div class="card">
    <label class="drop" id="drop">
      <input type="file" id="file" accept="image/*">
      Cliquez ou déposez une image ici
    </label>
    <img id="preview" alt="aperçu">
    <p class="status" id="status">Chargement du modèle…</p>
    <div id="out"></div>
  </div>

  <div class="card">
    <b style="font-size:.92rem">Les trois classes</b>
    <table>
      <tr><td>angular_leaf_spot</td><td>tache angulaire</td></tr>
      <tr><td>bean_rust</td><td>rouille du haricot</td></tr>
      <tr><td>healthy</td><td>feuille saine</td></tr>
    </table>
  </div>

  <p class="meta">
    L'inférence tourne <b>dans votre navigateur</b> (transformers.js + ONNX quantifié int8),
    aucune image n'est envoyée à un serveur.<br>
    Modèle : <a href="https://huggingface.co/Den953/vit-beans-demo">Den953/vit-beans-demo</a> ·
    Images d'exemple : <a href="https://huggingface.co/datasets/AI-Lab-Makerere/beans/viewer">dataset beans</a> ·
    Cours MLOps M2 — lab Hugging Face.
  </p>
</div>

<script type="module">
import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3';
env.allowLocalModels = false;

const $ = (id) => document.getElementById(id);
const status = $('status'), out = $('out'), drop = $('drop'),
      file = $('file'), preview = $('preview');
let pipe = null;

function render(preds) {
  out.innerHTML = preds.map(p => {
    const pct = (p.score * 100).toFixed(1);
    return `<div class="bar-row">
      <div class="bar-top"><span>${p.label}</span><span>${pct} %</span></div>
      <div class="bar"><span style="width:${pct}%"></span></div>
    </div>`;
  }).join('');
}

// Ecouteurs poses AVANT le chargement : la page reste utilisable pendant
// le telechargement, classify() garde le modele sous garde.
file.addEventListener('change', () => { if (file.files[0]) classify(file.files[0]); });
['dragenter', 'dragover'].forEach(ev =>
  drop.addEventListener(ev, (e) => { e.preventDefault(); drop.classList.add('over'); }));
['dragleave', 'drop'].forEach(ev =>
  drop.addEventListener(ev, (e) => { e.preventDefault(); drop.classList.remove('over'); }));
drop.addEventListener('drop', (e) => {
  const f = e.dataTransfer.files[0];
  if (f && f.type.startsWith('image/')) classify(f);
});

try {
  pipe = await pipeline('image-classification', 'Den953/vit-beans-demo', {
    dtype: 'q8',
    progress_callback: (p) => {
      if (p.status === 'progress' && p.file && p.file.includes('onnx')) {
        status.textContent = `Téléchargement du modèle… ${Math.round(p.progress)} %`;
      }
    },
  });
  status.textContent = 'Modèle prêt — déposez une image.';
} catch (e) {
  status.textContent = 'Échec du chargement : ' + e.message;
  console.error(e);
}

async function classify(blob) {
  if (!pipe) { status.textContent = 'Modèle pas encore prêt.'; return; }
  const url = URL.createObjectURL(blob);
  preview.src = url; preview.style.display = 'block';
  status.textContent = 'Analyse…'; out.innerHTML = '';
  try {
    const res = await pipe(url, { top_k: 3 });
    render(res);
    status.textContent = '';
  } catch (e) {
    status.textContent = 'Erreur : ' + e.message;
    console.error(e);
  }
}

</script>
</body>
</html>