Merge branch 'dev' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into dev

12 files changed, 676 insertions, 162 deletions

diff --git a/backend/microservice/PythonServer/project/api/api.py b/backend/microservice/PythonServer/project/api/api.py
index 1f4afdeb..b2fb503b 100644
--- a/backend/microservice/PythonServer/project/api/api.py
+++ b/backend/microservice/PythonServer/project/api/api.py
@@ -7,7 +7,8 @@ import pandas as pd
 import keras
 import csv
 import json
-
+import mlservice
+from mlservice import obuka
 
 app = flask.Flask(__name__)
 app.config["DEBUG"] = True
@@ -20,13 +21,8 @@ def index():
 @app.route('/data', methods = ['GET', 'POST'])
 def data():
     if request.method == 'POST':
-        f = request.json['filepath']
-        data = []
-        with open(f) as file:
-            csvfile = csv.reader(file)
-            for row in csvfile:
-                data.append(row)
-        data = pd.DataFrame(data)
+        f = request.json['filepath']  
+        data = pd.read_csv(f)
         print(data)
-        return render_template('data.html', data = data.to_html(header=False, index=False))
+        return obuka(data,request.json)
 app.run()
\ No newline at end of file
diff --git a/backend/microservice/PythonServer/project/api/socket/client.py b/backend/microservice/PythonServer/project/api/socket/client.py
new file mode 100644
index 00000000..d5740e25
--- /dev/null
+++ b/backend/microservice/PythonServer/project/api/socket/client.py
@@ -0,0 +1,10 @@
+import socket
+
+c = socket.socket()
+
+c.connect(('localhost', 9999))
+
+name = input("Client name:")
+c.send(bytes(name, 'utf-8'))
+
+print(c.recv(1024).decode())
\ No newline at end of file
diff --git a/backend/microservice/PythonServer/project/api/socket/server.py b/backend/microservice/PythonServer/project/api/socket/server.py
new file mode 100644
index 00000000..d6ff3f7c
--- /dev/null
+++ b/backend/microservice/PythonServer/project/api/socket/server.py
@@ -0,0 +1,16 @@
+import socket
+
+s = socket.socket()
+print('Socket Created')
+
+s.bind(('localhost', 9999))
+
+s.listen(3)
+print('waiting for connections')
+
+while True:
+    c, addr = s.accept()
+    name = c.recv(1024).decode()
+    print('Connected with ', addr, name)
+    c.send(bytes('Welcome', 'utf-8'))
+    c.close()
\ No newline at end of file
diff --git a/backend/microservice/PythonServer/project/api/socket2/client.py b/backend/microservice/PythonServer/project/api/socket2/client.py
new file mode 100644
index 00000000..65e76b55
--- /dev/null
+++ b/backend/microservice/PythonServer/project/api/socket2/client.py
@@ -0,0 +1,16 @@
+# Import socket module
+import socket            
+ 
+# Create a socket object
+s = socket.socket()        
+ 
+# Define the port on which you want to connect
+port = 12345               
+ 
+# connect to the server on local computer
+s.connect(('127.0.0.1', port))
+ 
+# receive data from the server and decoding to get the string.
+print (s.recv(1024).decode())
+# close the connection
+s.close()    
\ No newline at end of file
diff --git a/backend/microservice/PythonServer/project/api/socket2/server.py b/backend/microservice/PythonServer/project/api/socket2/server.py
new file mode 100644
index 00000000..c65dae78
--- /dev/null
+++ b/backend/microservice/PythonServer/project/api/socket2/server.py
@@ -0,0 +1,39 @@
+# first of all import the socket library
+import socket            
+ 
+# next create a socket object
+s = socket.socket()        
+print ("Socket successfully created")
+ 
+# reserve a port on your computer in our
+# case it is 12345 but it can be anything
+port = 12345               
+ 
+# Next bind to the port
+# we have not typed any ip in the ip field
+# instead we have inputted an empty string
+# this makes the server listen to requests
+# coming from other computers on the network
+s.bind(('', port))        
+print ("socket binded to %s" %(port))
+ 
+# put the socket into listening mode
+s.listen(5)    
+print ("socket is listening")           
+ 
+# a forever loop until we interrupt it or
+# an error occurs
+while True:
+ 
+# Establish connection with client.
+  c, addr = s.accept()    
+  print ('Got connection from', addr )
+ 
+  # send a thank you message to the client. encoding to send byte type.
+  c.send('Thank you for connecting'.encode())
+ 
+  # Close the connection with the client
+  c.close()
+   
+  # Breaking once connection closed
+  break
\ No newline at end of file
diff --git a/backend/microservice/mlservice.py b/backend/microservice/mlservice.py
new file mode 100644
index 00000000..f8e98184
--- /dev/null
+++ b/backend/microservice/mlservice.py
@@ -0,0 +1,335 @@
+from typing_extensions import Self
+import pandas as pd
+import tensorflow as tf
+import keras
+import numpy as np
+
+from copyreg import constructor
+import flask
+from flask import request, jsonify, render_template
+from sklearn.preprocessing import LabelEncoder
+import csv
+import json
+class Response:
+    def __init__(self,history,rezultat,tacnost,preciznost,recall,spec,f1,classificationreport,mse,mae,mape,rmse,cmatrix,fpr,tpr):
+        self.history=history
+        self.rezultat=rezultat
+        self.tacnost=tacnost
+        self.preciznost=preciznost
+        self.recall=recall
+        self.spec=spec
+        self.f1=f1
+        self.classificationreport=classificationreport
+        self.mse=mse
+        self.mae=mae
+        self.mape=mape
+        self.rmse=rmse
+        self.cmatrix=cmatrix
+        self.fpr=fpr
+        self.tpr=tpr
+
+    ### 1)Ucitavanje vrednosti
+def obuka(data,params):
+    import numpy as np
+    import pandas as pd
+    import tensorflow as tf
+    import matplotlib.pyplot as plt   
+    #print(1)
+    #data1=pd.read_csv('titanic.csv')
+    #data=data1.copy()
+    #print(data.head())
+
+    ### U promenjivoj kolone nalaze se nazivi svih kolona seta podataka
+    kolone=data.columns
+    #print(kolone[1])
+    #print(data[kolone[1]].isnull().sum())
+    #print(data[kolone[1]].head(10))
+
+
+    ### 2)Proveravanje svih kolona za null vrednosti i popunjavanje medijanom ili srednjom vrednosti ili birisanje
+
+    #####Part2 #####
+    '''
+    brisanje=input("DA LI ZELITE DA IZBRSETE SVE KOLONE SA NULL VREDNOSTIMA? ")
+    
+    brisanje=True
+    if(brisanje=='da'):
+        data=data.dropna(axis=1)
+    elif(brisanje=='ne'):
+        brisanjer=input("DA LI ZELITE DA IZBRISETE SVE REDOVE SA NULL VREDNOSTINA ")
+        if(brisanjer=='da'):
+            data=data.dropna()
+        elif(brisanjer=='ne'):
+
+            for i in range(len(kolone)):
+                if(isinstance(data[kolone[i]].dtype, pd.CategoricalDtype)):
+                    print('cat')
+
+                if(data[kolone[i]].isnull().any()):
+                    tippodataka=data[kolone[i]].dtype
+                    kolona=data[kolone[i]].copy()
+            
+                    if(tippodataka==np.float64 or tippodataka==np.int64):
+                        popunjavanje=input("UNETI NACIN POPUNJAVANJA PROMENJIVIH SA NULL VREDNOSTIMA ")
+                        if(popunjavanje=='medijana'):
+                            medijana=kolona.mean()
+                            data[kolone[i]]=data[kolone[i]].fillna(medijana)
+                        if(popunjavanje=='srednjavrednost'):
+                            sv=data[kolone[i]].sum()/data[kolone[i]].count()
+                            data[kolone[i]]=sv
+                        if(popunjavanje=='brisanjekolone'):
+                            data=data.dropna(axis=1)
+
+                    elif(tippodataka==np.object_):
+                        najcescavrednost=kolona.value_counts().index[0]
+                        data[kolone[i]]=data[kolone[i]].fillna(najcescavrednost)
+
+    '''  
+    ### 3)Izbacivanje kolona koje ne uticu na rezultat PART2
+    nredova=data.shape[0]
+    for i in range(len(kolone)):
+        if((data[kolone[i]].nunique()>(nredova/2)) and( data[kolone[i]].dtype==np.object_)):
+            data.pop(kolone[i])
+
+
+    print(data.head(10))
+
+    ### 4)izbor tipa enkodiranja
+    kolone=data.columns ### Azuriranje postojecih kolona nakon moguceg brisanja
+
+    #enc=input("UNETI TIP ENKODIRANJA ")
+    enc=params["encoding"]
+    onehot=0
+
+    ### 5)Enkodiranje svih kategorijskih promenjivih label-encode metodom
+
+    if(enc=='label'):
+        from sklearn.preprocessing import LabelEncoder
+        encoder=LabelEncoder()
+        for k in range(len(kolone)):
+            if(data[kolone[k]].dtype==np.object_):
+                data[kolone[k]]=encoder.fit_transform(data[kolone[k]])
+        print(data.head(20))
+
+    ### 6)Enkodiranje svih kategorijskih promenjivih onehot metodom
+
+    elif(enc=='onehot'):
+        ### PART2###
+        onehot==1
+        kategorijskekolone=[]
+        for k in range(len(kolone)):
+            if(data[kolone[k]].dtype==np.object_):
+                
+                kategorijskekolone.append(kolone[k]) ###U kategorijske kolone smestaju se nazivi svih kolona sa kategorijskim podacima
+        
+        print(kategorijskekolone)
+
+        ### Enkodiranje 
+        data=pd.get_dummies(data,columns=kategorijskekolone,prefix=kategorijskekolone)
+        print(data.head(10))
+
+    kolone=data.columns ### Azuriranje kolona nakon moguceg dodavanja
+
+    ### 7)Podela skupa na skup za trening i skup za testiranje
+
+    #predvidetikol=input("UNETI NAZIV KOLONE ČIJU VREDNOST TREBA PREDVIDETI ")
+    ###sta se cuva od promenjivih broj kolone ili naziv kolone???
+    predvidetikol=params["columnToPredict"]
+
+    xkolone=[]
+    for k in range(len(kolone)):
+            if(kolone[k]!=predvidetikol):
+                
+                xkolone.append(kolone[k])###U xkolone se smestaju nazivi kolona cije vrednosti nije potrebno predvideti !!!Prefiks one-hot!!!
+
+    ### 7.1)Podela na x i y
+    ###Dodavanje vrednosti u x
+    x=data[xkolone].values
+    ###Dodavanje vrednosti u y, samo za label enkodiranje, bez prefiksa
+    y=data[predvidetikol].values
+
+    print(data[xkolone].head(10))
+    print(data[predvidetikol].head(10))
+
+    ### 7.2)Unos velicina za trening i test skup
+    #trening=int(input('UNETI VELIČINU TRENING SKUPA '))
+    #test=int(input("UNETI VELICINU TESTNOG SKUPA"))
+    test=params["randomTestSetDistribution"]
+    ###Provera unetih velicina
+    if(test<=0 or test>=100):
+        print("POGREŠAN UNOS VELIČINE SKUPA ZA TRENING")
+    if(test>1):
+        test=test/100
+
+    ### 7.3)Da li korisnik zeli nasumicno rasporedjivanje podataka?
+    #nasumicno=input("DA LI ŽELITE NASUMIČNO RASPOREDJIVANJE PODATAKA U TRENING I TEST SKUP? ")
+    nasumicno=params["randomTestSet"]
+    ###!!!Dugme za nasumici izbor
+    if(nasumicno):
+        random=50
+    else:
+        random=0
+
+    ### 7.4)Podela podataka
+    from sklearn.model_selection import train_test_split
+    x_train,x_test,y_train,y_test=train_test_split(x,y,test_size=test,random_state=random)
+
+    ### 8)Skaliranje podataka
+    from sklearn.preprocessing import StandardScaler
+    scaler=StandardScaler()
+    scaler.fit(x_train)
+    x_test=scaler.transform(x_test)
+    x_train=scaler.transform(x_train)
+
+    #####ZAVRSENA PRIPREMA PODATAKA#####
+
+    #####OBUCAVANJE MODELA#####
+
+    ### 9)Inicijalizacija vestacke neuronske mreze
+
+    classifier=tf.keras.Sequential()
+
+    ### 10)Dodavanje prvog,ulaznog sloja
+    #aktivacijau=input("UNETI ŽELJENU AKTIVACIONU FUNKCIJU ULAZNOG SLOJA ")
+    #brojnu=int(input("UNETI BROJ NEURONA ULAZNOG SLOJA "))
+
+    aktivacijau=params["inputLayerActivationFunction"]
+    brojnu=params["inputNeurons"]
+
+    classifier.add(tf.keras.layers.Dense(units=brojnu,activation=aktivacijau,input_dim=x_train.shape[1]))
+
+    ### 11)Dodavanje drugog, skrivenog sloja
+    #aktivacijas=input("UNETI ŽELJENU AKTIVACIONU FUNKCIJU SKRIVENOG SLOJA ")
+    #brojns=int(input("UNETI BROJ NEURONA SKRIVENOG SLOJA "))
+
+    aktivacijas=params["hiddenLayerActivationFunction"]
+    brojns=params["hiddenLayerNeurons"]
+
+    classifier.add(tf.keras.layers.Dense(units=brojns,activation=aktivacijas))
+
+    ### 12) Dodavanje treceg, izlaznog sloja
+    #aktivacijai=input("UNETI ŽELJENU AKTIVACIONU FUNKCIJU IZLAZNOG SLOJA ")
+
+    aktivacijai=params["outputLayerActivationFunction"]
+
+    classifier.add(tf.keras.layers.Dense(units=1,activation=aktivacijai))
+
+
+    ### 13) Kompajliranje neuronske mreze
+    #gubici=input("UNETI FUNKCIJU OBRADE GUBITAKA ")
+    #optimizator=input("UNETI ŽELJENI OPTIMIZATOR ")
+
+    optimizator=params["optimizer"]
+
+    ### 13.1)Izbor metrike za kompajler PART2
+    metrike=[]
+    while(1):
+        m=params['lossFunction']
+        
+        if(m=='KRAJ'):
+            break   
+        metrike.append(m)
+    classifier.compile(optimizer=optimizator, loss='binary_crossentropy',metrics = metrike)
+
+    ### 14) 
+    #uzorci=int(input("UNETI KOLIKO UZORAKA ĆE BITI UNETO U ISTO VREME "))
+    #epohe=int(input("UNETI BROJ EPOHA"))
+    uzorci=params["batchSize"]
+    epohe=params["epochs"]
+    history=classifier.fit(x_train,y_train,batch_size=uzorci,epochs=epohe)
+
+    ### 14.1)Parametri grafika iz history PART2
+    metrikedf=pd.DataFrame() ###DataFrame u kom se nalaze podaci o rezultatima metrika za iscrtavanje na grafiku. Svaka kolona sadrzi vrednost metrike po epohama
+    for i in range(len(metrike)):
+        metrikedf[metrike[i]]=history.history[metrike[i]]
+        #print(history.history[metrike[i]])
+        plt.plot(history.history[metrike[i]])
+    plt.show()
+
+    #print(metrikedf)
+
+    #metrikedf.to_csv("metrike.csv")
+
+
+    ### 15) Predvidjanje
+    y_pred=classifier.predict(x_test)
+
+    print(y_pred)
+
+    ### 15.1) Formatiranje podataka za metrike PART2
+    y_pred=(y_pred>=0.5).astype('int')
+    y_pred=y_pred.flatten()
+
+    #print(y_pred)
+
+    #print(y_test)
+    ### 15.2) Kreiranje DataFrame-a u kom se nalaze kolone koje predstavljaju stvarne i predvidjene vrednosti, potrebne za iscrtavanje grafika i metrike PART2
+    rezultat=pd.DataFrame({"Stvarna vrednost ":y_test,"Predvidjena vrednost":y_pred})
+    #print(rezultat.head(20))
+
+    #####METRIKE##### PART2
+
+    import  sklearn.metrics as sm
+            
+
+    ### 16)Tacnost
+    tacnost=sm.accuracy_score(y_test,y_pred)
+    print('tacnost ',tacnost)
+
+    ### 17)Preciznost
+    preciznost=sm.precision_score(y_test,y_pred)
+    print('preciznost ',preciznost)
+
+    ### 18)Recall
+    recall=sm.recall_score(y_test,y_pred)
+    print('recall ',recall)
+
+    ### 19)Specificity
+    tn, fp, fn, tp = sm.confusion_matrix(y_test,y_pred).ravel()
+    spec = tn / (tn+fp)
+    print('spec ',spec)
+
+    ### 20)F1
+    f1=sm.f1_score(y_test,y_pred)
+    print('f1 ',f1)
+
+    ### 21)Classification report
+    classificationreport=sm.classification_report(y_test,y_pred)
+    print('classification ',classificationreport)
+
+    ### 22)Mean squared error (mse)
+    mse=sm.mean_squared_error(y_test,y_pred)
+    print('mse ',mse)
+
+    ### 23)Mean absolute error (mae)
+    mae=sm.mean_absolute_error(y_test,y_pred)
+    print('mae ',mae)
+
+    ### 24)Mean absolute percentage error (mape)
+    mape=sm.mean_absolute_percentage_error(y_test,y_pred)
+    print('mape ',mape)
+
+    ### 25)Root mean square error (rmse) *** da bi se iskoristila u history, salje se u metrics preko funkcije
+    import numpy as np
+    rmse=np.sqrt(sm.mean_squared_error(y_test,y_pred))
+    print("rmse ",rmse)
+
+    ### 26)Confusion matrix
+    cmatrix=sm.confusion_matrix(y_test,y_pred)
+    print('cmatrix ',cmatrix)
+
+    ### 27)ROC
+    fpr, tpr, _ = sm.roc_curve(y_test,y_pred)
+    plt.plot(fpr, tpr, color='blue')
+    plt.title('ROC')
+    plt.xlim([0.0, 1.0])
+    plt.xlabel('False Positive Rate')
+    plt.ylim([0.0, 1.0])
+    plt.ylabel('True Positive Rate')
+    plt.show()
+
+    r=Response(history,rezultat,tacnost,preciznost,recall,spec,f1,classificationreport,mse,mae,mape,rmse,cmatrix,fpr,tpr)
+    
+    return "Done"
+
+
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 43342fb0..c0bc339d 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -4,7 +4,7 @@ export default class Model {
         public description: string = '',
         public dateCreated: Date = new Date(),
         public lastUpdated: Date = new Date(),
-        public datasetId?: number,
+        public datasetId: string = '',
 
         // Test set settings
         public inputColumns: string[] = [],
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
index 2a611a96..fcec6ec3 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
@@ -1,57 +1,61 @@
 <div>
 
-  <div class="mb-4">
-    <label for="name" class="col-form-label">Naziv dataseta:</label>
-    <input type="text" class="form-control" name="name" placeholder="Naziv..."
-        [(ngModel)]="dataset.name">
+  <div class="row mb-4">
+    <div class="col-2">
+    </div>
+    <div class="col-3">
+      <label for="name" class="col-form-label">Naziv dataseta:</label>
+      <input type="text" class="form-control mb-3" name="name" placeholder="Naziv..."
+          [(ngModel)]="dataset.name">
+        <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+        <div>
+            <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea>
+        </div>
+    </div>
+    <div class="col-1">
+    </div>
+    <div class="col-4 mt-4">
+      <input list=delimiterOptions
+      placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2" [(ngModel)]="delimiter"
+      (input)="update()">
+      <datalist id=delimiterOptions>
+        <option *ngFor="let option of delimiterOptions">{{option}}</option>
+      </datalist>
+
+      <label for="type" class="form-check-label my-5">Da li .csv ima header?
+        <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="hasHeader" type="checkbox" value="" id="checkboxHeader" checked>
+      </label>
+      <br>
+      <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" accept=".csv">
+    </div>
   </div>
-  <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
-  <div>
-      <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea>
-  </div>
-
-
-  <div class="d-flex justify-content-center">
-    <input style="display: inline-block; width:350px;" list=delimiterOptions
-    placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control" [(ngModel)]="delimiter"
-    (input)="update()">
-    <datalist id=delimiterOptions>
-      <option *ngFor="let option of delimiterOptions">{{option}}</option>
-    </datalist>  &nbsp;&nbsp;&nbsp;&nbsp;
- 
-    <label for="type" class="form-check-label">Da li .csv ima header?
-      <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="hasHeader" type="checkbox" value="" id="checkboxHeader" checked>
-    </label> &nbsp;&nbsp;&nbsp;&nbsp;
 
-    <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" accept=".csv">
+  <div class="table-responsive">
+    <table *ngIf="csvRecords.length > 0 && hasHeader" class="table table-bordered table-light mt-4">
+      <thead>
+        <tr>
+          <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let row of csvRecords | slice:1:11">
+          <td *ngFor="let col of row">{{col}}</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <table *ngIf="csvRecords.length > 0 && !hasHeader" class="table table-bordered table-light mt-4">
+      <tbody>
+        <tr *ngFor="let row of csvRecords | slice:0:10">
+          <td *ngFor="let col of row">{{col}}</td>
+        </tr>
+      </tbody>
+    </table>
   </div>
-  
-  <table *ngIf="csvRecords.length > 0 && hasHeader" class="table table-bordered table-light my-4">
-    <thead>
-      <tr>
-        <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let row of csvRecords | slice:1:11">
-        <td *ngFor="let col of row">{{col}}</td>
-      </tr>
-    </tbody>
-  </table>
-
-  <table *ngIf="csvRecords.length > 0 && !hasHeader" class="table table-bordered table-light mt-4">
-    <tbody>
-      <tr *ngFor="let row of csvRecords | slice:0:10">
-        <td *ngFor="let col of row">{{col}}</td>
-      </tr>
-    </tbody>
-  </table>
 
   <div *ngIf="csvRecords.length > 0" id="info">
     . . . <br>
     {{rowsNumber}} x {{colsNumber}}
   </div>
 
-  
-
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/add-model/add-model.component.css b/frontend/src/app/_pages/add-model/add-model.component.css
index 5184733d..4bf569cc 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.css
+++ b/frontend/src/app/_pages/add-model/add-model.component.css
@@ -1,6 +1,6 @@
 #header {
     background-color: #003459;
-    padding-top: 25px;
+    padding-top: 30px;
     padding-bottom: 20px;
 }
 #header h1 {
