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

<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.

<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>

4. Aggiungere il CSS per Personalizzare lo Stile

Per migliorare l’aspetto della sezione, aggiungi questo codice nel tuo file stile.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.

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:

Esempio di utilizzo

<p> 
    La classe predetta è <span class="predicted-class"></span>
    con un'accuratezza del <span class="accuracy"></span>%
</p>

Scarica file di esempio

• File Index HTML
• File CSS di stile
• File JS con la logica