Omogućeno je sortiranje padajuće liste za izbor funkcije gubitka u zavisnosti od tipa problema.

4 files changed, 127 insertions, 18 deletions

diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index dd3cb760..ff9f8329 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -1,3 +1,5 @@
+import { NgIf } from "@angular/common";
+
 export default class Model {
     _id: string = '';
     constructor(
@@ -45,6 +47,7 @@ export enum ProblemType {
 export enum Encoding {
     Label = 'label',
     OneHot = 'one hot',
+    /*
     BackwardDifference = 'backward difference',
     BaseN = 'baseN',
     Binary = 'binary',
@@ -62,34 +65,77 @@ export enum Encoding {
     Target = 'target',
     WOE = 'woe',
     Quantile = 'quantile'
+    */
 }
 
 export enum ActivationFunction {
     // linear
     Binary_Step = 'binaryStep',
-    Linear = 'linear',
     // non-linear
-    Relu = 'relu',
     Leaky_Relu = 'leakyRelu',
     Parameterised_Relu = 'parameterisedRelu',
     Exponential_Linear_Unit = 'exponentialLinearUnit',
     Swish = 'swish',
-    Sigmoid = 'sigmoid',
-    Tanh = 'tanh',
-    Softmax = 'softmax'
-}
+    //hiddenLayers
+    Relu='relu',
+    Sigmoid='sigmoid',
+    Tanh='tanh',
+
+    //outputLayer
+    Linear = 'linear',
+    //Sigmoid='sigmoid',
+    Softmax='softmax',
 
+}
+/*
+export enum ActivationFunctionHiddenLayer
+{
+    Relu='relu',
+    Sigmoid='sigmoid',
+    Tanh='tanh'
+}
+export enum ActivationFunctionOutputLayer
+{
+    Linear = 'linear',
+    Sigmoid='sigmoid',
+    Softmax='softmax'
+}
+*/
 export enum LossFunction {
     // binary classification loss functions
     BinaryCrossEntropy = 'binary_crossentropy',
+    SquaredHingeLoss='squared_hinge_loss',
     HingeLoss = 'hinge_loss',
     // multi-class classiication loss functions
     CategoricalCrossEntropy = 'categorical_crossentropy',
+    SparseCategoricalCrossEntropy='sparse_categorical_crosentropy',
     KLDivergence = 'kullback_leibler_divergence',
+    
     // regression loss functions
+    
+    MeanAbsoluteError = 'mean_absolute_error',
     MeanSquaredError = 'mean_squared_error',
+    MeanSquaredLogarithmicError='mean_squared_logarithmic_error',
+    HuberLoss = 'Huber'
+
+}
+export enum LossFunctionRegression
+{
     MeanAbsoluteError = 'mean_absolute_error',
-    HuberLoss = 'Huber',
+    MeanSquaredError = 'mean_squared_error',
+    MeanSquaredLogarithmicError='mean_squared_logarithmic_error',
+}
+export enum LossFunctionBinaryClassification
+{
+    BinaryCrossEntropy = 'binary_crossentropy',
+    SquaredHingeLoss='squared_hinge_loss',
+    HingeLoss = 'hinge_loss',
+}
+export enum LossFunctionMultiClassification
+{
+    CategoricalCrossEntropy = 'categorical_crossentropy',
+    SparseCategoricalCrossEntropy='sparse_categorical_crosentropy',
+    KLDivergence = 'kullback_leibler_divergence',
 }
 
 export enum Optimizer {
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 3516805b..d1f15ffe 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -195,6 +195,7 @@
 
         <h2 class="mt-5 mb-4">Parametri treniranja:</h2>
 
+<!--**********************************************************TIP*********************************************************-->  
         <div>
             <div class="row p-2">
                 <div class="col-1">
@@ -203,7 +204,9 @@
                     <label for="type" class="col-form-label">Tip problema: </label>
                 </div>
                 <div class="col-2">
-                    <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type">
+                    <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type" 
+                    [(ngModel)]="problemtype"
+                    (change)="filterOptions()">
                         <option
                             *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
                             [value]="option">
@@ -211,6 +214,7 @@
                         </option>
                     </select>
                 </div>
+<!--******************************************************************************************************************-->
                 <div class="col-1">
                 </div>
                 <div class="col-3">
@@ -272,7 +276,7 @@
                     <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>
@@ -283,7 +287,7 @@
                     <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)"
+                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
                             [value]="option">
                             {{ optionName }}
                         </option>
@@ -291,6 +295,8 @@
                 </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"
@@ -300,7 +306,7 @@
                 </div>
             </div>
 
-            <div class="row p-2">
+            <!--<div class="row p-2">
                 <div class="col-3"></div>
                 <div class="col-3">
                     <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije skrivenih
@@ -320,7 +326,7 @@
                 </div>
                 <div class="col-3"></div>
             </div>
-
+        -->
             <div class="row p-2">
                 <div class="col-1">
                 </div>
@@ -341,12 +347,42 @@
                         [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet">
                 </div>
             </div>
+            <div class="col">
+                trening
+                <mat-slider min="10" max="90" step="10" value="10" name="randomTestSetDistribution" thumbLabel
+                    [disabled]="!newModel.randomTestSet" [(ngModel)]="tempTestSetDistribution">
+                </mat-slider>
+                test
+            </div>
+<!--***********************************AKTIVACIONE FUNKCIJE*********************************************-->            
+<h3 >Aktivacione funkcije</h3>
+           
+            <div class="row p-2" style="align-self: center;">
+                <div class="col-3"></div>
+                <div class="col-3">
+                    <label for="hiddenLayerActivationFunction" class="col-form-label" style="text-align: center;">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="row p-2">
+            <div class="row p-2" style="align-self: center;">
                 <div class="col-1">
                 </div>
                 <div class="col-3">
-                    <label for="outputLayerActivationFunction" class="col-form-label">Funkcija aktivacije izlaznog
+                    <label for="outputLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija aktivacije izlaznog
                         sloja:</label>
                 </div>
                 <div class="col-2">
@@ -361,13 +397,15 @@
                 </div>
                 <div class="col-1">
                 </div>
-                <div class="col">
+
+
+                <!--<div class="col">
                     trening
                     <mat-slider min="10" max="90" step="10" value="10" name="randomTestSetDistribution" thumbLabel
                         [disabled]="!newModel.randomTestSet" [(ngModel)]="tempTestSetDistribution">
                     </mat-slider>
                     test
-                </div>
+                </div>-->
                 <div class="col">
                 </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 b12ff825..ead9049b 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import Model, { NullValReplacer, ReplaceWith } from 'src/app/_data/Model';
+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 { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-load.component';
 import { ModelsService } from 'src/app/_services/models.service';
@@ -26,7 +26,9 @@ export class AddModelComponent implements OnInit {
   ProblemType = ProblemType;
   Encoding = Encoding;
   ActivationFunction = ActivationFunction;
+  activationFunction:any=ActivationFunction
   LossFunction = LossFunction;
+  lossFunction : any = LossFunction;
   Optimizer = Optimizer;
   NullValueOptions = NullValueOptions;
   ReplaceWith = ReplaceWith;
@@ -50,6 +52,9 @@ export class AddModelComponent implements OnInit {
   //accepted: Boolean;
   term: string = "";
 
+  selectedProblemType:string='';
+  
+
   constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) {
     this.newModel = new Model();
 
@@ -62,6 +67,7 @@ export class AddModelComponent implements OnInit {
     (<HTMLInputElement>document.getElementById("btnMyDataset")).focus();
   }
 
+
   viewMyDatasetsForm() {
     this.showMyDatasets = true;
     this.resetSelectedDataset();
@@ -466,4 +472,24 @@ export class AddModelComponent implements OnInit {
   }
 
   arrayColumn = (arr: any[][], n: number) => [...new Set(arr.map(x => x[n]))];
+
+  problemtype:string='';
+
+  filterOptions(){
+    switch(this.problemtype){
+      case 'regresioni':
+        this.lossFunction=LossFunctionRegression;
+        break;
+      case 'binarni-klasifikacioni':
+        this.lossFunction=LossFunctionBinaryClassification;
+        break;
+      case 'multi-klasifikacioni':
+        this.lossFunction=LossFunctionMultiClassification;
+      break;
+      default:
+        break;
+    }
+  }
+
+  
 }
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 4efab17e..d514d1f5 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -39,7 +39,6 @@ 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,