diff options
Diffstat (limited to 'frontend')
12 files changed, 254 insertions, 193 deletions
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index ff9f8329..fb6849e3 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -46,7 +46,7 @@ export enum ProblemType { // removeOutliers export enum Encoding { Label = 'label', - OneHot = 'one hot', + OneHot = 'onehot', /* BackwardDifference = 'backward difference', BaseN = 'baseN', @@ -77,14 +77,14 @@ export enum ActivationFunction { Exponential_Linear_Unit = 'exponentialLinearUnit', Swish = 'swish', //hiddenLayers - Relu='relu', - Sigmoid='sigmoid', - Tanh='tanh', + Relu = 'relu', + Sigmoid = 'sigmoid', + Tanh = 'tanh', //outputLayer Linear = 'linear', //Sigmoid='sigmoid', - Softmax='softmax', + Softmax = 'softmax', } /* @@ -104,37 +104,34 @@ export enum ActivationFunctionOutputLayer export enum LossFunction { // binary classification loss functions BinaryCrossEntropy = 'binary_crossentropy', - SquaredHingeLoss='squared_hinge_loss', + SquaredHingeLoss = 'squared_hinge_loss', HingeLoss = 'hinge_loss', // multi-class classiication loss functions CategoricalCrossEntropy = 'categorical_crossentropy', - SparseCategoricalCrossEntropy='sparse_categorical_crosentropy', + SparseCategoricalCrossEntropy = 'sparse_categorical_crosentropy', KLDivergence = 'kullback_leibler_divergence', - + // regression loss functions - + MeanAbsoluteError = 'mean_absolute_error', MeanSquaredError = 'mean_squared_error', - MeanSquaredLogarithmicError='mean_squared_logarithmic_error', + MeanSquaredLogarithmicError = 'mean_squared_logarithmic_error', HuberLoss = 'Huber' } -export enum LossFunctionRegression -{ +export enum LossFunctionRegression { MeanAbsoluteError = 'mean_absolute_error', MeanSquaredError = 'mean_squared_error', - MeanSquaredLogarithmicError='mean_squared_logarithmic_error', + MeanSquaredLogarithmicError = 'mean_squared_logarithmic_error', } -export enum LossFunctionBinaryClassification -{ +export enum LossFunctionBinaryClassification { BinaryCrossEntropy = 'binary_crossentropy', - SquaredHingeLoss='squared_hinge_loss', + SquaredHingeLoss = 'squared_hinge_loss', HingeLoss = 'hinge_loss', } -export enum LossFunctionMultiClassification -{ +export enum LossFunctionMultiClassification { CategoricalCrossEntropy = 'categorical_crossentropy', - SparseCategoricalCrossEntropy='sparse_categorical_crosentropy', + SparseCategoricalCrossEntropy = 'sparse_categorical_crosentropy', KLDivergence = 'kullback_leibler_divergence', } @@ -164,7 +161,7 @@ export enum ReplaceWith { export class NullValReplacer { "column": string; "option": NullValueOptions; - "value" : string; + "value": string; } export enum Metric { diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.ts b/frontend/src/app/_elements/annvisual/annvisual.component.ts index 8588537e..53e4e2ca 100644 --- a/frontend/src/app/_elements/annvisual/annvisual.component.ts +++ b/frontend/src/app/_elements/annvisual/annvisual.component.ts @@ -1,6 +1,6 @@ -import { Component, OnInit,Input } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; import Model from 'src/app/_data/Model'; -import { graphviz } from 'd3-graphviz'; +import { graphviz } from 'd3-graphviz'; @Component({ selector: 'app-annvisual', @@ -9,41 +9,37 @@ import { graphviz } from 'd3-graphviz'; }) export class AnnvisualComponent implements OnInit { ngOnInit(): void { - throw new Error('Method not implemented.'); } @Input() model: Model = new Model(); - d3(){ - let inputlayerstring:string=''; - let hiddenlayerstring:string=''; - let digraphstring:string='digraph {'; + d3() { + let inputlayerstring: string = ''; + let hiddenlayerstring: string = ''; + let digraphstring: string = 'digraph {'; - for(let i=0;i<this.model.inputColumns.length;i++) - { - inputlayerstring=inputlayerstring+'i'+i+','; + for (let i = 0; i < this.model.inputColumns.length; i++) { + inputlayerstring = inputlayerstring + 'i' + i + ','; } - inputlayerstring=inputlayerstring.slice(0,-1); + inputlayerstring = inputlayerstring.slice(0, -1); - digraphstring=digraphstring+inputlayerstring+'->'; + digraphstring = digraphstring + inputlayerstring + '->'; - for(let j=0;j<this.model.hiddenLayers;j++) - { - for(let i=0;i<this.model.hiddenLayerNeurons;i++) - { - hiddenlayerstring=hiddenlayerstring+'h'+j+'_'+i+','; + for (let j = 0; j < this.model.hiddenLayers; j++) { + for (let i = 0; i < this.model.hiddenLayerNeurons; i++) { + hiddenlayerstring = hiddenlayerstring + 'h' + j + '_' + i + ','; } - hiddenlayerstring=hiddenlayerstring.slice(0,-1); - digraphstring=digraphstring+hiddenlayerstring+'->'; - hiddenlayerstring=''; + hiddenlayerstring = hiddenlayerstring.slice(0, -1); + digraphstring = digraphstring + hiddenlayerstring + '->'; + hiddenlayerstring = ''; } - digraphstring=digraphstring+'o}'; - - + digraphstring = digraphstring + 'o}'; + + graphviz('#graph').renderDot(digraphstring); - } + } - //'digraph {i0,i1,i2->h1,h2,h3->h21,h22,h23->o}' + //'digraph {i0,i1,i2->h1,h2,h3->h21,h22,h23->o}' } diff --git a/frontend/src/app/_elements/carousel/carousel.component.html b/frontend/src/app/_elements/carousel/carousel.component.html index 755899a7..eb1041ce 100644 --- a/frontend/src/app/_elements/carousel/carousel.component.html +++ b/frontend/src/app/_elements/carousel/carousel.component.html @@ -1,6 +1,9 @@ <div class="container"> <div class="row d-flex align-items-stretch flex-row mx-5 align-items-stretch"> - <div class="col my-1" *ngFor=" let item of items" [ngSwitch]="item.constructor.name"> + <div class="col my-1" *ngFor="let item of items" [ngSwitch]="type"> + <ng-template ngSwitchCase="Object"> + Unknown item type + </ng-template> <ng-template ngSwitchCase="Dataset"> <app-item-dataset [dataset]="item"> </app-item-dataset> diff --git a/frontend/src/app/_elements/carousel/carousel.component.ts b/frontend/src/app/_elements/carousel/carousel.component.ts index ed4fa4a5..e0112121 100644 --- a/frontend/src/app/_elements/carousel/carousel.component.ts +++ b/frontend/src/app/_elements/carousel/carousel.component.ts @@ -8,6 +8,7 @@ import { Component, Input, OnInit } from '@angular/core'; export class CarouselComponent { @Input() items: any[] = []; + @Input() type: string = "Object"; constructor() { } diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.html b/frontend/src/app/_elements/item-dataset/item-dataset.component.html index 8751fce5..dc4221f4 100644 --- a/frontend/src/app/_elements/item-dataset/item-dataset.component.html +++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.html @@ -8,7 +8,8 @@ </p> <table class="table table-bordered table-sm"> <thead> - <th scope="col" *ngFor="let column of dataset.header">{{column}}</th> <!-- treba da se namesti da kad nema hedere, da korisnik unese nazive kolona pa da se taj heder prikaze --> + <th scope="col" *ngFor="let column of dataset.header">{{column}}</th> + <!-- treba da se namesti da kad nema hedere, da korisnik unese nazive kolona pa da se taj heder prikaze --> </thead> </table> </div> diff --git a/frontend/src/app/_elements/notifications/notifications.component.html b/frontend/src/app/_elements/notifications/notifications.component.html index 27071425..d1da41b4 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.html +++ b/frontend/src/app/_elements/notifications/notifications.component.html @@ -1,3 +1,3 @@ -<div class="position-fixed card card-body bg-dark text-white m-3" style="bottom: 0; right: 0;"> +<div *ngIf="notifications" class="position-fixed card card-body bg-dark text-white m-3" style="bottom: 0; right: 0;"> <h3>Notifikacije</h3> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts index 7566828d..6c1d555b 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.ts +++ b/frontend/src/app/_elements/notifications/notifications.component.ts @@ -8,6 +8,8 @@ import { WebSocketService } from 'src/app/_services/web-socket.service'; }) export class NotificationsComponent implements OnInit { + notifications?: any[]; + constructor(private wsService: WebSocketService) { } ngOnInit(): void { 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..62468b2d 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"> @@ -282,7 +335,7 @@ <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize"> </div> </div> -<!--***********************************LOSS FUNCTION*********************************************--> + <!--***********************************LOSS FUNCTION*********************************************--> <div class="row p-2"> <div class="col-1"> </div> @@ -302,7 +355,7 @@ <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" @@ -333,65 +386,71 @@ <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 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="col-1"> - <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90" - [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet"> + + <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="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> + + <!--***********************************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" style="text-align: center;">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" 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 @@ -401,17 +460,6 @@ </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> @@ -419,6 +467,8 @@ <br><br> + <!--<app-annvisual [model]="newModel"></app-annvisual>--> + <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;" @@ -429,7 +479,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 4428c8c6..ec64a3b7 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -27,9 +27,9 @@ export class AddModelComponent implements OnInit { ProblemType = ProblemType; Encoding = Encoding; ActivationFunction = ActivationFunction; - activationFunction:any=ActivationFunction + activationFunction: any = ActivationFunction LossFunction = LossFunction; - lossFunction : any = LossFunction; + lossFunction: any = LossFunction; Optimizer = Optimizer; NullValueOptions = NullValueOptions; ReplaceWith = ReplaceWith; @@ -53,8 +53,10 @@ export class AddModelComponent implements OnInit { //accepted: Boolean; term: string = ""; - selectedProblemType:string=''; - + selectedProblemType: string = ''; + + trainingResult: string | undefined; + constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) { this.newModel = new Model(); @@ -90,6 +92,7 @@ export class AddModelComponent implements OnInit { trainModel() { let saveFunc; + this.trainingResult = undefined; if (!this.showMyDatasets) saveFunc = (x: (arg0: any) => void) => { this.saveModelWithNewDataset(x) }; @@ -100,6 +103,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 } @@ -313,15 +317,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 ''; @@ -335,7 +339,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; @@ -360,8 +364,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; } @@ -374,7 +378,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; @@ -395,7 +399,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; } } @@ -414,8 +418,8 @@ export class AddModelComponent implements OnInit { (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = ""; } - - getNullValuesReplacersArray() : NullValReplacer[] { + + getNullValuesReplacersArray(): NullValReplacer[] { let array: NullValReplacer[] = []; if (this.datasetFile) { @@ -447,7 +451,7 @@ export class AddModelComponent implements OnInit { value: (<HTMLInputElement>document.getElementById("fillText_" + column)).value }); } - } + } } } } @@ -467,23 +471,21 @@ export class AddModelComponent implements OnInit { return set; } - problemtype:string=''; - - filterOptions(){ - switch(this.problemtype){ + filterOptions() { + switch (this.newModel.type) { case 'regresioni': - this.lossFunction=LossFunctionRegression; + this.lossFunction = LossFunctionRegression; break; case 'binarni-klasifikacioni': - this.lossFunction=LossFunctionBinaryClassification; + this.lossFunction = LossFunctionBinaryClassification; break; case 'multi-klasifikacioni': - this.lossFunction=LossFunctionMultiClassification; - break; + this.lossFunction = LossFunctionMultiClassification; + break; default: break; } } - + } 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; diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 9e2bbc54..802b8bd0 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -1,5 +1,5 @@ @import '~bootstrap/dist/css/bootstrap.min.css'; body { /*background-image: url('/assets/images/add_model_background.jpg');*/ - background-color: cornflowerblue; + background-color: #003459; }
\ No newline at end of file |