Hugging Face's logo

Spaces:
Adrien653
/
beans-classifier
Running

App Files Community
beans-classifier
File size: 2,199 Bytes
dc726cc
 
8e265fd
dc726cc
 
8e265fd
 
dc726cc
 
 
 
8e265fd
dc726cc
 
 
 
 
 
8e265fd
dc726cc
 
 
 
 
8e265fd
dc726cc
 
 
 
 
 
 
8e265fd
 
 
dc726cc
8e265fd
dc726cc
4cf4436
dc726cc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8e265fd
ce995d1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!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>