English version of this page

Interaktiv Maskinlæring i Nettleseren med ml5.js

Creative Computing Hub Oslo (C2HO) presenterer en serie workshops med fokus på ml5.js, et nybegynnervennlig bibliotek for p5.js som gjør det mulig å bruke maskinlæring direkte i nettleseren din.

Bildet kan inneholde: fargerike, lilla, rektangel, fiolett, font.

Creative Computing Hub Oslo (C2HO) presenterer en serie workshops fokusert på ml5.js, et nybegynnervennlig bibliotek som gjør det mulig å benytte maskinlæring direkte i nettleseren din. Biblioteket gir tilgang til maskinlæringsalgoritmer og modeller i nettleseren, og bygger på TensorFlow.js uten andre eksterne avhengigheter. Det inkluderer forhåndstrente modeller som muliggjør bildegjenkjenning, deteksjon av menneskelige positurer, tekstgenerering og mer.

I vår første økt skal vi implementere og trene et enkelt nevralt nettverk for klassifisering av RGB-farger

Del 1: Oppsett og trening av det nevrale nettverket

Når en ny p5.js-fil er opprettet, er to funksjoner alltid definert: setup og draw.

Setup-funksjonen er den første funksjonen som kjører når koden kjøres. Her kan du definere variabler som ikke trenger å endres dynamisk under utførelsen av koden. Setup-funksjonen inkluderer automatisk createCanvas, som brukes for å spesifisere bredden og høyden på lerretet du vil tegne på. Draw-funksjonen kjører kontinuerlig i en løkke til programmet avsluttes. Hvis du ser på index.html-filen i koden nedenfor, vil du se at i tillegg til p5-bibliotekene, laster vi også inn ml5-biblioteket.

Innenfor vår setup-funksjon skal vi definere attributtene til vårt ml5 neural network. Dette inkluderer hvilken type maskinlæringsproblem vi ønsker at den skal håndtere (klassifisering eller regresjon), størrelsen på nettverket og hva våre inndata og utdata er.

Vi kan også sette en variabel med navnet debug til true. Dette lar oss overvåke treningen av vårt nevrale nettverk.

For å trene vårt nevrale nettverk til å kjenne igjen hvilke RGB-verdier som tilsvarer hvilke farger, må vi skape noen treningsdata. Vårt datasett ser omtrent slik ut, med inndata i form av r,g,b-verdier og en tilsvarende streng som beskriver fargen:

  
{
  "entries": [
    {"r":255, "g":0, "b":0, "label":"red-ish"},
    {"r":254, "g":0, "b":0, "label":"red-ish"},
    {"r":253, "g":0, "b":0, "label":"red-ish"},
    {"r":0, "g":255, "b":0, "label":"green-ish"},
    {"r":0, "g":254, "b":0, "label":"green-ish"},
    {"r":0, "g":253, "b":0, "label":"green-ish"},
    {"r":0, "g":0, "b":255, "label":"blue-ish"},
    {"r":0, "g":0, "b":254, "label":"blue-ish"},
    {"r":0, "g":0, "b":253, "label":"blue-ish"}
  ]
}
 

Ved å klikke på lenken nedenfor kan du utforske koden for å initialisere det nevrale nettverket og begynne opplæringen. Du vil kanskje legge merke til at tegnefunksjonen vår (draw function) for nå er nesten tom. For øyeblikket gir den bare lerretet vårt en blå bakgrunn, men i neste del vil vi bruke lerretet til å gi inndata til vårt nevrale nett og for å vise dets prediksjoner.

 

Vis og rediger kode

Image may contain: Azure, Rectangle, Font, Plot, Slope.

Del 2: Testing av det nevrale nettverket

Nå som vi har definert og trent vår modell, kan vi gi den noe data å klassifisere!

Siden vi jobber i p5, kan vi gjøre det slik at vi kan angi fargeverdiene interaktivt ved hjelp av glidebrytere. Vi legger til tre glidebrytere med et område fra 0 til 255 på lerretet vårt for å representere røde, grønne og blå verdier. Vi kan deretter erklære en klassifiseringsfunksjon som leser de nåværende verdiene av våre tre glidebrytere og utløser vårt nevrale nettverk for å forsøke å tilordne en fargeetikett.

