English version of this page

Tegning med ml5.js og SketchRNN

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: nese, hode, organ, organisme, pattedyr.

Creative Computing Hub Oslo (C2HO) presenterer en serie verksteder fokusert på ml5.js, et nybegynnervennlig bibliotek som muliggjør bruk av maskinlæring direkte i nettleseren din. Biblioteket gir tilgang til maskinlæringsalgoritmer og modeller i nettleseren, ved å bygge på TensorFlow.js uten behov for andre eksterne avhengigheter. Det inkluderer forhåndstrente modeller som muliggjør gjenkjenning av bilder, deteksjon av menneskelige positurer, generering av tekst og mer.

I denne økten skal vi arbeide med den forhåndstrente modellen SketchRNN.

SketchRNN er en maskinlæringsmodell utviklet av Googles Magenta-team. Den er designet for å skape skisser av objekter og dyr. Modellen er trent på millioner av kruseduller samlet inn fra spillet Quick, Draw! Det som gjør SketchRNN interessant, er at den ikke bare genererer nye bilder, men faktisk forstår noe av strukturen i det den tegner. Den bruker en type modell kalt et rekurrent nevralt nettverk, som er spesielt godt til å forstå sekvenser av data, noe som er akkurat det en tegning er - en sekvens av streker over tid.

Del 1: Last inn modellen og generer tegninge

For å starte vil vi bruke en p5-mal som laster ml5-biblioteket. Dette gir oss tilgang til flere forhåndstrente modeller fra tensorflow og i dag skal vi bruke ml5 SketchRNN-modellen. Når vi laster den forhåndstrente modellen, kan vi velge mellom flere forskjellige modeller som er trent på ulike tegninger, fra katter og hunder til mer obskure objekter som kaninskilpadder og yogasykler. Se hele listen over modeller her.

I skriptet nedenfor skriver index.html-filen også en overskrift for lerretet vårt og skriver ut statusen for SketchRNN-modellen. For å følge med på videoen ovenfor kan du bruke denne malen for å starte fra bunnen av:

Vis og rediger kode

 

Siden vi laster en forhåndstrent modell, trenger vi ikke å legge til noen data eller trene modellen selv. I stedet vil vi starte med å opprette en generer-button som vil be modellen om å generere penne-strøk for oss å tegne på lerretet vårt. Vi implementerer en funksjon generateDrawing som vil bli kalt når generer-knappen trykkes. Her kan vi bruke ml5-funksjonen som får SketchRNN til å begynne å tegne.

Når vi bruker ml5-funksjonen til å generere, vil modellen returnere en rekke penne-strøk. Vi vil bruke funksjonen gotResults til å håndtere disse resultatene. For å bedre forstå hva modellen returnerer, kan vi skrive ut resultatene til konsollvinduet vårt ved hjelp av console.log-funksjonen.

SketchRNN genererer posisjonen og tilstanden til pennen. Pennen kan være i en av tre tilstander: oppe, nede og slutt. For å tegne disse linjene på lerretet vårt vil vi fylle ut vår draw-funksjonen. Når pennen er nede, vil vi tegne en linje inntil tilstanden endrer seg til slutt.

Vis og rediger kode

 

Del 2: Generer flere tegninger

Ved å legge til et kall til background inne i vår generateDrawing-funksjon, fjerner vi det tidligere genererte bildet og tegner et nytt hver gang vi trykker på generer-knappen. Hvis vi i stedet ønsker å fylle lerretet vårt med forskjellige tegninger, kan vi fjerne denne linjen med kode og gjøre en liten endring til posisjonen av modellens første strøk.

Vi kan også utforske noen forskjellige verdier for våre tegninger ved å endre strokeWeight og strekfarge, eller velge disse verdiene tilfeldig ved hjelp av p5s random-funksjon.

Ved å legge til et kall til background inne i vår generateDrawing-funksjon kan vi slette det tidligere genererte bildet og tegne et nytt hver gang vi trykker på generer-knappen. Hvis vi i stedet ønsker å fylle lerretet vårt med forskjellige tegninger, kan vi fjerne denne kodelinjen og gjøre en liten endring til plasseringen av modellens første strøk.

Vi kan også utforske forskjellige verdier for våre tegninger ved å endre strokeWeight og stroke-fargen, eller velge disse verdiene tilfeldig ved hjelp av p5s random-funksjon.

Image may contain: Plant, Nature, Branch, Organism, Art.

Vis og rediger kode

 

Del 3: Velge forskjellige modeller

Vi kan velge mellom mange forskjellige SketchRNN-modeller gjennom ml5. I denne delen vil vi lage en liste over alle de forskjellige modellene og velge en ny modell hver gang vi trykker på generer-knappen. Igjen vil vi bruke p5s random-funksjon, slik at vi ikke vet hvilken modell som blir lastet - på denne måten kan du spille en tegnelek mot SketchRNN ved å prøve å gjette hva modellen forsøker å tegne. Her er noen eksempler:

Image may contain: Hand, White, Product, Organ, Azure.

Vis og rediger kode

 

 

Del 4: Samskaping med SketchRNN

Til slutt, la oss la SketchRNN motta input fra våre egne pennestrøk. For å oppnå dette lager vi en separat strøksti for brukerinndata inne i vår draw-funksjon. Vi vil også lage en funksjon startSketchRNN som kalles når en slipp av musen blir detektert inne på lerretet vårt. På denne måten vil SketchRNN-modellen bruke vårt forrige pennestrøk som et utgangspunkt og forsøke å fortsette tegningen på en meningsfull måte. Hvis vi for eksempel laster ansiktsmodellen, vil SketchRNN prøve å skape et ansikt basert på det vi tegner.

Image may contain: Nose, Smile, Facial expression, Vertebrate, White.

Noen ganger fungerer modellen bedre og noen ganger verre, så vi legger til en knapp for å slette den nåværende tegningen og tilbakestille modellen for en ny oppfordring. Vi legger også til en dropdown-meny så vi kan velge forskjellige modeller avhengig av hva vi vil tegne. Ved å bruke p5-funksjonen changed kan vi sikre at modellen endres når vi velger et nytt modellnavn fra vår rullegardinmeny.

Vis og rediger kode

 

 

Gå Videre

Utforsk andre RNN-implementeringer og tren din egen:

Av Benedikte Wallace
Publisert 20. apr. 2024 13:02 - Sist endret 13. mai 2024 10:07