@@ -11,4 +11,8 @@
 
 #container {
     border-radius: 8px;
+}
+
+#wrapper {
+    color: #003459;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html
index f5270127..004f308b 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -6,38 +6,36 @@
     
     <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
         
-        <div class="form-group row mb-4 d-flex"> <!--justify-content-center-->
-            <h2 class="col-sm-2" style="color: #00171f"> Nov model: </h2>
-            <div class="col-sm-3">
-                <div class="mb-4">
+        <div class="form-group row mb-4 d-flex justify-content-center"> <!--justify-content-center-->
+            <h2 class="col-2"> Nov model: </h2>
+            <div class="col-3">
                     <label for="name" class="col-form-label">Naziv modela:</label>
                     <input type="text" class="form-control" name="name" placeholder="Naziv..."
                         [(ngModel)]="newModel.name">
-                </div>
-                <div class="d-inline-flex align-items-center">
-                    <label for="dateCreated" class="col-form-label">Datum:</label> &nbsp;&nbsp;
-                    <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--"
-                        value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
-                </div>
             </div>
-            <div class="col-sm-5">
+            <div class="col-5">
                 <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
                 <div>
                     <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea>
                 </div>
             </div>
+            <div class="col-2">
+                <label for="dateCreated" class="col-form-label">Datum:</label> &nbsp;&nbsp;
+                <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--"
+                    value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
+            </div>
         </div>
     
