JavaScript 2.3 – Regression

Vanaf hier gaan we er van uit dat je ervaring hebt met het trainen en downloaden van Neural Network models uit een trainer. In deze lessen leer je hoe je een getraind ml5.js model inlaadt in JavaScript, en via een formulier een nieuwe voorspelling maakt.

Een getraind model inladen

Om te beginnen hebben we een aantal dingen nodig:

Allereerst start je natuurlijk een nieuw project volgens de checklist die we hier hebben gegeven: HTML Checklist.
index.html hoef je niet te verbinden met script.js, deze pagina heeft geen JavaScript.
Ten tweede hebben we een getraind model nodig. Voor dit voorbeeld hebben we Pulse.csv als dataset gebruikt en getraind met cmd.camp/nntrainer. De instellingen die gebruikt zijn om te trainen:
TRAINING TYPE —
      Regression
INPUTS —
      Gender (man of vrouw, 0 of 1)
      Smoke (rookt of niet, 0 of 1)
      Hgt (lengte in inches)
      Exercise (hoeveel uren sport per week)
      Rest (hartslag in rust)
      Wgt (voorspelde gewicht in pond)
OUTPUT —
      Active (hartslag na activiteit)

Het getrainde model kun je hier downloaden: model

De 3 bestanden plaatsen we in een map genaamd model.
Die map in je op de volgende manier in je project:

Let op de exacte bestandsnamen
Daarna bouwen we een form in index.html (uiteraard tussen de body tags) zodat we nieuwe data kunnen invoeren.
```
    <form action="prediction.html" method="GET">

    </form>
```
Je ziet dat we in de tag verwijzen naar “prediction.html“. Maak dat bestand nu in je projectfolder.
Nu gaan we in het formulier een element maken voor elke input die we gebruikt hebben om het Neural Network te trainen: Hgt, Wgt, Rest, Gender, Smoke, Exercise. We gebruiken een tekstveld voor de eerste drie:
```
    lengte: <input type="number" name="height"><br>
    gewicht: <input type="number" name="weight"><br>
    hartslag in rust: <input type="number" name="rest"><br>
```
N.B.: Deze elementen plaats je tussen je form tags zoals uitgelegd in de vorige les.

Voor de ‘0 of 1’ vragen gebruiken we radio inputs:

    geslacht: 
    <input type="radio" name="gender" value="0" checked>Man
    <input type="radio" name="gender" value="1">Vrouw
    Rook je: 
    <input type="radio" name="smoke" value="0" checked>Ja
    <input type="radio" name="smoke" value="1">Nee

Als voorbeeld gebruiken we een select menu voor het laatste veld:

    Hoeveel uur sport je per week?
    <select name="exercise">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>

En tot slot een submit button die de waarden naar de volgende pagina zal sturen:
```
    <input type="submit" value="Verstuur">
```

We zijn nu klaar met index.html.

prediction.html

In stap 4 heb je een bestand gemaakt genaamd prediction.html, laten we daar nu heen gaan en de standaard inhoud geven zoals beschreven in HTML Checklist. Nu zou prediction.html een head, een body, meta tags, een link naar style.css en een verbinding met script.js moeten hebben.
Vergeet de verbinding met script.js niet!
Nu gaan we de verbinding maken met de ml5 library door ml5.min.js (rechtsklik, opslaan als…) op te slaan in je map en dit in de head van prediction.html te plakken:
```
<script src="ml5.min.js"></script>
```
Deze regel koppelt de laatste versie van ml5 aan je site. Dit is de Machine Learning engine die de daadwerkelijke predicties gaat doen. Wij maken simpelweg een interface hiervoor zodat we onze eigen getrainde dataset ermee kunnen gebruiken.

We zijn klaar met prediction.html en gaan nu aan de slag met het script.

script.js

De volgende instructies zijn voor script.js. Het zou moeten beginnen met een leeg bestand.

Binnen ons script.js bestand gaan we eerst de waarden van de vorige pagina ophalen en ze in de console posten om er zeker van te zijn dat dit stukje code werkt. Begin met het opslaan van de gegevens die je ontvangt van index.html in een variabele genaamd parameters
```
var parameters = new URLSearchParams(window.location.search);
```
Nu gaan we alle parameters verzamelen in een lijst die we inputs gaan noemen. Wat belangrijk is dat in het begin van elke zin we exact de naam gebruiken van een feature in de dataset (bijv. Hgt) en aan het eind van elke zin de name van een formulierelement uit html (bijv. height).
```
var inputs = {
    Rest: parseInt(parameters.get("rest")),
    Smoke: parseInt(parameters.get("smoke")),
    Gender: parseInt(parameters.get("gender")),
    Exercise: parseInt(parameters.get("exercise")),
    Hgt: parseInt(parameters.get("height")),
    Wgt: parseInt(parameters.get("weight"))
};
```
Hier zijn voor elk veld twee functies aan het werk: Zoals je in de vorige les geleerd hebt, haalt parameters.get() een specifieke parameter uit de URL, op basis van de naam van het formulierelement. Bijvoorbeeld parameters.get("height") zoekt naar de waarde van het formulierelement met de naam ‘height’.
De tweede functie is parseInt(), die er voor zorgt dat de waarde die het formulier stuurt wordt gezien als een integer (een heel getal) en niet als tekst. ml5.js is erg specifiek als het gaat om nummers en text.

Kijk dus altijd in je dataset naar welk datatype je features hebben.
```
// voor hele getallen: 0, 1, 12345
parseInt(parameters.get("elementnaam")),

// getallen met een punt: 0.5, 123.45
parseFloat(parameters.get("elementnaam")),

// tekst: geen 'parse' nodig
parameters.get("elementnaam"),
```
Als we de inputs variable in de console tonen zouden we alle elementen moeten zien die in het formulier zijn verstuurd vanuit onze eerste pagina.
```
    console.log(inputs);
```
Je zou nu alle waarden in de console log moeten zien zoals hier:

Nu gaan we de prediction-engine instellen en ons getrainde model laden:

var options = {
    type: "regression"
};

var modelDetails = {
    model: "model/model.json",
    metadata: "model/model_meta.json",
    weights: "model/model.weights.bin"
};

Nu maken we een neuralNetwork met de options die we eerder hebben aangegeven:
```
var neuralNetwork = ml5.neuralNetwork(options);
```
Voordat we een voorspelling kunnen gaan maken, moeten we de functie definiëren die wordt gestart wanneer de voorspelling is gedaan.
We noemen deze functie: predict().
Voorlopig willen we alleen het resultaat van de voorspelling in de console zien, maar normaliter bevat deze functie alle instructies die te maken hebben met het uiterlijk en de inhoud van de pagina na de voorspelling.
```
function predict(){
    neuralNetwork.predict(inputs, function (err, results) {
        if(err){
            console.log(err);
            return;
        }

        var result = results[0];
        // We hebben een voorspelling
        console.log(result);
    })
}
```
Tot slot vertellen we neuralNetwork dat het model geladen en de voorspelling gestart moet worden:
```
neuralNetwork.load(modelDetails, predict);
```
In de console zie je nu dat er een nieuwe Active voorspeld wordt op basis van jouw inputs.

Bovenstaande code hoort bij een regression voorspelling. In de volgende les leer je hoe je een voorspelling op basis van classification doet. In de laatste les leer je de uitkomst van een voorspelling te gebruiken om de inhoud en opmaak van je pagina aan te passen.