diff options
Diffstat (limited to 'frontend/src/app/_pages/add-model')
| -rw-r--r-- | frontend/src/app/_pages/add-model/add-model.component.html | 147 | ||||
| -rw-r--r-- | frontend/src/app/_pages/add-model/add-model.component.ts | 46 |
2 files changed, 111 insertions, 82 deletions
diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html index 004f308b..c6f21f1e 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -3,15 +3,15 @@ </div> <div id="wrapper"> - + <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> - - <div class="form-group row mb-4 d-flex justify-content-center"> <!--justify-content-center--> + + <div class="form-group row mb-4 d-flex justify-content-center"> + <!--justify-content-center--> <h2 class="col-2"> Nov model: </h2> <div class="col-3"> - <label for="name" class="col-form-label">Naziv modela:</label> - <input type="text" class="form-control" name="name" placeholder="Naziv..." - [(ngModel)]="newModel.name"> + <label for="name" class="col-form-label">Naziv modela:</label> + <input type="text" class="form-control" name="name" placeholder="Naziv..." [(ngModel)]="newModel.name"> </div> <div class="col-5"> <label for="desc" class="col-sm-2 col-form-label">Opis:</label> @@ -25,7 +25,7 @@ value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly> </div> </div> - + <div class="mt-5 justify-content-center"> <h2>Izvor podataka:</h2> <app-dataset-load id="dataset" (loaded)="datasetLoaded = true"></app-dataset-load> @@ -33,37 +33,41 @@ <div *ngIf="datasetLoaded"> <div *ngIf="datasetLoadComponent" class="row"> - <div class="col d-flex justify-content-center"> - <h3>Izaberite ulazne kolone:</h3> - <div id="divInputs" class="form-check mt-2"> - <br> - <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index"> - <input *ngIf="i == 0" class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" name="cbs" checked> - <input *ngIf="i != 0" class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" name="cbs"> - <label class="form-check-label" for="cb_{{item}}"> - {{item}} - </label> - </div> - </div> - </div> - <div class="col d-flex justify-content-left"> - <h3>Izaberite izlaznu kolonu:</h3> - <div id="divOutputs" class="form-check mt-2"> - <br> - <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index"> - <input *ngIf="i == 0" class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbs" checked> - <input *ngIf="i != 0" class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbs"> - <label class="form-check-label" for="rb_{{item}}"> - {{item}} - </label> - </div> - </div> - </div> + <div class="col d-flex justify-content-center"> + <h3>Izaberite ulazne kolone:</h3> + <div id="divInputs" class="form-check mt-2"> + <br> + <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index"> + <input *ngIf="i == 0" class="form-check-input" type="checkbox" value="{{item}}" + id="cb_{{item}}" name="cbs" checked> + <input *ngIf="i != 0" class="form-check-input" type="checkbox" value="{{item}}" + id="cb_{{item}}" name="cbs"> + <label class="form-check-label" for="cb_{{item}}"> + {{item}} + </label> + </div> + </div> + </div> + <div class="col d-flex justify-content-left"> + <h3>Izaberite izlaznu kolonu:</h3> + <div id="divOutputs" class="form-check mt-2"> + <br> + <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index"> + <input *ngIf="i == 0" class="form-check-input" type="radio" value="{{item}}" + id="rb_{{item}}" name="rbs" checked> + <input *ngIf="i != 0" class="form-check-input" type="radio" value="{{item}}" + id="rb_{{item}}" name="rbs"> + <label class="form-check-label" for="rb_{{item}}"> + {{item}} + </label> + </div> + </div> + </div> </div> </div> - - + + <h2 class="mt-5 mb-4">Parametri treniranja:</h2> <div> @@ -87,7 +91,8 @@ <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"> + <input type="number" min="1" class="form-control" name="hiddenLayers" + [(ngModel)]="newModel.hiddenLayers"> </div> </div> @@ -111,7 +116,8 @@ <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"> + <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" + [(ngModel)]="newModel.hiddenLayerNeurons"> </div> </div> @@ -123,7 +129,8 @@ </div> <div class="col-2"> <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer"> - <option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" + <option + *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" [value]="option"> {{ optionName }} </option> @@ -146,8 +153,10 @@ <label for="lossFunction" class="col-form-label">Funkcija obrade gubitka: </label> </div> <div class="col-2"> - <select id=lossFunctionOptions class="form-control" name="lossFunction" [(ngModel)]="newModel.lossFunction"> - <option *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)" + <select id=lossFunctionOptions class="form-control" name="lossFunction" + [(ngModel)]="newModel.lossFunction"> + <option + *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)" [value]="option"> {{ optionName }} </option> @@ -157,7 +166,8 @@ </div> <div class="col-3 mt-2"> <label for="type" class="form-check-label">Nasumičan redosled podataka?</label> - <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="newModel.randomOrder" type="checkbox" value="" checked> + <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="newModel.randomOrder" + type="checkbox" value="" checked> </div> <div class="col-1"> </div> @@ -167,17 +177,18 @@ <div class="col-1"> </div> <div class="col-3"> - <label for="inputLayerActivationFunction" class="col-form-label">Funkcija aktivacije ulaznog sloja:</label> + <label for="inputLayerActivationFunction" class="col-form-label">Funkcija aktivacije ulaznog + sloja:</label> </div> <div class="col-2"> - <select id=inputLayerActivationFunctionOptions class="form-control" name="inputLayerActivationFunction" - [(ngModel)]="newModel.inputLayerActivationFunction"> - <option - *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" - [value]="option"> - {{ optionName }} - </option> - </select> + <select id=inputLayerActivationFunctionOptions class="form-control" + name="inputLayerActivationFunction" [(ngModel)]="newModel.inputLayerActivationFunction"> + <option + *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" + [value]="option"> + {{ optionName }} + </option> + </select> </div> <div class="col-1"> </div> @@ -188,7 +199,7 @@ </label> test <mat-slider min="0.1" max="0.9" step="0.1" value="0.2" name="randomTestSetDistribution" thumbLabel - [disabled]="!newModel.randomTestSet" [(ngModel)]="newModel.randomTestSetDistribution"> + [disabled]="!newModel.randomTestSet" [(ngModel)]="newModel.randomTestSetDistribution"> </mat-slider> trening </div> @@ -200,16 +211,17 @@ <div class="col-1"> </div> <div class="col-3"> - <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije skrivenih slojeva:</label> + <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije skrivenih + slojeva:</label> </div> <div class="col-2"> - <select id=hiddenLayerActivationFunctionOptions class="form-control" name="hiddenLayerActivationFunction" - [(ngModel)]="newModel.hiddenLayerActivationFunction"> - <option - *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" - [value]="option"> - {{ optionName }} - </option> + <select id=hiddenLayerActivationFunctionOptions class="form-control" + name="hiddenLayerActivationFunction" [(ngModel)]="newModel.hiddenLayerActivationFunction"> + <option + *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" + [value]="option"> + {{ optionName }} + </option> </select> </div> <div class="col"> @@ -222,11 +234,12 @@ <div class="col-1"> </div> <div class="col-3"> - <label for="outputLayerActivationFunction" class="col-form-label">Funkcija aktivacije izlaznog sloja:</label> + <label for="outputLayerActivationFunction" class="col-form-label">Funkcija aktivacije izlaznog + sloja:</label> </div> <div class="col-2"> - <select id=outputLayerActivationFunctionOptions class="form-control" name="outputLayerActivationFunction" - [(ngModel)]="newModel.outputLayerActivationFunction"> + <select id=outputLayerActivationFunctionOptions class="form-control" + name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> <option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" [value]="option"> @@ -245,13 +258,13 @@ <br><br> <div class="form-group row mt-5 mb-3"> <div class="col"></div> - <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="addModel();">Sačuvaj model</button> + <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" + (click)="addModel();">Sačuvaj model</button> <div class="col"></div> - <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj model</button> + <button class="btn btn-lg col-4 disabled" style="background-color:#003459; color:white;" + (click)="trainModel();">Treniraj model</button> <div class="col"></div> </div> </div> -</div> - - +</div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts index 01e8ade9..a4cabb82 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -4,6 +4,7 @@ import Model from 'src/app/_data/Model'; import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from 'src/app/_data/Model'; import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-load.component'; import { ModelsService } from 'src/app/_services/models.service'; +import shared from 'src/app/Shared'; @Component({ @@ -24,6 +25,7 @@ export class AddModelComponent implements OnInit { LossFunction = LossFunction; Optimizer = Optimizer; Object = Object; + shared = shared; constructor(private models: ModelsService) { this.newModel = new Model(); @@ -35,23 +37,37 @@ export class AddModelComponent implements OnInit { addModel() { this.saveModel(false); //trajno cuvanje } + trainModel() { - this.saveModel(true).subscribe((modelId : any) => { + this.saveModel(true).subscribe((modelId: any) => { if (modelId) this.models.trainModel(modelId); }); //privremeno cuvanje modela => vraca id sacuvanog modela koji cemo da treniramo sad } - saveModel(temporary: boolean) : any { - if (this.datasetLoadComponent) - this.models.addDataset(this.datasetLoadComponent?.dataset).subscribe((response) => {//id dataseta je response - this.newModel.datasetId = response; - this.getCheckedInputCols(); - this.getCheckedOutputCol(); - if (this.validationInputsOutput()) - return this.models.addModel(this.newModel); //id modela - return of(null); - }); + saveModel(temporary: boolean): any { + this.getCheckedInputCols(); + this.getCheckedOutputCol(); + if (this.validationInputsOutput()) { + console.log('ADD MODEL: STEP 1 - UPLOAD FILE'); + if (this.datasetLoadComponent) { + this.models.uploadData(this.datasetLoadComponent.files[0]).subscribe((file) => { + console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id); + if (this.datasetLoadComponent) { + this.datasetLoadComponent.dataset.fileId = file._id; + this.datasetLoadComponent.dataset.username = shared.username; + this.models.addDataset(this.datasetLoadComponent.dataset).subscribe((dataset) => { + console.log('ADD MODEL: STEP 3 - ADD MODEL WITH DATASET ID ', dataset._id); + this.newModel.datasetId = dataset._id; + this.newModel.username = shared.username; + this.models.addModel(this.newModel).subscribe((response) => { + console.log('ADD MODEL: DONE! REPLY:\n', response); + }); + }); + } + }); + } + } } getCheckedInputCols() { @@ -73,17 +89,17 @@ export class AddModelComponent implements OnInit { let thatRb = <HTMLInputElement>radiobuttons[i]; if (thatRb.checked) { this.newModel.columnToPredict = thatRb.value; - break; + break; } } //console.log(this.checkedOutputCol); } - validationInputsOutput() : boolean { + validationInputsOutput(): boolean { if (this.newModel.inputColumns.length == 0) { alert("Molimo Vas da izaberete ulaznu kolonu/kolone za mrežu.") return false; - } - for (let i = 0; i < this.newModel.inputColumns.length; i++) { + } + for (let i = 0; i < this.newModel.inputColumns.length; i++) { if (this.newModel.inputColumns[i] == this.newModel.columnToPredict) { let colName = this.newModel.columnToPredict; alert("Izabrali ste istu kolonu (" + colName + ") kao ulaznu i izlaznu iz mreže. Korigujte izbor."); |