-        <div class="my-5 justify-content-center">
+        <div class="mt-5 justify-content-center">
             <h2>Izvor podataka:</h2>
             <app-dataset-load id="dataset" (loaded)="datasetLoaded = true"></app-dataset-load>
         </div>
 
-        <div *ngIf="datasetLoaded" class="mt-2">
+        <div *ngIf="datasetLoaded">
             <div *ngIf="datasetLoadComponent" class="row">
               <div class="col d-flex justify-content-center">
                 <h3>Izaberite ulazne kolone:</h3> 
-                <div id="divInputs" class="form-check">
+                <div id="divInputs" class="form-check mt-2">
                   <br>
                   <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index">  
                     <input *ngIf="i == 0" class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" name="cbs" checked>
@@ -50,7 +48,7 @@
               </div>
               <div class="col d-flex justify-content-left">
                 <h3>Izaberite izlaznu kolonu:</h3>
-                <div id="divOutputs" class="form-check">
+                <div id="divOutputs" class="form-check mt-2">
                   <br>
                   <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index">
                     <input *ngIf="i == 0" class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbs" checked>
@@ -62,50 +60,117 @@
                 </div>
               </div>
             </div>
-          </div>
+        </div>
+
         
-        <h2>Parametri treniranja:</h2>
+        
+        <h2 class="mt-5 mb-4">Parametri treniranja:</h2>
 
