Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju.

Strojno učenje temeljna je tehnologija u modernom svijetu. Računala mogu naučiti prepoznavati slike, stvarati umjetnička djela, pa čak i pisati vlastiti kod, sve uz minimalnu ljudsku intervenciju.

Ali kako funkcionira strojno učenje i kako ga možete sami koristiti?

Što je strojno učenje?

Strojno učenje je relativno jednostavan koncept. Računalni sustavi mogu učiti i prilagođavati se analizom postojećih obrazaca podataka iz skupova informacija. To se obično radi bez izričitih uputa ljudi.

Dobar primjer dolazi u obliku alata za virtualne pomoćnike. Siri, Cortana i Google Assistant u velikoj mjeri koriste strojno učenje za razumijevanje ljudskog govora. Ovo počinje skupom postojećih audiosnimki, ali ovi alati također mogu učiti iz interakcija koje imaju s vama. To im omogućuje da se sami poboljšaju.

Što je ml5.js?

Većina algoritama i alata za strojno učenje koristi R ili Python za svoj kod, ali ml5.js je drugačiji. Djelujući kao sučelje za Googleovu biblioteku Tensorflow.js, ml5.js je projekt otvorenog koda koji strojno učenje stavlja u ruke programera JavaScripta.

instagram viewer

Možete početi koristiti ml5.js za vlastitu web aplikaciju uključivanjem jedne vanjske skripte u svoj HTML.

Početak rada sa strojnim učenjem: proces učenja

Obuka algoritma strojnog učenja zahtijeva vrijeme. Računala uče daleko brže od ljudi, ali uče i na različite načine. Ipak, srećom, ml5.js dolazi s izborom unaprijed obučenih modela tako da možete preskočiti ovaj korak.

Učenje kako se treniraju algoritmi strojnog učenja odličan je način za bolje razumijevanje ovakvih alata.

ml5.js olakšava stvaranje alata za klasificiranje slika koji će se pokrenuti na vašoj web stranici. HTML stranica u ovom primjeru sadrži polje za unos datoteke za odabir slike. Učitane slike prikazuju se unutar pripremljenog HTML elementa kako bi ih ml5.js skenirao i identificirao.

Korak 1: Uključite biblioteku ml5.js

Za rad ovog projekta potrebne su dvije biblioteke: ml5.js i p5.js. ml5.js je biblioteka za strojno učenje, dok p5.js omogućuje pravilan rad sa slikama. Za dodavanje ovih biblioteka potrebna su vam dva retka HTML-a:

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

Korak 2: Napravite neke HTML elemente

Zatim, vrijeme je za stvaranje nekih HTML elemenata. Najvažniji je div s ID-om i klasom označenom kao imageResult koji će pohraniti konačni rezultat:

<h1>Klasifikator slika MakeUseOf</h1>

<h2>Klik "Odaberite datoteku" za dodavanje slike</h2>

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

Nakon toga dodajte element unosa datoteke za prikupljanje slike koju će program klasificirati.

<div klasa="imageInput">
<vrsta unosa="datoteka"
oninput="uploadedImage.src=prozor. URL.createObjectURL(this.files[0]); startImageScan()">
</div>

Ulaz osluškuje oninput događaj i kao odgovor izvršava dvije naredbe, odvojene točkom-zarezom. Prvi stvara URL objekta za sliku, što vam omogućuje rad s podacima bez potrebe da ih učitate na poslužitelj. Drugi poziva funkciju startImageScan() koju ćete izraditi u sljedećem koraku.

Na kraju, dodajte img element za prikaz slike koju je korisnik prenio:

<img class="uploadedImage" id="uploadedImage" />

Korak 3: Stvorite JS funkciju za skeniranje slike

Sada kada imate nešto HTML-a, vrijeme je da dodate malo JS-a u mješavinu. Započnite dodavanjem varijable const za pohranu elementa imageResult koji ste stvorili u zadnjem koraku.

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

Zatim dodajte funkciju pod nazivom startImageScan() i unutar nje inicijalizirajte ml5.js klasifikator slike koristeći MobileNet.

Pratite ovo naredbom classifier.classify. Proslijedite mu referencu na element uploadedImage koji ste prethodno dodali, zajedno s funkcijom povratnog poziva za obradu rezultata.

funkcijastartImageScan() {
// Stvoriti a varijablado inicijalizirati ml5.js klasifikator slika s MobileNet
const classifier = ml5.imageClassifier('MobileNet');
classifier.classify (document.getElementById("uploadedImage"), imageScanResult);
element.innerHTML = "...";
}

Korak 4: Stvorite funkciju prikaza rezultata

Također vam je potrebna funkcija za prikaz rezultata klasifikacije slike koju ste izvršili. Ova funkcija sadrži jednostavnu if naredbu za provjeru grešaka.

funkcijaimageScanResult(greška, rezultati) {
if (greška) {
element.innerHTML = pogreška;
} drugo {
neka broj = rezultati[0].samouvjerenost * 100;
element.innerHTML = rezultati[0].oznaka + "<br>Samouvjerenost: " + num.toFixed (0) + "%";
}
}

Korak 5: Sastavite sve zajedno

Konačno, vrijeme je da sastavite sav ovaj kod. Važno je voditi računa o

,