diff options
Diffstat (limited to 'frontend/src/app/_elements/form-model')
3 files changed, 119 insertions, 60 deletions
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 95ace1ef..34c1a5c5 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -86,12 +86,12 @@ hr { max-height: 20 rem; } -mat-slider { - width: 50%; -} - .slider { background-color: transparent; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } .center-center { @@ -102,3 +102,29 @@ mat-slider { font-size: 20px !important; font-weight: 600; } + +.slider-pad { + min-width: 10%; + background-color: gray; + height: 2px; +} + +.slider-pad:first-child { + margin-right: -8px; +} + +.slider-pad:last-child { + margin-left: -8px; +} + +.slider-extended { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 95%; +} + +.slide { + width: 80%; +}
\ 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 09e44a99..b986e154 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -5,18 +5,13 @@ <div class="ns-col"> <mat-form-field class="example-full-width" appearance="fill" class="mat-fix"> <mat-label>Naziv</mat-label> - <input type="text" matInput [(ngModel)]="newModel.name"> + <input type="text" matInput [(ngModel)]="newModel.name" (valueChange)="editEvent.emit()"> </mat-form-field> </div> <div class="ns-col"> <mat-form-field appearance="fill" class="mat-fix"> <mat-label>Tip problema</mat-label> - <mat-select [(ngModel)]="newModel.type" (selectionChange)="filterLossFunction()" *ngIf="this.hideProblemType" disabled="true"> - <mat-option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option"> - {{ optionName }} - </mat-option> - </mat-select> - <mat-select [(ngModel)]="newModel.type" (selectionChange)="filterLossFunction()" *ngIf="!this.hideProblemType" disabled="false"> + <mat-select [(ngModel)]="forProblemType" [disabled]="this.hideProblemType" (valueChange)="editEvent.emit(); newModel.type = forProblemType;"> <mat-option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option"> {{ optionName }} </mat-option> @@ -29,7 +24,7 @@ <div class="ns-col"> <mat-form-field appearance="fill" class="mat-fix"> <mat-label>Optimizacija</mat-label> - <mat-select [(ngModel)]="newModel.optimizer"> + <mat-select [(ngModel)]="newModel.optimizer" (valueChange)="editEvent.emit()"> <mat-option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" [value]="option"> {{ optionName }} </mat-option> @@ -40,8 +35,8 @@ <div class="ns-col"> <mat-form-field appearance="fill" class="mat-fix"> <mat-label>Funkcija troška</mat-label> - <mat-select [(ngModel)]="newModel.lossFunction"> - <mat-option *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)" [value]="option"> + <mat-select [(ngModel)]="lossFunction" (valueChange)="newModel.lossFunction = lossFunction!; editEvent.emit();"> + <mat-option *ngFor="let option of Object.keys(lossFunctions[forProblemType]); let optionName of Object.values(lossFunctions[forProblemType])" [value]="option"> {{ optionName }} </mat-option> </mat-select> @@ -53,7 +48,7 @@ <div class="ns-col"> <mat-form-field appearance="fill" class="mat-fix"> <mat-label>Funkcija aktivacije izlaznog sloja</mat-label> - <mat-select name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> + <mat-select name="outputLayerActivationFunction" [(ngModel)]="outputLayerActivationFunction" (valueChange)="newModel.outputLayerActivationFunction = outputLayerActivationFunction!; editEvent.emit();"> <mat-option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" [value]="option"> {{ optionName }} </mat-option> @@ -63,7 +58,7 @@ <div class="ns-col"> <mat-form-field appearance="fill" class="mat-fix"> <mat-label>Stopa učenja</mat-label> - <mat-select [(ngModel)]="newModel.learningRate"> + <mat-select [(ngModel)]="newModel.learningRate" (valueChange)="editEvent.emit()"> <mat-option *ngFor="let option of Object.keys(LearningRate); let optionName of Object.values(LearningRate)" [value]="option"> {{ optionName }} </mat-option> @@ -76,14 +71,14 @@ <div class="ns-col"> <mat-form-field appearance="fill" class="mat-fix"> <mat-label>Broj epoha</mat-label> - <input type="number" matInput [(ngModel)]="newModel.epochs" min="1" max="1000"> + <input type="number" matInput [(ngModel)]="newModel.epochs" min="1" max="1000" (valueChange)="editEvent.emit()"> </mat-form-field> </div> <div class="ns-col"> <mat-form-field appearance="fill" class="mat-fix"> <mat-label>Broj uzoraka po iteraciji</mat-label> - <mat-select matNativeControl [(value)]="newModel.batchSize"> + <mat-select matNativeControl [(value)]="newModel.batchSize" (valueChange)="editEvent.emit()"> <mat-option *ngFor="let option of Object.keys(BatchSize); let optionName of Object.values(BatchSize)" [value]="option">{{option}}</mat-option> </mat-select> </mat-form-field> @@ -96,26 +91,38 @@ <div class="m-2"> <div class="row"> - <div class="col-sm-3 rounded" style="border:1px solid var(--ns-primary);margin-top: 10px;"> - <div class="row slider rounded mb-3" style="margin-left: 10px;"> - + <div class="col-sm-3 rounded" style="border:1px solid var(--ns-primary);margin-top: 10px; width: fit-content;"> + <!-- <label>Veličina skupa za validaciju: </label><b>{{validationSize}} %</b> <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div> - <div class="text-center pt-0 mt-0">Trening - <mat-slider min="10" max="90" step="10" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider> - Test</div> - - </div> - <div class="row slider rounded text-offwhite justify-content-center align-items-center" style="margin-left: 10px;"> - <mat-checkbox class="pt-4 mb-3" color="accent">Nasumični redosled podataka</mat-checkbox> + <div class="text-center pt-0 mt-0 p-0">Trening ////slider////// Test</div> + --> + <div class="slider mt-2"> + <div> + Trening {{testSetDistribution}}% : Test i validacija {{100-testSetDistribution}}% + </div> + <div class="slider-extended"> + <div class="slider-pad"></div> + <mat-slider class="slide" min="10" max="90" step="5" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)" (valueChange)="editEvent.emit()"></mat-slider> + <div class="slider-pad"></div> + </div> + <div> + Test {{validationSize}}% : Validacija {{100-validationSize}}% + </div> + <div class="slider-extended"> + <div class="slider-pad"></div> + <mat-slider class="slide" min="10" max="90" step="5" [(ngModel)]="validationSize" (input)="updateValidation($event)" (valueChange)="editEvent.emit()"></mat-slider> + <div class="slider-pad"></div> + </div> </div> - + <div class="d-flex justify-content-center mt-3"> + <mat-checkbox color="accent" (valueChange)="editEvent.emit()">Nasumični redosled podataka</mat-checkbox> + </div> </div> <div class="col-sm-9"> <!-- {{forExperiment._columnsSelected}} --> - <app-graph [model]="newModel" *ngIf="forExperiment._columnsSelected" [inputColumns]="getInputColumns()"></app-graph> - <app-graph [model]="newModel" *ngIf="!forExperiment._columnsSelected" [inputColumns]="['Nisu odabrane ulazne kolone']"></app-graph> + <app-graph [model]="newModel" [inputColumns]="getInputColumns()"></app-graph> </div> </div> </div> @@ -213,7 +220,7 @@ <mat-form-field appearance="fill" class="mat-fix"> <mat-label>Regularizacija</mat-label> - <mat-select [(ngModel)]="newModel.layers[i].regularisation"> + <mat-select [(ngModel)]="newModel.layers[i].regularisation" (valueChange)="editEvent.emit()"> <mat-option *ngFor="let option of Object.keys(Regularisation); let optionName of Object.values(Regularisation)" [value]="option"> {{ optionName }} </mat-option> 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 e01c2339..646af08c 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -15,15 +15,22 @@ export class FormModelComponent implements AfterViewInit { @ViewChild(GraphComponent) graph!: GraphComponent; @Input() forExperiment!: Experiment; @Output() selectedModelChangeEvent = new EventEmitter<Model>(); - @Input() hideProblemType:boolean; - @Input() forProblemType:ProblemType; + @Input() hideProblemType!: boolean; + @Input() forProblemType!: ProblemType; testSetDistribution: number = 70; - constructor() { - this.hideProblemType=false; - this.forProblemType=ProblemType.BinaryClassification; + validationSize: number = 15; + constructor() { } - ngAfterViewInit(): void { } + @Output() editEvent = new EventEmitter(); + + ngAfterViewInit(): void { + this.lossFunction = this.lossFunctions[this.forProblemType][0]; + this.outputLayerActivationFunction = this.outputLayerActivationFunctions[this.forProblemType][0]; + + this.newModel.lossFunction = this.lossFunction; + this.newModel.outputLayerActivationFunction = this.outputLayerActivationFunction; + } selectFormControl = new FormControl('', Validators.required); nameFormControl = new FormControl('', [Validators.required, Validators.email]); @@ -58,10 +65,21 @@ export class FormModelComponent implements AfterViewInit { term: string = ""; selectedMetrics = []; - lossFunction: any = LossFunction; + lossFunctions: { [index: string]: LossFunction[] } = { + [ProblemType.Regression]: LossFunctionRegression, + [ProblemType.BinaryClassification]: LossFunctionBinaryClassification, + [ProblemType.MultiClassification]: LossFunctionMultiClassification + }; + + outputLayerActivationFunctions: { [index: string]: ActivationFunction[] } = { + [ProblemType.Regression]: [ActivationFunction.Linear], + [ProblemType.BinaryClassification]: [ActivationFunction.Sigmoid], + [ProblemType.MultiClassification]: [ActivationFunction.Softmax] + }; loadModel(model: Model) { this.newModel = model; + this.forProblemType = model.type; } updateGraph() { @@ -74,17 +92,20 @@ export class FormModelComponent implements AfterViewInit { this.newModel.layers.splice(this.newModel.layers.length - 1, 1); this.newModel.hiddenLayers -= 1; this.updateGraph(); + this.editEvent.emit(); } } + addLayer() { - if (this.newModel.hiddenLayers < 128) { + if (this.newModel.hiddenLayers < 150) { this.newModel.layers.push(new Layer(this.newModel.layers.length, this.selectedActivation, this.selectedNumberOfNeurons, this.selectedRegularisation, this.selectedRegularisationRate)); this.newModel.hiddenLayers += 1; this.updateGraph(); + this.editEvent.emit(); } - } + numSequence(n: number): Array<number> { return Array(n); } @@ -93,59 +114,64 @@ export class FormModelComponent implements AfterViewInit { if (this.newModel.layers[index].neurons > 1) { this.newModel.layers[index].neurons -= 1; this.updateGraph(); + this.editEvent.emit(); } } + addNeuron(index: number) { if (this.newModel.layers[index].neurons < 18) { this.newModel.layers[index].neurons += 1; this.updateGraph(); + this.editEvent.emit(); } } + selectedActivation: ActivationFunction = ActivationFunction.Sigmoid; selectedRegularisationRate: RegularisationRate = RegularisationRate.RR1; selectedRegularisation: Regularisation = Regularisation.L1; selectedNumberOfNeurons: number = 3; + lossFunction: LossFunction = LossFunction.MeanAbsoluteError; + outputLayerActivationFunction: ActivationFunction = ActivationFunction.Linear; + changeAllActivation() { for (let i = 0; i < this.newModel.layers.length; i++) { this.newModel.layers[i].activationFunction = this.selectedActivation; } + this.editEvent.emit(); } changeAllRegularisation() { for (let i = 0; i < this.newModel.layers.length; i++) { this.newModel.layers[i].regularisation = this.selectedRegularisation; } + this.editEvent.emit(); } changeAllRegularisationRate() { for (let i = 0; i < this.newModel.layers.length; i++) { this.newModel.layers[i].regularisationRate = this.selectedRegularisationRate; } + this.editEvent.emit(); } changeAllNumberOfNeurons() { for (let i = 0; i < this.newModel.layers.length; i++) { this.newModel.layers[i].neurons = this.selectedNumberOfNeurons; - this.updateGraph(); } + this.updateGraph(); + this.editEvent.emit(); } updateTestSet(event: MatSliderChange) { this.testSetDistribution = event.value!; } - filterLossFunction() { - if(this.newModel.type==ProblemType.Regression){ - this.lossFunction = LossFunctionRegression; - this.newModel.lossFunction=LossFunction.MeanSquaredError; - } - else if(this.newModel.type==ProblemType.BinaryClassification){ - this.lossFunction= LossFunctionBinaryClassification; - this.newModel.lossFunction=LossFunction.BinaryCrossEntropy; - } - else if(this.newModel.type==ProblemType.MultiClassification){ - this.lossFunction = LossFunctionMultiClassification; - this.newModel.lossFunction=LossFunction.SparseCategoricalCrossEntropy; - } - -} -getInputColumns() { - return this.forExperiment.inputColumns.filter(x => x != this.forExperiment.outputColumn); -} + + getInputColumns() { + if (this.forExperiment) + return this.forExperiment.inputColumns.filter(x => x != this.forExperiment.outputColumn); + else + return ['Nisu odabrane ulazne kolone.'] + } + + updateValidation(event: MatSliderChange) { + this.validationSize = event.value!; + this.editEvent.emit(); + } } |