-        <div class="row">
-            <div class="col-2 mt-4">
-                <label for="type" class="col-form-label">Tip mreže: </label>
-                <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type">
-                    <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)"
-                        [value]="option">
-                        {{ optionName }}
-                    </option>
-                </select>
+        <div>
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="type" class="col-form-label">Tip mreže: </label>
+                </div>
+                <div class="col-2">
+                    <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type">
+                        <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label>
+                </div>
+                <div class="col-1">
+                    <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers">
+                </div>
             </div>
-            <div class="col-1 mt-4">
-                <label for="encoding" class="col-form-label">Enkoding: </label>
-                <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding">
-                    <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
-                        [value]="option">
-                        {{ optionName }}
-                    </option>
-                </select>
+
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="encoding" class="col-form-label">Enkoding: </label>
+                </div>
+                <div class="col-2">
+                    <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding">
+                        <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label>
+                </div>
+                <div class="col-1">
+                    <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" [(ngModel)]="newModel.hiddenLayerNeurons">
+                </div>
             </div>
-            <div class="col-1 mt-4">
-                <label for="optimizer" class="col-form-label">Optimizacija: </label>
-                <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer">
-                    <option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
-                        [value]="option">
-                        {{ optionName }}
-                    </option>
-                </select>
+
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="optimizer" class="col-form-label">Optimizacija: </label>
+                </div>
+                <div class="col-2">
+                    <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer">
+                        <option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
+                </div>
+                <div class="col-1">
+                    <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
+                </div>
             </div>
