diff options
Diffstat (limited to 'frontend/src/app/_pages')
5 files changed, 95 insertions, 92 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 09a11e37..662d34de 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -40,21 +40,23 @@ Dodajte novi dataset </button> </div> - + <div class="px-5 my-2"> + <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term"> + </div> <div class="px-5"> <div *ngIf="showMyDatasets" class="overflow-auto" style="max-height: 500px;"> <ul class="list-group"> - <li class="list-group-item p-3" *ngFor="let dataset of myDatasets" + <li class="list-group-item p-3" *ngFor="let dataset of myDatasets|filter:term" [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}"> <app-item-dataset name="usersDataset" [dataset]="dataset" - (click)="selectThisDataset(dataset)"></app-item-dataset> + (click)="scrollToNextForm(); selectThisDataset(dataset);"></app-item-dataset> </li> </ul> </div> </div> <app-dataset-load *ngIf="!showMyDatasets" id="dataset" - (loaded)="datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.dataset!.hasHeader"> + (loaded)="scrollToNextForm(); datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.dataset!.hasHeader"> </app-dataset-load> <div class="px-5 mt-5"> <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable> @@ -62,6 +64,7 @@ </div> <!-- ULAZNE/IZLAZNE KOLONE --> + <span id="selectInAndOuts"></span> <div *ngIf="selectedDataset"> <div class="row"> <div class="col d-flex justify-content-center"> @@ -70,7 +73,8 @@ <br> <div *ngFor="let item of selectedDataset.header; let i = index"> <input class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" - name="cbsNew" checked [disabled]="this.selectedOutputColumnVal == item"> + name="cbsNew" [checked]="this.selectedOutputColumnVal != item" + [disabled]="this.selectedOutputColumnVal == item"> <label class="form-check-label" for="cb_{{item}}"> {{item}} </label> @@ -92,7 +96,7 @@ </div> - <div class="my-2" *ngIf="datasetFile"> + <div class="mt-5" *ngIf="datasetFile"> <h2>Popunjavanje nedostajućih vrednosti:</h2> <div class="form-check"> <input type="radio" [(ngModel)]="newModel.nullValues" [value]="NullValueOptions.DeleteRows" @@ -151,8 +155,6 @@ </div> </div> - - <h2 class="mt-5 mb-4">Parametri treniranja:</h2> <div> @@ -160,11 +162,12 @@ <div class="col-1"> </div> <div class="col-3"> - <label for="type" class="col-form-label">Tip mreže: </label> + <label for="type" class="col-form-label">Tip problema: </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)" + <option + *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option"> {{ optionName }} </option> @@ -177,7 +180,8 @@ </div> <div class="col-1"> <input type="number" min="1" class="form-control" name="hiddenLayers" - [(ngModel)]="newModel.hiddenLayers"> + [(ngModel)]="newModel.hiddenLayers" + (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])"> </div> </div> @@ -259,52 +263,36 @@ </div> <div class="row p-2"> - <div class="col-1"> - </div> + <div class="col-3"></div> <div class="col-3"> - <label for="inputLayerActivationFunction" class="col-form-label">Funkcija aktivacije ulaznog - sloja:</label> + <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije skrivenih + slojeva:</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> + <div class="col-3"> + <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index"> + <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-control" + [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]"> + <option + *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> </div> + <div class="col-3"></div> + </div> + + <div class="row p-2"> <div class="col-1"> </div> - <div class="col-5"> + <div class="col-3"> <label for="splitYesNo" class="form-check-label">Podela test skupa: <input id="splitYesNo" class="form-check-input" type="checkbox" [checked]="newModel.randomTestSet" (change)="newModel.randomTestSet = !newModel.randomTestSet"> </label> </div> - <div class="col"> - </div> - </div> - - <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-1"> </div> <div class="col-2"> @@ -354,7 +342,7 @@ <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 disabled" style="background-color:#003459; color:white;" + <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj model</button> <div class="col"></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 995aaa87..77a506d5 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import Model, { ReplaceWith } from 'src/app/_data/Model'; -import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions } from 'src/app/_data/Model'; +import { ProblemType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions } 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'; @@ -23,7 +23,7 @@ export class AddModelComponent implements OnInit { newModel: Model; - ANNType = ANNType; + ProblemType = ProblemType; Encoding = Encoding; ActivationFunction = ActivationFunction; LossFunction = LossFunction; @@ -47,10 +47,13 @@ export class AddModelComponent implements OnInit { tempTestSetDistribution: number = 90; + //accepted: Boolean; + term: string = ""; + constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) { this.newModel = new Model(); - this.models.getMyDatasets().subscribe((datasets) => { + this.datasets.getMyDatasets().subscribe((datasets) => { this.myDatasets = datasets; }); } @@ -73,19 +76,28 @@ export class AddModelComponent implements OnInit { addModel() { if (!this.showMyDatasets) - this.saveModelWithNewDataset(); + this.saveModelWithNewDataset(_ => { console.log('MODEL ADDED (with new dataset).') }); else - this.saveModelWithExistingDataset(); + this.saveModelWithExistingDataset(_ => { console.log('MODEL ADDED (with existing dataset).') }); } trainModel() { - this.saveModelWithNewDataset().subscribe((modelId: any) => { - if (modelId) - this.models.trainModel(modelId); - }); //privremeno cuvanje modela => vraca id sacuvanog modela koji cemo da treniramo sad + let saveFunc; + + if (!this.showMyDatasets) + saveFunc = (x: (arg0: any) => void) => { this.saveModelWithNewDataset(x) }; + else + saveFunc = (x: (arg0: any) => void) => { this.saveModelWithExistingDataset(x) }; + + saveFunc(((model: any) => { + console.log('Saved, training model...', model); + this.models.trainModel(model).subscribe(response => { + console.log('Train model complete!', response); + }); + })); //privremeno cuvanje modela => vraca id sacuvanog modela koji cemo da treniramo sad } - saveModelWithNewDataset(): any { + saveModelWithNewDataset(callback: ((arg0: any) => void)) { this.getCheckedInputCols(); this.getCheckedOutputCol(); @@ -93,14 +105,14 @@ export class AddModelComponent implements OnInit { if (this.validationInputsOutput()) { console.log('ADD MODEL: STEP 1 - UPLOAD FILE'); if (this.datasetLoadComponent) { - + console.log("this.datasetLoadComponent.files:", this.datasetLoadComponent.files); 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) => { + this.datasets.addDataset(this.datasetLoadComponent.dataset).subscribe((dataset) => { console.log('ADD MODEL: STEP 3 - ADD MODEL WITH DATASET ID ', dataset._id); this.newModel.datasetId = dataset._id; @@ -114,7 +126,7 @@ export class AddModelComponent implements OnInit { this.newModel.username = shared.username; this.models.addModel(this.newModel).subscribe((response) => { - console.log('ADD MODEL: DONE! REPLY:\n', response); + callback(response); }, (error) => { alert("Model sa unetim nazivom već postoji u Vašoj kolekciji.\nPromenite naziv modela i nastavite sa kreiranim datasetom."); }); //kraj addModel subscribe @@ -130,8 +142,7 @@ export class AddModelComponent implements OnInit { } //kraj prvog ifa } - saveModelWithExistingDataset(): any { - + saveModelWithExistingDataset(callback: ((arg0: any) => void)): any { if (this.selectedDataset) { //dataset je izabran this.getCheckedInputCols(); this.getCheckedOutputCol(); @@ -144,7 +155,7 @@ export class AddModelComponent implements OnInit { this.newModel.username = shared.username; this.models.addModel(this.newModel).subscribe((response) => { - console.log('ADD MODEL: DONE! REPLY:\n', response); + callback(response); }, (error) => { alert("Model sa unetim nazivom već postoji u Vašoj kolekciji.\nPromenite naziv modela i nastavite sa kreiranim datasetom."); }); @@ -216,12 +227,16 @@ export class AddModelComponent implements OnInit { if (datasets[i]._id == dataset._id) }*/ - //this.datasetFile = csvRecords; this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => { if (file) { this.datasetFile = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); - this.datasetFile.length = this.datasetFile.length - 1; + for (let i = this.datasetFile.length - 1; i >= 0; i--) { //moguce da je vise redova na kraju fajla prazno i sl. + if (this.datasetFile[i].length != this.datasetFile[0].length) + this.datasetFile[i].pop(); + else + break; //nema potrebe dalje + } console.log(this.datasetFile); } }); @@ -230,6 +245,15 @@ export class AddModelComponent implements OnInit { this.resetCbsAndRbs(); } + scrollToNextForm() { + console.log("USAO U SCROLL"); + (<HTMLSelectElement>document.getElementById("selectInAndOuts")).scrollIntoView({ + behavior: "smooth", + block: "start", + inline: "nearest" + }); + } + resetSelectedDataset(): boolean { const temp = this.selectedDataset; this.selectedDataset = this.otherDataset; @@ -263,7 +287,7 @@ export class AddModelComponent implements OnInit { } refreshMyDatasetList() { - this.models.getMyDatasets().subscribe((datasets) => { + this.datasets.getMyDatasets().subscribe((datasets) => { this.myDatasets = datasets; }); } diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index 7e895a2d..eb59b726 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -45,12 +45,12 @@ </div> <h2 class="my-4">Pogledajte javne izvore podataka!</h2> - <app-carousel [items]="publicDatasets"> + <app-carousel *ngIf = "publicDatasets" [items]="publicDatasets"> </app-carousel> <h3><a routerLink="browse-datasets">Pogledaj sve javne izvore podataka...</a></h3> <h2 class="my-4">Iskoristite već trenirane modele!</h2> - <app-carousel [items]="publicPredictors"> + <app-carousel *ngIf = "publicPredictors" [items]="publicPredictors"> </app-carousel> <h3><a routerLink="browse-predictors">Pogledaj sve javne trenirane modele...</a></h3> </div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/home/home.component.ts b/frontend/src/app/_pages/home/home.component.ts index 7e4471e8..ed86a329 100644 --- a/frontend/src/app/_pages/home/home.component.ts +++ b/frontend/src/app/_pages/home/home.component.ts @@ -3,6 +3,8 @@ import Dataset from 'src/app/_data/Dataset'; import Predictor from 'src/app/_data/Predictor'; import { ItemDatasetComponent } from 'src/app/_elements/item-dataset/item-dataset.component'; import shared from 'src/app/Shared'; +import { DatasetsService } from 'src/app/_services/datasets.service'; +import { PredictorsService } from 'src/app/_services/predictors.service'; @Component({ selector: 'app-home', @@ -11,32 +13,19 @@ import shared from 'src/app/Shared'; }) export class HomeComponent implements OnInit { - publicDatasets: Dataset[]; - publicPredictors: Predictor[]; + publicDatasets?: Dataset[]; + publicPredictors?: Predictor[]; shared = shared; - constructor() { - this.publicDatasets = [ - new Dataset('Titanik', 'Titanik', ['Kolona1', 'Kolona2', 'Ime', 'OsobaJePreživela']), - new Dataset('Drugi Dataset', 'Lorem ipsum dolor sir amet', ['jabuka', 'kruska', 'jagoda']), - new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5']), - new Dataset('Drugi Dataset', 'Lorem ipsum dolor sir amet', ['jabuka', 'kruska', 'jagoda']), - new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5']), - new Dataset('Drugi Dataset', 'Lorem ipsum dolor sir amet', ['jabuka', 'kruska', 'jagoda']), - new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5']), - new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5']) - ] - this.publicPredictors = [ - new Predictor('Preživeli', 'Za uneto ime osobe, predvidja da li je ta osoba preživela ili ne.', ['Ime'], 'OsobaJePreživela'), - new Predictor('Drugi model', 'Lorem ipsum dolor sir amet', ['kruska'], 'jagoda'), - new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5'), - new Predictor('Drugi model', 'Lorem ipsum dolor sir amet', ['kruska'], 'jagoda'), - new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5'), - new Predictor('Drugi model', 'Lorem ipsum dolor sir amet', ['kruska'], 'jagoda'), - new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5'), - new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5') - ] + constructor(private datasetsService: DatasetsService, private predictorsService: PredictorsService) { + this.datasetsService.getPublicDatasets().subscribe((datasets) => { + this.publicDatasets = datasets; + console.log(datasets); + }); + this.predictorsService.getPublicPredictors().subscribe((predictors) => { + this.publicPredictors = predictors; + }); } ngOnInit(): void { diff --git a/frontend/src/app/_pages/my-models/my-models.component.html b/frontend/src/app/_pages/my-models/my-models.component.html index 870e0ddb..b6926771 100644 --- a/frontend/src/app/_pages/my-models/my-models.component.html +++ b/frontend/src/app/_pages/my-models/my-models.component.html @@ -9,7 +9,9 @@ <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let model of myModels"> <app-item-model [model]="model"></app-item-model> <div style="width: 25%; margin: auto;"> - <button (click)="deleteThisModel(model)" style="margin-top: 3px; width: 100%;">Obriši</button> + <button mat-raised-button color="primary" (click)="deleteThisModel(model)" style="margin-top: 3px; width: 100%;">Obriši</button> + + <button mat-raised-button color="primary" (click)="deleteThisModel(model)" style="margin-top: 3px; width: 100%;">Koristi</button> </div> </div> </div> |