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

# Conflicts:
#	frontend/src/app/_data/Model.ts
#	frontend/src/app/_pages/add-model/add-model.component.ts

6 files changed, 251 insertions, 149 deletions

diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 27527ca9..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?: string,
+        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 ac513738..4e315510 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,6 +33,17 @@ export class AddModelComponent implements OnInit {
   }
 
   addModel() {
+    this.saveModel(false).subscribe(); //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 {
     console.log('ADD MODEL: STEP 1 - UPLOAD FILE');
     if (this.datasetLoadComponent) {
       this.models.uploadData(this.datasetLoadComponent.files[0]).subscribe((fileId) => {
@@ -47,8 +59,7 @@ export class AddModelComponent implements OnInit {
               this.models.addModel(this.newModel).subscribe((response) => {
                 console.log('ADD MODEL: DONE! REPLY:\n' + response);
               });
-          }
-          );
+          });
         }
       });
     }
diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts
index 7e42b7d6..25a37e3a 100644
--- a/frontend/src/app/_services/models.service.ts
+++ b/frontend/src/app/_services/models.service.ts
@@ -30,9 +30,12 @@ export class ModelsService {
   }
 
   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' });
   }
 }