-            <div class="col mt-4"> 
-                <label for="lossFunction" class="col-form-label">Funkcija obrade gubitka: </label>
-                <select id=lossFunctionOptions class="form-control" name="lossFunction" [(ngModel)]="newModel.lossFunction">
-                    <option *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)"
-                        [value]="option">
-                        {{ optionName }}
-                    </option>
-                </select>
+
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="lossFunction" class="col-form-label">Funkcija obrade gubitka: </label>
+                </div>
+                <div class="col-2">
+                    <select id=lossFunctionOptions class="form-control" name="lossFunction" [(ngModel)]="newModel.lossFunction">
+                        <option *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-1">
+                </div>
+                <div class="col-3 mt-2">
+                    <label for="type" class="form-check-label">Nasumičan redosled podataka?</label>
+                    <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="newModel.randomOrder" type="checkbox" value="" checked>
+                </div>
+                <div class="col-1">
+                </div>
             </div>
-            <div class="col-2">
-                <label for="inputLayerActivationFunction" class="col-form-label">Funkcija aktivacije<br>ulaznog sloja:</label>
-                <select id=inputLayerActivationFunctionOptions class="form-control" name="inputLayerActivationFunction"
+
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="inputLayerActivationFunction" class="col-form-label">Funkcija aktivacije ulaznog sloja:</label>
+                </div>
+                <div class="col-2">
+                    <select id=inputLayerActivationFunctionOptions class="form-control" name="inputLayerActivationFunction"
                     [(ngModel)]="newModel.inputLayerActivationFunction">
                     <option
                         *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
