Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion.

Koneoppiminen on perusteknologia nykymaailmassa. Tietokoneet voivat oppia tunnistamaan kuvia, luomaan taideteoksia ja jopa kirjoittamaan oman koodinsa, kaikki ilman ihmisen puuttumista.

Mutta miten koneoppiminen toimii ja miten voit käyttää sitä itse?

Mitä on koneoppiminen?

Koneoppiminen on suhteellisen yksinkertainen käsite. Tietokonejärjestelmät voivat oppia ja mukautua analysoimalla olemassa olevia tietomalleja tietovarannoista. Tämä tehdään yleensä ilman ihmisten nimenomaisia ​​ohjeita.

Hyvä esimerkki on virtuaalisen avustajan työkalut. Siri, Cortana ja Google Assistant käyttävät laajasti koneoppimista ihmisen puheen ymmärtämiseen. Tämä alkaa olemassa olevien äänitallenteiden joukosta, mutta nämä työkalut voivat myös oppia vuorovaikutuksestasi. Tämä antaa heille mahdollisuuden parantaa itseään.

Mikä on ml5.js?

Useimmat koneoppimisalgoritmit ja -työkalut käyttävät R- tai Python-koodia, mutta ml5.js on erilainen. Googlen Tensorflow.js-kirjaston käyttöliittymänä toimiva ml5.js on avoimen lähdekoodin projekti, joka antaa koneoppimisen JavaScript-kehittäjien käsiin.

instagram viewer

Voit aloittaa ml5.js: n käytön omassa verkkosovelluksessasi lisäämällä yhden ulkoisen komentosarjan HTML-koodiisi.

Koneoppimisen aloittaminen: Oppimisprosessi

Koneoppimisalgoritmin kouluttaminen vie aikaa. Tietokoneet oppivat paljon nopeammin kuin ihmiset, mutta ne myös oppivat eri tavoilla. Onneksi ml5.js sisältää kuitenkin valikoiman valmiiksi koulutettuja malleja, joten voit ohittaa tämän vaiheen.

Oppiminen miten koneoppimisalgoritmit harjoittelevat on loistava tapa ymmärtää paremmin tällaisia ​​työkaluja.

ml5.js: n avulla on helppo luoda verkkosivustollasi käytettävä kuvien luokittelutyökalu. Tämän esimerkin HTML-sivu sisältää tiedoston syöttökentän kuvan valitsemiseksi. Ladatut kuvat näkyvät valmistetun HTML-elementin sisällä, jotta ml5.js voi skannata ja tunnistaa ne.

Vaihe 1: Sisällytä ml5.js-kirjasto

Tämä projekti vaatii toimiakseen kaksi kirjastoa: ml5.js ja p5.js. ml5.js on koneoppimiskirjasto, kun taas p5.js mahdollistaa kuvien käytön oikein. Tarvitset kaksi HTML-riviä näiden kirjastojen lisäämiseen:

<komentosarja src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<komentosarja src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

Vaihe 2: Luo joitain HTML-elementtejä

Seuraavaksi on aika luoda joitain HTML-elementtejä. Tärkein on div, jossa on tunnus ja luokka nimeltä imageResult, joka tallentaa lopullisen tuloksen:

<h1>MakeUseOf Image Classifier</h1>

<h2>Klikkaus "Valitse tiedosto" lisätäksesi kuvan</h2>

<div class="imageResult" id="imageResult"></div>

Lisää tämän jälkeen tiedoston syöttöelementti, joka kerää kuvan ohjelman luokittelua varten.

<div class="imageInput">
<syöttötyyppi="tiedosto"
oninput="uploadedImage.src=ikkuna. URL.luoObjectURL(this.files[0]); startImageScan()">
</div>

Tulo kuuntelee oninput-tapahtumaa ja suorittaa vastauksena kaksi käskyä, jotka on erotettu puolipisteellä. Ensimmäinen luo kuvalle objektin URL-osoitteen, jonka avulla voit käsitellä tietoja ilman, että sitä tarvitsee ladata palvelimelle. Toinen kutsuu startImageScan()-funktiota, jonka luot seuraavassa vaiheessa.

Lisää lopuksi img-elementti näyttääksesi käyttäjän lataaman kuvan:

<img class="ladattu kuva" id="ladattu kuva" />

Vaihe 3: Luo kuvanskannaus JS-funktio

Nyt kun sinulla on HTML-koodia, on aika lisätä JS: ää sekoitukseen. Aloita lisäämällä const-muuttuja tallentaaksesi viimeisessä vaiheessa luomasi imageResult-elementin.

konst elementti = asiakirja.getElementById("imageResult");

Lisää seuraavaksi funktio nimeltä startImageScan() ja alusta sen sisällä ml5.js-kuvaluokitin MobileNetin avulla.

Noudata tätä komennolla classifier.classify. Välitä sille viittaus aiemmin lisäämääsi uploadedImage-elementtiin sekä takaisinsoittotoiminto tuloksen käsittelemiseksi.

toimintostartImageScan() {
// Luoda a muuttujato alusta ml5.js-kuvan luokitin kanssa MobileNet
const luokitin = ml5.imageClassifier('MobileNet');
classifier.classify (document.getElementById("ladattu kuva"), imageScanResult);
element.innerHTML = "...";
}

Vaihe 4: Luo tulosnäyttötoiminto

Tarvitset myös toiminnon, joka näyttää suorittamasi kuvaluokittelun tulokset. Tämä toiminto sisältää yksinkertaisen if-lauseen virheiden tarkistamiseksi.

toimintoimageScanResult(virhe, tulokset) {
jos (virhe) {
element.innerHTML = virhe;
} muu {
antaa numero = tulokset[0].luottamus * 100;
element.innerHTML = tulokset[0].label + "<br>Luottamus: " + numero.kiinteä (0) + "%";
}
}

Vaihe 5: Laita kaikki yhteen

Lopuksi on aika koota kaikki tämä koodi yhteen. On tärkeää pitää mielessä

,