From f21885e7cbb68ef444ff9efc27483e2036e26bb0 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Tue, 19 Apr 2022 19:51:54 +0200
Subject: Pravljenje modela: automatski selektovan tip problema kog je i taj
 eskperiment, zmenjen batch size. Izbaceni neki resetovi u experiment.comp.
 Backend: u klasu Experiment dodat properti type.

---
 frontend/src/app/_data/Model.ts                    |  4 +-
 .../_elements/model-load/model-load.component.html | 62 ++++++++--------------
 .../_elements/model-load/model-load.component.ts   | 18 ++++---
 .../src/app/experiment/experiment.component.ts     |  4 --
 frontend/src/app/training/training.component.html  | 18 +++----
 frontend/src/app/training/training.component.ts    | 13 +++--
 6 files changed, 51 insertions(+), 68 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index b273f56a..7d383584 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -16,7 +16,7 @@ export default class Model {
         public inputNeurons: number = 1,
         public hiddenLayerNeurons: number = 1,
         public hiddenLayers: number = 1,
-        public batchSize: number = 5,
+        public batchSize: number = 4,
         public hiddenLayerActivationFunctions: string[] = ['sigmoid'],
         public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
         public uploaderId: string = '',
@@ -94,7 +94,7 @@ export enum LossFunctionBinaryClassification {
     HingeLoss = 'hinge_loss',
 }
 export enum LossFunctionMultiClassification {
-    CategoricalCrossEntropy = 'categorical_crossentropy',
+    //CategoricalCrossEntropy = 'categorical_crossentropy',
     SparseCategoricalCrossEntropy = 'sparse_categorical_crossentropy',
     KLDivergence = 'kullback_leibler_divergence',
 }
diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html
index dcb35c21..a1e6abd6 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.html
+++ b/frontend/src/app/_elements/model-load/model-load.component.html
@@ -1,12 +1,10 @@
 <div>
     <div class="d-flex flex-row justify-content-center align-items-center mt-3 mb-5">
-        <button type="button" id="btnMyModel" class="btn" (click)="viewMyModelsForm()"
-            [ngClass]="{'btnType1': showMyModels, 'btnType2': !showMyModels}">
+        <button type="button" id="btnMyModel" class="btn" (click)="viewMyModelsForm()" [ngClass]="{'btnType1': showMyModels, 'btnType2': !showMyModels}">
             Izaberite model iz kolekcije
         </button>
         <h3 class="mt-3 mx-3">ili</h3>
-        <button type="button" id="btnNewModel" class="btn" (click)="viewNewModelForm()"
-            [ngClass]="{'btnType1': !showMyModels, 'btnType2': showMyModels}">
+        <button type="button" id="btnNewModel" class="btn" (click)="viewNewModelForm()" [ngClass]="{'btnType1': !showMyModels, 'btnType2': showMyModels}">
             Dodajte novi model
         </button>
     </div>
@@ -17,8 +15,7 @@
     <div *ngIf="showMyModels" class="px-5">
         <div class="overflow-auto" style="max-height: 500px;">
             <ul class="list-group">
-                <li class="list-group-item p-3" *ngFor="let model of myModels|filter:term|filter:(forExperiment ? forExperiment.type : '')"
-                    [ngClass]="{'selectedModelClass': this.selectedModel == model}">
+                <li class="list-group-item p-3" *ngFor="let model of myModels|filter:((forExperiment != undefined) ? forExperiment.type : '')" [ngClass]="{'selectedModelClass': this.selectedModel == model}">
                     <app-item-model name="usersModel" [model]="model" (click)="selectThisModel(model);">
                     </app-item-model>
                 </li>
@@ -43,7 +40,7 @@
                     <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea>
                 </div>
             </div>
-            
+
         </div>
         <h2 class="mt-5 mb-4 mx-5">Parametri treniranja modela:</h2>
         <div>
@@ -54,8 +51,7 @@
                     <label for="type" class="col-form-label">Tip problema: </label>
                 </div>
                 <div class="col-2">
-                    <select id=typeOptions class="form-select" name="type" [(ngModel)]="newModel.type"
-                        (change)="filterOptions()">
+                    <select id=typeOptions class="form-select" name="type" [(ngModel)]="newModel.type" (change)="filterOptions()">
                         <option
                             *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
                             [value]="option">
@@ -68,10 +64,7 @@
                     <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"
-                        (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])"
-                        (ngModelChange)="updateGraph()">
+                    <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()">
                 </div>
             </div>
 
@@ -96,8 +89,7 @@
                     <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" (ngModelChange)="updateGraph()">
+                    <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()">
                 </div>
             </div>
 
@@ -107,8 +99,7 @@
                     <label for="lossFunction" class="col-form-label">Funkcija troška: </label>
                 </div>
                 <div class="col-2">
