diff options
Diffstat (limited to 'frontend/src')
6 files changed, 51 insertions, 68 deletions
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index b273f56a..7d383584 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -16,7 +16,7 @@ export default class Model { public inputNeurons: number = 1, public hiddenLayerNeurons: number = 1, public hiddenLayers: number = 1, - public batchSize: number = 5, + public batchSize: number = 4, public hiddenLayerActivationFunctions: string[] = ['sigmoid'], public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, public uploaderId: string = '', @@ -94,7 +94,7 @@ export enum LossFunctionBinaryClassification { HingeLoss = 'hinge_loss', } export enum LossFunctionMultiClassification { - CategoricalCrossEntropy = 'categorical_crossentropy', + //CategoricalCrossEntropy = 'categorical_crossentropy', SparseCategoricalCrossEntropy = 'sparse_categorical_crossentropy', KLDivergence = 'kullback_leibler_divergence', } diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html index dcb35c21..a1e6abd6 100644 --- a/frontend/src/app/_elements/model-load/model-load.component.html +++ b/frontend/src/app/_elements/model-load/model-load.component.html @@ -1,12 +1,10 @@ <div> <div class="d-flex flex-row justify-content-center align-items-center mt-3 mb-5"> - <button type="button" id="btnMyModel" class="btn" (click)="viewMyModelsForm()" - [ngClass]="{'btnType1': showMyModels, 'btnType2': !showMyModels}"> + <button type="button" id="btnMyModel" class="btn" (click)="viewMyModelsForm()" [ngClass]="{'btnType1': showMyModels, 'btnType2': !showMyModels}"> Izaberite model iz kolekcije </button> <h3 class="mt-3 mx-3">ili</h3> - <button type="button" id="btnNewModel" class="btn" (click)="viewNewModelForm()" - [ngClass]="{'btnType1': !showMyModels, 'btnType2': showMyModels}"> + <button type="button" id="btnNewModel" class="btn" (click)="viewNewModelForm()" [ngClass]="{'btnType1': !showMyModels, 'btnType2': showMyModels}"> Dodajte novi model </button> </div> @@ -17,8 +15,7 @@ <div *ngIf="showMyModels" class="px-5"> <div class="overflow-auto" style="max-height: 500px;"> <ul class="list-group"> - <li class="list-group-item p-3" *ngFor="let model of myModels|filter:term|filter:(forExperiment ? forExperiment.type : '')" - [ngClass]="{'selectedModelClass': this.selectedModel == model}"> + <li class="list-group-item p-3" *ngFor="let model of myModels|filter:((forExperiment != undefined) ? forExperiment.type : '')" [ngClass]="{'selectedModelClass': this.selectedModel == model}"> <app-item-model name="usersModel" [model]="model" (click)="selectThisModel(model);"> </app-item-model> </li> @@ -43,7 +40,7 @@ <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea> </div> </div> - + </div> <h2 class="mt-5 mb-4 mx-5">Parametri treniranja modela:</h2> <div> @@ -54,8 +51,7 @@ <label for="type" class="col-form-label">Tip problema: </label> </div> <div class="col-2"> - <select id=typeOptions class="form-select" name="type" [(ngModel)]="newModel.type" - (change)="filterOptions()"> + <select id=typeOptions class="form-select" name="type" [(ngModel)]="newModel.type" (change)="filterOptions()"> <option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option"> @@ -68,10 +64,7 @@ <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label> </div> <div class="col-1"> - <input type="number" min="1" class="form-control" name="hiddenLayers" - [(ngModel)]="newModel.hiddenLayers" - (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" - (ngModelChange)="updateGraph()"> + <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()"> </div> </div> @@ -96,8 +89,7 @@ <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label> </div> <div class="col-1"> - <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" - [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()"> + <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()"> </div> </div> @@ -107,8 +99,7 @@ <label for="lossFunction" class="col-form-label">Funkcija troška: </label> </div> <div class="col-2"> - <select id=lossFunctionOptions class="form-select" name="lossFunction" - [(ngModel)]="newModel.lossFunction" aria-checked="true"> + <select id=lossFunctionOptions class="form-select" name="lossFunction" [(ngModel)]="newModel.lossFunction" aria-checked="true"> <option *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)" [value]="option"> @@ -118,23 +109,21 @@ </div> <div class="col-1"></div> <div class="col-3"> - <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label> + <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: <b>{{newModel.batchSize}}</b><br>(izaberite stepen dvojke)</label> </div> <div class="col-1"> - - <input type="number" min="0" step="1" max="7" class="form-control" name="batchSizePower" [(ngModel)]="batchSizePower" (click)="updateBatchSize()" > - {{newModel.batchSize}} - + + <input type="number" min="0" step="1" max="7" class="form-control" name="batchSizePower" [(ngModel)]="batchSizePower" (click)="updateBatchSize()"> + </div> - + <div class="row p-2"> <div class="col-1"></div> <div class="col-3 m-1"> <label for="epochs" class="col-form-label">Broj epoha: </label> </div> <div class="col-1"> - <input type="number" min="1" max="1000" class="form-control" name="epochs" - [(ngModel)]="newModel.epochs"> + <input type="number" min="1" max="1000" class="form-control" name="epochs" [(ngModel)]="newModel.epochs"> </div> </div> </div> @@ -148,8 +137,7 @@ <div class="row p-2" style="align-self: center;"> <div class="col-1"></div> <div class="col-3"> - <label for="hiddenLayerActivationFunction" class="col-form-label" - style="text-align: center;">Funkcija aktivacije<br>skrivenih slojeva:</label> + <label for="hiddenLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija aktivacije<br>skrivenih slojeva:</label> </div> <div class="col-2 mt-2"> <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index"> @@ -157,8 +145,7 @@ <div class="input-group-prepend"> <span class="input-group-text">#{{i+1}}</span> </div> - <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-select" - [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]" > + <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-select" [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]"> <option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" [value]="option"> @@ -170,12 +157,10 @@ </div> <div class="col-1"></div> <div class="col-2"> - <label for="outputLayerActivationFunction" class="col-form-label" - style="text-align: center;">Funkcija aktivacije<br>izlaznog sloja:</label> + <label for="outputLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija aktivacije<br>izlaznog sloja:</label> </div> <div class="col-2 mt-2"> - <select id=outputLayerActivationFunctionOptions class="form-select" - name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> + <select id=outputLayerActivationFunctionOptions class="form-select" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> <option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" [value]="option"> @@ -192,22 +177,19 @@ <h3>Izaberite metrike:</h3> <div id="divMetricsinput" class="mt-2 mx-5"> - <div *ngFor="let option of Object.keys(metrics); let optionName of Object.values(metrics) " - class="form-check form-check-inline"> + <div *ngFor="let option of Object.keys(metrics); let optionName of Object.values(metrics) " class="form-check form-check-inline"> - <input name="cbmetrics" class="form-check-input" type="checkbox" value="{{option}}" - id="metrics_{{option}}" style="float: left;" checked> + <input name="cbmetrics" class="form-check-input" type="checkbox" value="{{option}}" id="metrics_{{option}}" style="float: left;" checked> <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2"> {{optionName}} </label> </div> </div> </div> - + <div class="form-group row mt-3 mb-3"> <div class="col"></div> - <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" - (click)="uploadModel();">Sačuvaj + <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="uploadModel();">Sačuvaj model</button> <div class="col"></div> </div> diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts index 4541c114..5f9caf9d 100644 --- a/frontend/src/app/_elements/model-load/model-load.component.ts +++ b/frontend/src/app/_elements/model-load/model-load.component.ts @@ -31,28 +31,32 @@ export class ModelLoadComponent implements OnInit { shared = Shared; term: string = ""; - selectedProblemType: string = ''; selectedMetrics = []; lossFunction: any = LossFunction; showMyModels: boolean = true; + batchSizePower: number = 2; + constructor(private modelsService: ModelsService) { - if (this.forExperiment == undefined) { + //console.log("forExperiment = ", this.forExperiment); + + //if (this.forExperiment == undefined) { this.modelsService.getMyModels().subscribe((models) => { this.myModels = models; }); - } + /*} else { - this.modelsService.getMyModelsByType(this.forExperiment.type).subscribe((models) => { + this.modelsService.getMyModelsByType(ProblemType.Regression).subscribe((models) => { this.myModels = models; + console.log("modeli po tipu: ", this.myModels); }); - } + }*/ } ngOnInit(): void { } - batchSizePower:number=1; + updateBatchSize() { this.newModel.batchSize=2**this.batchSizePower; @@ -80,8 +84,6 @@ export class ModelLoadComponent implements OnInit { this.modelsService.addModel(this.newModel).subscribe((response) => { Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.'); - // treba da se selektuje nov model u listi modela - //this.selectedModel = }, (error) => { Shared.openDialog('Greška', 'Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite naziv modela i nastavite sa kreiranim datasetom.'); }); diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts index 7e2f0b29..84fdbf0f 100644 --- a/frontend/src/app/experiment/experiment.component.ts +++ b/frontend/src/app/experiment/experiment.component.ts @@ -199,10 +199,6 @@ export class ExperimentComponent implements OnInit { this.experimentsService.addExperiment(this.experiment).subscribe((response) => { this.experiment = response; - this.selectedColumnsInfoArray = []; - this.selectedNotNullColumnsArray = []; - this.experiment.encodings = []; - Shared.openDialog("Obaveštenje", "Eksperiment je uspešno kreiran."); this.router.navigate(['/training', this.experiment._id]); diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html index 672e75fb..2bee3b12 100644 --- a/frontend/src/app/training/training.component.html +++ b/frontend/src/app/training/training.component.html @@ -9,29 +9,27 @@ <h2>1. Izaberite eksperiment iz kolekcije</h2> <div class="px-5 mt-5 mb-3"> - <input type="text" class="form-control" placeholder="Pretraga" - [(ngModel)]="term"> + <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term"> </div> <div class="overflow-auto px-5" style="max-height: 500px;"> <ul class="list-group"> - <li class="list-group-item p-3" *ngFor="let experiment of myExperiments|filter:term" - [ngClass]="{'selectedExperimentClass': this.selectedExperiment == experiment}"> - <app-item-experiment [experiment]="experiment" - (click)="selectThisExperiment(experiment);"></app-item-experiment> + <li class="list-group-item p-3" *ngFor="let experiment of myExperiments|filter:term" [ngClass]="{'selectedExperimentClass': this.selectedExperiment == experiment}"> + <app-item-experiment [experiment]="experiment" (click)="selectThisExperiment(experiment);"></app-item-experiment> </li> </ul> </div> - + <h2 class="mt-5 mb-2">2. Izaberite model</h2> - <app-model-load (selectedModelChangeEvent)="selectModel($event)" [forExperiment]="selectedExperiment"></app-model-load> - + <app-model-load *ngIf="selectedExperiment" (selectedModelChangeEvent)="selectModel($event)" [forExperiment]="selectedExperiment"></app-model-load> + <h3 *ngIf="!selectedExperiment">Morate prvo izabrati eksperiment.</h3> + <h2 class="my-5">3. Treniranje modela</h2> <div class="d-flex flex-row justify-content-center align-items-center my-3"> <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj model</button> </div> - + <h2 class="mt-5">Rezultati treniranja</h2> <div class="m-3" *ngIf="trainingResult"> <h2 class="my-2">Rezultati treniranja:</h2> diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts index 2640b513..c82a6b79 100644 --- a/frontend/src/app/training/training.component.ts +++ b/frontend/src/app/training/training.component.ts @@ -1,8 +1,9 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import Shared from '../Shared'; import Experiment from '../_data/Experiment'; -import Model from '../_data/Model'; +import Model, { ProblemType } from '../_data/Model'; +import { ModelLoadComponent } from '../_elements/model-load/model-load.component'; import { ExperimentsService } from '../_services/experiments.service'; import { ModelsService } from '../_services/models.service'; @@ -13,6 +14,8 @@ import { ModelsService } from '../_services/models.service'; }) export class TrainingComponent implements OnInit{ + @ViewChild(ModelLoadComponent) modelLoadComponent?: ModelLoadComponent; + myExperiments?: Experiment[]; selectedExperiment?: Experiment; selectedModel?: Model; @@ -30,14 +33,16 @@ export class TrainingComponent implements OnInit{ this.experimentsService.getMyExperiments().subscribe((experiments) => { this.myExperiments = experiments; - if (experimentId != undefined) - this.selectedExperiment = this.myExperiments.filter(x => x._id == experimentId)[0]; + + this.selectedExperiment = this.myExperiments.filter(x => x._id == experimentId)[0]; + console.log("selektovan exp u training comp: ", this.selectedExperiment); }); }); } selectThisExperiment(experiment: Experiment) { this.selectedExperiment = experiment; + this.modelLoadComponent!.newModel.type = this.selectedExperiment.type; } selectModel(model: Model) { |