diff options
Diffstat (limited to 'frontend')
9 files changed, 207 insertions, 22 deletions
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index dd3cb760..ff9f8329 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -1,3 +1,5 @@ +import { NgIf } from "@angular/common"; + export default class Model { _id: string = ''; constructor( @@ -45,6 +47,7 @@ export enum ProblemType { export enum Encoding { Label = 'label', OneHot = 'one hot', + /* BackwardDifference = 'backward difference', BaseN = 'baseN', Binary = 'binary', @@ -62,34 +65,77 @@ export enum Encoding { Target = 'target', WOE = 'woe', Quantile = 'quantile' + */ } export enum ActivationFunction { // linear Binary_Step = 'binaryStep', - Linear = 'linear', // non-linear - Relu = 'relu', Leaky_Relu = 'leakyRelu', Parameterised_Relu = 'parameterisedRelu', Exponential_Linear_Unit = 'exponentialLinearUnit', Swish = 'swish', - Sigmoid = 'sigmoid', - Tanh = 'tanh', - Softmax = 'softmax' -} + //hiddenLayers + Relu='relu', + Sigmoid='sigmoid', + Tanh='tanh', + + //outputLayer + Linear = 'linear', + //Sigmoid='sigmoid', + Softmax='softmax', +} +/* +export enum ActivationFunctionHiddenLayer +{ + Relu='relu', + Sigmoid='sigmoid', + Tanh='tanh' +} +export enum ActivationFunctionOutputLayer +{ + Linear = 'linear', + Sigmoid='sigmoid', + Softmax='softmax' +} +*/ export enum LossFunction { // binary classification loss functions BinaryCrossEntropy = 'binary_crossentropy', + SquaredHingeLoss='squared_hinge_loss', HingeLoss = 'hinge_loss', // multi-class classiication loss functions CategoricalCrossEntropy = 'categorical_crossentropy', + SparseCategoricalCrossEntropy='sparse_categorical_crosentropy', KLDivergence = 'kullback_leibler_divergence', + // regression loss functions + + MeanAbsoluteError = 'mean_absolute_error', MeanSquaredError = 'mean_squared_error', + MeanSquaredLogarithmicError='mean_squared_logarithmic_error', + HuberLoss = 'Huber' + +} +export enum LossFunctionRegression +{ MeanAbsoluteError = 'mean_absolute_error', - HuberLoss = 'Huber', + MeanSquaredError = 'mean_squared_error', + MeanSquaredLogarithmicError='mean_squared_logarithmic_error', +} +export enum LossFunctionBinaryClassification +{ + BinaryCrossEntropy = 'binary_crossentropy', + SquaredHingeLoss='squared_hinge_loss', + HingeLoss = 'hinge_loss', +} +export enum LossFunctionMultiClassification +{ + CategoricalCrossEntropy = 'categorical_crossentropy', + SparseCategoricalCrossEntropy='sparse_categorical_crosentropy', + KLDivergence = 'kullback_leibler_divergence', } export enum Optimizer { diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.html b/frontend/src/app/_elements/item-predictor/item-predictor.component.html index b4690154..7ae26fd3 100644 --- a/frontend/src/app/_elements/item-predictor/item-predictor.component.html +++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.html @@ -19,6 +19,8 @@ </div> </div> <div class="card-footer text-center"> - <a routerLink="/predict" mat-raised-button color="primary">Iskoristi</a> + <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" + (click)="openPredictor();">Iskoristi</button> + <!--<a routerLink="/predict" mat-raised-button color="primary">Iskoristi</a>--> </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts index cc782f45..d864480a 100644 --- a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts +++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts @@ -15,4 +15,8 @@ export class ItemPredictorComponent implements OnInit { ngOnInit(): void { } + openPredictor() { + console.log("iskoristi") + } + } 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 c6c14ff7..de024904 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -201,6 +201,7 @@ <h2 class="mt-5 mb-4">Parametri treniranja:</h2> +<!--**********************************************************TIP*********************************************************--> <div> <div class="row p-2"> <div class="col-1"> @@ -209,7 +210,9 @@ <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"> + <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type" + [(ngModel)]="problemtype" + (change)="filterOptions()"> <option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option"> @@ -217,6 +220,7 @@ </option> </select> </div> +<!--******************************************************************************************************************--> <div class="col-1"> </div> <div class="col-3"> @@ -278,7 +282,7 @@ <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize"> </div> </div> - +<!--***********************************LOSS FUNCTION*********************************************--> <div class="row p-2"> <div class="col-1"> </div> @@ -289,7 +293,7 @@ <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)" + *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)" [value]="option"> {{ optionName }} </option> @@ -297,6 +301,8 @@ </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" @@ -306,7 +312,7 @@ </div> </div> - <div class="row p-2"> + <!--<div class="row p-2"> <div class="col-3"></div> <div class="col-3"> <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije skrivenih @@ -326,7 +332,7 @@ </div> <div class="col-3"></div> </div> - + --> <div class="row p-2"> <div class="col-1"> </div> @@ -347,12 +353,42 @@ [(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"> + <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">Funkcija aktivacije izlaznog + <label for="outputLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija aktivacije izlaznog sloja:</label> </div> <div class="col-2"> @@ -367,13 +403,15 @@ </div> <div class="col-1"> </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 b12ff825..ead9049b 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import Model, { NullValReplacer, ReplaceWith } from 'src/app/_data/Model'; +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 { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-load.component'; import { ModelsService } from 'src/app/_services/models.service'; @@ -26,7 +26,9 @@ export class AddModelComponent implements OnInit { ProblemType = ProblemType; Encoding = Encoding; ActivationFunction = ActivationFunction; + activationFunction:any=ActivationFunction LossFunction = LossFunction; + lossFunction : any = LossFunction; Optimizer = Optimizer; NullValueOptions = NullValueOptions; ReplaceWith = ReplaceWith; @@ -50,6 +52,9 @@ export class AddModelComponent implements OnInit { //accepted: Boolean; term: string = ""; + selectedProblemType:string=''; + + constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) { this.newModel = new Model(); @@ -62,6 +67,7 @@ export class AddModelComponent implements OnInit { (<HTMLInputElement>document.getElementById("btnMyDataset")).focus(); } + viewMyDatasetsForm() { this.showMyDatasets = true; this.resetSelectedDataset(); @@ -466,4 +472,24 @@ export class AddModelComponent implements OnInit { } arrayColumn = (arr: any[][], n: number) => [...new Set(arr.map(x => x[n]))]; + + problemtype:string=''; + + filterOptions(){ + switch(this.problemtype){ + case 'regresioni': + this.lossFunction=LossFunctionRegression; + break; + case 'binarni-klasifikacioni': + this.lossFunction=LossFunctionBinaryClassification; + break; + case 'multi-klasifikacioni': + this.lossFunction=LossFunctionMultiClassification; + break; + default: + break; + } + } + + } diff --git a/frontend/src/app/_pages/predict/predict.component.html b/frontend/src/app/_pages/predict/predict.component.html index 74a83b71..67d047b7 100644 --- a/frontend/src/app/_pages/predict/predict.component.html +++ b/frontend/src/app/_pages/predict/predict.component.html @@ -1 +1,60 @@ -<p>predict works!</p> + +<div id="wrapper"> + <br> + <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> + + <div id="header"> + <h1>Iskoristite prediktor</h1> + </div> + + <br> + + <div class="form-group row mt-3 mb-2 d-flex justify-content-center"> + <!--justify-content-center--> + <h2> Izabrani prediktor: </h2> + <div class="col-3"> + <label for="name" class="col-form-label">Naziv prediktora:</label> + <input type="text" class="form-control" name="name" [(ngModel)]="predictor.name"> + </div> + <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)]="predictor.description"></textarea> + </div> + </div> + </div> + + + + <div class="col-3 mt-2"> + <label for="type" class="form-check-label">Da li je prediktor javan?</label> + <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="predictor.isPublic" + type="checkbox" value="" > + </div> + <div class="col-3 mt-2"> + <label for="type" class="form-check-label">Da li je dostupan za deljenje?</label> + <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="predictor.accessibleByLink" + type="checkbox" value="" > + </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="{{predictor.dateCreated | date: 'dd/MM/yyyy'}}" readonly> + </div> + + <!-- + <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;" + (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>
\ No newline at end of file diff --git a/frontend/src/app/_pages/predict/predict.component.ts b/frontend/src/app/_pages/predict/predict.component.ts index 0e313c65..d5cb22bd 100644 --- a/frontend/src/app/_pages/predict/predict.component.ts +++ b/frontend/src/app/_pages/predict/predict.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import Predictor from 'src/app/_data/Predictor'; @Component({ selector: 'app-predict', @@ -7,7 +8,10 @@ import { Component, OnInit } from '@angular/core'; }) export class PredictComponent implements OnInit { - constructor() { } + predictor:Predictor; + constructor() { + this.predictor = new Predictor(); + } ngOnInit(): void { } diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 4efab17e..d514d1f5 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -39,7 +39,6 @@ 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, diff --git a/frontend/src/app/scatterchart/scatterchart.component.ts b/frontend/src/app/scatterchart/scatterchart.component.ts index 1da88fe7..9dfef4c3 100644 --- a/frontend/src/app/scatterchart/scatterchart.component.ts +++ b/frontend/src/app/scatterchart/scatterchart.component.ts @@ -16,7 +16,14 @@ export class ScatterchartComponent implements OnInit { data: { datasets: [{ label: 'Scatter Example:', - data: [{x: 1, y: 11}, {x:2, y:12}, {x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}, {x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9}], + data: [{x: 1, y: 11}, {x:2, y:12}, {x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}, {x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9}, + {x: 11, y: 9}, + {x: 12, y: 8}, + {x: 13, y: 6}, + {x: 14, y: 0}, + {x: 15, y: 5}, + {x: 16, y: 3}, + {x: 17, y: 2}], backgroundColor: 'rgb(255, 99, 132)' }] }, |