Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon.

Maskinlæring er en grunnleggende teknologi i den moderne verden. Datamaskiner kan lære å gjenkjenne bilder, lage kunstverk og til og med skrive sin egen kode, alt med minimal menneskelig innblanding.

Men hvordan fungerer maskinlæring og hvordan kan du bruke det selv?

Hva er maskinlæring?

Maskinlæring er et relativt enkelt konsept. Datasystemer kan lære og tilpasse seg ved å analysere eksisterende datamønstre fra samlinger av informasjon. Dette gjøres vanligvis uten eksplisitte instruksjoner fra mennesker.

Et godt eksempel kommer i form av virtuelle assistentverktøy. Siri, Cortana og Google Assistant bruker alle utstrakt maskinlæring for å forstå menneskelig tale. Dette starter med en pool av eksisterende lydopptak, men disse verktøyene kan også lære av interaksjonene de har med deg. Dette gjør dem i stand til å forbedre seg på egenhånd.

Hva er ml5.js?

De fleste maskinlæringsalgoritmer og verktøy bruker R eller Python for sin kode, men ml5.js er annerledes. ml5.js fungerer som et grensesnitt for Googles Tensorflow.js-bibliotek, og er et åpen kildekode-prosjekt som legger maskinlæring i hendene på JavaScript-utviklere.

Du kan begynne å bruke ml5.js for din egen nettapplikasjon ved å inkludere et enkelt eksternt skript i HTML-en din.

Komme i gang med maskinlæring: Læringsprosessen

Å trene en maskinlæringsalgoritme tar tid. Datamaskiner lærer langt raskere enn mennesker, men de lærer også på forskjellige måter. Heldigvis kommer ml5.js med et utvalg av forhåndstrente modeller slik at du kan hoppe over dette trinnet.

Læring hvordan maskinlæringsalgoritmer trener er en fin måte å bedre forstå verktøy som dette.

ml5.js gjør det enkelt å lage et bildeklassifiseringsverktøy for å kjøre på nettstedet ditt. HTML-siden i dette eksemplet inneholder et filinndatafelt for å velge et bilde. Opplastede bilder vises i et forberedt HTML-element for å gjøre det mulig for ml5.js å ​​skanne og identifisere dem.

Trinn 1: Inkluder ml5.js-biblioteket

Dette prosjektet krever to biblioteker for å fungere: ml5.js og p5.js. ml5.js er maskinlæringsbiblioteket, mens p5.js gjør det mulig å jobbe med bilder riktig. Du trenger to linjer med HTML for å legge til disse bibliotekene:

<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>

Trinn 2: Lag noen HTML-elementer

Deretter er det på tide å lage noen HTML-elementer. Det viktigste er en div med en ID og klasse merket imageResult som vil lagre det endelige resultatet:

<h1>MakeUseOf Image Classifier</h1>
<h2>Klikk "Velg Fil" for å legge til et bilde</h2>
<div klasse="bilderesultat" id="bilderesultat"></div>

Etter dette, legg til et filinndataelement for å samle bildet for programmet å klassifisere.

<div klasse="bildeinngang">
<input type="fil"
 oninput="uploadedImage.src=vindu. URL.createObjectURL(this.files[0]); startImageScan()">
</div>

Inndataene lytter etter en oninput-hendelse og utfører to setninger som svar, atskilt med semikolon. Den første oppretter en objekt-URL for bildet, som lar deg jobbe med dataene uten å måtte laste dem opp til en server. Den andre kaller en startImageScan()-funksjon som du vil opprette i neste trinn.

Til slutt legger du til et img-element for å vise bildet brukeren har lastet opp:

<img klasse="lastet opp bilde" id="lastet opp bilde" />

Trinn 3: Lag en JS-funksjon for bildeskanning

Nå som du har litt HTML, er det på tide å legge til litt JS til blandingen. Start med å legge til en const-variabel for å lagre imageResult-elementet du opprettet i det siste trinnet.

konst element = dokument.getElementById("bildeResultat");

Deretter legger du til en funksjon kalt startImageScan() og initialiser bildeklassifisereren ml5.js ved hjelp av MobileNet.

Følg dette med classifier.classify-kommandoen. Gi det en referanse til uploadedImage-elementet du la til tidligere, sammen med en tilbakeringingsfunksjon for å behandle resultatet.

funksjonstartImageScan() {
 // Skape en variabeltil initialiser ml5.js bildeklassifikatoren med MobileNet
 const classifier = ml5.imageClassifier('MobileNet');
 classifier.classify (document.getElementById("lastet opp bilde"), imageScanResult);
 element.innerHTML = "...";
}

Trinn 4: Opprett en resultatvisningsfunksjon

Du trenger også en funksjon for å vise resultatene av bildeklassifiseringen du utførte. Denne funksjonen inneholder en enkel if-setning for å se etter eventuelle feil.

funksjonimageScanResult(feil, resultater) {
 if (feil) {
 element.innerHTML = feil;
 } ellers {
la num = resultater[0].selvtillit * 100;
 element.innerHTML = resultater[0].label + "<br>Selvtillit: " + num.toFixed (0) + "%";
 }
}

Trinn 5: Sett alt sammen

Endelig er det på tide å sette sammen all denne koden. Det er viktig å være oppmerksom på

,