From 636d944d3fabbf3b42b3b316756a52a777657d03 Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Mon, 25 Apr 2022 04:30:57 +0200
Subject: Ažurirana komponenta form-model, izbrisana komponenta hidden-layer.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_elements/form-model/form-model.component.css  | 20 +++++
 .../_elements/form-model/form-model.component.html | 86 ++++++++++++++------
 .../_elements/form-model/form-model.component.ts   | 93 ++++++++++++++++++++--
 3 files changed, 168 insertions(+), 31 deletions(-)

(limited to 'frontend/src/app/_elements/form-model')

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 20546e17..b4477bce 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.css
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
@@ -25,4 +25,24 @@ mat-icon{
 #rowhn{
     margin-bottom:-50px;
     padding: 0;
+}
+.neuron{
+  
+    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: 12px;
+}
+col-1{
+    text-align: center;
+}
+mat-icon{
+    margin-right: 5px;
+    margin-left: -7px;
 }
\ 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 40631570..22307d4d 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -95,34 +95,20 @@
               </mat-form-field>
         </div>
       </div>
-      <div class="col-sm">
+      <div class="col">
         <div class="row">
-              <mat-form-field appearance="fill">
-                <mat-label>Broj epoha</mat-label>
-                <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="selectEpochFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
-              </mat-form-field>
+          <div class="col-7">Broj Epoha</div>
+          <mat-icon (click)="addEpoch()">add_circle</mat-icon>
+          <div class="col-1">{{newModel.epochs}}</div>
+          <mat-icon (click)="removeEpoch()">remove_circle</mat-icon>
         </div>
+        <br>
+        <br>
         <div class="row">
-              <mat-form-field appearance="fill">
-                <mat-label>Broj uzoraka po iteraciji</mat-label>
-                <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="selectBSFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
-              </mat-form-field>
+          <div class="col-7">Broj Uzoraka Po Iteraciji</div>
+          <mat-icon (click)="addBatch()">add_circle</mat-icon>
+          <div class="col-1">{{newModel.batchSize}}</div>
+          <mat-icon (click)="removeBatch()">remove_circle</mat-icon>
         </div>
       </div>
     </div><!--kraj unosa parametara-->
@@ -149,6 +135,54 @@
   <div class="row">
 
       <div class="col text-center" *ngFor="let item of [1,2,3,4,5]">
-        <app-hidden-layer  ></app-hidden-layer>
+        <div class="neuron">
+          <div>
+            <label>Skriveni sloj {{item}}</label>
+          </div>
+            <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-form-field>
+        <br>
+        <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 class="col-6" style="font-size: 13px;" >Broj čvorova</div>
+                <mat-icon (click)="addNeuron()">add_circle</mat-icon>
+                <div class="col-1">{{newModel.hiddenLayerNeurons}}</div>
+                <mat-icon (click)="removeNeuron()">remove_circle</mat-icon>
+          
+        </div>
+              <br>
+              <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-form-field>
+              <br>
+              <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-form-field>
+        </div>
       </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 6dad9e6c..cff967aa 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -16,7 +16,10 @@ export class FormModelComponent implements OnInit {
   @Input() forExperiment?: Experiment;
   @Output() selectedModelChangeEvent = new EventEmitter<Model>();
 
-  constructor() { }
+  constructor() { 
+  this.newModel.epochs=1;
+  this.newModel.batchSize=1;
+}
   
   ngOnInit(): void {
   }
@@ -29,7 +32,9 @@ export class FormModelComponent implements OnInit {
   selectEpochFormControl=new FormControl('', Validators.required);
   selectAFFormControl=new FormControl('', Validators.required);
   selectBSFormControl=new FormControl('', Validators.required);
-
+  selectActivationFormControl = new FormControl('', Validators.required);
+  selectRegularisationFormControl = new FormControl('', Validators.required);
+  selectRRateFormControl = new FormControl('', Validators.required);
   newModel: Model = new Model();
   myModels?: Model[];
   selectedModel?: Model;
@@ -49,17 +54,18 @@ export class FormModelComponent implements OnInit {
 
   showMyModels: boolean = true;
   
-  batchSizePower: number = 2;
-
+  
+ 
 
 
   updateGraph() {
     this.graph.update();
   }
   removeLayer(){
-    if(this.newModel.hiddenLayers>0)
+    if(this.newModel.hiddenLayers>1)
     {
       this.newModel.hiddenLayers-=1;
+      this.updateGraph();
     }
     else
     {
@@ -71,10 +77,87 @@ export class FormModelComponent implements OnInit {
     if(this.newModel.hiddenLayers<12)
     {
       this.newModel.hiddenLayers+=1;
+      this.updateGraph();
     }
     else
     {
       this.newModel.hiddenLayers=this.newModel.hiddenLayers;
+      
+    }
+  }
+  removeBatch(){
+    if(this.newModel.batchSize>1)
+    {
+      this.newModel.batchSize=this.newModel.batchSize/2;
+    }
+    else
+    {
+      this.newModel.batchSize=this.newModel.batchSize;
+    }
+    
+  }
+  addBatch(){
+    if(this.newModel.batchSize<600)
+    {
+      this.newModel.batchSize=this.newModel.batchSize*2;
+    }
+    else
+    {
+      this.newModel.batchSize=this.newModel.batchSize;
+      
+    }
+  }
+  removeEpoch(){
+    if(this.newModel.epochs>1)
+    {
+      this.newModel.epochs=this.newModel.epochs-1;
+    }
+    else
+    {
+      this.newModel.epochs=this.newModel.epochs;
+    }
+    
+  }
+  addEpoch(){
+    if(this.newModel.epochs<100)
+    {
+      this.newModel.epochs=this.newModel.epochs+1;
+    }
+    else
+    {
+      this.newModel.epochs=this.newModel.epochs;
+      
+    }
+  }
+  /*
+  setNeurons()
+  {
+    for(let i=0;i<this.newModel.hiddenLayers;i++){
+      this.newModel.hiddenLayerNeurons[i]=1;
+    }
+  }*/
+  removeNeuron(){
+    if(this.newModel.hiddenLayerNeurons>1)
+    {
+      this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons-1;
+      this.updateGraph();
+    }
+    else
+    {
+      this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons;
+    }
+    
+  }
+  addNeuron(){
+    if(this.newModel.hiddenLayerNeurons<100)
+    {
+      this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons+1;
+      this.updateGraph();
+    }
+    else
+    {
+      this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons;
+      
     }
   }
 }
-- 
cgit v1.2.3