Teachable Machine en JS

Trainen

1. Ga naar teachablemachine.withgoogle.com en klik op ‘Get Started’

2. Kies een Image, Audio of Pose project.
   Voor een Image Project klik je vervolgens op Standard image model

3. Train verschillende classes.
   Hoe meer Samples, hoe beter je training wordt, maar hoe langer het trainen duurt. Tip: probeer het eerst met een paar samples (rond de 20) en voeg alleen toe als het nodig blijkt na testen.

4. Heb je genoeg samples voor elke class? Klik dan op Train Model.

5. Na het trainen kun je het resultaat testen.
   Ben je tevreden? Ga dan door naar stap 6. Zo niet, bedenk dan eerst waarom de AI moeite zou kunnen hebben met jullie idee, en pas daarop je classes aan.

Exporteren

6. Klik op Export Model

7. Kies voor Tensorflow.js en Upload my model. Wacht tot het uploaden klaar is en kopieer dan de code.
   

8. Maak op je computer een nieuwe lege map. Open deze map in je code editor (zoals Visual Studio Code) en maak in deze map een index.html bestand. Plak hier de code.

9. Open index.html met de Live Server
   

10. Als je nu in de browser op Start klikt zou je (na even wachten) een werkende demo moeten zien.

11. Deze stap is verschillend voor een Image, Audio of Pose project:

    Image Project
    Zoek in index.html de predict() functie op. Daar zie je als het goed is de volgende regel:

    const prediction = await model.predict(webcam.canvas);
    

    Maak direct onder die regel wat ruimte door een paar keer op enter te drukken. Plak daar de volgende code:

    // bereken de probability van de eerste class (class 0)
    // wil je een andere class gebruiken, verander dan de 0 in de regel hieronder
    var probability = prediction[0].probability.toFixed(2);
    

    Audio Project
    Zoek in index.html de volgende regel (waarschijnlijk regel 44):

    const scores = result.scores; // probability of prediction for each class
    

    Maak direct onder die regel wat ruimte door een paar keer op enter te drukken. Plak daar de volgende code:

    // bereken de probability van de eerste class (class 0)
    // wil je een andere class gebruiken, verander dan de 0 in de regel hieronder
    var probability = scores[0].toFixed(2);
    

    Pose Project
    Zoek in index.html de predict() functie op. Daar zie je als het goed is de volgende regel:

    const prediction = await model.predict(posenetOutput);
    

    Maak direct onder die regel wat ruimte door een paar keer op enter te drukken. Plak daar de volgende code:

    // bereken de probability van de eerste class (class 0)
    // wil je een andere class gebruiken, verander dan de 0 in de regel hieronder
    var probability = prediction[0].probability.toFixed(2);
    

De laatste stap

15. In dit voorbeeld gaan we de achtergrondkleur van de pagina aanpassen op basis van de waarschijnlijkheid (probability) van de eerste class. Als de eerste class een probability heeft van minder dan 0.8, maken we de achtergrondkleur van de pagina rood, en anders groen.
    Plak deze code direct achter de code die je net geplakt hebt:

    // pas de CSS van de pagina aan, aan de hand van de probability
    if (probability < 0.8) {
        document.body.style.backgroundColor = 'red';
    } else {
        document.body.style.backgroundColor = 'green';
    }
    

    Natuurlijk kun jij dit zo aanpassen als je zelf wilt. Gebruik je kennis van HTML en CSS om hier iets creatiefs te doen!
    
    Video credits: @lizziepika