index.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Bean Leaf Classifier (ViT)</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 640px;
      margin: 40px auto;
      padding: 0 16px;
    }

    img {
      max-width: 100%;
      max-height: 320px;
      display: block;
      margin: 12px 0;
    }

    .bar {
      background: #eee;
      border-radius: 4px;
      margin: 6px 0;
    }

    .fill {
      background: #4caf50;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      white-space: nowrap;
    }
  </style>
</head>

<body>

<h1>Bean Leaf Classifier (ViT)</h1>

<p>
  Vision Transformer fine-tuné sur le dataset
  <code>beans</code>.
  L'inférence est exécutée directement dans le navigateur
  avec ONNX et Transformers.js.
</p>

<input type="file" id="file" accept="image/*" disabled>

<img id="preview" hidden>

<div id="result">
  Chargement du modèle...
</div>

<script type="module">

import { pipeline }
from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1";

const result = document.getElementById("result");
const file = document.getElementById("file");
const preview = document.getElementById("preview");

try {

  const classifier = await pipeline(
    "image-classification",
    "Adrien653/vit-beans-classifie",
    { dtype: "fp32" }
  );

  result.textContent =
    "Modèle chargé. Choisissez une image.";

  file.disabled = false;

  file.onchange = async () => {

    const selectedFile = file.files[0];

    if (!selectedFile) return;

    const url = URL.createObjectURL(selectedFile);

    preview.src = url;
    preview.hidden = false;

    result.textContent = "Analyse en cours...";

    const predictions =
      await classifier(url, { top_k: 3 });

    result.innerHTML = predictions.map(p =>

      `<div class="bar">
        <div class="fill"
          style="width:${Math.max(8, p.score * 100)}%">
          ${p.label} :
          ${(p.score * 100).toFixed(1)} %
        </div>
      </div>`

    ).join("");

  };

}
catch (error) {

  console.error(error);

  result.textContent =
    "Erreur pendant le chargement : " + error.message;

}

</script>

</body>
</html>