From 6196023a54bcf0ac5a81c64aff0bcf55f22e0ef8 Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Tue, 26 Apr 2022 22:54:07 +0200
Subject: Parametri su povezani.

---
 .../_elements/form-model/form-model.component.css  | 10 ++-
 .../_elements/form-model/form-model.component.html | 93 +++++++++-------------
 .../_elements/form-model/form-model.component.ts   | 10 ++-
 3 files changed, 53 insertions(+), 60 deletions(-)

(limited to 'frontend/src/app/_elements')

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 f4d085ea..051e23fc 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.css
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
@@ -12,8 +12,10 @@ mat-form-field{
     padding: 0;
 }
 hr{
-    color: var(--offwhite) !important;
-    margin-bottom: 30px;;
+    color:var(--ns-primary) 100%;
+    margin-bottom: 30px;
+    height: 2px;
+
 }
 .row{
     margin: 0;
@@ -29,7 +31,7 @@ mat-icon{
 .neuron{
   
     text-align: justify;
-    border: 1px solid white;
+    border: 1px solid  var(--ns-primary);
     border-radius: 5px;
     padding: 0;
     color: white!important;
@@ -39,7 +41,7 @@ mat-icon{
    
 }
 mat-form-field{
-    font-size: 12px;
+    font-size: 15px;
 }
 col-1{
     text-align: center;
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 ac5ca9ab..6435b8d6 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -4,28 +4,20 @@
         <div class="row">
           <mat-form-field class="example-full-width" appearance="fill">
             <mat-label>Naziv</mat-label>
-            <input type="text" matInput [formControl]="nameFormControl">
-            <mat-error *ngIf="nameFormControl.hasError('name') && !nameFormControl.hasError('required')">
-              Unesite naziv
-            </mat-error>
-            <mat-error *ngIf="nameFormControl.hasError('required')">
-              Naziv je <strong>obavezan</strong>
-            </mat-error>
+            <input type="text" matInput [(ngModel)]="newModel.name">
           </mat-form-field>
         </div>
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Tip problema</mat-label>
-                <mat-select matNativeControl required [formControl]="selectTypeFormControl">
+                <mat-select  [(ngModel)]="newModel.type">
                     <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="selectTypeFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
+                
               </mat-form-field>
         </div>
       </div>
@@ -33,31 +25,27 @@
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Optimizacija</mat-label>
-                <mat-select matNativeControl required [formControl]="selectOptFormControl">
+                <mat-select  [(ngModel)]="newModel.optimizer">
                     <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="selectOptFormControl.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-select [(ngModel)]="newModel.lossFunction">
                     <mat-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 }}
                         </mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectLFFormControl.hasError('required')">
-                  Obavezno polje
-                </mat-error>
+               
               </mat-form-field>
         </div>
       </div>
@@ -66,32 +54,28 @@
               
               <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-select 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-label>Stopa učenja</mat-label>
+                <mat-select  [(ngModel)]="newModel.learningRate">
                     <mat-option
-                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
+                            *ngFor="let option of Object.keys(LearningRate); let optionName of Object.values(LearningRate)"
                             [value]="option">
                             {{ optionName }}
                         </mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectLFFormControl.hasError('required')">
-                  Obavezno polje
-                </mat-error>
+                
               </mat-form-field>
         </div>
       </div>
@@ -130,19 +114,19 @@
         {{item}}
         <div class="neuron">
           <div style="text-align: center;">
-            <label >Skriveni sloj</label>
+            <label >Skriveni sloj {{i+1}}</label>
           </div>
           <div class="row" style="margin-bottom: -10px;">
             <mat-form-field appearance="fill">
                 <mat-label>Aktivaciona funkcija</mat-label>
-                <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="selectActivationFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
+                <mat-select  [(ngModel)]="newModel.layers[i].activationFunction">
+                  <mat-option
+                          *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                          [value]="option">
+                          {{ optionName }}
+                      </mat-option>
+              </mat-select>
+                
               </mat-form-field>
             </div>
         <div class="row" >
@@ -155,26 +139,27 @@
               <div class='row' style="margin-bottom: -7px;">
               <mat-form-field appearance="fill">
                 <mat-label>Regularizacija</mat-label>
-                <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="selectRegularisationFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
+                <mat-select [(ngModel)]="newModel.layers[i].regularisation">
+                  <mat-option
+                          *ngFor="let option of Object.keys(Regularisation); let optionName of Object.values(Regularisation)"
+                          [value]="option">
+                          {{ optionName }}
+                      </mat-option>
+              </mat-select>
+                
               </mat-form-field>
               </div>
             <div class="row" style="margin-bottom: -7px;">
               <mat-form-field appearance="fill">
                 <mat-label>Stopa regularizacije</mat-label>
-                <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="selectRRateFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
+                <mat-select [(ngModel)]="newModel.layers[i].regularisationRate">
+                  <mat-option
+                          *ngFor="let option of Object.keys(RegularisationRate); let optionName of Object.values(RegularisationRate)"
+                          [value]="option">
+                          {{ optionName }}
+                      </mat-option>
+              </mat-select>
+               
               </mat-form-field>
             </div>
         </div>
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 40bc30ea..c3c73b3e 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit ,Input, ViewChild, Output, EventEmitter} from '@angul
 import {FormControl, Validators} from '@angular/forms';
 import Shared from 'src/app/Shared';
 import Experiment from 'src/app/_data/Experiment';
-import Model, {Layer, ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
+import Model, {Layer, ActivationFunction, LossFunction,LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType ,Regularisation,RegularisationRate} from 'src/app/_data/Model';
 import { GraphComponent } from '../graph/graph.component';
 import {FormGroupDirective, NgForm} from '@angular/forms';
 import {ErrorStateMatcher} from '@angular/material/core';
@@ -35,19 +35,25 @@ export class FormModelComponent implements OnInit {
   selectActivationFormControl = new FormControl('', Validators.required);
   selectRegularisationFormControl = new FormControl('', Validators.required);
   selectRRateFormControl = new FormControl('', Validators.required);
+
   newModel: Model = new Model();
   myModels?: Model[];
+
   selectedModel?: Model;
 
   ProblemType = ProblemType;
   ActivationFunction = ActivationFunction;
+  RegularisationRate=RegularisationRate;
+  Regularisation=Regularisation;
   metrics: any = Metrics;
   LossFunction = LossFunction;
   Optimizer = Optimizer;
   Object = Object;
   document = document;
   shared = Shared;
-
+  LearningRate=LearningRate;
+  Layer=Layer;
+  
   term: string = "";
   selectedMetrics = [];
   lossFunction: any = LossFunction;
-- 
cgit v1.2.3