I den här minikursen kan du pröva på att bygga två AI-appar (webbappar) som beskrivs i kursen Så funkar AI!.
imagecp klassificerar ett föremål i en bild.
objectcp klassificerar och lokaliserar flera föremål i en bild.
I båda apparna kan du klistra in bilder för klassificering.
På din Windows-PC kommer du att installera en utvecklingsmiljö, bygga och provköra apparna.
Först lär du dig att installera en utvecklingsmiljö på din Windows-PC för webbappar.
Det vi gör här finns också som en uppgift längre fram så vänta med att göra något.
Det finns förstås flera val av verktyg/hjälpmedel än de här men det är bra val tycker jag.
Vi behöver en editor för att editera våra filer index.html och index.js.
Notepad++ kan tyckas vara ett lite konstigt val, det finns ju så många fantastiska editorer.
Men jag gillar Notepad++, den startar blixtsnabbt, har vad som behövs och skräpar inte ner i filerna.
Kan laddas ner från https://notepad-plus-plus.org/.
Egentligen behöver vi bara npm (Node Package Manager) men npm är lättast att installera
genom att installera Node.js.
Node.js används för att köra Javascript utanför webbläsaren t.ex. i serverapplikationer.
Node.js kan laddas ner från https://nodejs.org/en/.
32 eller 64-bits version är förvalt. Välj LTS-versionen.
Våra webbappar behöver en webbserver och med Parcel får du en lokal webbserver (som går i din PC).
Parcel bygger också webbappen genom att ladda ner de Javascript-paket som appen behöver och ”paketerar” för att få en lätt installation på en webbserver.
Om du gör en ändring i t.ex. index.js och sparar ändringen så bygger Parcel automatiskt om appen och visar den ändrade appen i webbläsaren.
Parcel installeras med hjälp av npm. Öppna Kommandotolken. I fönstret skriv:
npm install -g parcel-bundler
Varningar:
Nu ska vi använda utvecklingsmiljön som vi installerade för att bygga appen imagecp från kursen Så funkar AI!.
Det vi gör här finns också som en uppgift så vänta med att göra något.
Jag förutsätter att filerna index.html, index.js och poodle.jpg för appen finns i foldern imagecp någonstans på disken. Det beskrivs i övningarna var du kan hämta filerna.
Jag startar Kommandotolken och går till foldern imagecp.
Där ger jag kommandot npm init -y. Det gör jag bara en gång per app.
Då skapas en fil package.json som kommer att innehålla info om vår app.
OBS! Det här behöver du bara göra en gång eller om du vill ha nya versioner av paketen.
Här har jag ett val antingen låter jag parcel hämta alla paket som behövs (ger rörig utskrift på skärmen men är enklast) eller också installerar jag paketen själv.
Jag går till steg 3 om jag låter parcel hantera paketen annars fortsätter jag.
Jag installerar nu de paket som appen behöver (se översta raderna i index.js):
npm install @tensorflow-models/mobilenet
Jag får varningar att ytterligare två paket behövs som jag installerar (OBS: Versionerna är kanske olika för dig - se din utskrift):
npm install @tensorflow/tfjs-core@~1.2.1 npm install @tensorflow/tfjs-converter@~1.2.1
Jag ger kommandot parcel index.html.
Då byggs appen och en webbserver startas.
ctrl-c (c med ctrl-tangenten nedtryckt) om jag senare vill stoppa servern.
I en flik på Chrome ger jag in adressen localhost:1234 och ser nu appen.
OBS: Om porten 1234 är upptagen (t.ex. om du har råkat starta två webbservrar) ska du ge in det som står i Kommandotolken.
Om du senare vill jobba med appen och om webbservern inte är startad går du till foldern där appen finns och gör som i steg 3.
Du måste förstås ha installerat utvecklingsmiljön för att kunna göra den här övningen.
Först skapa en folder imagecp där du vill ha appen. Kan göras med Utforskaren.
Du behöver filerna index.html, index.js och poodle.jpg.Filerna finns på GitHub: https://github.com/KjelleJ/imagecp
Klicka på 'Code', välj 'Download ZIP'.
Zip-filen laddas nu ner av webbläsaren. Välj 'Visa i mapp' eller kolla i 'Hämtade filer'
Höger-klicka på 'imagecp-main.zip' och välj 'Extrahera alla…' och 'Extrahera'.
Kopiera filerna index.html, index.js och poodle.jpg i foldern imagecp-main
Klistra in filerna i foldern imagecp som du skapade först i övningen.
Nu kan du följa de tidigare anvisningarna (steg 1-3) för att bygga appen.
Använd kommandot cd i Kommandotolken för att komma till rätt folder.
Förutsättningar: Du har gjort Uppgift 2, startat servern och kört igång appen i webbläsaren.
Öppna filen index.html i Notepad++. Det gör du enklast från Utforskaren: Högerklicka på filnamnet (index.html) och välj 'Edit with Notepad++'.
Ändra src="poodle.jpg" till src="xpoodle.jpg", spara filen (den ”lilla disketten” uppe till vänster).
Du får nu ett felmeddelande både i Kommandotolken där servern går och i webbläsaren där appen körs.
Ändra tillbaka i Notepad++, spara och allt är ok igen.
Förutsättningar: Du har gjort Upgift 2, startat servern och kört igång appen i webbläsaren.
Öppna filen index.js i Notepad++.
Ändra 'document.getElementById('predict').onclick = predict;' till 'document.getElementById('xpredict').onclick = predict;'
Spara filen. Appen funkar inte. Det går inte att klassificera!
Tryck på F12 i appen och välj Konsol.
Där finns ett felmeddelande: "Cannot set property ’onclick’ of null" - id "xpredict" hittas inte.
Klicka på index.js:xx till höger och du kommer till felet i index.js.
Ändra tillbaka i Notepad++, spara och allt är ok igen.
Du måste förstås ha installerat utvecklingsmiljön för att kunna göra den här övningen.
Först skapa en folder objectcp där du vill ha appen. Kan göras med Utforskaren.
Du behöver filerna index.html, index.js och dogs.jpg.
Filerna finns på GitHub: https://github.com/KjelleJ/objectcp
Klicka på 'Code', välj 'Download ZIP.'
Zip-filen laddas nu ner av webbläsaren. Välj 'Visa i mapp' eller kolla i 'Hämtade filer'.
Höger-klicka på objectcp-main.zip och välj 'Extrahera alla…' och 'Extrahera'.
Kopiera filerna index.html, index.js och dogs.jpg i foldern objectcp-main
Klistra in filerna i foldern objectcp som du skapade först i övningen.
Starta Kommandotolken.
Använd kommandot cd i Kommandotolken för att komma till rätt folder
Kör följande kommandon:
npm init -y npm install @tensorflow-models/coco-ssd npm install @tensorflow/tfjs-backend-cpu npm install @tensorflow/tfjs-backend-webgl parcel index.html
Om allt gått bra öppna en ny flik i webbläsaren med adressen localhost:1234
Det verkar vara enkelt att skapa AI-appar med Javascript. Men det är inte alltid sant - vad vi har sett är speciella fall. Programspråket Python är mycket lättare att använda än Javascript för AI. I kursen AI-experiment 2 skapar vi en AI-app med Python.