From 2b8c174e0d8ee5a64b22f7a4e05a47365fe33947 Mon Sep 17 00:00:00 2001
From: Danijel Andjelkovic <adanijel99@gmail.com>
Date: Thu, 10 Mar 2022 02:23:29 +0100
Subject: Dodato jos parametara za treniranje modela u formu.

---
 frontend/src/app/_data/Model.ts                    |   2 +-
 .../dataset-load/dataset-load.component.html       |  66 ++++----
 .../app/_pages/add-model/add-model.component.html  | 169 ++++++++++++++++++---
 .../app/_pages/add-model/add-model.component.ts    |   7 +-
 4 files changed, 189 insertions(+), 55 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 61c27ae6..216e1c36 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -12,8 +12,8 @@ export default class Model {
         public randomTestSetDistribution: number = 0.10, //0.1-0.9 (10% - 90%)
 
         // Neural net training settings
-        public encoding: Encoding = Encoding.Label,
         public type: ANNType = ANNType.FullyConnected,
+        public encoding: Encoding = Encoding.Label,
         public optimizer: Optimizer = Optimizer.Adam,
         public lossFunction: LossFunction = LossFunction.MeanSquaredError,
         public inputNeurons: number = 1,
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 48883ba0..0b62a515 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
@@ -1,28 +1,30 @@
-<div class="container">
+<div>
 
-    <input style="display: inline-block; width:350px;" list=delimiterOptions placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control" [(ngModel)]="delimiter">
-    <datalist id=delimiterOptions>
-      <option *ngFor="let option of delimiterOptions">{{option}}</option>
-    </datalist>
-    &nbsp;&nbsp;&nbsp;
-    <input style="display: inline-block" [ngStyle]="{width:'350px'}"  list=headerOptions placeholder="Da li .csv ima header?" class="form-control" [(ngModel)]="header">
-    <datalist id=headerOptions>
-      <option *ngFor="let option of headerOptions">{{option}}</option>
-    </datalist>
+  <input style="display: inline-block; width:350px;" list=delimiterOptions
+    placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control" [(ngModel)]="delimiter">
+  <datalist id=delimiterOptions>
+    <option *ngFor="let option of delimiterOptions">{{option}}</option>
+  </datalist>
+  &nbsp;&nbsp;&nbsp;
+  <input style="display: inline-block" [ngStyle]="{width:'350px'}" list=headerOptions
+    placeholder="Da li .csv ima header?" class="form-control" [(ngModel)]="header">
+  <datalist id=headerOptions>
+    <option *ngFor="let option of headerOptions">{{option}}</option>
+  </datalist>
 
-    <br><br>
+  <br><br>
 
-    <input class="form-control mb-5" type="file" class="upload" (change)="changeListener($event)">
+  <input class="form-control mb-5" type="file" class="upload" (change)="changeListener($event)">
 
-    <table class="table table-bordered table-light mt-5">
-      <thead>
-        <tr>
-          <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <!--<tr *ngFor="let row of csvRecords | ((header == 'Da') ? (slice:1:11) : (slice:0:11))">-->
-        <!--<ng-container *ngIf="header == 'Da'">
+  <table class="table table-bordered table-light mt-5">
+    <thead>
+      <tr>
+        <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!--<tr *ngFor="let row of csvRecords | ((header == 'Da') ? (slice:1:11) : (slice:0:11))">-->
+      <!--<ng-container *ngIf="header == 'Da'">
           <tr *ngFor="let row of csvRecords | slice:1:11">
             <td *ngFor="let col of row">{{col}}</td>
           </tr>
@@ -32,15 +34,15 @@
             <td *ngFor="let col of row">{{col}}</td>
           </tr>
         </ng-container>-->
-        
-        <tr *ngFor="let row of csvRecords | slice:1:11">
-          <td *ngFor="let col of row">{{col}}</td>
-        </tr>
-      </tbody>
-    </table>
-    <div *ngIf="csvRecords[0]" id="info">
-        . . . <br>
-      {{rowsNumber}} x {{colsNumber}}
-    </div>
 
-  </div>
\ No newline at end of file
+      <tr *ngFor="let row of csvRecords | slice:1:11">
+        <td *ngFor="let col of row">{{col}}</td>
+      </tr>
+    </tbody>
+  </table>
+  <div *ngIf="csvRecords[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.html b/frontend/src/app/_pages/add-model/add-model.component.html
index a14411e5..bc292bb9 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -1,4 +1,4 @@
-<div class="container p-3" style="background-color: rgb(249, 251, 253);">
+<div class="container p-3" style="background-color: rgb(249, 251, 253); min-height: 100%;">
 
     <h2 class="my-4 text-primary"> Nov model: </h2>
     <div class="form-group row align-items-center">
@@ -9,7 +9,8 @@
         </div>
 
         <div class="col-sm-3">
-
+            <input type="text" class="form-control-plaintext text-center" id="dateCreated" placeholder="--/--/--"
+                value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
         </div>
     </div>
 
@@ -20,16 +21,6 @@
         </div>
     </div>
 
-    <div style="flex-direction: column; align-items: center; justify-items: center;">
-        <label for="type">Tip: </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="form-group row">
     <label for="value" class="col-4">Vrednost</label>
     <div class="input-group">
@@ -41,22 +32,158 @@
         <input type="number" min="1" class="form-control" name="count" placeholder="Br." [(ngModel)]="newModel.count">
         <input type="text" class="form-control" name="sum" placeholder="Suma"
             value="=({{newModel.value * newModel.count}})" readonly>
-    </div>
-</div>-->
+        </div>
+    </div>-->
 
     <div class="my-4">
         <label for="dataset">Izvor podataka:</label>
-        <!--<app-upload-dataset id="dataset"></app-upload-dataset>-->
+        <app-dataset-load id="dataset"></app-dataset-load>
+    </div>
+
+    <div class="form-group row my-2">
+        <div class="col-sm-2 col-form-label">
+            <label for="type" class="form-check-label">Podela test skupa:
+                <input class="mx-3 form-check-input" type="checkbox" [checked]="newModel.randomTestSet"
+                    (change)="newModel.randomTestSet = !newModel.randomTestSet">
+            </label>
+
+        </div>
+        <div>
+            <input type="range" min="0.1" max="0.9" step="0.1" class="form-control" name="randomTestSetDistribution"
+                [disabled]="!newModel.randomTestSet" [(ngModel)]="newModel.randomTestSetDistribution">
+        </div>
+    </div>
+
+    <h3> Parametri treniranja </h3>
+
+    <div class="form-group row my-2">
+        <label for="type" class="col-sm-2 col-form-label">Tip mreže: </label>
+        <div class="col-sm-10">
+            <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>
 
-    <div class="form-group row">
+    <div class="form-group row my-2">
+        <label for="encoding" class="col-sm-2 col-form-label">Enkoding: </label>
+        <div class="col-sm-10">
+            <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>
+
+    <div class="form-group row my-2">
+        <label for="optimizer" class="col-sm-2 col-form-label">Optimizacija: </label>
+        <div class="col-sm-10">
+            <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>
+
+    <div class="form-group row my-2">
+        <label for="lossFunction" class="col-sm-2 col-form-label">Funkcija obrade gubitka: </label>
+        <div class="col-sm-10">
+            <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>
+
+    <div class="form-group row my-2">
+        <label for="inputNeurons" class="col-sm-2 col-form-label">Broj ulaznih neurona: </label>
+        <div class="col-sm-10">
+            <input type="number" min="1" class="form-control" name="inputNeurons" [(ngModel)]="newModel.inputNeurons">
+        </div>
+    </div>
+
+    <div class="form-group row my-2">
+        <label for="inputLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije ulaznog sloja:
+        </label>
+        <div class="col-sm-10">
+            <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)"
+                    [value]="option">
+                    {{ optionName }}
+                </option>
+            </select>
+        </div>
+    </div>
+
+    <div class="form-group row my-2">
+        <label for="hiddenLayerNeurons" class="col-sm-2 col-form-label">Broj neurona skrivenih slojeva: </label>
+        <div class="col-sm-10">
+            <input type="number" min="1" class="form-control" name="hiddenLayerNeurons"
+                [(ngModel)]="newModel.hiddenLayerNeurons">
+        </div>
+    </div>
+
+    <div class="form-group row my-2">
+        <label for="hiddenLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije skrivenih
+            slojeva:
+        </label>
+        <div class="col-sm-10">
+            <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>
+
+    <div class="form-group row my-2">
+        <label for="hiddenLayers" class="col-sm-2 col-form-label">Broj skrivenih slojeva: </label>
+        <div class="col-sm-10">
+            <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers">
+        </div>
+    </div>
+
+    <div class="form-group row my-2">
+        <label for="outputLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije izlaznog
+            sloja:
+        </label>
+        <div class="col-sm-10">
+            <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>
+
+    <div class="form-group row my-2">
+        <label for="batchSize" class="col-sm-2 col-form-label">Broj uzorka po iteraciji: </label>
+        <div class="col-sm-10">
+            <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
+        </div>
+    </div>
+
+    <div class=" form-group row my-4">
         <div class="col-4"></div>
         <button class="btn btn-lg btn-primary col-4" (click)="addModel();">Dodaj</button>
-        <div class="col-1"></div>
-        <div class="col-3">
-            <input type="text" class="form-control-plaintext text-center" id="dateCreated" placeholder="--/--/--"
-                value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
-        </div>
+        <div class="col-4"></div>
     </div>
 
 </div>
\ No newline at end of file
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 1836af52..3cb47d61 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 } from '@angular/core';
 import Model from 'src/app/_data/Model';
-import { ANNType } from 'src/app/_data/Model';
+import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from 'src/app/_data/Model';
 
 @Component({
   selector: 'app-add-model',
@@ -10,7 +10,12 @@ import { ANNType } from 'src/app/_data/Model';
 export class AddModelComponent implements OnInit {
 
   newModel: Model
+
   ANNType = ANNType;
+  Encoding = Encoding;
+  ActivationFunction = ActivationFunction;
+  LossFunction = LossFunction;
+  Optimizer = Optimizer;
   Object = Object;
 
   constructor() {
-- 
cgit v1.2.3