diff options
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); -} |