From 044ef1a76cf2f53b0dd86c4a77fabd01a81e93ad Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Mon, 25 Apr 2022 03:40:36 +0200
Subject: Ažurirane komponente form-model i hidden-layer.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/_data/Model.ts                    |   6 +-
 .../_elements/form-model/form-model.component.css  |  16 +++
 .../_elements/form-model/form-model.component.html | 134 +++++++++++----------
 .../_elements/form-model/form-model.component.ts   |  32 ++++-
 .../hidden-layer/hidden-layer.component.css        |  14 ++-
 .../hidden-layer/hidden-layer.component.html       |  21 ++--
 .../hidden-layer/hidden-layer.component.ts         |   8 +-
 frontend/src/app/_pages/home/home.component.html   |   3 +
 8 files changed, 155 insertions(+), 79 deletions(-)

diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index b273f56a..6cef09e5 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -21,7 +21,9 @@ export default class Model {
         public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
         public uploaderId: string = '',
         public metrics: string[] = [], // TODO add to add-model form
-        public epochs: number = 5 // TODO add to add-model form
+        public epochs: number = 5, // TODO add to add-model form
+        public inputColNum:number=5,
+        public learningRate:number=0.01
     ) { }
 }
 
@@ -156,4 +158,4 @@ export enum MetricsMultiClassification {
     Precision = 'precision_score',
     Recall = 'recall_score',
     F1 = 'f1_score',
-}
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/form-model/form-model.component.css b/frontend/src/app/_elements/form-model/form-model.component.css
index c650bdeb..20546e17 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.css
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
@@ -1,3 +1,6 @@
+#container{
+    color:var(--offwhite);
+}
 mat-label{
     color: var(--offwhite) !important;
 }
@@ -6,7 +9,20 @@ select{
 }
 mat-form-field{
     color: var(--offwhite) !important;
+    padding: 0;
 }
 hr{
     color: var(--offwhite) !important;
+    margin-bottom: 30px;;
+}
+.row{
+    margin: 0;
+    padding: 0;
+}
+mat-icon{
+    color: var(--ns-primary);
+}
+#rowhn{
+    margin-bottom:-50px;
+    padding: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html
index 69635a4a..40631570 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -1,4 +1,4 @@
-<div class="container">
+<div id="container">
     <div class="row">
       <div class="col-sm">
         <div class="row">
@@ -16,14 +16,14 @@
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Tip problema</mat-label>
-                <mat-select matNativeControl required [formControl]="selectFormControl">
+                <mat-select matNativeControl required [formControl]="selectTypeFormControl">
                     <mat-option
                     *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
                     [value]="option">
                     {{ optionName }}
                 </mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
+                <mat-error *ngIf="selectTypeFormControl.hasError('required')">
                     Obavezno polje
                 </mat-error>
               </mat-form-field>
@@ -33,114 +33,122 @@
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Optimizacija</mat-label>
-                <mat-select matNativeControl required [formControl]="selectFormControl">
+                <mat-select matNativeControl required [formControl]="selectOptFormControl">
                     <mat-option
                     *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
                     [value]="option">
                     {{ optionName }}
                 </mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
+                <mat-error *ngIf="selectOptFormControl.hasError('required')">
                     Obavezno polje
                 </mat-error>
               </mat-form-field>
         </div>
         <div class="row">
-            <mat-form-field appearance="fill">
-                <mat-label>Learning rate</mat-label>
-                <mat-select matNativeControl required [formControl]="selectFormControl">
-                  <mat-option label="--select something --"></mat-option>
-                  <mat-option value="saab">Saab</mat-option>
-                  <mat-option value="mercedes">Mercedes</mat-option>
-                  <mat-option value="audi">Audi</mat-option>
+                  <mat-form-field appearance="fill">
+                <mat-label>Funkcija troška</mat-label>
+                <mat-select matNativeControl required [formControl]="selectLFFormControl">
+                    <mat-option
+                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
+                            [value]="option">
+                            {{ optionName }}
+                        </mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
-                    Obavezno polje
+                <mat-error *ngIf="selectLFFormControl.hasError('required')">
+                  Obavezno polje
                 </mat-error>
               </mat-form-field>
         </div>
       </div>
       <div class="col-sm">
         <div class="row">
-            <mat-form-field appearance="fill">
+              
+              <mat-form-field appearance="fill">
+                  <mat-label>Funkcija aktivacije izlaznog sloja</mat-label>
+                  <mat-select matNativeControl required [formControl]="selectAFFormControl" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
+                      <mat-option
+                      *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                      [value]="option">
+                      {{ optionName }}
+                  </mat-option>
+                  </mat-select>
+                  <mat-error *ngIf="selectAFFormControl.hasError('required')">
+                      Obavezno polje
+                  </mat-error>
+                </mat-form-field>
+          
+        </div>
+        <div class="row">
+              <mat-form-field appearance="fill">
+                <mat-label>Funkcija troška</mat-label>
+                <mat-select matNativeControl required [formControl]="selectLFFormControl">
+                    <mat-option
+                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
+                            [value]="option">
+                            {{ optionName }}
+                        </mat-option>
+                </mat-select>
+                <mat-error *ngIf="selectLFFormControl.hasError('required')">
+                  Obavezno polje
+                </mat-error>
+              </mat-form-field>
+        </div>
+      </div>
+      <div class="col-sm">
+        <div class="row">
+              <mat-form-field appearance="fill">
                 <mat-label>Broj epoha</mat-label>
