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.
Om te beginnen hebben we een aantal dingen nodig:
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
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>
<input type="submit" value="Verstuur">
We zijn nu klaar met index.html.
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.
De volgende instructies zijn voor script.js. Het zou moeten beginnen met een leeg bestand.
var parameters = new URLSearchParams(window.location.search);
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"),
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"
};
var neuralNetwork = ml5.neuralNetwork(options);
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);
})
}
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.