JavaScript 2.5 – Voorspellingen tonen

Het resultaat van de voorspelling tonen op je website

We gaan leren hoe we het resultaat van de voorspelling kunnen gebruiken en op verschillende manieren op onze website kunnen presenteren.

Laten we beginnen met een voorbeeld.

Download dit template:les5-template
Hiermee kunnen we een Body Mass Index (BMI) te voorspellen op basis van geslacht, gewicht en lengte. Het resultaat is het indexcijfer van 0 tot 5.

    0 : extremely underweight
    1 : underweight
    2 : normal
    3 : overweight
    4 : pre-obese
    5 : obese

Start index.html met de live server, en typ waarden voor Geslacht, Lengte en Gewicht in. ‘Submit’ vervolgens het formulier en controleer de console in de Chrome-browser.(Ctr+Shift+I)
Het resultaat ziet er ongeveer zo uit:

Let op het label, waar de BMI in staat.
Dit is wat we moeten onthouden om het resultaat op een webpagina te laten zien.
Laten we beslissen waar we het voorspellingsresultaat willen tonen op opnze pagina. Als je in prediction.html kijkt, zie je een <p>-tag met als id “bmi”.
```
<p>Your Body Mass Index is</p> 
<p id="bmi"></p>
```
Om deze <p> te gebruiken in JavaScript, moeten we uiteraard beginnen met een koppeling maken via document.querySelector. Typ dit bovenaan het javascript-bestand:
```
var bmiVakje = document.querySelector("#bmi");
```

Het resultaat

We hebben eerder gezien dat zowel voor regression als voor classification de beste voorspelling van het neural network wordt opgeslagen in result. In je predict() functie kun je dus altijd verwijzen naar je voorspelling met result. Wat je er vervolgens mee doet is afhankelijk van het soort voorspelling:

Regression

result.label // de naam van de output feature
result.value // de voorspelde waarde

Classification

result.label // de voorspelde classificatie
result.confidence // de zekerheid van de voorspelling (tussen 0 en 1)

Het voorbeeld waar we op deze pagina mee werken is een classification voorspelling. Als we de voorspelde BMI dus op de pagina willen zien doen we:
```
bmiVakje.innerHTML = result.label;
```
Als je de ‘confidence’ dus op de pagina zou willen laten zien, zou je zeggen:
```
bmiVakje.innerHTML = result.confidence
```
Het is goed om bij jezelf te controleren of je het bovenstaande echt snapt, voordat je doorgaat met de rest van de les
Vul in je formulier een aantal verschillende waarden in, om te kijken of er elke keer een andere label getoond wordt in prediction.html

Opdracht 1. De achtergrondkleur veranderen met het resultaat

Gebruik de label waarde van het voorspellingsresultaat en verander de achtergrondkleur van de prediction.html-pagina.
```
Als de labelwaarde 0 is, is de achtergrondkleur Rood.
Zoniet dan als de labelwaarde 1, is de kleur Geel.
Zoniet dan als de labelwaarde 2, is de kleur Groen.
Zoniet dan als de labelwaarde 3, is de kleur Groen.
Zoniet dan als de labelwaarde 4, is de kleur Geel.
Zoniet dan als de labelwaarde 5, is de kleur Rood.
```
- Hint 1: Doe dit altijd in de predict() functie, alleen daar is de voorspelling beschikbaar.
- Hint 2: Lees hier hoe je in JavaScript de achtergrondkleur van je pagina aanpast.
- Hint 2: if-statement is de sleutel. Als je niet meer weet hoe je het moet gebruiken, bekijk het dan hier.

Opdracht 2. Tekst toevoegen

Laten we wat meer uitleg toevoegen over wat deze label -waarde betekent.

Probeer deze tekst op de prediction.html-pagina te tonen, afhankelijk van de labelwaarden. Als de labelwaarde
0 is, dan ‘You might be Extremely underweight.”
1 is, dan ‘You might be Underweight.”
2 is, dan ‘You might have a Normal weight.”
3 is, dan ‘You might be Overweight.”
4 is, dan ‘You might be Pre-obese.”
5 is, dan ‘You might be Obese.”

Bedenk dat er in elke zin ‘You might’ voorkomt. Probeer alleen het laatste deel van de zin via JavaScript toe te voegen.

Opdracht 3. Illustreer de waarde met een grafiek

Laten we een grafiekje toevoegen (zoals de afbeelding bovenaan deze pagina). Afhankelijk van de resultaatwaarde wordt het oranje balkje groter of kleiner.

Om zo’n grafiekje te maken, hebben we twee div’s nodig in het prediction.html-bestand.
```
<div id="sliderBox">
  <div id="slider">slider</div>
</div>
```
‘sliderBox‘ is de buitenste div met de zwarte rand en ‘slider‘ is het oranje balkje.
Koppel style.css aan prediction.html. De stijl voor deze divs is al gedefinieerd. Zie de breedte voor de sliderBox.
```
 #sliderBox{
    position:relative;
    border: 3px solid black;
    margin: auto;
    width: 504px;
    height:56px;
}
```
Dit (504px) is de maximale grootte voor de slider. Aangezien we in totaal 6 nummers (0 ~ 5) hebben voor de BMI-waarde, willen we dat elk nummer 100 px aan de breedte de schuifregelaar toevoegt, plus 4 px voor de rand.
Als de BMI bijvoorbeeld 2 is, moet de breedte van de slider 200 px worden. Als de BMI 5 is, moet de breedte van de slider 500 px worden.
Nu gaan we in je script.js-bestand de BMI-waarde gebruiken om de breedte van de slider te regelen. Roep bovenaan het script de slider op met behulp van de id ‘#slider’
```
var slider = document.querySelector("#slider");
```
In de predict() functie gaan we de breedte (width) van die slider vervolgens gelijk maken aan het label (0-5) keer 100. Daarachter plakken we de letters “px” zodat de browser snapt dat het om pixels gaat.
```
slider.style.width = result.label * 100 + "px";
```
Dit is weer een goed moment om even te stoppen en controleren of je écht snapt wat hierboven staat

