From b573b0069512f4444aefdac0a24eb99c8fcb6586 Mon Sep 17 00:00:00 2001 From: Danijel Andjelkovic Date: Thu, 31 Mar 2022 13:48:13 +0200 Subject: Malo sredio add-model stranicu, popravio bug sa prikazom javnih datasetova na naslovnoj strani. ML socket salje poruke za epohe backendu. --- frontend/src/app/_data/Model.ts | 37 ++- .../app/_elements/annvisual/annvisual.component.ts | 46 ++-- .../app/_elements/carousel/carousel.component.html | 5 +- .../app/_elements/carousel/carousel.component.ts | 1 + .../item-dataset/item-dataset.component.html | 3 +- .../notifications/notifications.component.html | 2 +- .../notifications/notifications.component.ts | 2 + .../app/_pages/add-model/add-model.component.html | 280 ++++++++++++--------- .../app/_pages/add-model/add-model.component.ts | 60 ++--- frontend/src/app/_pages/home/home.component.html | 4 +- frontend/src/app/_pages/home/home.component.ts | 8 +- frontend/src/styles.css | 2 +- 12 files changed, 255 insertions(+), 195 deletions(-) (limited to 'frontend') 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'; + digraphstring = digraphstring + inputlayerstring + '->'; - for(let j=0;j'; - 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 @@
-
+
+ + Unknown item type + 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 @@

- + +
{{column}} {{column}}
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 @@ -
+

Notifikacije

\ 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 de024904..67427e8d 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 @@
- +
@@ -65,7 +66,8 @@ -
+
+

Izaberite ulazne kolone:

@@ -120,52 +122,99 @@
-
- - {{column}} ({{calculateSumOfNullValuesInCol(column)}} null) +
+ + {{column}} ({{calculateSumOfNullValuesInCol(column)}} + null) - - - - - - - - + + +
+
+
+
+ +
+ + +
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
-
+
+
- {{column}} ({{calculateSumOfNullValuesInCol(column)}} null) + {{column}} ({{calculateSumOfNullValuesInCol(column)}} + null) - - - + + + + - - - + +
@@ -201,7 +254,7 @@

Parametri treniranja:

- +
@@ -210,9 +263,8 @@
-
- +
@@ -282,7 +334,7 @@
- +
@@ -302,7 +354,7 @@
- +
--> -
-
-
-
- -
-
-
-
- +
+
+
+ +
+
+ trening + + + test +
-
- + +
+
+ +
+
+ +
-
- trening - - - test -
- -

Aktivacione funkcije

- -
-
+ + +

Aktivacione funkcije:

+ +
-
- +
+
+ #{{i+1}} +
+ +
-
-
- -
-
-
-
-
+
-
-
- - -
+

+

@@ -429,7 +478,14 @@
+
+

Rezultati treniranja

+

+ {{trainingResult}} +

+
- \ No newline at end of file + \ 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 ead9049b..95e5fe5f 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -26,9 +26,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; @@ -52,8 +52,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(); @@ -89,6 +91,7 @@ export class AddModelComponent implements OnInit { trainModel() { let saveFunc; + this.trainingResult = undefined; if (!this.showMyDatasets) saveFunc = (x: (arg0: any) => void) => { this.saveModelWithNewDataset(x) }; @@ -99,6 +102,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 } @@ -304,9 +308,9 @@ export class AddModelComponent implements OnInit { refreshThreeNullValueRadioOptions() { //console.log((document.getElementById("delRows")).checked); const input = document.getElementById('delRows'); - console.log(input); // 👉️ input#subscribe + console.log(input); // 👉️ input#subscribe -// ✅ Works + // ✅ Works //input.checked = true; (document.getElementById("delRows")).checked = true; (document.getElementById("delCols")).checked = false; @@ -325,15 +329,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 ''; @@ -347,7 +351,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; @@ -372,8 +376,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; } @@ -386,7 +390,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; @@ -407,7 +411,7 @@ export class AddModelComponent implements OnInit { else { if (value == colName) (document.getElementById("fillText_" + colName)).value = ""; - else + else (document.getElementById("fillText_" + colName)).value = value; } } @@ -426,8 +430,8 @@ export class AddModelComponent implements OnInit { (document.getElementById("fillText_" + colName)).value = ""; } - - getNullValuesReplacersArray() : NullValReplacer[] { + + getNullValuesReplacersArray(): NullValReplacer[] { let array: NullValReplacer[] = []; if (this.datasetFile) { @@ -459,7 +463,7 @@ export class AddModelComponent implements OnInit { value: (document.getElementById("fillText_" + column)).value }); } - } + } } } } @@ -473,23 +477,21 @@ export class AddModelComponent implements OnInit { arrayColumn = (arr: any[][], n: number) => [...new Set(arr.map(x => x[n]))]; - 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 @@

Pogledajte javne izvore podataka!

- +

Pogledaj sve javne izvore podataka...

Iskoristite već trenirane modele!

- +

Pogledaj sve javne trenirane modele...

\ 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] = (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 -- cgit v1.2.3