Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision.
Maskininlärning är en grundläggande teknik i den moderna världen. Datorer kan lära sig att känna igen bilder, skapa konstverk och till och med skriva sin egen kod, allt med minimal mänsklig inblandning.
Men hur fungerar maskininlärning och hur kan du använda det själv?
Vad är maskininlärning?
Maskininlärning är ett relativt enkelt koncept. Datorsystem kan lära sig och anpassa sig genom att analysera befintliga datamönster från informationspooler. Detta görs vanligtvis utan uttryckliga instruktioner från människor.
Ett bra exempel kommer i form av virtuella assistentverktyg. Siri, Cortana och Google Assistant använder alla i stor utsträckning maskininlärning för att förstå mänskligt tal. Detta börjar med en pool av befintliga ljudinspelningar, men dessa verktyg kan också lära sig av interaktionen de har med dig. Detta gör att de kan förbättra sig på egen hand.
Vad är ml5.js?
De flesta maskininlärningsalgoritmer och verktyg använder R eller Python för sin kod, men ml5.js är annorlunda. ml5.js fungerar som ett gränssnitt för Googles Tensorflow.js-bibliotek och är ett projekt med öppen källkod som lägger maskininlärning i händerna på JavaScript-utvecklare.
Du kan börja använda ml5.js för din egen webbapplikation genom att inkludera ett enda externt skript i din HTML.
Komma igång med maskininlärning: inlärningsprocessen
Att träna en maskininlärningsalgoritm tar tid. Datorer lär sig mycket snabbare än människor, men de lär sig också på olika sätt. Tack och lov kommer ml5.js dock med ett urval av förtränade modeller så att du kan hoppa över det här steget.
Inlärning hur maskininlärningsalgoritmer tränar är ett bra sätt att bättre förstå verktyg som detta.
ml5.js gör det enkelt att skapa ett bildklassificeringsverktyg att köra på din webbplats. HTML-sidan i det här exemplet innehåller ett filinmatningsfält för att välja en bild. Uppladdade bilder visas inuti ett förberett HTML-element så att ml5.js kan skanna och identifiera dem.
Steg 1: Inkludera ml5.js-biblioteket
Detta projekt kräver två bibliotek för att fungera: ml5.js och p5.js. ml5.js är maskininlärningsbiblioteket, medan p5.js gör det möjligt att arbeta med bilder på rätt sätt. Du behöver två rader HTML för att lägga till dessa bibliotek:
<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>Steg 2: Skapa några HTML-element
Därefter är det dags att skapa några HTML-element. Det viktigaste är en div med ett ID och klass märkt imageResult som lagrar det slutliga resultatet:
<h1>MakeUseOf Image Classifier</h1><h2>Klick "Välj FIL" för att lägga till en bild</h2>
<div klass="bildResultat" id="bildResultat"></div>
Efter detta lägger du till ett filinmatningselement för att samla in bilden för programmet att klassificera.
<div klass="bildinmatning">
<ingångstyp="fil"
oningång="uploadedImage.src=fönster. URL.createObjectURL(this.files[0]); startImageScan()">
</div>
Ingången lyssnar efter en oninput-händelse och exekverar två satser som svar, separerade med semikolon. Den första skapar en objekt-URL för bilden, som låter dig arbeta med data utan att behöva ladda upp den till en server. Den andra anropar en startImageScan()-funktion som du kommer att skapa i nästa steg.
Lägg slutligen till ett img-element för att visa bilden som användaren har laddat upp:
<img klass="uppladdad bild" id="uppladdad bild" />Steg 3: Skapa en JS-funktion för bildskanning
Nu när du har lite HTML är det dags att lägga till lite JS till mixen. Börja med att lägga till en const-variabel för att lagra imageResult-elementet du skapade i det sista steget.
konst element = dokumentera.getElementById("imageResult");Lägg sedan till en funktion som heter startImageScan() och, inuti den, initiera bildklassificeraren ml5.js med MobileNet.
Följ detta med kommandot classifier.classify. Skicka den en referens till uploadedImage-elementet du lade till tidigare, tillsammans med en återuppringningsfunktion för att bearbeta resultatet.
fungerastartImageScan() {
// Skapa a variabeltill initiera bildklassificeraren ml5.js med MobileNet
const classifier = ml5.imageClassifier('MobileNet');
classifier.classify (document.getElementById("uppladdad bild"), imageScanResult);
element.innerHTML = "...";
}Steg 4: Skapa en resultatvisningsfunktion
Du behöver också en funktion för att visa resultatet av den bildklassificering du utfört. Denna funktion innehåller en enkel if-sats för att kontrollera eventuella fel.
fungeraimageScanResult(fel, resultat) {
if (fel) {
element.innerHTML = fel;
} annan {
låta num = resultat[0].confidence * 100;
element.innerHTML = results[0].label + "<br>Förtroende: " + num.toFixed (0) + "%";
}
}Steg 5: Sätt ihop allt
Äntligen är det dags att sätta ihop all denna kod. Det är viktigt att vara uppmärksam på
,