@@ -113,65 +178,80 @@
                         {{ optionName }}
                     </option>
                 </select>
+                </div>
+                <div class="col-1">
+                </div>
+                <div class="col-5">
+                    <label for="type" class="form-check-label">Podela test skupa:&nbsp;&nbsp;
+                        <input class="form-check-input" type="checkbox" [checked]="newModel.randomTestSet"
+                            (change)="newModel.randomTestSet = !newModel.randomTestSet">
+                    </label> &nbsp;&nbsp;&nbsp;&nbsp;
+                    test
+                    <mat-slider min="0.1" max="0.9" step="0.1" value="0.2" name="randomTestSetDistribution" thumbLabel
+                    [disabled]="!newModel.randomTestSet" [(ngModel)]="newModel.randomTestSetDistribution">
+                    </mat-slider>
+                    trening
+                </div>
+                <div class="col">
+                </div>
             </div>
-            <div class="col">
-                <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije<br>skrivenih slojeva:</label>
-                <select id=hiddenLayerActivationFunctionOptions class="form-control" name="hiddenLayerActivationFunction"
+
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije skrivenih slojeva:</label>
+                </div>
+                <div class="col-2">
+                    <select id=hiddenLayerActivationFunctionOptions class="form-control" name="hiddenLayerActivationFunction"
                     [(ngModel)]="newModel.hiddenLayerActivationFunction">
                     <option
                         *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
                         [value]="option">
                         {{ optionName }}
