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

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

4 files changed, 78 insertions, 41 deletions

diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index fb6849e3..58bc3d4f 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -31,7 +31,7 @@ export default class Model {
         public username: string = '',
         public nullValues: NullValueOptions = NullValueOptions.DeleteRows,
         public nullValuesReplacers: NullValReplacer[] = [],
-        public metrics: Metric[] = [], // TODO add to add-model form
+        public metrics: string[] = [], // TODO add to add-model form
         public epochs: number = 5 // TODO add to add-model form
     ) { }
 }
@@ -164,9 +164,35 @@ export class NullValReplacer {
     "value": string;
 }
 
-export enum Metric {
+export enum Metrics {
     MSE = 'mse',
     MAE = 'mae',
     RMSE = 'rmse'
-    //...
+    
+}
+export enum MetricsRegression
+{
+    Mse = 'mse',
+    Mae = 'mae',
+    Mape = 'mape',
+    Msle='msle',
+    CosineProximity='cosine'
+}
+export enum MetricsBinaryClassification
+{
+    Accuracy='binary_accuracy',
+    Auc="AUC",
+    Precision='precision_score',
+    Recall='recall_score',
+    F1='f1_score',
+    
+
+}
+export enum MetricsMultiClassification
+{
+    Accuracy='categorical_accuracy',
+    Auc="AUC",
+    Precision='precision_score',
+    Recall='recall_score',
+    F1='f1_score',
 }
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 62468b2d..97b35b7a 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -287,6 +287,8 @@
             </div>
 
             <div class="row p-2">
+                <!--***********************************ENKODER*********************************************-->
+
                 <div class="col-1">
                 </div>
                 <div class="col-3">
@@ -300,6 +302,9 @@
                         </option>
                     </select>
                 </div>
+
+                <!--***********************************BROJ NEURONA SKRIVENOG SLOJA*********************************************-->
+
                 <div class="col-1">
                 </div>
                 <div class="col-3">
@@ -310,6 +315,7 @@
                         [(ngModel)]="newModel.hiddenLayerNeurons">
                 </div>
             </div>
+            <!--***********************************OPTIMIZACIJA*********************************************-->
 
             <div class="row p-2">
                 <div class="col-1">
@@ -335,7 +341,6 @@
                     <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
                 </div>
             </div>
-            <!--***********************************LOSS FUNCTION*********************************************-->
             <div class="row p-2">
                 <div class="col-1">
                 </div>
@@ -344,7 +349,7 @@
                 </div>
                 <div class="col-2">
                     <select id=lossFunctionOptions class="form-control" name="lossFunction"
-                        [(ngModel)]="newModel.lossFunction">
+                        [(ngModel)]="newModel.lossFunction" aria-checked="true">
                         <option
                             *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
                             [value]="option">
@@ -352,40 +357,14 @@
                         </option>
                     </select>
                 </div>
-                <div class="col-1">
-                </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="row p-2">
-                <div class="col-3"></div>
-                <div class="col-3">
-                    <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije skrivenih
-                        slojeva:</label>
-                </div>
-                <div class="col-3">
-                    <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index">
-                        <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-control"
-                            [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]">
-                            <option
-                                *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                                [value]="option">
-                                {{ optionName }}
-                            </option>
-                        </select>
-                    </div>
-                </div>
-                <div class="col-3"></div>
-            </div>
-        -->
+            <!--************************************************************************************************* -->
             <div class="border m-3">
                 <div class="row p-2 m-2">
                     <div class="col-4">
@@ -465,10 +444,26 @@
             </div>
         </div>
 
-
         <br><br>
+        <!--**********************************************METRIKE ZA KOMPAJLER I GRAFIKE***********************************************-->
+
+        <hr>
+        <div class="form-check form-check-inline overflow-auto " style="width: max-content;">
+            <h3>Izaberite metrike:</h3>
+            <div id="divMetricsinput">
+
+                <div *ngFor="let option of Object.keys(metrics); let optionName of Object.values(metrics) "
+                    class="form-check form-check-inline">
+
+                    <input name="cbmetrics" class="form-check-input" type="checkbox" value="{{option}}"
+                        id="metrics_{{option}}" style="float: left;">
+                    <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2">
+                        {{optionName}}
+                    </label>
+                </div>
+            </div>
+        </div>
         <!--<app-annvisual [model]="newModel"></app-annvisual>-->
-        <br><br>
         <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;"
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 ec64a3b7..b35b9fa4 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import Model, { LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, NullValReplacer, ReplaceWith } from 'src/app/_data/Model';
-import { ProblemType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions } from 'src/app/_data/Model';
+import { ProblemType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions, Metrics, MetricsRegression, MetricsBinaryClassification, MetricsMultiClassification } from 'src/app/_data/Model';
 import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-load.component';
 import { ModelsService } from 'src/app/_services/models.service';
 import shared from 'src/app/Shared';
@@ -10,6 +10,7 @@ import { DatasetsService } from 'src/app/_services/datasets.service';
 import { NgxCsvParser } from 'ngx-csv-parser';
 import { CsvParseService } from 'src/app/_services/csv-parse.service';
 
+
 @Component({
   selector: 'app-add-model',
   templateUrl: './add-model.component.html',
@@ -27,7 +28,7 @@ export class AddModelComponent implements OnInit {
   ProblemType = ProblemType;
   Encoding = Encoding;
   ActivationFunction = ActivationFunction;
-  activationFunction: any = ActivationFunction
+  metrics: any = Metrics;
   LossFunction = LossFunction;
   lossFunction: any = LossFunction;
   Optimizer = Optimizer;
@@ -54,10 +55,10 @@ export class AddModelComponent implements OnInit {
   term: string = "";
 
   selectedProblemType: string = '';
+  selectedMetrics = [];
 
   trainingResult: string | undefined;
 
-
   constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) {
     this.newModel = new Model();
 
@@ -112,6 +113,7 @@ export class AddModelComponent implements OnInit {
 
     this.getCheckedInputCols();
     this.getCheckedOutputCol();
+    this.getMetrics();
 
     if (this.validationInputsOutput()) {
       console.log('ADD MODEL: STEP 1 - UPLOAD FILE');
@@ -159,7 +161,7 @@ export class AddModelComponent implements OnInit {
     if (this.selectedDataset) { //dataset je izabran
       this.getCheckedInputCols();
       this.getCheckedOutputCol();
-
+      this.getMetrics();
       if (this.validationInputsOutput()) {
         this.newModel.datasetId = this.selectedDataset._id;
 
@@ -475,17 +477,30 @@ export class AddModelComponent implements OnInit {
     switch (this.newModel.type) {
       case 'regresioni':
         this.lossFunction = LossFunctionRegression;
+        this.metrics = MetricsRegression;
         break;
       case 'binarni-klasifikacioni':
         this.lossFunction = LossFunctionBinaryClassification;
+        this.metrics = MetricsBinaryClassification;
         break;
       case 'multi-klasifikacioni':
         this.lossFunction = LossFunctionMultiClassification;
+        this.metrics = MetricsMultiClassification;
         break;
       default:
         break;
     }
   }
 
+  getMetrics() {
+    this.newModel.metrics = [];
+    let cb = document.getElementsByName("cbmetrics");
 
+    for (let i = 0; i < cb.length; i++) {
+      let chb = <HTMLInputElement>cb[i];
+      if (chb.checked == true)
+        this.newModel.metrics.push(chb.value);
+    }
+
+  }
 }
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index d514d1f5..d90de54d 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -5,7 +5,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { HttpClientModule } from '@angular/common/http';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatIconModule } from '@angular/material/icon';
-
+import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
 import { NgChartsModule } from 'ng2-charts';
 import { Ng2SearchPipeModule } from 'ng2-search-filter';
 import { AppComponent } from './app.component';
@@ -39,6 +39,7 @@ import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-dataset
 import { ReactiveBackgroundComponent } from './_elements/reactive-background/reactive-background.component';
 import { ItemModelComponent } from './_elements/item-model/item-model.component';
 import { AnnvisualComponent } from './_elements/annvisual/annvisual.component';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -80,7 +81,7 @@ import { AnnvisualComponent } from './_elements/annvisual/annvisual.component';
     MatSliderModule,
     MatIconModule,
     NgChartsModule,
-    Ng2SearchPipeModule
+    Ng2SearchPipeModule,
   ],
   providers: [],
   bootstrap: [AppComponent]