-                    <select id=lossFunctionOptions class="form-select" name="lossFunction" 
-                        [(ngModel)]="newModel.lossFunction" aria-checked="true">
+                    <select id=lossFunctionOptions class="form-select" name="lossFunction" [(ngModel)]="newModel.lossFunction" aria-checked="true">
                         <option
                             *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
                             [value]="option">
@@ -118,23 +109,21 @@
                 </div>
                 <div class="col-1"></div>
                 <div class="col-3">
-                    <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
+                    <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji:&nbsp;<b>{{newModel.batchSize}}</b><br>(izaberite stepen dvojke)</label>
                 </div>
                 <div class="col-1">
-                    
-                    <input type="number" min="0" step="1" max="7" class="form-control" name="batchSizePower" [(ngModel)]="batchSizePower" (click)="updateBatchSize()" >
-                    {{newModel.batchSize}}
-                 
+
+                    <input type="number" min="0" step="1" max="7" class="form-control" name="batchSizePower" [(ngModel)]="batchSizePower" (click)="updateBatchSize()">
+
                 </div>
-                
+
                 <div class="row p-2">
                     <div class="col-1"></div>
                     <div class="col-3 m-1">
                         <label for="epochs" class="col-form-label">Broj epoha: </label>
                     </div>
                     <div class="col-1">
-                        <input type="number" min="1" max="1000" class="form-control" name="epochs"
-                            [(ngModel)]="newModel.epochs">
+                        <input type="number" min="1" max="1000" class="form-control" name="epochs" [(ngModel)]="newModel.epochs">
                     </div>
                 </div>
             </div>
@@ -148,8 +137,7 @@
             <div class="row p-2" style="align-self: center;">
                 <div class="col-1"></div>
                 <div class="col-3">
-                    <label for="hiddenLayerActivationFunction" class="col-form-label"
-                        style="text-align: center;">Funkcija aktivacije<br>skrivenih slojeva:</label>
+                    <label for="hiddenLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija aktivacije<br>skrivenih slojeva:</label>
                 </div>
                 <div class="col-2 mt-2">
                     <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index">
@@ -157,8 +145,7 @@
                             <div class="input-group-prepend">
                                 <span class="input-group-text">#{{i+1}}</span>
                             </div>
-                            <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-select"
-                                [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]" >
+                            <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-select" [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]">
                                 <option
                                     *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
                                     [value]="option">
@@ -170,12 +157,10 @@
                 </div>
                 <div class="col-1"></div>
                 <div class="col-2">
-                    <label for="outputLayerActivationFunction" class="col-form-label"
-                        style="text-align: center;">Funkcija aktivacije<br>izlaznog sloja:</label>
+                    <label for="outputLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija aktivacije<br>izlaznog sloja:</label>
                 </div>
                 <div class="col-2 mt-2">
-                    <select id=outputLayerActivationFunctionOptions class="form-select"
-                        name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
+                    <select id=outputLayerActivationFunctionOptions class="form-select" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
                         <option
                             *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
                             [value]="option">
@@ -192,22 +177,19 @@
             <h3>Izaberite metrike:</h3>
             <div id="divMetricsinput" class="mt-2 mx-5">
 
-                <div *ngFor="let option of Object.keys(metrics); let optionName of Object.values(metrics) "
-                    class="form-check form-check-inline">
+                <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;" checked>
+                    <input name="cbmetrics" class="form-check-input" type="checkbox" value="{{option}}" id="metrics_{{option}}" style="float: left;" checked>
                     <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2">
                         {{optionName}}
                     </label>
                 </div>
             </div>
         </div>
-        
+
         <div class="form-group row mt-3 mb-3">
             <div class="col"></div>
-            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;"
-                (click)="uploadModel();">Sačuvaj
+            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="uploadModel();">Sačuvaj
                 model</button>
             <div class="col"></div>
         </div>
diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts
index 4541c114..5f9caf9d 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.ts
+++ b/frontend/src/app/_elements/model-load/model-load.component.ts
@@ -31,28 +31,32 @@ export class ModelLoadComponent implements OnInit {
   shared = Shared;
 
   term: string = "";
-  selectedProblemType: string = '';
   selectedMetrics = [];
   lossFunction: any = LossFunction;
 
   showMyModels: boolean = true;
 
+  batchSizePower: number = 2;
+
   constructor(private modelsService: ModelsService) {
-    if (this.forExperiment == undefined) {
+    //console.log("forExperiment = ", this.forExperiment);
+    
+    //if (this.forExperiment == undefined) {
       this.modelsService.getMyModels().subscribe((models) => {
         this.myModels = models;
       });
-    }
+    /*}
     else {
-      this.modelsService.getMyModelsByType(this.forExperiment.type).subscribe((models) => {
+      this.modelsService.getMyModelsByType(ProblemType.Regression).subscribe((models) => {
         this.myModels = models;
+        console.log("modeli po tipu: ", this.myModels);
       });
-    }
+    }*/
   }
 
   ngOnInit(): void {
   }
-  batchSizePower:number=1;
+  
   updateBatchSize()
   {
     this.newModel.batchSize=2**this.batchSizePower;
@@ -80,8 +84,6 @@ export class ModelLoadComponent implements OnInit {
 
     this.modelsService.addModel(this.newModel).subscribe((response) => {
       Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.');
-      // treba da se selektuje nov model u listi modela
-      //this.selectedModel = 
     }, (error) => {
       Shared.openDialog('Greška', 'Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite naziv modela i nastavite sa kreiranim datasetom.');
     });
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index 7e2f0b29..84fdbf0f 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -199,10 +199,6 @@ export class ExperimentComponent implements OnInit {
     this.experimentsService.addExperiment(this.experiment).subscribe((response) => {
       this.experiment = response;
 
-      this.selectedColumnsInfoArray = []; 
-      this.selectedNotNullColumnsArray = [];
-      this.experiment.encodings = [];
-
       Shared.openDialog("Obaveštenje", "Eksperiment je uspešno kreiran.");
 
       this.router.navigate(['/training', this.experiment._id]);
diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html
index 672e75fb..2bee3b12 100644
--- a/frontend/src/app/training/training.component.html
+++ b/frontend/src/app/training/training.component.html
@@ -9,29 +9,27 @@
 
             <h2>1. Izaberite eksperiment iz kolekcije</h2>
             <div class="px-5 mt-5 mb-3">
-                <input type="text" class="form-control" placeholder="Pretraga"
-                    [(ngModel)]="term">
+                <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term">
             </div>
             <div class="overflow-auto px-5" style="max-height: 500px;">
                 <ul class="list-group">
-                    <li class="list-group-item p-3" *ngFor="let experiment of myExperiments|filter:term"
-                        [ngClass]="{'selectedExperimentClass': this.selectedExperiment == experiment}">
-                        <app-item-experiment [experiment]="experiment"
-                            (click)="selectThisExperiment(experiment);"></app-item-experiment>
+                    <li class="list-group-item p-3" *ngFor="let experiment of myExperiments|filter:term" [ngClass]="{'selectedExperimentClass': this.selectedExperiment == experiment}">
+                        <app-item-experiment [experiment]="experiment" (click)="selectThisExperiment(experiment);"></app-item-experiment>
                     </li>
                 </ul>
             </div>
-    
+
             <h2 class="mt-5 mb-2">2. Izaberite model</h2>
-            <app-model-load (selectedModelChangeEvent)="selectModel($event)" [forExperiment]="selectedExperiment"></app-model-load>
-    
+            <app-model-load *ngIf="selectedExperiment" (selectedModelChangeEvent)="selectModel($event)" [forExperiment]="selectedExperiment"></app-model-load>
+            <h3 *ngIf="!selectedExperiment">Morate prvo izabrati eksperiment.</h3>
+
             <h2 class="my-5">3. Treniranje modela</h2>
 
             <div class="d-flex flex-row justify-content-center align-items-center my-3">
                 <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj
                     model</button>
             </div>
-    
+
             <h2 class="mt-5">Rezultati treniranja</h2>
             <div class="m-3" *ngIf="trainingResult">
                 <h2 class="my-2">Rezultati treniranja:</h2>
diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts
index 2640b513..c82a6b79 100644
--- a/frontend/src/app/training/training.component.ts
+++ b/frontend/src/app/training/training.component.ts
@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import Shared from '../Shared';
 import Experiment from '../_data/Experiment';
-import Model from '../_data/Model';
+import Model, { ProblemType } from '../_data/Model';
+import { ModelLoadComponent } from '../_elements/model-load/model-load.component';
 import { ExperimentsService } from '../_services/experiments.service';
 import { ModelsService } from '../_services/models.service';
 
@@ -13,6 +14,8 @@ import { ModelsService } from '../_services/models.service';
 })
 export class TrainingComponent implements OnInit{
 
+  @ViewChild(ModelLoadComponent) modelLoadComponent?: ModelLoadComponent;
+
   myExperiments?: Experiment[];
   selectedExperiment?: Experiment;
   selectedModel?: Model;
@@ -30,14 +33,16 @@ export class TrainingComponent implements OnInit{
 
       this.experimentsService.getMyExperiments().subscribe((experiments) => {
         this.myExperiments = experiments;
-        if (experimentId != undefined) 
-          this.selectedExperiment = this.myExperiments.filter(x => x._id == experimentId)[0];
+
+        this.selectedExperiment = this.myExperiments.filter(x => x._id == experimentId)[0];
+        console.log("selektovan exp u training comp: ", this.selectedExperiment);
       });
     });
   }
 
   selectThisExperiment(experiment: Experiment) {
     this.selectedExperiment = experiment;
+    this.modelLoadComponent!.newModel.type = this.selectedExperiment.type;
   }
 
   selectModel(model: Model) {
-- 
cgit v1.2.3