-                </option>
-                </select>
-            </div>
-            <div class="col">
-                <label for="outputLayerActivationFunction" class="col-form-label">Funkcija aktivacije<br>izlaznog sloja:</label>
-                <select id=outputLayerActivationFunctionOptions class="form-control" name="outputLayerActivationFunction"
-                    [(ngModel)]="newModel.outputLayerActivationFunction">
-                    <option
-                        *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                        [value]="option">
-                        {{ optionName }}
                     </option>
-                </select>
+                    </select>
+                </div>
+                <div class="col">
+                </div>
+                <div class="col">
+                </div>
             </div>
-        </div>
 
-        <div class="row mt-5">
-            <div class="col-2">
-                <label for="inputNeurons" class="col-form-label">Broj ulaznih neurona: </label> <!--UMESTO OVOGA IDE NASUMICAN REDOSLED? YES/NO-->
-                <input type="number" min="1" class="form-control" name="inputNeurons" [(ngModel)]="newModel.inputNeurons">
-            </div>
-            <div class="col-2">
-                <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label>
-                <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers">
-            </div>
-            <div class="col-3 ">
-                <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label>
-                <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" [(ngModel)]="newModel.hiddenLayerNeurons">
-            </div>
-            <div class="col-2">
-                <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
-                <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
-            </div>
-            <div class="col-3 mt-1">
-                <label for="type" class="form-check-label mb-3">&nbsp;&nbsp;Podela test skupa:
-                    <input class="mx-3 form-check-input" type="checkbox" [checked]="newModel.randomTestSet"
-                        (change)="newModel.randomTestSet = !newModel.randomTestSet">
-                </label>
-                <mat-slider min="0.1" max="0.9" step="0.1" value="0.2" name="randomTestSetDistribution" thumbLabel
-                     [disabled]="!newModel.randomTestSet" [(ngModel)]="newModel.randomTestSetDistribution">
-                </mat-slider>
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="outputLayerActivationFunction" class="col-form-label">Funkcija aktivacije izlaznog sloja:</label>
+                </div>
+                <div class="col-2">
+                    <select id=outputLayerActivationFunctionOptions class="form-control" name="outputLayerActivationFunction"
+                        [(ngModel)]="newModel.outputLayerActivationFunction">
+                        <option
+                            *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col">
+                </div>
+                <div class="col">
+                </div>
             </div>
         </div>
 