Klassifiseringsfunksjonen krever to argumenter: inputen vi ønsker å klassifisere, og en funksjon for å håndtere klassifiseringsresultatene.

Til slutt kan vi oppdatere vår tegnefunksjon slik at den viser etiketter på glidebryterne våre og modellens prediksjoner. Vi endrer også bakgrunnsfargen slik at den viser fargen vi ønsker at nettverket skal klassifisere.

Vis og rediger kode

 

 

Del 3: Endring fra klassifisering til regresjon

Nå som vi har en modell som kan gjette en fargeetikett basert på RGB-verdier, la oss snu problemet og lage en modell som kan generere en farge (dvs. et sett med RGB-verdier) basert på våre etiketter i stedet!

Først må vi endre noen av verdiene i vår nnOptions-variabel som definerer strukturen og parameterne til det nevrale nettverket. Vi endrer oppgaven fra klassifisering til regresjon og bytter om våre inndata og utdata verdier. Vi vil nå gi modellen etiketter - dvs. navnene på fargene som inndata og spør den om å returnere RGB-verdier, så la oss kvitte oss med glidebryterne våre og legge til en rullegardinmeny for å velge etiketten vi ønsker at modellen skal forutsi. Vi erstatter så vår klassifiseringsfunksjon med en forutsi-funksjon som sjekker hvilken etikett som er valgt i rullegardinmenyen vår og sender den til nettverket for å forutsi de tilsvarende RGB-verdiene. Til slutt kan vi endre tegnefunksjonen slik at modellens prediksjon endrer fargen på bakgrunnen vår.

Nå som vi har en modell som kan gjette en fargeetikett basert på RGB-verdier, la oss snu problemet og lage en modell som kan generere en farge (dvs. et sett med RGB-verdier) basert på våre etiketter i stedet!

Først må vi endre noen av verdiene i vår nnOptions-variabel som definerer strukturen og parameterne til det nevrale nettverket. Vi endrer oppgaven fra klassifisering til regresjon og bytter om våre inndata og utdata verdier. Vi vil nå gi modellen etiketter - dvs. navnene på fargene som inndata og spør den om å returnere RGB-verdier, så la oss kvitte oss med glidebryterne våre og legge til en rullegardinmeny for å velge etiketten vi ønsker at modellen skal forutsi. Vi erstatter så vår klassifiseringsfunksjon med en forutsi-funksjon som sjekker hvilken etikett som er valgt i rullegardinmenyen vår og sender den til nettverket for å forutsi de tilsvarende RGB-verdiene. Til slutt kan vi endre tegnefunksjonen slik at modellens prediksjon endrer fargen på bakgrunnen vår.

Nå som vi har en modell som kan gjette en fargeetikett basert på RGB-verdier, la oss snu problemet og lage en modell som kan generere en farge (dvs. et sett med RGB-verdier) basert på våre etiketter i stedet!

Først må vi endre noen av verdiene i vår nnOptions-variabel som definerer strukturen og parameterne til det nevrale nettverket. Vi endrer oppgaven fra klassifisering til regresjon og bytter om våre inndata og utdata verdier. Vi vil nå gi modellen etiketter - dvs. navnene på fargene som inndata og spør den om å returnere RGB-verdier, så la oss kvitte oss med glidebryterne våre og legge til en rullegardinmeny for å velge etiketten vi ønsker at modellen skal forutsi.

Vi erstatter så vår klassifiseringsfunksjon med en forutsi-funksjon som sjekker hvilken etikett som er valgt i rullegardinmenyen vår og sender den til nettverket for å forutsi de tilsvarende RGB-verdiene.

Til slutt kan vi endre tegnefunksjonen slik at modellens prediksjon endrer fargen på bakgrunnen vår.

Vis og rediger kode

Image may contain: Purple, Rectangle, Violet, Font, Electric blue.

 

Videre utforskning..

Emneord: C2HO, Creative Computing, Creative Coding, Machine Learning Av Benedikte Wallace
Publisert 13. mai 2024 10:07 - Sist endret 13. mai 2024 17:03