-                <mat-select matNativeControl required [formControl]="selectFormControl">
+                <mat-select matNativeControl required [formControl]="selectEpochFormControl">
                   <mat-option label="--select something --"></mat-option>
                   <mat-option value="saab">Saab</mat-option>
                   <mat-option value="mercedes">Mercedes</mat-option>
                   <mat-option value="audi">Audi</mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
+                <mat-error *ngIf="selectEpochFormControl.hasError('required')">
                     Obavezno polje
                 </mat-error>
               </mat-form-field>
         </div>
         <div class="row">
-            <mat-form-field appearance="fill">
+              <mat-form-field appearance="fill">
                 <mat-label>Broj uzoraka po iteraciji</mat-label>
-                <mat-select matNativeControl required [formControl]="selectFormControl">
+                <mat-select matNativeControl required [formControl]="selectBSFormControl">
                   <mat-option label="--select something --"></mat-option>
                   <mat-option value="saab">Saab</mat-option>
                   <mat-option value="mercedes">Mercedes</mat-option>
                   <mat-option value="audi">Audi</mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
+                <mat-error *ngIf="selectBSFormControl.hasError('required')">
                     Obavezno polje
                 </mat-error>
               </mat-form-field>
         </div>
       </div>
-      <div class="col-sm">
-        <div class="row">
-            <mat-form-field appearance="fill">
-                <mat-label>Funkcija aktivacije izlaznog sloja</mat-label>
-                <mat-select matNativeControl required [formControl]="selectFormControl" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
-                    <mat-option
-                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                    [value]="option">
-                    {{ optionName }}
-                </mat-option>
-                </mat-select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
-              </mat-form-field>
-        </div>
-        <div class="row">
-            <mat-form-field appearance="fill">
-                <mat-label>Funkcija troška</mat-label>
-                <mat-select matNativeControl required [formControl]="selectFormControl">
-                    <mat-option
-                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
-                            [value]="option">
-                            {{ optionName }}
-                        </mat-option>
-                </mat-select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
-                  Obavezno polje
-                </mat-error>
-              </mat-form-field>
-        </div>
-      </div>
     </div><!--kraj unosa parametara-->
-
-    <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()">
-  </div>
   <hr>
     <div class="m-5">
-                <app-graph [model]="newModel" [inputCols]="4"></app-graph>
-                Broj skrivenih slojeva: 
-                <div class="col-1">
-                    <input type="number" min="1" class="form" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()">
+                <app-graph [model]="newModel" [inputCols]="newModel.inputColNum"></app-graph>
+                <!--<div class="row" style="position: center;">
+                  <div class="col-3"></div>
+                  <label class="col-2" style="color: white;">Broj skrivenih slojeva:</label>  
+                  <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()">
+                  </div>
                 </div>
+            </div>-->
+            <div class="row" id="rowhn">
+                <div class="col-3"></div>
+                <div class="col-2">Broj Skrivenih Slojeva</div>
+                <div class="col-1"><mat-icon (click)="addLayer()" (ngModelChange)="updateGraph()">add_circle</mat-icon></div>
+                <div class="col-1">{{newModel.hiddenLayers}}</div>
+                <div class="col-1"><mat-icon (click)="removeLayer()" (ngModelChange)="updateGraph()">remove_circle</mat-icon></div>
             </div>
-
   </div>
   <hr>
   <div class="row">
 
-      <div class="col">
-        <app-hidden-layer></app-hidden-layer>
+      <div class="col text-center" *ngFor="let item of [1,2,3,4,5]">
+        <app-hidden-layer  ></app-hidden-layer>
       </div>
   </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts
index c5ab9811..6dad9e6c 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -22,6 +22,13 @@ export class FormModelComponent implements OnInit {
   }
   selectFormControl = new FormControl('', Validators.required);
   nameFormControl = new FormControl('', [Validators.required, Validators.email]);
+  selectTypeFormControl=new FormControl('', Validators.required);
+  selectOptFormControl=new FormControl('', Validators.required);
+  selectLFFormControl=new FormControl('', Validators.required);
+  selectLRFormControl=new FormControl('', Validators.required);
+  selectEpochFormControl=new FormControl('', Validators.required);
+  selectAFFormControl=new FormControl('', Validators.required);
+  selectBSFormControl=new FormControl('', Validators.required);
 
   newModel: Model = new Model();
   myModels?: Model[];