+
         <br><br>
-        <div class="form-group row mt-5">
-            <div class="col-4"></div>
-            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="addModel();">Napravi model</button>
-            <div class="col-4"></div>
+        <div class="form-group row mt-5 mb-3">
+            <div class="col"></div>
+            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="addModel();">Sačuvaj model</button>
+            <div class="col"></div>
+            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj model</button>
+            <div class="col"></div>
         </div>
 
     </div>
 </div>
+
+
diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts
index c18ad324..01e8ade9 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
+import { Observable, of } from 'rxjs';
 import Model from 'src/app/_data/Model';
 import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from 'src/app/_data/Model';
 import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-load.component';
@@ -32,14 +33,24 @@ export class AddModelComponent implements OnInit {
   }
 
   addModel() {
+    this.saveModel(false); //trajno cuvanje
+  }
+  trainModel() {
+    this.saveModel(true).subscribe((modelId : any) => {
+      if (modelId)
+        this.models.trainModel(modelId);
+    }); //privremeno cuvanje modela => vraca id sacuvanog modela koji cemo da treniramo sad
+  }
+  saveModel(temporary: boolean) : any {
     if (this.datasetLoadComponent)
-      this.models.addDataset(this.datasetLoadComponent?.dataset);
+      this.models.addDataset(this.datasetLoadComponent?.dataset).subscribe((response) => {//id dataseta je response
+        this.newModel.datasetId = response;
 
-    this.getCheckedInputCols();
-    this.getCheckedOutputCol();
-    if (this.validationInputsOutput()) 
-      this.models.addModel(this.newModel).subscribe((response) => {
-        console.log(response);
+        this.getCheckedInputCols();
+        this.getCheckedOutputCol();
+        if (this.validationInputsOutput()) 
+          return this.models.addModel(this.newModel); //id modela
+        return of(null);
       });
   }
 
diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts
index f85ca44e..80dc1ae3 100644
--- a/frontend/src/app/_services/models.service.ts
+++ b/frontend/src/app/_services/models.service.ts
@@ -14,9 +14,12 @@ export class ModelsService {
   constructor(private http: HttpClient, private authService: AuthService) { }
 
   addModel(model: Model) {
-    return this.http.post(`${API_SETTINGS.apiURL}/model/sendModel`, model, { headers: this.authService.authHeader(), responseType: 'text' });
+    return this.http.post(`${API_SETTINGS.apiURL}/model/add`, model, { headers: this.authService.authHeader(), responseType: 'text' });
   }
   addDataset(dataset: Dataset) {
-    return this.http.post(`${API_SETTINGS.apiURL}/model/uploadDataset`, dataset, { headers: this.authService.authHeader(), responseType: 'text' });
+    return this.http.post(`${API_SETTINGS.apiURL}/dataset/add`, dataset, { headers: this.authService.authHeader(), responseType: 'text' });
+  }
+  trainModel(modelId: string) {
+    return this.http.post(`${API_SETTINGS.apiURL}/model/train`, modelId, { headers: this.authService.authHeader(), responseType: 'text' });
   }
 }