Opdracht 4. Een grote hoeveelheid tekst tonen op basis van het resultaat

Waarschijnlijk wil je meer laten zien dan een kort tekstje wanneer je het voorspellingsresultaat krijgt. Door stukken HTML (on)zichtbaar te maken kun je een heel dynamische pagina maken.

Plak deze code integraal in de body van prediction.html:

<div id="text">
    <div class="hidden" id="thin">
        <h3>Underweight</h3>
        <p>
            If you're in the underweight range, there are a number of
            possible reasons for this. Your GP can help you find out more, and give you help and advice. Learn more by
            reading about nutrition for underweight adults.
        </p>
    </div>
    <div class="hidden" id="neutral">
        <h3>Healthy weight</h3>
        <p>
            If you're in the healthy weight range, you're a healthy weight for your height.<br>
            It's still important to eat a balanced diet and include physical activity in your daily life to stay in good
            health. <br>Adults should be active for at least 150 minutes every week. 
        </p>
    </div>
    <div class="hidden" id="heavy">
        <h3>Overweight, obese or very obese</h3>
        <p>
            If you're in any of these ranges,
            you're heavier than is healthy for someone of your height. Excess weight puts you at increased risk of heart
            disease, stroke and type 2 diabetes. It's time to act.
        </p>
    </div>
</div>

In dit bestand zie je
• Een div met id “#text”, met daarin:
• Drie div’s met wat tekst en verschillende id’s: “#thin” “#neutral” “#heavy”.
• Alledrie deze div’s hebben de class “hidden”.

De drie tekst-div’s gaan we eerst verbergen. Wanneer we een voorspelling hebben zullen we één van die div’s zichtbaar maken.

Om die teksten te verbergen, ga je naar het style.css-bestand en schrijf je:
```
.hidden {
    display: none;
}
```
Nu zijn ze verborgen. display: none wordt toegepast op die div’s met de class “hidden”.

We beginnen bovenaan ons script met het maken van de koppelingen met HTML:

var thin = document.querySelector("#thin");
var neutral = document.querySelector("#neutral");
var heavy = document.querySelector("#heavy");

Nu gaan we in onze predict() functie, een if-statement maken die bepaalt welke tekst getoond wordt.
Ten eerste plaatsen we binnen predict() functie en onder console.log(result) de resultaatwaarde in een variabele “targetActive” om het gemakkelijk te maken om de waarde te gebruiken en toon het op de pagina:
```
var targetActive = result.label;
bmi.innerHTML+=targetActive;
```
Nu gaan we bepalen welke div we tonen door de waarde in de variabele targetActive te vergelijken:
Als targetActive kleiner is dan 2 tonen we de tekst in de “#thin” div
Zoniet dan als targetActive groter is dan 3, tonen we de tekst in de “#heavy” div
Anders (dus als het 2 of 3 is) tonen we de “#neutral” div.
```
if (targetActive < 2){
    thin.style.display = "block";
} else if (targetActive > 3) {
    heavy.style.display = "block";
} else {
    neutral.style.display = "block";
}
```

Doorsturen naar een andere webpagina

Het is ook mogelijk dat je voor elk resultaat een andere pagina wilt openen. Dit is heel simpel.
Laten we bijvoorbeeld de if-statement van hierboven lenen. Afhankelijk van de waarde van targetActive willen we graag een nieuwe webpagina openen. Stel dat je de thin.html-pagina wilt openen als de targetActive-waarde kleiner is dan 2.

Dat schrijf je als volgt:
```
if (targetActive < 2){
    window.location.href = "thin.html";
}
```
Zorg ervoor dat een pagina genaamd thin.html in dit geval in dezelfde map staat.

De input tonen

De formulierwaarden die in het index.html-bestand zijn ingevoerd, kunnen ook worden getoond.

In dit Body Mass-voorbeeld hebben we 3 verschillende inputs: Gender, Height, en Weight. Zoals we eerder hebben geleerd, zijn deze als zodanig in het script.js beschreven:

var inputs = {
  Gender: parameters.get('gender'),
  Height: parseInt(parameters.get('height')),
  Weight: parseInt(parameters.get('weight'))
}

We moeten de namen precies zo schrijven als aan het begin van elke bovenstaande regel.
In de predict() functie, na alle code die daar al staat, voeg je het volgende toe:

    bmi.innerHTML += "<br> Your gender is " + inputs.Gender;
    bmi.innerHTML += "<br> Your height is " + inputs.Height  + "cm.";
    bmi.innerHTML += "<br> Your weight is " + inputs.Weight + "kg.";

Let er op dat we += gebruiken in plaats van =, zodat we de tekst toevoegen in plaats van vervangen.

Controleer nu je app om te zien of de waarden goed getoond worden.

toFixed

In sommige gevallen, vooral bij ‘regression’-voorspellingen, zie je een resultaat met een lange float-waarde (bijv. 4.3547212335). Als je niet alle ‘zwevende cijfers’ achter de punt wilt gebruiken, maar wilt afronden en slechts 2 cijfers wilt weergeven (bijv. 4.35), zet er dan .toFixed(2) achter.
.toFixed(0) rondt het af op een heel getal (bijv. 4).

var langGetal = 4.3547212335;
console.log(langGetal.toFixed(2)) // 4.35
console.log(langGetal.toFixed(0)) // 4