RIWA

“
EDIT CodeSchool – škola programiranja
Programiranje, dizajn za web

Razvoj Inteligentnih Web Aplikacija

Artificial intelligence / Umjetna inteligencija

EDIT Code School škola programiranja

Vedrangf / CC BY-SA (https://creativecommons.org/licenses/by-sa/4.0)

11
 EDIT CodeSchool – škola programiranja
Programiranje, dizajn za web

Artificial intelligence / Umjetna inteligencija

IN TELIG
A
UM ENCIJ
JETN A

“
2

2
 3

Kako doći do umjetne

inteligencije ?
• Za inteligentna bića koja nas
okružuju zajednički je mozak.
• Tijekom života inteligentna bića
mogu učiti iz primjera.
• Često iako niste potpuno sigurni u
neki odgovor procijenite koji je
odgovor po vama najvjerojatnije
točan.
 4

Mozak ?
• Mozak se sastoji od neurona
• Procjenjuje se kako ih u mozgu ima
gotovo devedeset milijardi
90.000.000.000
• Zašto ne bi kopirali prirodu i izradili
vlastiti umjetni neuron odnosno
mozak?
Umjesto riječi mozak koristit ćemo
naziv umjetna neuronska mreža.
 Pogledajmo čiji mozak ima najviše neurona !
• Često se misli kako je najvažnije imati što više neurona.
• Vidimo kako je osim broja važno i kako su neuroni povezani, odnosno kako se koriste.
• Moramo o tome voditi računa i kod mozga kojeg ćemo programirati.

Slon
251 milijardu neurona

Patuljasti Gorila Čovjek

Čimpanza 33 milijardi neurona 86 milijardi
marmoset
22 milijardi neurona
majmun
neurona
0.63 milijardi
neurona
 6
Kako učimo?
Iz iskustva nekog
drugog…

Prikupimo primjere koji su nam

1 zanimljivi kako bi naučili nešto
novo.

Iz primjera za koje nam

2 učitelj(ica) kažu točan odgovor,
pokušavamo zaključiti na
pravila za nove primjere.

3 Nakon što mislimo kako smo

dobro naučili, kroz testove
provjeravamo koliko smo zaista
dobro nešto naučili.
 7
Prepoznavanje boje
Uvježbavanjem neuronske mreže

Prikupi podatke za boje koje će ti Kako bi primjer bio jednostavniji, uvježbaj mrežu samo na
1 poslužiti za uvježbavanje. Prisjeti se prepoznavanje plavkastih i crvenkastih boja
kako se boja može prikazati pomoću R
G B komponenti.

Uvježbaj neuronsku mrežu koristeći se rgb(230,85,78)

2 primjerima koje si prikupio i točnim
odgovorima koje si kao učitelj dao
mreži. rgb(48,69,199)

Na primjerima koje nisi koristio za

3 vrijeme uvježbavanja testiraj koliko je
mreža dobro naučila prepoznavati
boje.

https://imagecolorpicker.com/
www.yourwebsite.com
ili color picker u google tražilici
 9
Prikupljanje podataka
Odabir boja za prepoznavanje

Prikupi podatke za boje koje će ti Kako bi primjer bio jednostavniji, uvježbaj mrežu samo na
1 poslužiti za uvježbavanje. Prisjeti se prepoznavanje plavkastih i crvenkastih boja
kako se boja može prikazati pomoću R
G B komponenti.

crvenkasta plavkasta

www.yourwebsite.com
color picker u google tražilici ili
 6
Priprema podataka?
Iz slike ili color picker-a…

Prikupimo primjere koji su nam

1 zanimljivi kako bi naučili nešto
novo.

Pazite da primjeri budu

2 dovoljno različiti kako bi
omogućili bolje učenje.

Zapišite RGB komponente za

3 svaku točku, a ako želite možete
prikupljene podatke i nacrtati,
ali crtajte samo R i B
komponentu
Kolika je vrijednost crvene (R) za svaku
točku vidimo prema veličini kruga
 1
Idemo na kodiranje!
Programiramo umjetnu neuronsku mrežu

1 Preuzmite početni kod sa stranice EDIT-a.

2 Otvorite kod u VS Code uređivaču koda.

3 Otiđite na dio u kodu koji je obilježen sa

/*PIŠITE KOD ZA VAŠU NEURONSKU
MREŽU*/

edit.dalmacija.hr
 2
Što se nalazi u kôdu
1 Podaci za uvježbavanje

70 /*PIŠITE KOD ZA VAŠU NEURONSKU MREŽU*/
// Korak 1: prikupljanje podataka za učenje
// Korak 1a primjeri koji opisuju objekt od interesa kroz ulazne i izlazni podatak
const podaci = [
    {r:255, g:0, b:0, boja:'crvenkasto'}, // ovo je prvi primjer za učenje

{r:0, g:1, b:253, boja:'plavkasto'} // ovo je zadnji primjer za učenje
  ];
 3
Što se nalazi u kôdu
2 Postavljanje neuronske
mreže
82 // Korak 2: postavi mrežu
const mreza = postaviMrezu(); Pozivamo funkciju
postaviMrezu();
u VS Code uređivaču koda mišem dođite na
funkciju, pritiskom na desnu tipku miša otvara se
izbornik koji će vam omogućiti otići na mjesto u
kôdu gdje je funkcija i napisana.
 4
Što se nalazi u kôdu
2 Postavljanje neuronske mreže – funkcija
postaviMrezu();
8 // funkcija za Korak 2: postavi mrežu
function postaviMrezu(){
    // Korak 2a definiraj čemu služi mreža i pohrani odabrano u varijablu opcije
    const opcije = {
      task: 'classification', // zadatak klasifikacije 
3
      debug: true // grafički prikaz uvježbavanja (ili false za sakrivanje prikaza)
    }
    // Korak 2b: inicijaliziraj svoju neuronsku mrežu
4
    const nn = ml5.neuralNetwork(opcije); // neuronska mreža nazvana nn gradi se kako je 
zadano u varijabli opcije
    return nn; // funkcija postaviMrezu() vraća neuronsku mrežu nn
  }
 5
Što se nalazi u kôdu
3 Slanje podataka neuronskoj mreži
postaljiPodatke(mreza, podaci);
84 // Korak 3 definiraj ulazne podatke i izlazne podatke za svaki primjer i 
pošalji ih stvorenoj mreži 
posaljiPodatke(mreza, podaci); Pozivamo funkciju postaljiPodatke(mreza, podaci);

u VS Code uređivaču koda mišem dođite na

funkciju, pritiskom na desnu tipku miša otvara se
izbornik koji će vam omogućiti otići na mjesto u
kôdu gdje je funkcija i napisana.
 4 Slanje podataka neuronskoj mreži 6
postaljiPodatke(mreza, podaci);
20 // funkcija za Korak 3 definiraj ulazne podatke i izlazne podatke za svaki primjer i p
ošalji ih stvorenoj mreži 
 function posaljiPodatke(nn, podaci){
  podaci.forEach(primjer => { // prođi kroz sve primjere iz podataka
    //console.log(item);
    const ulazi = { // za svaki primjer kroz koji prolaziš definiraj ulaze
        r: primjer.r, 
ULAZ         g: primjer.g, 
5
        b: primjer.b
        };
    const izlaz = { // za svaki primjer kroz koji prolaziš definiraj točan izlaz
        boja: primjer.boja
IZLAZ 6
        };
    //console.log(ulazi, izlaz);
    nn.addData(ulazi, izlaz); // ulazne podatke i očekivani izlaz iz primjera pošalji 
neuronskoj mreži
  });
    // Korak 3.1: normaliziraj svoje podatke što je korak koji pomaže u uvježbavanju n
euronske mreže
    nn.normalizeData();
    //console.log(nn);
  }
 7
Što se nalazi u kôdu
4 Uvježbaj neuronsku mrežu uvjezbajMrezu(mreza);

85 // Korak 4: uvježbaj svoju neuronsku mrežu
uvjezbajMrezu(mreza); //čekaj dok se mreža ne uvježba
// Korak 5: koristi uvježbani model
// primjer za testUlaz
const testUlaz = {
    r: 0, 
    g: 0, 
u VS Code uređivaču koda mišem dođite na
    b: 255
funkciju , uvjezbajMrezu(mreza); pritiskom na
  } desnu tipku miša otvara se izbornik koji će vam
  omogućiti otići na mjesto u kôdu gdje je funkcija i
  const testUlaz2 = { napisana.
    r: 250, 
    g: 0, 
    b: 2
  }
 8
Što se nalazi u kôdu
2 Uvježbaj neuronsku mrežu uvjezbajMrezu(mreza);

40 // Korak 4: uvježbaj svoju neuronsku mrežu
uvjezbajMrezu(mreza); //čekaj dok se mreža ne uvježba

u VS Code uređivaču koda mišem dođite na

funkciju, pritiskom na desnu tipku miša otvara se
izbornik koji će vam omogućiti otići na mjesto u
kôdu gdje je funkcija i napisana.
 9
Što se nalazi u kôdu
2 Uvježbaj neuronsku mrežu uvjezbajMrezu(mreza);

40 // Korak 4: uvježbaj svoju neuronsku mrežu
 function uvjezbajMrezu(nn){
   const opcijeUvjezbavanja = {
    epochs: 32, // dani vježbanja
    batchSize: 12 // broj zadataka koje rješavam u danu
  }
  nn.train(opcijeUvjezbavanja, porukaKraj); // započinjemo uvježbavanje mreže s
 parametrima koje smo zadali. Uvježbavanje traje neko vrijeme, pa ćemo nakon uv
ježbavanja ispisati poruku pozivom funkcije porukaKraj
return true;
} 
 10
Što se nalazi u kôdu
2 Uvježbaj neuronsku mrežu uvjezbajMrezu(mreza);

49 function porukaKraj(){
    alert("Mreža se uvježbala! Testiram...");
    testiraj(mreza, testUlaz);
    testiraj(mreza, testUlaz2);
}
Rezultat 11
Rezultat 11
 2
Rezultat
Neuronska mreža prepoznaje boju temeljem
RGB-a

1 Temeljem podataka koje smo upisali i

očekivanih odgovora uvježbali smo
neuronsku mrežu.

2 Nakon uvježbavanja neuronske mreže, na

primjeru kojeg nismo koristili za
uvježbavanje provjerili smo koliko je mreža
dobro naučila prepoznavati boje temeljem
RGB-a.
3 Neuronska mreža uspješno je razvrstala
ulazne podatke u dva skupa: crvenkasno i
plavkasto

edit.dalmacija.hr
 3
Što dalje?
Prepoznavanje voća iz
slike

Prikupit ćemo slike voća i

1 označiti koja slika pripada
kojem skupu voća (jabuke,
banane…)

Izradit ćemo umjetnu

2 neuronsku mrežu za
razvrstavanje slika voća i
uvježbati ju.

Provjerit ćemo koliko je

3 mreža dobro naučila
razvrstavati voće.

https://imagecolorpicker.com/
 RIWA

“
EDIT CodeSchool – škola programiranja

PROJEKT !
Programiranje, dizajn za web

Artificial intelligence / Umjetna inteligencija

Razvoj Inteligentnih Web Aplikacija

EDIT Code School škola programiranja
Vedrangf / CC BY-SA (https://creativecommons.org/licenses/by-sa/4.0)

24
24