diff options
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/package-lock.json | 33 | ||||
| -rw-r--r-- | frontend/package.json | 1 | ||||
| -rw-r--r-- | frontend/src/app/_data/Model.ts | 32 | ||||
| -rw-r--r-- | frontend/src/app/_pages/add-model/add-model.component.html | 73 | ||||
| -rw-r--r-- | frontend/src/app/_pages/add-model/add-model.component.ts | 25 | ||||
| -rw-r--r-- | frontend/src/app/app.module.ts | 5 |
6 files changed, 121 insertions, 48 deletions
diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0bb72f0f..b5ca9d02 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -28,6 +28,7 @@ "csv-parser": "^3.0.0", "d3-graphviz": "^2.6.1", "mdb-angular-ui-kit": "^2.0.0", + "ng-multiselect-dropdown": "^0.3.8", "ng-uikit-pro-standard": "^1.0.0", "ng2-charts": "^3.0.8", "ng2-search-filter": "^0.5.1", @@ -8124,6 +8125,23 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "node_modules/ng-multiselect-dropdown": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/ng-multiselect-dropdown/-/ng-multiselect-dropdown-0.3.8.tgz", + "integrity": "sha512-b6WohT+ouGQfBqo+OpYPClJI25Qmj/nNWcyGUIMh2JCAHEpWEQRUVzHJB7pPVW+n5a/P26I/sLyOQekxfkW9aQ==", + "dependencies": { + "tslib": "^1.9.0" + }, + "peerDependencies": { + "@angular/common": ">=2.0.0", + "@angular/core": ">=2.0.0" + } + }, + "node_modules/ng-multiselect-dropdown/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, "node_modules/ng-uikit-pro-standard": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/ng-uikit-pro-standard/-/ng-uikit-pro-standard-1.0.0.tgz", @@ -17681,6 +17699,21 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "ng-multiselect-dropdown": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/ng-multiselect-dropdown/-/ng-multiselect-dropdown-0.3.8.tgz", + "integrity": "sha512-b6WohT+ouGQfBqo+OpYPClJI25Qmj/nNWcyGUIMh2JCAHEpWEQRUVzHJB7pPVW+n5a/P26I/sLyOQekxfkW9aQ==", + "requires": { + "tslib": "^1.9.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, "ng-uikit-pro-standard": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/ng-uikit-pro-standard/-/ng-uikit-pro-standard-1.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index e43cb721..9df48b0c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -31,6 +31,7 @@ "csv-parser": "^3.0.0", "d3-graphviz": "^2.6.1", "mdb-angular-ui-kit": "^2.0.0", + "ng-multiselect-dropdown": "^0.3.8", "ng-uikit-pro-standard": "^1.0.0", "ng2-charts": "^3.0.8", "ng2-search-filter": "^0.5.1", diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index ff9f8329..1a16d960 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -31,7 +31,7 @@ export default class Model { public username: string = '', public nullValues: NullValueOptions = NullValueOptions.DeleteRows, public nullValuesReplacers: NullValReplacer[] = [], - public metrics: Metric[] = [], // TODO add to add-model form + public metrics: string[] = [], // TODO add to add-model form public epochs: number = 5 // TODO add to add-model form ) { } } @@ -167,9 +167,35 @@ export class NullValReplacer { "value" : string; } -export enum Metric { +export enum Metrics { MSE = 'mse', MAE = 'mae', RMSE = 'rmse' - //... + +} +export enum MetricsRegression +{ + Mse = 'mse', + Mae = 'mae', + Mape = 'mape', + Msle='msle', + CosineProximity='cosine' +} +export enum MetricsBinaryClassification +{ + Accuracy='binary_accuracy', + Auc="AUC", + Precision='precision_score', + Recall='recall_score', + F1='f1_score', + + +} +export enum MetricsMultiClassification +{ + Accuracy='categorical_accuracy', + Auc="AUC", + Precision='precision_score', + Recall='recall_score', + F1='f1_score', } 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 593d52b7..5e8372c9 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -234,6 +234,8 @@ </div> <div class="row p-2"> + <!--***********************************ENKODER*********************************************--> + <div class="col-1"> </div> <div class="col-3"> @@ -247,6 +249,9 @@ </option> </select> </div> + + <!--***********************************BROJ NEURONA SKRIVENOG SLOJA*********************************************--> + <div class="col-1"> </div> <div class="col-3"> @@ -256,7 +261,8 @@ <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" [(ngModel)]="newModel.hiddenLayerNeurons"> </div> - </div> + </div> +<!--***********************************OPTIMIZACIJA*********************************************--> <div class="row p-2"> <div class="col-1"> @@ -283,7 +289,7 @@ </div> </div> <!--***********************************LOSS FUNCTION*********************************************--> - <div class="row p-2"> + <div class="row justify-content-center"> <div class="col-1"> </div> <div class="col-3"> @@ -291,7 +297,7 @@ </div> <div class="col-2"> <select id=lossFunctionOptions class="form-control" name="lossFunction" - [(ngModel)]="newModel.lossFunction"> + [(ngModel)]="newModel.lossFunction" aria-checked="true"> <option *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)" [value]="option"> @@ -301,8 +307,27 @@ </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-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" @@ -310,9 +335,9 @@ </div> <div class="col-1"> </div> - </div> + - <!--<div class="row p-2"> + <div class="row p-2 justify-content-left"> <div class="col-3"></div> <div class="col-3"> <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije skrivenih @@ -332,7 +357,7 @@ </div> <div class="col-3"></div> </div> - --> + <div class="row p-2"> <div class="col-1"> </div> @@ -353,36 +378,8 @@ [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet"> </div> </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> + <!--***********************************AKTIVACIONE FUNKCIJE*********************************************--> -<h3 >Aktivacione funkcije</h3> - - <div class="row p-2" style="align-self: center;"> - <div class="col-3"></div> - <div class="col-3"> - <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> - </div> - <div class="col-3"></div> - </div> <div class="row p-2" style="align-self: center;"> <div class="col-1"> @@ -405,13 +402,13 @@ </div> - <!--<div class="col"> + <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> <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 4428c8c6..a1d36b42 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 } 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'; @@ -10,6 +10,7 @@ import { DatasetsService } from 'src/app/_services/datasets.service'; import { NgxCsvParser } from 'ngx-csv-parser'; import { CsvParseService } from 'src/app/_services/csv-parse.service'; + @Component({ selector: 'app-add-model', templateUrl: './add-model.component.html', @@ -27,7 +28,7 @@ export class AddModelComponent implements OnInit { ProblemType = ProblemType; Encoding = Encoding; ActivationFunction = ActivationFunction; - activationFunction:any=ActivationFunction + metrics:any=Metrics; LossFunction = LossFunction; lossFunction : any = LossFunction; Optimizer = Optimizer; @@ -54,7 +55,7 @@ export class AddModelComponent implements OnInit { term: string = ""; selectedProblemType:string=''; - + selectedMetrics=[]; constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) { this.newModel = new Model(); @@ -108,6 +109,7 @@ export class AddModelComponent implements OnInit { this.getCheckedInputCols(); this.getCheckedOutputCol(); + this.getMetrics(); if (this.validationInputsOutput()) { console.log('ADD MODEL: STEP 1 - UPLOAD FILE'); @@ -155,7 +157,7 @@ export class AddModelComponent implements OnInit { if (this.selectedDataset) { //dataset je izabran this.getCheckedInputCols(); this.getCheckedOutputCol(); - + this.getMetrics(); if (this.validationInputsOutput()) { this.newModel.datasetId = this.selectedDataset._id; @@ -473,17 +475,30 @@ export class AddModelComponent implements OnInit { switch(this.problemtype){ case 'regresioni': this.lossFunction=LossFunctionRegression; + this.metrics=MetricsRegression; break; case 'binarni-klasifikacioni': this.lossFunction=LossFunctionBinaryClassification; + this.metrics=MetricsBinaryClassification; break; case 'multi-klasifikacioni': this.lossFunction=LossFunctionMultiClassification; + this.metrics=MetricsMultiClassification; break; default: break; } } - + getMetrics() { + this.newModel.metrics=[]; + let cb = document.getElementsByName("cbmetrics"); + + for (let i = 0; i < cb.length; i++) { + let chb = <HTMLInputElement>cb[i]; + if (chb.checked == true) + this.newModel.metrics.push(chb.value); + } + + } } diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index d514d1f5..d90de54d 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -5,7 +5,7 @@ import { AppRoutingModule } from './app-routing.module'; import { HttpClientModule } from '@angular/common/http'; import { MatSliderModule } from '@angular/material/slider'; import { MatIconModule } from '@angular/material/icon'; - +import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown'; import { NgChartsModule } from 'ng2-charts'; import { Ng2SearchPipeModule } from 'ng2-search-filter'; import { AppComponent } from './app.component'; @@ -39,6 +39,7 @@ import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-dataset import { ReactiveBackgroundComponent } from './_elements/reactive-background/reactive-background.component'; import { ItemModelComponent } from './_elements/item-model/item-model.component'; import { AnnvisualComponent } from './_elements/annvisual/annvisual.component'; + @NgModule({ declarations: [ AppComponent, @@ -80,7 +81,7 @@ import { AnnvisualComponent } from './_elements/annvisual/annvisual.component'; MatSliderModule, MatIconModule, NgChartsModule, - Ng2SearchPipeModule + Ng2SearchPipeModule, ], providers: [], bootstrap: [AppComponent] |