diff options
Diffstat (limited to 'frontend/src/app/_pages')
4 files changed, 233 insertions, 174 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 5e8372c9..97b35b7a 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -41,7 +41,8 @@ </button> </div> <div class="px-5 my-2"> - <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term"> + <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;"> @@ -65,7 +66,9 @@ <!-- ULAZNE/IZLAZNE KOLONE --> <span id="selectInAndOuts"></span> - <div *ngIf="selectedDataset && ((showMyDatasets && selectedDatasetLoaded) || (!showMyDatasets && datasetLoaded))"> <!--postignuto da se kod newdataseta ucita tabela pa ulazi/izlazi. ostalo srediti to kod mydatasets(dopuna 2. uslova)--> + <div + *ngIf="selectedDataset && ((showMyDatasets && selectedDatasetLoaded) || (!showMyDatasets && datasetLoaded))"> + <!--postignuto da se kod newdataseta ucita tabela pa ulazi/izlazi. ostalo srediti to kod mydatasets(dopuna 2. uslova)--> <div class="row"> <div class="col d-flex justify-content-center"> <h3>Izaberite ulazne kolone:</h3> @@ -120,52 +123,99 @@ <div id="columnReplacers"> <!--Ulazne kolone - popunjavanje null vrednosti --> <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3"> - <div class="input-group row" *ngIf="getInputById('cb_'+column).checked"> - <span class="input-group-text col-2 text-center"> - {{column}} <span class="small" style="color:gray;">({{calculateSumOfNullValuesInCol(column)}} null)</span> + <div *ngIf="getInputById('cb_'+column).checked" class=""> + <span class="w-20 mx-3"> + {{column}} <span class="small" + style="color:gray;">({{calculateSumOfNullValuesInCol(column)}} + null)</span> </span> - <label *ngIf="calculateSumOfNullValuesInCol(column)==0" class="form-control col-10">Ova kolona nema nedostajućih vrednosti.</label> - - <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio" [id]="'fillCol_'+column" class="col-1 mt-2" - [name]="'delOp_'+column"> <!--OVDE SREDI IZGLED--> - <select [id]="'replaceOptions'+i" class="form-control col-2" - *ngIf="isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" (change)="replaceWithSelectedNumber($event);"> - <option - *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)" - [value]="option"> - {{ optionName }} - </option> - </select> - <select [id]="'replaceOptions'+i" class="form-control col-2" - *ngIf="!isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" (change)="replaceWithSelectedString($event);"> - <option *ngFor="let option of arrayColumn(datasetFile, i)" - [value]="option"> - {{ option }} - </option> - </select> - <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="text" class="form-control col-1" [id]="'fillText_'+column" - (keyup)="checkFillColRadio(column)" placeholder="Unesi vrednost..."> - <label *ngIf="calculateSumOfNullValuesInCol(column)!=0" class="form-control" [for]="'delCol_'+column">Izbriši kolonu - <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio" [id]="'delCol_'+column" - [name]="'delOp_'+column" (change)="emptyFillTextInput(column)"></label> - <label *ngIf="calculateSumOfNullValuesInCol(column)!=0" class="form-control col-2" [for]="'delRows_'+column">Izbriši redove - <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio" [id]="'delRows_'+column" [name]="'delOp_'+column" - checked (change)="emptyFillTextInput(column)"></label> + <label *ngIf="calculateSumOfNullValuesInCol(column)==0" + class="text-center form-control mx-3 text-secondary">Ova kolona nema + nedostajućih + vrednosti.</label> + + <div *ngIf="calculateSumOfNullValuesInCol(column)!=0" + class="d-flex flex-row justify-content-end"> + <div class="flex-grow-3 mx-3 me-auto"> + <div class="input-group"> + <div class="input-group-prepend"> + <label [for]="'fillCol_'+column" class="form-control"> + Zameni + <input type="radio" [id]="'fillCol_'+column" + [name]="'delOp_'+column"> + </label> + </div> + <input type="text" class="form-control" + [id]="'fillText_'+column" + (keyup)="checkFillColRadio(column)" + placeholder="Unesi vrednost..."> + + <div class="input-group-append"> + <select [id]="'replaceOptions'+i" + class="form-control btn-primary" + *ngIf="isNumber(datasetFile[1][i])" + (change)="replaceWithSelectedNumber($event);"> + <option + *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)" + [value]="option"> + {{ optionName }} + </option> + </select> + <select [id]="'replaceOptions'+i" + class="form-control btn-outline-primary" + *ngIf="!isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" + (change)="replaceWithSelectedString($event);"> + <option + *ngFor="let option of arrayColumn(datasetFile, i)" + [value]="option"> + {{ option }} + </option> + </select> + </div> + </div> + </div> + + <div class="flex-shrink-1 mx-3"> + <div class="input-group"> + <label class="form-control" [for]="'delCol_'+column">Izbriši + kolonu + <input type="radio" [id]="'delCol_'+column" + [name]="'delOp_'+column" + (change)="emptyFillTextInput(column)"></label> + </div> + </div> + + <div class="flex-shrink-1 mx-3"> + <div class="input-group"> + <label class="form-control" [for]="'delRows_'+column">Izbriši + redove + <input type="radio" [id]="'delRows_'+column" + [name]="'delOp_'+column" checked + (change)="emptyFillTextInput(column)"></label> + </div> + </div> + </div> </div> </div> <!--Izlazna kolona - popunjavanje null vrednosti --> - <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3"> <!--moze bez for petlje (this.selectedOutputColumnVal je id), al ne moze ova fja array column onda--> + <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3"> + <!--moze bez for petlje (this.selectedOutputColumnVal je id), al ne moze ova fja array column onda--> <div class="input-group row" *ngIf="getInputById('rb_'+column).checked"> <span class="input-group-text col-2 text-center"> - {{column}} <span class="small" style="color:gray;">({{calculateSumOfNullValuesInCol(column)}} null)</span> + {{column}} <span class="small" + style="color:gray;">({{calculateSumOfNullValuesInCol(column)}} + null)</span> </span> - <label *ngIf="calculateSumOfNullValuesInCol(column)==0" class="form-control">Ova kolona nema nedostajućih vrednosti.</label> - - <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio" [id]="'fillCol_'+column" class="col-1 mt-2" - [name]="'delOp_'+column"> <!--OVDE SREDI IZGLED--> + <label *ngIf="calculateSumOfNullValuesInCol(column)==0" + class="form-control">Ova kolona nema nedostajućih vrednosti.</label> + + <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio" + [id]="'fillCol_'+column" class="col-1 mt-2" [name]="'delOp_'+column"> + <!--OVDE SREDI IZGLED--> <select [id]="'replaceOptions'+i" class="form-control col-2" - *ngIf="isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" (change)="replaceWithSelectedNumber($event);"> + *ngIf="isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" + (change)="replaceWithSelectedNumber($event);"> <option *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)" [value]="option"> @@ -173,21 +223,25 @@ </option> </select> <select [id]="'replaceOptions'+i" class="form-control col-2" - *ngIf="!isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" (change)="replaceWithSelectedString($event);"> + *ngIf="!isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" + (change)="replaceWithSelectedString($event);"> <option *ngFor="let option of arrayColumn(datasetFile, i)" [value]="option"> {{ option }} </option> </select> - <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="text" class="form-control col-1" [id]="'fillText_'+column" + <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="text" + class="form-control col-1" [id]="'fillText_'+column" (keyup)="checkFillColRadio(column)" placeholder="Unesi vrednost..."> - <label *ngIf="calculateSumOfNullValuesInCol(column)!=0" class="form-control col-2" [for]="'delCol_'+column">Izbriši kolonu - <input type="radio" [id]="'delCol_'+column" - [name]="'delOp_'+column" (change)="emptyFillTextInput(column)"></label> - <label *ngIf="calculateSumOfNullValuesInCol(column)!=0" class="form-control col-2" [for]="'delRows_'+column">Izbriši redove - <input type="radio" [id]="'delRows_'+column" [name]="'delOp_'+column" (change)="emptyFillTextInput(column)" - checked></label> + <label *ngIf="calculateSumOfNullValuesInCol(column)!=0" + class="form-control col-2" [for]="'delCol_'+column">Izbriši kolonu + <input type="radio" [id]="'delCol_'+column" [name]="'delOp_'+column" + (change)="emptyFillTextInput(column)"></label> + <label *ngIf="calculateSumOfNullValuesInCol(column)!=0" + class="form-control col-2" [for]="'delRows_'+column">Izbriši redove + <input type="radio" [id]="'delRows_'+column" [name]="'delOp_'+column" + (change)="emptyFillTextInput(column)" checked></label> </div> </div> @@ -201,7 +255,7 @@ <h2 class="mt-5 mb-4">Parametri treniranja:</h2> -<!--**********************************************************TIP*********************************************************--> + <!--**********************************************************TIP*********************************************************--> <div> <div class="row p-2"> <div class="col-1"> @@ -210,9 +264,8 @@ <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" - [(ngModel)]="problemtype" - (change)="filterOptions()"> + <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type" + (change)="filterOptions()"> <option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option"> @@ -220,7 +273,7 @@ </option> </select> </div> -<!--******************************************************************************************************************--> + <!--******************************************************************************************************************--> <div class="col-1"> </div> <div class="col-3"> @@ -249,7 +302,7 @@ </option> </select> </div> - + <!--***********************************BROJ NEURONA SKRIVENOG SLOJA*********************************************--> <div class="col-1"> @@ -261,8 +314,8 @@ <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" [(ngModel)]="newModel.hiddenLayerNeurons"> </div> - </div> -<!--***********************************OPTIMIZACIJA*********************************************--> + </div> + <!--***********************************OPTIMIZACIJA*********************************************--> <div class="row p-2"> <div class="col-1"> @@ -288,8 +341,7 @@ <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize"> </div> </div> -<!--***********************************LOSS FUNCTION*********************************************--> - <div class="row justify-content-center"> + <div class="row p-2"> <div class="col-1"> </div> <div class="col-3"> @@ -305,90 +357,79 @@ </option> </select> </div> - <div class="col-1"> - </div> - </div> -<!-- ************************************************************************************************** --> - -<!--**********************************************METRIKE ZA KOMPAJLER I GRAFIKE***********************************************--> - -<hr> - <div class="form-check form-check-inline overflow-auto " style="width: max-content;"> - <h3>Izaberite metrike:</h3> - <div id="divMetricsinput" > - - <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;"> - <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2"> - {{optionName}} - </label> - </div> - </div> - </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 class="border m-3"> + <div class="row p-2 m-2"> + <div class="col-4"> + <label for="splitYesNo" class="form-check-label"> + <h3>Podela test skupa: + <input id="splitYesNo" class="form-check-input" type="checkbox" + [checked]="newModel.randomTestSet" + (change)="newModel.randomTestSet = !newModel.randomTestSet"> + </h3> + </label> + </div> + <div class="col-8"> + trening + <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10" + name="randomTestSetDistribution" thumbLabel [disabled]="!newModel.randomTestSet" + [(ngModel)]="tempTestSetDistribution"> + </mat-slider> + test + </div> + </div> + + <div class="row p-2 mx-2"> + <div class="col-4"> + <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening + skup:</label> + </div> + <div class="col-2"> + <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90" + [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet"> + </div> </div> - + </div> - <div class="row p-2 justify-content-left"> - <div class="col-3"></div> + <!--***********************************AKTIVACIONE FUNKCIJE*********************************************--> + <h3>Aktivacione funkcije:</h3> + + <div class="row p-2 m-2" style="align-self: center;"> <div class="col-3"> - <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije skrivenih + <label for="hiddenLayerActivationFunction" class="col-form-label" + style="text-align: center;">Funkcija aktivacije skrivenih slojeva:</label> </div> <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 class="input-group mb-2"> + <div class="input-group-prepend"> + <span class="input-group-text">#{{i+1}}</span> + </div> + <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> - <div class="col-3"></div> - </div> - - <div class="row p-2"> - <div class="col-1"> - </div> - <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-1"> - </div> - <div class="col-2"> - <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening skup:</label> - </div> - <div class="col-1"> - <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90" - [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet"> - </div> - </div> - -<!--***********************************AKTIVACIONE FUNKCIJE*********************************************--> - - <div class="row p-2" style="align-self: center;"> - <div class="col-1"> - </div> <div class="col-3"> - <label for="outputLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija aktivacije izlaznog + <label for="outputLayerActivationFunction" class="col-form-label" + style="text-align: center;">Funkcija aktivacije izlaznog sloja:</label> </div> - <div class="col-2"> + <div class="col-3"> <select id=outputLayerActivationFunctionOptions class="form-control" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> <option @@ -398,24 +439,31 @@ </option> </select> </div> - <div class="col-1"> - </div> - - - <div class="col"> - trening - <mat-slider min="10" max="90" step="10" value="10" name="randomTestSetDistribution" thumbLabel - [disabled]="!newModel.randomTestSet" [(ngModel)]="tempTestSetDistribution"> - </mat-slider> - test - </div> <div class="col"> </div> </div> </div> - <br><br> + <!--**********************************************METRIKE ZA KOMPAJLER I GRAFIKE***********************************************--> + + <hr> + <div class="form-check form-check-inline overflow-auto " style="width: max-content;"> + <h3>Izaberite metrike:</h3> + <div id="divMetricsinput"> + + <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;"> + <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2"> + {{optionName}} + </label> + </div> + </div> + </div> + <!--<app-annvisual [model]="newModel"></app-annvisual>--> <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;" @@ -426,7 +474,14 @@ <div class="col"></div> </div> + <div class="m-3" *ngIf="trainingResult"> + <h2>Rezultati treniranja</h2> + <p> + {{trainingResult}} + </p> + </div> </div> </div> -<button (click)="calculateSumOfNullValuesInCol('Embarked'); calculateMeanColValue('Age');calculateMedianColValue('Age'); getNullValuesReplacersArray();">DUGME</button>
\ No newline at end of file +<!--<button + (click)="calculateSumOfNullValuesInCol('Embarked'); calculateMeanColValue('Age');calculateMedianColValue('Age'); getNullValuesReplacersArray();">DUGME</button>-->
\ 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 a1d36b42..b35b9fa4 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, { LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, NullValReplacer, ReplaceWith } from 'src/app/_data/Model'; -import { ProblemType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions,Metrics,MetricsRegression , MetricsBinaryClassification,MetricsMultiClassification} from 'src/app/_data/Model'; +import { ProblemType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions, Metrics, MetricsRegression, MetricsBinaryClassification, MetricsMultiClassification } 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'; @@ -28,9 +28,9 @@ export class AddModelComponent implements OnInit { ProblemType = ProblemType; Encoding = Encoding; ActivationFunction = ActivationFunction; - metrics:any=Metrics; + metrics: any = Metrics; LossFunction = LossFunction; - lossFunction : any = LossFunction; + lossFunction: any = LossFunction; Optimizer = Optimizer; NullValueOptions = NullValueOptions; ReplaceWith = ReplaceWith; @@ -54,8 +54,10 @@ export class AddModelComponent implements OnInit { //accepted: Boolean; term: string = ""; - selectedProblemType:string=''; - selectedMetrics=[]; + selectedProblemType: string = ''; + selectedMetrics = []; + + trainingResult: string | undefined; constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) { this.newModel = new Model(); @@ -91,6 +93,7 @@ export class AddModelComponent implements OnInit { trainModel() { let saveFunc; + this.trainingResult = undefined; if (!this.showMyDatasets) saveFunc = (x: (arg0: any) => void) => { this.saveModelWithNewDataset(x) }; @@ -101,6 +104,7 @@ export class AddModelComponent implements OnInit { console.log('Saved, training model...', model); this.models.trainModel(model).subscribe(response => { console.log('Train model complete!', response); + this.trainingResult = response; }); })); //privremeno cuvanje modela => vraca id sacuvanog modela koji cemo da treniramo sad } @@ -315,15 +319,15 @@ export class AddModelComponent implements OnInit { !isNaN(Number(value.toString()))); } - findColIndexByName(colName: string) : number { - if (this.datasetFile) - for (let i = 0; i < this.datasetFile[0].length; i++) - if (colName === this.datasetFile[0][i]) + findColIndexByName(colName: string): number { + if (this.datasetFile) + for (let i = 0; i < this.datasetFile[0].length; i++) + if (colName === this.datasetFile[0][i]) return i; return -1; } - findColNameByIndex(index: number) : string { - if (this.datasetFile) + findColNameByIndex(index: number): string { + if (this.datasetFile) if (this.datasetHasHeader && index < this.datasetFile[0].length) return this.datasetFile[0][index]; return ''; @@ -337,7 +341,7 @@ export class AddModelComponent implements OnInit { } calculateSumOfNullValuesInCol(colName: string): number { //console.log(this.datasetFile); - if (this.datasetFile) { + if (this.datasetFile) { let colIndex = this.findColIndexByName(colName); let sumOfNulls = 0; @@ -362,8 +366,8 @@ export class AddModelComponent implements OnInit { sum += Number(this.datasetFile[i][colIndex]); ++n; } - console.log(sum / n); - return (sum != 0)? (sum / n) : 0; + console.log(sum / n); + return (sum != 0) ? (sum / n) : 0; } return 0; } @@ -376,7 +380,7 @@ export class AddModelComponent implements OnInit { for (let i = startValue; i < this.datasetFile.length; i++) if (this.datasetFile[i][colIndex] != '') array.push(Number(this.datasetFile[i][colIndex])); - + array.sort(); if (array.length % 2 == 0) return array[array.length / 2 - 1] / 2; @@ -397,7 +401,7 @@ export class AddModelComponent implements OnInit { else { if (value == colName) (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = ""; - else + else (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = value; } } @@ -416,8 +420,8 @@ export class AddModelComponent implements OnInit { (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = ""; } - - getNullValuesReplacersArray() : NullValReplacer[] { + + getNullValuesReplacersArray(): NullValReplacer[] { let array: NullValReplacer[] = []; if (this.datasetFile) { @@ -449,7 +453,7 @@ export class AddModelComponent implements OnInit { value: (<HTMLInputElement>document.getElementById("fillText_" + column)).value }); } - } + } } } } @@ -469,29 +473,27 @@ export class AddModelComponent implements OnInit { return set; } - problemtype:string=''; - - filterOptions(){ - switch(this.problemtype){ + filterOptions() { + switch (this.newModel.type) { case 'regresioni': - this.lossFunction=LossFunctionRegression; - this.metrics=MetricsRegression; + this.lossFunction = LossFunctionRegression; + this.metrics = MetricsRegression; break; case 'binarni-klasifikacioni': - this.lossFunction=LossFunctionBinaryClassification; - this.metrics=MetricsBinaryClassification; + this.lossFunction = LossFunctionBinaryClassification; + this.metrics = MetricsBinaryClassification; break; case 'multi-klasifikacioni': - this.lossFunction=LossFunctionMultiClassification; - this.metrics=MetricsMultiClassification; - break; + this.lossFunction = LossFunctionMultiClassification; + this.metrics = MetricsMultiClassification; + break; default: break; } } getMetrics() { - this.newModel.metrics=[]; + this.newModel.metrics = []; let cb = document.getElementsByName("cbmetrics"); for (let i = 0; i < cb.length; i++) { @@ -499,6 +501,6 @@ export class AddModelComponent implements OnInit { if (chb.checked == true) this.newModel.metrics.push(chb.value); } - + } } diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index eb59b726..08f95a69 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 *ngIf = "publicDatasets" [items]="publicDatasets"> + <app-carousel [items]="publicDatasets" [type]="'Dataset'"> </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 *ngIf = "publicPredictors" [items]="publicPredictors"> + <app-carousel [items]="publicPredictors" [type]="'Predictor'"> </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 ed86a329..0575c4c0 100644 --- a/frontend/src/app/_pages/home/home.component.ts +++ b/frontend/src/app/_pages/home/home.component.ts @@ -13,15 +13,17 @@ import { PredictorsService } from 'src/app/_services/predictors.service'; }) export class HomeComponent implements OnInit { - publicDatasets?: Dataset[]; - publicPredictors?: Predictor[]; + publicDatasets: Dataset[] = []; + publicPredictors: Predictor[] = []; shared = shared; constructor(private datasetsService: DatasetsService, private predictorsService: PredictorsService) { this.datasetsService.getPublicDatasets().subscribe((datasets) => { this.publicDatasets = datasets; - console.log(datasets); + this.publicDatasets.forEach((element, index) => { + this.publicDatasets[index] = (<Dataset>element); + }) }); this.predictorsService.getPublicPredictors().subscribe((predictors) => { this.publicPredictors = predictors; |