Bygg AI-appar!

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.

A) Installera utvecklingsmiljön

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.

Editor: Notepad++

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/.

Node.js

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.

Parcel

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

Uppgift 1: Installera utvecklingsmiljön enligt tidigare anvisningar.

Varningar:

Tar ett antal hundra MB i diskutrymme – inklusive apparna.
Programutveckling är tålamodsprövande men roligt. Det är som att lösa korsord eller sticka – tiden bara går.
Noggrannhet är ett måste annars skaffar du dig problem.

B) Använd utvecklingsmiljön

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.

Förutsättningar

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.

1) Initiera - bara en gång

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.

2) Installera paket som används av appen

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

3) Bygg appen och starta webbservern

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.

4) Nästa gång

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.

Uppgift 2: Bygg appen imagecp.

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.

Uppgift 3: Fel när appen byggs.

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.

Uppgift 4: Fel när appen körs.

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.

Uppgift 5: Bygg appen objectcp

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

Sammanfattning

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.