diff options
Diffstat (limited to 'frontend/src/app')
6 files changed, 255 insertions, 153 deletions
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 43342fb0..c0bc339d 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -4,7 +4,7 @@ export default class Model { public description: string = '', public dateCreated: Date = new Date(), public lastUpdated: Date = new Date(), - public datasetId?: number, + public datasetId: string = '', // Test set settings public inputColumns: string[] = [], diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html index 2a611a96..fcec6ec3 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html @@ -1,57 +1,61 @@ <div> - <div class="mb-4"> - <label for="name" class="col-form-label">Naziv dataseta:</label> - <input type="text" class="form-control" name="name" placeholder="Naziv..." - [(ngModel)]="dataset.name"> + <div class="row mb-4"> + <div class="col-2"> + </div> + <div class="col-3"> + <label for="name" class="col-form-label">Naziv dataseta:</label> + <input type="text" class="form-control mb-3" name="name" placeholder="Naziv..." + [(ngModel)]="dataset.name"> + <label for="desc" class="col-sm-2 col-form-label">Opis:</label> + <div> + <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea> + </div> + </div> + <div class="col-1"> + </div> + <div class="col-4 mt-4"> + <input list=delimiterOptions + placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2" [(ngModel)]="delimiter" + (input)="update()"> + <datalist id=delimiterOptions> + <option *ngFor="let option of delimiterOptions">{{option}}</option> + </datalist> + + <label for="type" class="form-check-label my-5">Da li .csv ima header? + <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="hasHeader" type="checkbox" value="" id="checkboxHeader" checked> + </label> + <br> + <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" accept=".csv"> + </div> </div> - <label for="desc" class="col-sm-2 col-form-label">Opis:</label> - <div> - <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea> - </div> - - - <div class="d-flex justify-content-center"> - <input style="display: inline-block; width:350px;" list=delimiterOptions - placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control" [(ngModel)]="delimiter" - (input)="update()"> - <datalist id=delimiterOptions> - <option *ngFor="let option of delimiterOptions">{{option}}</option> - </datalist> - - <label for="type" class="form-check-label">Da li .csv ima header? - <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="hasHeader" type="checkbox" value="" id="checkboxHeader" checked> - </label> - <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" accept=".csv"> + <div class="table-responsive"> + <table *ngIf="csvRecords.length > 0 && hasHeader" class="table table-bordered table-light mt-4"> + <thead> + <tr> + <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let row of csvRecords | slice:1:11"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + </tbody> + </table> + + <table *ngIf="csvRecords.length > 0 && !hasHeader" class="table table-bordered table-light mt-4"> + <tbody> + <tr *ngFor="let row of csvRecords | slice:0:10"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + </tbody> + </table> </div> - - <table *ngIf="csvRecords.length > 0 && hasHeader" class="table table-bordered table-light my-4"> - <thead> - <tr> - <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let row of csvRecords | slice:1:11"> - <td *ngFor="let col of row">{{col}}</td> - </tr> - </tbody> - </table> - - <table *ngIf="csvRecords.length > 0 && !hasHeader" class="table table-bordered table-light mt-4"> - <tbody> - <tr *ngFor="let row of csvRecords | slice:0:10"> - <td *ngFor="let col of row">{{col}}</td> - </tr> - </tbody> - </table> <div *ngIf="csvRecords.length > 0" id="info"> . . . <br> {{rowsNumber}} x {{colsNumber}} </div> - - </div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/add-model/add-model.component.css b/frontend/src/app/_pages/add-model/add-model.component.css index 5184733d..4bf569cc 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.css +++ b/frontend/src/app/_pages/add-model/add-model.component.css @@ -1,6 +1,6 @@ #header { background-color: #003459; - padding-top: 25px; + padding-top: 30px; padding-bottom: 20px; } #header h1 { @@ -11,4 +11,8 @@ #container { border-radius: 8px; +} + +#wrapper { + color: #003459; }
\ No newline at end of file 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 f5270127..004f308b 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -6,38 +6,36 @@ <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--> - <h2 class="col-sm-2" style="color: #00171f"> Nov model: </h2> - <div class="col-sm-3"> - <div class="mb-4"> + <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"> - </div> - <div class="d-inline-flex align-items-center"> - <label for="dateCreated" class="col-form-label">Datum:</label> - <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--" - value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly> - </div> </div> - <div class="col-sm-5"> + <div class="col-5"> <label for="desc" class="col-sm-2 col-form-label">Opis:</label> <div> <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea> </div> </div> + <div class="col-2"> + <label for="dateCreated" class="col-form-label">Datum:</label> + <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--" + value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly> + </div> </div> - <div class="my-5 justify-content-center"> + <div class="mt-5 justify-content-center"> <h2>Izvor podataka:</h2> <app-dataset-load id="dataset" (loaded)="datasetLoaded = true"></app-dataset-load> </div> - <div *ngIf="datasetLoaded" class="mt-2"> + <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"> + <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> @@ -50,7 +48,7 @@ </div> <div class="col d-flex justify-content-left"> <h3>Izaberite izlaznu kolonu:</h3> - <div id="divOutputs" class="form-check"> + <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> @@ -62,50 +60,117 @@ </div> </div> </div> - </div> + </div> + - <h2>Parametri treniranja:</h2> + + <h2 class="mt-5 mb-4">Parametri treniranja:</h2> - <div class="row"> - <div class="col-2 mt-4"> - <label for="type" class="col-form-label">Tip mreže: </label> - <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type"> - <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)" - [value]="option"> - {{ optionName }} - </option> - </select> + <div> + <div class="row p-2"> + <div class="col-1"> + </div> + <div class="col-3"> + <label for="type" class="col-form-label">Tip mreže: </label> + </div> + <div class="col-2"> + <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type"> + <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + <div class="col-1"> + </div> + <div class="col-3"> + <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"> + </div> </div> - <div class="col-1 mt-4"> - <label for="encoding" class="col-form-label">Enkoding: </label> - <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding"> - <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" - [value]="option"> - {{ optionName }} - </option> - </select> + + <div class="row p-2"> + <div class="col-1"> + </div> + <div class="col-3"> + <label for="encoding" class="col-form-label">Enkoding: </label> + </div> + <div class="col-2"> + <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding"> + <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + <div class="col-1"> + </div> + <div class="col-3"> + <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"> + </div> </div> - <div class="col-1 mt-4"> - <label for="optimizer" class="col-form-label">Optimizacija: </label> - <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)" - [value]="option"> - {{ optionName }} - </option> - </select> + + <div class="row p-2"> + <div class="col-1"> + </div> + <div class="col-3"> + <label for="optimizer" class="col-form-label">Optimizacija: </label> + </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)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + <div class="col-1"> + </div> + <div class="col-3"> + <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label> + </div> + <div class="col-1"> + <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize"> + </div> </div> - <div class="col mt-4"> - <label for="lossFunction" class="col-form-label">Funkcija obrade gubitka: </label> - <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> - </select> + + <div class="row p-2"> + <div class="col-1"> + </div> + <div class="col-3"> + <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)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + <div class="col-1"> + </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> + </div> + <div class="col-1"> + </div> </div> - <div class="col-2"> - <label for="inputLayerActivationFunction" class="col-form-label">Funkcija aktivacije<br>ulaznog sloja:</label> - <select id=inputLayerActivationFunctionOptions class="form-control" name="inputLayerActivationFunction" + + <div class="row p-2"> + <div class="col-1"> + </div> + <div class="col-3"> + <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)" @@ -113,65 +178,80 @@ {{ optionName }} </option> </select> + </div> + <div class="col-1"> + </div> + <div class="col-5"> + <label for="type" class="form-check-label">Podela test skupa: + <input class="form-check-input" type="checkbox" [checked]="newModel.randomTestSet" + (change)="newModel.randomTestSet = !newModel.randomTestSet"> + </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"> + </mat-slider> + trening + </div> + <div class="col"> + </div> </div> - <div class="col"> - <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije<br>skrivenih slojeva:</label> - <select id=hiddenLayerActivationFunctionOptions class="form-control" name="hiddenLayerActivationFunction" + + <div class="row p-2"> + <div class="col-1"> + </div> + <div class="col-3"> + <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> - </div> - <div class="col"> - <label for="outputLayerActivationFunction" class="col-form-label">Funkcija aktivacije<br>izlaznog sloja:</label> - <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"> - {{ optionName }} </option> - </select> + </select> + </div> + <div class="col"> + </div> + <div class="col"> + </div> </div> - </div> - <div class="row mt-5"> - <div class="col-2"> - <label for="inputNeurons" class="col-form-label">Broj ulaznih neurona: </label> <!--UMESTO OVOGA IDE NASUMICAN REDOSLED? YES/NO--> - <input type="number" min="1" class="form-control" name="inputNeurons" [(ngModel)]="newModel.inputNeurons"> - </div> - <div class="col-2"> - <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label> - <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers"> - </div> - <div class="col-3 "> - <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label> - <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" [(ngModel)]="newModel.hiddenLayerNeurons"> - </div> - <div class="col-2"> - <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label> - <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize"> - </div> - <div class="col-3 mt-1"> - <label for="type" class="form-check-label mb-3"> Podela test skupa: - <input class="mx-3 form-check-input" type="checkbox" [checked]="newModel.randomTestSet" - (change)="newModel.randomTestSet = !newModel.randomTestSet"> - </label> - <mat-slider min="0.1" max="0.9" step="0.1" value="0.2" name="randomTestSetDistribution" thumbLabel - [disabled]="!newModel.randomTestSet" [(ngModel)]="newModel.randomTestSetDistribution"> - </mat-slider> + <div class="row p-2"> + <div class="col-1"> + </div> + <div class="col-3"> + <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"> + <option + *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + <div class="col"> + </div> + <div class="col"> + </div> </div> </div> + <br><br> - <div class="form-group row mt-5"> - <div class="col-4"></div> - <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="addModel();">Napravi model</button> - <div class="col-4"></div> + <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> + <div class="col"></div> + <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj model</button> + <div class="col"></div> </div> </div> </div> + + 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 c18ad324..01e8ade9 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit, ViewChild } from '@angular/core'; +import { Observable, of } from 'rxjs'; 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'; @@ -32,14 +33,24 @@ export class AddModelComponent implements OnInit { } addModel() { + this.saveModel(false); //trajno cuvanje + } + trainModel() { + 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); + this.models.addDataset(this.datasetLoadComponent?.dataset).subscribe((response) => {//id dataseta je response + this.newModel.datasetId = response; - this.getCheckedInputCols(); - this.getCheckedOutputCol(); - if (this.validationInputsOutput()) - this.models.addModel(this.newModel).subscribe((response) => { - console.log(response); + this.getCheckedInputCols(); + this.getCheckedOutputCol(); + if (this.validationInputsOutput()) + return this.models.addModel(this.newModel); //id modela + return of(null); }); } diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts index f85ca44e..80dc1ae3 100644 --- a/frontend/src/app/_services/models.service.ts +++ b/frontend/src/app/_services/models.service.ts @@ -14,9 +14,12 @@ export class ModelsService { constructor(private http: HttpClient, private authService: AuthService) { } addModel(model: Model) { - return this.http.post(`${API_SETTINGS.apiURL}/model/sendModel`, model, { headers: this.authService.authHeader(), responseType: 'text' }); + return this.http.post(`${API_SETTINGS.apiURL}/model/add`, model, { headers: this.authService.authHeader(), responseType: 'text' }); } addDataset(dataset: Dataset) { - return this.http.post(`${API_SETTINGS.apiURL}/model/uploadDataset`, dataset, { headers: this.authService.authHeader(), responseType: 'text' }); + return this.http.post(`${API_SETTINGS.apiURL}/dataset/add`, dataset, { headers: this.authService.authHeader(), responseType: 'text' }); + } + trainModel(modelId: string) { + return this.http.post(`${API_SETTINGS.apiURL}/model/train`, modelId, { headers: this.authService.authHeader(), responseType: 'text' }); } } |