@@ -41,10 +48,33 @@ export class FormModelComponent implements OnInit {
   lossFunction: any = LossFunction;
 
   showMyModels: boolean = true;
-
+  
   batchSizePower: number = 2;
 
+
+
   updateGraph() {
     this.graph.update();
   }
+  removeLayer(){
+    if(this.newModel.hiddenLayers>0)
+    {
+      this.newModel.hiddenLayers-=1;
+    }
+    else
+    {
+      this.newModel.hiddenLayers=this.newModel.hiddenLayers;
+    }
+    
+  }
+  addLayer(){
+    if(this.newModel.hiddenLayers<12)
+    {
+      this.newModel.hiddenLayers+=1;
+    }
+    else
+    {
+      this.newModel.hiddenLayers=this.newModel.hiddenLayers;
+    }
+  }
 }
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css
index c8db6056..dd96e0c5 100644
--- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css
+++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css
@@ -1,5 +1,17 @@
 .container{
-    max-width: 15rem;
+  
+    text-align: justify;
     border: 1px solid white;
     border-radius: 5px;
+    padding: 0;
+    color: white!important;
+    background-color: var(--ns-bg-dark-100) !important;
+   
 }
+mat-form-field{
+    font-size: 10px;
+}
+input{
+    background-color: #004165;
+    color: aliceblue;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html
index 65e0f626..16c41b28 100644
--- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html
+++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html
@@ -1,39 +1,42 @@
 <div class="container">
+  <div>
+    <label>Skriveni sloj {{hiddenLayerNum}}</label>
+  </div>
     <mat-form-field appearance="fill">
         <mat-label>Aktivaciona funkcija</mat-label>
-        <mat-select matNativeControl required [formControl]="selectFormControl">
-          <mat-option label="--select something --"></mat-option>
+        <mat-select matNativeControl required [formControl]="selectActivationFormControl">
           <mat-option value="saab">Relu</mat-option>
           <mat-option value="mercedes">Sigmoid</mat-option>
           <mat-option value="audi">Softmax</mat-option>
         </mat-select>
-        <mat-error *ngIf="selectFormControl.hasError('required')">
+        <mat-error *ngIf="selectActivationFormControl.hasError('required')">
             Obavezno polje
         </mat-error>
       </mat-form-field>
 <br>
-      Broj čvorova: <input type="number" min="1" class="form-control" name="hiddenLayersNeurons">
+<div class="row">
+      <label style="width: 7rem;" for="hiddenLayersNeurons">Broj čvorova:</label> <input type="number" min="1" class="form-control" name="hiddenLayersNeurons" style="max-width: 5rem;">
+</div>
       <br>
       <mat-form-field appearance="fill">
         <mat-label>Regularizacija</mat-label>
-        <mat-select matNativeControl required [formControl]="selectFormControl">
-          <mat-option label="--select something --"></mat-option>
+        <mat-select matNativeControl required [formControl]="selectRegularisationFormControl">
           <mat-option value="l1">L1</mat-option>
           <mat-option value="l2">L2</mat-option>
         </mat-select>
-        <mat-error *ngIf="selectFormControl.hasError('required')">
+        <mat-error *ngIf="selectRegularisationFormControl.hasError('required')">
             Obavezno polje
         </mat-error>
       </mat-form-field>
       <br>
       <mat-form-field appearance="fill">
         <mat-label>Stopa regularizacije</mat-label>
-        <mat-select matNativeControl required [formControl]="selectFormControl">
+        <mat-select matNativeControl required [formControl]="selectRRateFormControl">
           <mat-option value="saab">0.001</mat-option>
           <mat-option value="mercedes">0.01</mat-option>
           <mat-option value="audi">0.1</mat-option>
         </mat-select>
-        <mat-error *ngIf="selectFormControl.hasError('required')">
+        <mat-error *ngIf="selectRRateFormControl.hasError('required')">
             Obavezno polje
         </mat-error>
       </mat-form-field>
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts
index fa9a1114..301476de 100644
--- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts
+++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts
@@ -1,16 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
-
+import Model from 'src/app/_data/Model';
 @Component({
   selector: 'app-hidden-layer',
   templateUrl: './hidden-layer.component.html',
   styleUrls: ['./hidden-layer.component.css']
 })
 export class HiddenLayerComponent implements OnInit {
-  
+  hiddenLayerNum:number=1;
   constructor() { }
 
   ngOnInit(): void {
   }
-  selectFormControl = new FormControl('', Validators.required);
+  selectActivationFormControl = new FormControl('', Validators.required);
+  selectRegularisationFormControl = new FormControl('', Validators.required);
+  selectRRateFormControl = new FormControl('', Validators.required);
 }
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index f73e7571..956e9784 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -16,4 +16,7 @@
 
 
     </div>
+    <app-form-model>
+        
+    </app-form-model>
 </div>
\ No newline at end of file
-- 
cgit v1.2.3