diff options
7 files changed, 198 insertions, 204 deletions
diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index aee2314e..0477b7be 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -189,8 +189,9 @@ table ::ng-deep .mat-form-field-wrapper { } .hidden { - visibility: hidden; - height: 1px; + /*visibility: hidden; + height: 1px;*/ + display: none; } .bottom-button { diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index e77f837e..113db616 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -66,7 +66,7 @@ <mat-icon>zoom_out_map</mat-icon> </button> </div> - <app-form-model [forExperiment]="forExperiment" [model]="fileToDisplay" [ngClass]="{'form-hidden': type != FolderType.Model}"></app-form-model> + <app-form-model [ngClass]="{'form-hidden': type != FolderType.Model}"></app-form-model> <app-form-dataset [ngClass]="{'form-hidden': type != FolderType.Dataset}"></app-form-dataset> </div> <div [ngClass]="{'form-hidden' : !listView}" class="list-view"> diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index e0336ded..e92ea468 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -9,6 +9,7 @@ import { FormDatasetComponent } from '../form-dataset/form-dataset.component'; import Experiment from 'src/app/_data/Experiment'; import { ExperimentsService } from 'src/app/_services/experiments.service'; import { PredictorsService } from 'src/app/_services/predictors.service'; +import { FormModelComponent } from '../form-model/form-model.component'; @Component({ selector: 'app-folder', @@ -17,18 +18,16 @@ import { PredictorsService } from 'src/app/_services/predictors.service'; }) export class FolderComponent implements AfterViewInit { - @ViewChild(FormDatasetComponent) formDataset?: FormDatasetComponent; - - - + @ViewChild(FormDatasetComponent) formDataset!: FormDatasetComponent; + @ViewChild(FormModelComponent) formModel!: FormModelComponent; @Input() folderName: string = 'Moji podaci'; @Input() files!: FolderFile[] - newFile!: Dataset | Model; + newFile?: Dataset | Model; @Input() type: FolderType = FolderType.Dataset; - @Input() forExperiment?: Experiment; + @Input() forExperiment!: Experiment; @Input() startingTab: TabType = TabType.MyDatasets; newFileSelected: boolean = true; @@ -45,24 +44,22 @@ export class FolderComponent implements AfterViewInit { searchTerm: string = ''; constructor(private datasetsService: DatasetsService, private experimentsService: ExperimentsService, private modelsService: ModelsService, private predictorsService: PredictorsService) { - //PLACEHOLDER - this.forExperiment = new Experiment(); - this.forExperiment.inputColumns = ['kolona1', 'kol2', '???', 'test']; - - this.folders[TabType.File] = []; - this.folders[TabType.NewFile] = []; + this.tabsToShow.forEach(tab => this.folders[tab] = []); + this.files = []; + this.filteredFiles = [] + this.selectTab(this.startingTab); } ngAfterViewInit(): void { this.refreshFiles(); } - _initialized = false; - displayFile() { if (this.type == FolderType.Dataset) - this.formDataset!.dataset = <Dataset>this.fileToDisplay; + this.formDataset.dataset = <Dataset>this.fileToDisplay; + else if (this.type == FolderType.Model) + this.formModel.newModel = <Model>this.fileToDisplay; } hoverOverFile(i: number) { @@ -142,12 +139,7 @@ export class FolderComponent implements AfterViewInit { this.folders[TabType.MyExperiments] = experiments; }); - if (!this._initialized) { - this.selectTab(this.startingTab); - this._initialized = true; - } - else - this.searchTermsChanged(); + this.searchTermsChanged(); } saveNewFile() { @@ -232,7 +224,6 @@ export class FolderComponent implements AfterViewInit { selectTab(tab: TabType) { if (tab == TabType.NewFile) { - this.selectNewFile(); } 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 e51c2cac..fa57ad46 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -1,219 +1,220 @@ -<div id="container"> - <div class="ns-row"> +<div *ngIf="newModel"> + <div id="container"> + <div class="ns-row"> + + <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"> + </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"> + <mat-option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option"> + {{ optionName }} + </mat-option> + </mat-select> + </mat-form-field> + </div> + + <div class="break-1"></div> + + <div class="ns-col"> + <mat-form-field appearance="fill" class="mat-fix"> + <mat-label>Optimizacija</mat-label> + <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-form-field> + </div> + <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"> + {{ optionName }} + </mat-option> + </mat-select> + </mat-form-field> + </div> + + <div class="break-2"></div> + + <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-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="ns-col"> + <mat-form-field appearance="fill" class="mat-fix"> + <mat-label>Stopa učenja</mat-label> + <mat-select [(ngModel)]="newModel.learningRate"> + <mat-option *ngFor="let option of Object.keys(LearningRate); let optionName of Object.values(LearningRate)" [value]="option"> + {{ optionName }} + </mat-option> + </mat-select> + </mat-form-field> + </div> + + <div class="break-1"></div> + + <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"> + </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 required [(value)]="newModel.batchSize"> + <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> + </div> - <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"> - </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"> - <mat-option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option"> - {{ optionName }} - </mat-option> - </mat-select> - </mat-form-field> + </div> + <div> + <div class="ns-row" style="margin-top: 10px;"> + <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary);margin-left: 10px;"> + + <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="ns-col slider rounded text-offwhite justify-content-center align-items-center" style="border:1px solid var(--ns-primary);margin-left: 10px;"> + <mat-checkbox class="pt-4" color="accent">Nasumični redosled podataka</mat-checkbox> + </div> + + </div> + </div> - <div class="break-1"></div> + <!--kraj unosa parametara--> + <hr> + <div class="m-2"> + <app-graph [model]="newModel"></app-graph> + </div> + <div class="ns-row"> - <div class="ns-col"> - <mat-form-field appearance="fill" class="mat-fix"> - <mat-label>Optimizacija</mat-label> - <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> + <div class="ns-col" id="layers-control"> + <div>Broj Skrivenih Slojeva</div> + <button class="btn-clear btn-icon bubble" (click)="addLayer()"> + <mat-icon>add</mat-icon> + </button> + <div>{{newModel.hiddenLayers}}</div> + <button class="btn-clear btn-icon bubble" (click)="removeLayer()"> + <mat-icon>remove</mat-icon> + </button> - </mat-form-field> </div> + <div class="break-1"></div> <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-label>Aktivaciona funkcija svih slojeva</mat-label> + + <mat-select [(ngModel)]="selectedActivation" (selectionChange)="changeAllActivation()"> + <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="break-2"></div> - <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-option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" [value]="option"> - {{ optionName }} - </mat-option> - </mat-select> + <mat-label>Broj neurona svih slojeva</mat-label> + <input matInput type="number" min="1" max="18" [(ngModel)]="selectedNumberOfNeurons" (change)="changeAllNumberOfNeurons()"> </mat-form-field> </div> + <div class="break-2"></div> <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-option *ngFor="let option of Object.keys(LearningRate); let optionName of Object.values(LearningRate)" [value]="option"> + <mat-label>Regularizacija svih slojeva</mat-label> + <mat-select [(ngModel)]="selectedRegularisation" (selectionChange)="changeAllRegularisation()"> + <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="break-1"></div> - <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"> - </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 required [(value)]="newModel.batchSize"> - <mat-option *ngFor="let option of Object.keys(BatchSize); let optionName of Object.values(BatchSize)" [value]="option">{{option}}</mat-option> + <mat-label>Stopa regularizacije svih slojeva</mat-label> + <mat-select [(ngModel)]="selectedRegularisationRate" (selectionChange)="changeAllRegularisationRate()"> + <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> -</div> -<div> - <div class="ns-row" style="margin-top: 10px;"> - <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary);margin-left: 10px;"> - - <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="ns-col slider rounded text-offwhite justify-content-center align-items-center" style="border:1px solid var(--ns-primary);margin-left: 10px;"> - <mat-checkbox class="pt-4" color="accent">Nasumični redosled podataka</mat-checkbox> - </div> - </div> -</div> - -<!--kraj unosa parametara--> -<hr> -<div class="m-2"> - <app-graph [model]="newModel" [inputColumns]="forExperiment?.inputColumns"></app-graph> -</div> -<div class="ns-row"> - - <div class="ns-col" id="layers-control"> - <div>Broj Skrivenih Slojeva</div> - <button class="btn-clear btn-icon bubble" (click)="addLayer()"> - <mat-icon>add</mat-icon> - </button> - <div>{{newModel.hiddenLayers}}</div> - <button class="btn-clear btn-icon bubble" (click)="removeLayer()"> - <mat-icon>remove</mat-icon> - </button> - - </div> - <div class="break-1"></div> - <div class="ns-col"> - <mat-form-field appearance="fill" class="mat-fix"> - <mat-label>Aktivaciona funkcija svih slojeva</mat-label> - - <mat-select [(ngModel)]="selectedActivation" (selectionChange)="changeAllActivation()"> - <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="ns-col"> - <mat-form-field appearance="fill" class="mat-fix"> - <mat-label>Broj neurona svih slojeva</mat-label> - <input matInput type="number" min="1" max="18" [(ngModel)]="selectedNumberOfNeurons" (change)="changeAllNumberOfNeurons()"> - </mat-form-field> - </div> - <div class="break-2"></div> - <div class="ns-col"> - <mat-form-field appearance="fill" class="mat-fix"> - <mat-label>Regularizacija svih slojeva</mat-label> - <mat-select [(ngModel)]="selectedRegularisation" (selectionChange)="changeAllRegularisation()"> - <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="ns-col"> - <mat-form-field appearance="fill" class="mat-fix"> - <mat-label>Stopa regularizacije svih slojeva</mat-label> - <mat-select [(ngModel)]="selectedRegularisationRate" (selectionChange)="changeAllRegularisationRate()"> - <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> -<!--kraj selectall**********************************************************************************--> -<div id="layers"> + <!--kraj selectall**********************************************************************************--> + <div id="layers"> - <div class="layer" *ngFor="let item of newModel.layers; let i=index"> + <div class="layer" *ngFor="let item of newModel.layers; let i=index"> - <mat-form-field appearance="fill" class="mat-fix"> - <mat-label>Aktivacija</mat-label> - <button matPrefix class="btn-clear center-center text-offwhite"> + <mat-form-field appearance="fill" class="mat-fix"> + <mat-label>Aktivacija</mat-label> + <button matPrefix class="btn-clear center-center text-offwhite"> <div> #{{i+1}} </div> </button> - <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 class="d-flex flex-row align-items-center justify-content-center tm"> - <div class="col-6" style="font-size: 13px;">Broj čvorova</div> - <button class="btn-clear btn-icon bubble" (click)="addNeuron(i)"> + <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 class="d-flex flex-row align-items-center justify-content-center tm"> + <div class="col-6" style="font-size: 13px;">Broj čvorova</div> + <button class="btn-clear btn-icon bubble" (click)="addNeuron(i)"> <mat-icon>add</mat-icon> </button> - <div class="col-2 text-center">{{newModel.layers[i].neurons}}</div> - <button class="btn-clear btn-icon bubble" (click)="removeNeuron(i)"> + <div class="col-2 text-center">{{newModel.layers[i].neurons}}</div> + <button class="btn-clear btn-icon bubble" (click)="removeNeuron(i)"> <mat-icon>remove</mat-icon> </button> - </div> + </div> - <mat-form-field appearance="fill" class="mat-fix"> - <mat-label>Regularizacija</mat-label> - <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> - - <mat-form-field appearance="fill" class="mat-fix"> - <mat-label>Stopa regularizacije</mat-label> - <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> + <mat-form-field appearance="fill" class="mat-fix"> + <mat-label>Regularizacija</mat-label> + <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> + <mat-form-field appearance="fill" class="mat-fix"> + <mat-label>Stopa regularizacije</mat-label> + <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> +</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 d5c497aa..ef456547 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -13,13 +13,12 @@ import { MatSliderChange } from '@angular/material/slider'; }) export class FormModelComponent implements AfterViewInit { @ViewChild(GraphComponent) graph!: GraphComponent; - @Input() forExperiment?: Experiment; + @Input() forExperiment!: Experiment; @Output() selectedModelChangeEvent = new EventEmitter<Model>(); testSetDistribution: number = 70; constructor() { } - ngAfterViewInit(): void { - } + ngAfterViewInit(): void { } selectFormControl = new FormControl('', Validators.required); nameFormControl = new FormControl('', [Validators.required, Validators.email]); @@ -34,8 +33,7 @@ export class FormModelComponent implements AfterViewInit { selectRegularisationFormControl = new FormControl('', Validators.required); selectRRateFormControl = new FormControl('', Validators.required); - newModel: Model = new Model(); - myModels?: Model[]; + newModel!: Model; selectedModel?: Model; @@ -57,7 +55,9 @@ export class FormModelComponent implements AfterViewInit { selectedMetrics = []; lossFunction: any = LossFunction; - showMyModels: boolean = true; + loadModel(model: Model) { + this.newModel = model; + } updateGraph() { //console.log(this.newModel.layers); @@ -121,7 +121,6 @@ export class FormModelComponent implements AfterViewInit { } } changeAllRegularisationRate() { - for (let i = 0; i < this.newModel.layers.length; i++) { this.newModel.layers[i].regularisationRate = this.selectedRegularisationRate; } @@ -132,6 +131,7 @@ export class FormModelComponent implements AfterViewInit { this.updateGraph(); } } + updateTestSet(event: MatSliderChange) { this.testSetDistribution = event.value!; } diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts index 31814c2c..c7f8d964 100644 --- a/frontend/src/app/_elements/graph/graph.component.ts +++ b/frontend/src/app/_elements/graph/graph.component.ts @@ -28,7 +28,7 @@ export class GraphComponent implements AfterViewInit { @Input() outputNodeColor: string = '#dfd7d7'; private ctx!: CanvasRenderingContext2D; - @Input() inputColumns?: string[] = []; + @Input() inputColumns?: string[] = ['Nije odabran eksperiment']; constructor() { } @@ -43,6 +43,7 @@ export class GraphComponent implements AfterViewInit { window.addEventListener('resize', () => { this.resize() }); this.update(); this.resize(); + console.log(this.layers); } layers: Node[][] = []; diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 4b75c929..74c59fdf 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -37,7 +37,7 @@ </div> <div #steps id="step_3" class="step-content"> <div class="step-content-inside"> - <app-folder #folderModel [type]="FolderType.Model" [forExperiment]="experiment" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyModels, TabType.PublicModels]" (okPressed)="goToPage(3)"></app-folder> + <app-folder #folderModel [type]="FolderType.Model" [forExperiment]="experiment" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyModels]" (okPressed)="goToPage(3)"></app-folder> </div> </div> <div #steps id="step_4" class="step-content"> |