Ažurirana komponenta form-model, izbrisana komponenta hidden-layer.

8 files changed, 169 insertions, 135 deletions

diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 6cef09e5..00ac0d0c 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -14,7 +14,7 @@ export default class Model {
         public optimizer: Optimizer = Optimizer.Adam,
         public lossFunction: LossFunction = LossFunction.MeanSquaredError,
         public inputNeurons: number = 1,
-        public hiddenLayerNeurons: number = 1,
+        public hiddenLayerNeurons: number=1,
         public hiddenLayers: number = 1,
         public batchSize: number = 5,
         public hiddenLayerActivationFunctions: string[] = ['sigmoid'],
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;
+      
     }
   }
 }
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css
deleted file mode 100644
index dd96e0c5..00000000
--- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.container{
-  
-    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
deleted file mode 100644
index 16c41b28..00000000
--- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<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]="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>
-      <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>
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts
deleted file mode 100644
index 103e4539..00000000
--- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HiddenLayerComponent } from './hidden-layer.component';
-
-describe('HiddenLayerComponent', () => {
-  let component: HiddenLayerComponent;
-  let fixture: ComponentFixture<HiddenLayerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ HiddenLayerComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HiddenLayerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts
deleted file mode 100644
index 301476de..00000000
--- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-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 {
-  }
-  selectActivationFormControl = new FormControl('', Validators.required);
-  selectRegularisationFormControl = new FormControl('', Validators.required);
-  selectRRateFormControl = new FormControl('', Validators.required);
-}