Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen.
Machine learning is een fundamentele technologie in de moderne wereld. Computers kunnen afbeeldingen leren herkennen, illustraties maken en zelfs hun eigen code schrijven, allemaal met minimale menselijke tussenkomst.
Maar hoe werkt machine learning en hoe kun je het zelf inzetten?
Wat is machinaal leren?
Machine learning is een relatief eenvoudig concept. Computersystemen kunnen leren en zich aanpassen door bestaande datapatronen uit informatiepools te analyseren. Dit gebeurt meestal zonder expliciete instructies van mensen.
Een goed voorbeeld is de virtuele assistent-tools. Siri, Cortana en Google Assistant maken allemaal uitgebreid gebruik van machine learning om menselijke spraak te begrijpen. Dit begint met een pool van bestaande audio-opnamen, maar deze tools kunnen ook leren van de interacties die ze met u hebben. Hierdoor kunnen ze zichzelf verbeteren.
Wat is ml5.js?
De meeste algoritmen en tools voor machine learning gebruiken R of Python voor hun code, maar ml5.js is anders. ml5.js fungeert als een interface voor de Tensorflow.js-bibliotheek van Google en is een open-sourceproject dat machine learning in de handen van JavaScript-ontwikkelaars legt.
U kunt ml5.js gaan gebruiken voor uw eigen webapplicatie door een enkel extern script in uw HTML op te nemen.
Aan de slag met machine learning: het leerproces
Het trainen van een machine learning-algoritme kost tijd. Computers leren veel sneller dan mensen, maar ze leren ook op verschillende manieren. Gelukkig wordt ml5.js echter geleverd met een selectie van vooraf getrainde modellen, zodat u deze stap kunt overslaan.
Aan het leren hoe machine learning-algoritmen trainen is een geweldige manier om dit soort tools beter te begrijpen.
ml5.js maakt het eenvoudig om een tool voor het classificeren van afbeeldingen te maken die op uw website kan worden uitgevoerd. De HTML-pagina in dit voorbeeld bevat een bestandsinvoerveld om een afbeelding te selecteren. Geüploade afbeeldingen worden weergegeven in een voorbereid HTML-element zodat ml5.js ze kan scannen en identificeren.
Stap 1: voeg de ml5.js-bibliotheek toe
Dit project vereist twee bibliotheken om te werken: ml5.js en p5.js. ml5.js is de machine learning-bibliotheek, terwijl p5.js het mogelijk maakt om goed met afbeeldingen te werken. U hebt twee regels HTML nodig om deze bibliotheken toe te voegen:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>Stap 2: maak enkele HTML-elementen
Vervolgens is het tijd om enkele HTML-elementen te maken. Het belangrijkste is een div met een ID en klasse met het label imageResult waarin het uiteindelijke resultaat wordt opgeslagen:
<h1>MakeUseOf-beeldclassificatie</h1><h2>Klik "Kies bestand" om een afbeelding toe te voegen</h2>
<div klasse="afbeeldingResultaat" identiteitsbewijs="afbeeldingResultaat"></div>
Voeg hierna een bestandsinvoerelement toe om de afbeelding te verzamelen zodat het programma deze kan classificeren.
<div klasse="afbeeldingInput">
<invoertype="bestand"
opinput="uploadedImage.src=venster. URL.createObjectURL(deze.bestanden[0]); startImageScan()">
</div>
De input luistert naar een oninput-gebeurtenis en voert als reactie twee statements uit, gescheiden door een puntkomma. De eerste maakt een object-URL voor de afbeelding, waarmee u met de gegevens kunt werken zonder deze naar een server te hoeven uploaden. De tweede roept een startImageScan()-functie aan die u in de volgende stap gaat maken.
Voeg ten slotte een img-element toe om de afbeelding weer te geven die de gebruiker heeft geüpload:
<img klasse="geüploade afbeelding" identiteitsbewijs="geüploade afbeelding" />Stap 3: maak een JS-functie voor het scannen van afbeeldingen
Nu je wat HTML hebt, is het tijd om wat JS aan de mix toe te voegen. Begin met het toevoegen van een const-variabele om het imageResult-element op te slaan dat u in de laatste stap hebt gemaakt.
const element = document.getElementById("beeldresultaat");Voeg vervolgens een functie toe met de naam startImageScan() en initialiseer daarin de ml5.js-beeldclassificatie met behulp van MobileNet.
Volg dit met de opdracht classifier.classify. Geef het een verwijzing door naar het uploadedImage-element dat je eerder hebt toegevoegd, samen met een callback-functie om het resultaat te verwerken.
functiestartImageScan() {
// Creëren A variabelnaar initialiseer de ml5.js-beeldclassificatie met MobielNet
const classifier = ml5.imageClassifier('MobielNet');
classifier.classify (document.getElementById("geüploade afbeelding"), afbeeldingScanResult);
element.innerHTML = "...";
}Stap 4: Creëer een resultaatweergavefunctie
U hebt ook een functie nodig om de resultaten van de door u uitgevoerde beeldclassificatie weer te geven. Deze functie bevat een eenvoudige if-opdracht om te controleren op eventuele fouten.
functieimageScanResult(fout, resultaat) {
als (fout) {
element.innerHTML = fout;
} anders {
laten aantal = resultaten[0].vertrouwen * 100;
element.innerHTML = resultaten[0].label + "<br>Vertrouwen: " + num.toFixed (0) + "%";
}
}Stap 5: Zet het allemaal samen
Eindelijk is het tijd om al deze code samen te voegen. Het is belangrijk om rekening te houden met de
,
