Questo sito utilizza cookie per raccogliere dati statistici.
Privacy Policy
### Introduzione
Questa guida ti aiuterà a integrare un modello di **Teachable Machine** per classificare immagini nel tuo sito web. Seguiremo una struttura chiara e modulare, permettendoti di personalizzare facilmente il codice.
## **1. Strutturare il Codice**
Il codice è suddiviso in tre parti principali:
- **HTML**: Struttura della pagina web
- **CSS**: Stile della pagina
- **JavaScript**: Logica per caricare il modello e classificare le immagini
Potrai **integrare questi blocchi** nel tuo sito senza dover riscrivere tutto da zero.
---
## **2. Inserire il Codice HTML nella Tua Pagina**
Per aggiungere il sistema di classificazione al tuo sito, devi copiare e incollare il seguente codice HTML all'interno della tua pagina.
### **Dove inserirlo nel tuo sito?**
- Se hai già una **pagina dedicata alle immagini**, incolla questo codice all'interno della sezione `<main>` o in una `<section>` esistente.
- Se vuoi una **nuova sezione** per la classificazione, incollalo dove desideri nel tuo HTML.
### **Codice HTML**
```html
<section class="container">
<h2>Carica un'immagine per la classificazione</h2>
<input type="file" id="imageUpload" accept="image/*">
<br>
<img id="imagePreview" style="height: 300px; display: none;" />
<br>
<div id="result-container">
<div id="class-1" class="result-box" style="display: none;">
<h3>Questa immagine appartiene alla Classe <span class="predicted-class"></span></h3>
<p>Precisione: <span class="accuracy"></span>%</p>
</div>
<div id="class-2" class="result-box" style="display: none;">
<h3>Questa immagine appartiene alla Classe <span class="predicted-class"></span></h3>
<p>Precisione: <span class="accuracy"></span>%</p>
</div>
</div>
</section>
```
📌 **Nota:** Questo codice crea una sezione con un **campo per il caricamento dell'immagine**, un'**anteprima dell'immagine** e **due blocchi di risultato** per mostrare la classificazione.
---
## **3. Collegare il Modello e gli Script JavaScript**
Dopo aver aggiunto la sezione HTML, devi collegare il modello di Machine Learning e il file JavaScript.
### **Dove inserirlo?**
Copia e incolla questo codice prima della chiusura di `</body>` nel tuo file HTML.
```html
<script>
const URL = 'https://teachablemachine.withgoogle.com/models/BSHtIwvoT/';
const CLASSI = {
'class-1': 'Baseball',
'class-2': 'Hockey'
};
</script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
<script src="script.js"></script>
```
<im>
📌 **Nota:** Assicurati di salvare il file **`script.js`** nella stessa cartella del tuo file HTML.
📌 **Nota:** Compila il campo **`URL`** inserendo l'url del tuo modello di classificazione.
📌 **Nota:** Compila il campo **`CLASSI`** inserendo a destra dei due punti i nomi delle classi che andrai a predire.
</im>
---
## **4. Aggiungere il CSS per Personalizzare lo Stile**
Per migliorare l'aspetto della sezione, aggiungi questo codice nel tuo file **`stile.css`**.
```css
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
.container {
max-width: 500px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #f9f9f9;
}
.result-box {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
font-weight: bold;
}
#class-1 {
background-color: #D4EDDA;
color: #155724;
}
#class-2 {
background-color: #F8D7DA;
color: #721C24;
}
```
---
## **5. Creare il File `script.js` e Aggiungere la Logica**
Ora crea un file chiamato **`script.js`** e incolla questo codice.
```js
let model, maxPredictions;
async function init() {
model = await tmImage.load(URL + 'model.json', URL + 'metadata.json');
maxPredictions = model.getTotalClasses();
}
async function predict() {
const image = document.getElementById('imagePreview');
const prediction = await model.predict(image, false);
prediction.sort((a, b) => b.probability - a.probability);
const bestResult = prediction[0];
Object.keys(CLASSI).forEach(key => {
document.getElementById(key).style.display = 'none';
});
let selectedClass = Object.keys(CLASSI).find(key => CLASSI[key] === bestResult.className);
if (selectedClass) {
document.getElementById(selectedClass).style.display = 'block';
document.querySelector(`#${selectedClass} .accuracy`).textContent = (bestResult.probability * 100).toFixed(2);
document.querySelector(`#${selectedClass} .predicted-class`).textContent = bestResult.className;
}
}
function readImageAndPredict(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
const imgElement = document.getElementById('imagePreview');
imgElement.src = e.target.result;
imgElement.style.display = 'block';
init().then(() => {
predict();
});
};
reader.readAsDataURL(input.files[0]);
}
}
document.getElementById('imageUpload').addEventListener('change', function () {
readImageAndPredict(this);
});
```
---
## **6. Elenco dei Segnaposti e Come Usarli**
Questi segnaposti ti permettono di personalizzare la tua pagina:
| Segnaposto | Funzione |
|------------------|----------|
| `id="imageUpload"` | Input per il caricamento delle immagini |
| `id="imagePreview"` | Visualizzazione dell'immagine caricata |
| `class="accuracy"` | Mostra la percentuale di accuratezza |
| `class="predicted-class"` | Nome della classe predetta |
| `id="class-1"` / `id="class-2"` | Sezioni per mostrare i risultati |
### Esempio di utilizzo
```html
<p>
La classe predetta è <span class="predicted-class"></span>
con un'accuratezza del <span class="accuracy"></span>%
</p>
```
## Scarica file di esempio
- <a href="/resources/teachable-machine//imgs/index.html" download> File Index HTML </a>
- <a href="/resources/teachable-machine//imgs/style.css" download> File CSS di stile </a>
- <a href="/resources/teachable-machine//imgs/script.js" download> File JS con la logica </a>