From 83cb0c2fed711380f6fffe4fa922e4798db8fbc5 Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Tue, 24 May 2022 22:15:37 +0200 Subject: Kada se obrise fajl prelazi se na tab My"FileType". --- backend/api/api/.config/dotnet-tools.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 backend/api/api/.config/dotnet-tools.json (limited to 'backend') diff --git a/backend/api/api/.config/dotnet-tools.json b/backend/api/api/.config/dotnet-tools.json new file mode 100644 index 00000000..e80b80ff --- /dev/null +++ b/backend/api/api/.config/dotnet-tools.json @@ -0,0 +1,12 @@ +{ + "version": 1, + "isRoot": true, + "tools": { + "dotnet-ef": { + "version": "6.0.5", + "commands": [ + "dotnet-ef" + ] + } + } +} \ No newline at end of file -- cgit v1.2.3 From 305dac6f0e327a2582dc4f93e83794b5169d7c8f Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Wed, 25 May 2022 23:45:24 +0200 Subject: Popravio dosta bugova vezane za prebacivanje izmedju novog dataseta, i postojeceg dataseta, isto i za modele, u folderu. Popravio presporo prebacivanje sa jednog taba na drugi u folderu. Popravio pogresan tip stope normalizacije na backendu. --- .gitignore | 2 + backend/api/api/Models/Model.cs | 4 +- backend/api/api/Services/FillAnEmptyDb.cs | 36 ++--- .../src/app/_elements/folder/folder.component.html | 19 ++- .../src/app/_elements/folder/folder.component.ts | 160 ++++++++++++--------- .../_elements/form-model/form-model.component.html | 2 +- 6 files changed, 129 insertions(+), 94 deletions(-) (limited to 'backend') diff --git a/.gitignore b/.gitignore index 247afbd9..e11b4739 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,5 @@ backend/microservice/api/__pycache__/ production/app/node_modules/ production/app/dist/ backend/microservice/api/temp/ +backend/microservice/Boston.csv +backend/microservice/diamonds.csv diff --git a/backend/api/api/Models/Model.cs b/backend/api/api/Models/Model.cs index bbbf201e..6278cf8a 100644 --- a/backend/api/api/Models/Model.cs +++ b/backend/api/api/Models/Model.cs @@ -44,7 +44,7 @@ namespace api.Models { - public Layer(int layerNumber, string activationFunction, int neurons, string regularisation, float regularisationRate) + public Layer(int layerNumber, string activationFunction, int neurons, string regularisation, string regularisationRate) { this.layerNumber = layerNumber; this.activationFunction = activationFunction; @@ -57,7 +57,7 @@ namespace api.Models public string activationFunction { get; set; } public int neurons { get; set; } public string regularisation { get; set; } - public float regularisationRate { get; set; } + public string regularisationRate { get; set; } } } diff --git a/backend/api/api/Services/FillAnEmptyDb.cs b/backend/api/api/Services/FillAnEmptyDb.cs index cd35dc78..c74de67d 100644 --- a/backend/api/api/Services/FillAnEmptyDb.cs +++ b/backend/api/api/Services/FillAnEmptyDb.cs @@ -117,10 +117,10 @@ namespace api.Services model.outputNeurons = 0; model.layers = new[] { - new Layer ( 0,"sigmoid", 3,"l1", 1f ), - new Layer ( 1,"sigmoid", 3,"l1", 1f ), - new Layer ( 2,"sigmoid", 3,"l1", 1f ), - new Layer ( 3,"sigmoid", 3,"l1", 1f ), + new Layer ( 0,"sigmoid", 3,"l1", "0" ), + new Layer ( 1,"sigmoid", 3,"l1", "0" ), + new Layer ( 2,"sigmoid", 3,"l1", "0" ), + new Layer ( 3,"sigmoid", 3,"l1", "0" ), }; model.outputLayerActivationFunction = "sigmoid"; model.metrics = new string[] { }; @@ -281,11 +281,11 @@ namespace api.Services model.outputNeurons = 0; model.layers = new[] { - new Layer ( 0,"softmax", 3,"l1", 3f ), - new Layer ( 1,"softmax", 3,"l1", 3f ), - new Layer ( 2,"softmax", 3,"l1", 3f ), - new Layer ( 3,"softmax", 3,"l1", 3f ), - new Layer ( 4,"softmax", 3,"l1", 3f ) + new Layer ( 0,"softmax", 3,"l1", "0" ), + new Layer ( 1,"softmax", 3,"l1", "0" ), + new Layer ( 2,"softmax", 3,"l1", "0" ), + new Layer ( 3,"softmax", 3,"l1", "0" ), + new Layer ( 4,"softmax", 3,"l1", "0" ) }; model.outputLayerActivationFunction = "softmax"; model.metrics = new string[] { }; @@ -435,9 +435,9 @@ namespace api.Services model.outputNeurons = 0; model.layers = new[] { - new Layer ( 0,"relu", 3,"l1", 1f ), - new Layer ( 1,"relu", 3,"l1", 1f ), - new Layer ( 2,"relu", 3,"l1", 1f ) + new Layer ( 0,"relu", 3,"l1", "0" ), + new Layer ( 1,"relu", 3,"l1", "0" ), + new Layer ( 2,"relu", 3,"l1", "0" ) }; model.outputLayerActivationFunction = "relu"; model.metrics = new string[] { }; @@ -593,10 +593,10 @@ namespace api.Services model.outputNeurons = 0; model.layers = new[] { - new Layer ( 0,"sigmoid", 3,"l1", 1f ), - new Layer ( 1,"sigmoid", 3,"l1", 1f ), - new Layer ( 2,"sigmoid", 3,"l1", 1f ), - new Layer ( 3,"sigmoid", 3,"l1", 1f ) + new Layer ( 0,"sigmoid", 3,"l1", "0" ), + new Layer ( 1,"sigmoid", 3,"l1", "0" ), + new Layer ( 2,"sigmoid", 3,"l1", "0" ), + new Layer ( 3,"sigmoid", 3,"l1", "0" ) }; model.outputLayerActivationFunction = "sigmoid"; model.metrics = new string[] { }; @@ -748,8 +748,8 @@ namespace api.Services model.outputNeurons = 0; model.layers = new[] { - new Layer ( 0,"relu", 3,"l1", 1f ), - new Layer ( 1,"relu", 3,"l1", 1f ) + new Layer ( 0,"relu", 3,"l1", "0" ), + new Layer ( 1,"relu", 3,"l1", "0" ) }; model.outputLayerActivationFunction = "relu"; model.metrics = new string[] { }; diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index afb6085d..ebee92d2 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -58,8 +58,13 @@
- - + + + + + +
@@ -105,7 +110,7 @@
-
+
@@ -152,17 +157,17 @@
- - -
+
- +
\ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index 93ef9043..de1dfae9 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -23,8 +23,10 @@ import isEqual from 'lodash.isequal'; }) export class FolderComponent implements AfterViewInit { - @ViewChild(FormDatasetComponent) formDataset!: FormDatasetComponent; - @ViewChild(FormModelComponent) formModel!: FormModelComponent; + @ViewChild('selectedDataset') formDataset!: FormDatasetComponent; + @ViewChild('selectedModel') formModel!: FormModelComponent; + @ViewChild('newDataset') formNewDataset!: FormDatasetComponent; + @ViewChild('newModel') formNewModel!: FormModelComponent; @Input() folderName: string = 'Moji podaci'; @Input() files!: FolderFile[] @@ -41,8 +43,6 @@ export class FolderComponent implements AfterViewInit { selectedFile?: FolderFile; hoveringOverFileIndex: number = -1; - fileToDisplay?: FolderFile; - @Output() selectedFileChanged: EventEmitter = new EventEmitter(); @Output() fileFromRoute: EventEmitter = new EventEmitter(); @Output() okPressed: EventEmitter = new EventEmitter(); @@ -68,59 +68,70 @@ export class FolderComponent implements AfterViewInit { } displayFile() { - if (this.type == FolderType.Dataset) { - this.formDataset.dataset = this.fileToDisplay; - this.formDataset.existingFlag = false; - } - else if (this.type == FolderType.Model) - this.formModel.newModel = this.fileToDisplay; - } - - hoverOverFile(i: number) { - /*this.hoveringOverFileIndex = i; - if (i != -1) { - this.fileToDisplay = this.files[i]; + if (this.newFileSelected) { + if (this.type == FolderType.Dataset) { + this.formNewDataset.dataset = this.newFile; + this.formNewDataset.existingFlag = false; + } + else if (this.type == FolderType.Model) + this.formNewModel.newModel = this.newFile; } else { - if (this.newFileSelected) { - this.fileToDisplay = this.newFile; - } else { - this.fileToDisplay = this.files[this.selectedFileIndex]; + if (this.type == FolderType.Dataset) { + this.formDataset.dataset = this.selectedFile; + this.formDataset.existingFlag = false; } + else if (this.type == FolderType.Model) + this.formModel.newModel = this.selectedFile; } - this.displayFile();*/ } selectNewFile() { if (!this.newFile) { this.createNewFile(); } - this.fileToDisplay = this.newFile; this.newFileSelected = true; this.listView = false; this.displayFile(); + + this.selectedTab = TabType.NewFile; + if (this.type == FolderType.Dataset) { - this.formDataset.clear(); + this.formNewDataset.clear(); } } selectFile(file?: FolderFile) { this.formDataset.resetPagging(); this.selectedFile = file; - Object.assign(this.lastFileData, this.selectedFile); - this.fileToDisplay = file; + this.updateLastFileData(file); if (this.type == FolderType.Experiment && file) { this.router.navigate(['/experiment/' + file._id]); } this.newFileSelected = false; this.listView = false; this.selectedFileChanged.emit(this.selectedFile); - this.selectTab(TabType.File); this.displayFile(); + this.selectedTab = TabType.File; + if (this.type == FolderType.Dataset) this.formDataset.loadExisting(); } + updateLastFileData(file: FolderFile | undefined) { + if (!file) return; + + Object.assign(this.lastFileData, file); + if (this.type == FolderType.Model) { + const lastModel = (this.lastFileData) + lastModel.layers = []; + (file).layers.forEach(layer => { + const clone = Object.assign({}, layer); + lastModel.layers.push(clone); + }) + } + } + goToExperimentPageWithPredictor(file: FolderFile, predictor: Predictor) { this.router.navigate(['/experiment/p/' + predictor._id]); } @@ -172,7 +183,7 @@ export class FolderComponent implements AfterViewInit { if (!this._initialized) { this.files = this.folders[this.startingTab]; this.filteredFiles = []; - this.selectTab(this.startingTab); + setTimeout(() => this.selectTab(this.startingTab)); this._initialized = true; } } @@ -238,7 +249,7 @@ export class FolderComponent implements AfterViewInit { this.loadingAction = true; switch (this.type) { case FolderType.Dataset: - this.formDataset!.uploadDataset((dataset: Dataset) => { + this.formNewDataset!.uploadDataset((dataset: Dataset) => { this.newFile = undefined; this.loadingAction = false; this.okPressed.emit(); @@ -250,7 +261,7 @@ export class FolderComponent implements AfterViewInit { }); break; case FolderType.Model: - this.formModel.newModel.type = this.formModel.forProblemType; + this.formNewModel.newModel.type = this.formModel.forProblemType; this.modelsService.addModel(this.formModel.newModel).subscribe(model => { this.newFile = undefined; this.loadingAction = false; @@ -300,10 +311,29 @@ export class FolderComponent implements AfterViewInit { onFileChange() { setTimeout(() => { - this.selectedFileHasChanges = !((this.selectedTab == TabType.NewFile) || isEqual(this.selectedFile, this.lastFileData)); + this.selectedFileHasChanges = !((this.selectedTab == TabType.NewFile) || this.checkFileDataEqualToLastFileData()); }); } + checkFileDataEqualToLastFileData() { + if (this.type == FolderType.Model) { + let layersEqual = true; + const oldModel = (this.lastFileData); + const selectedModel = (this.selectedFile) + const oldLayers = oldModel.layers; + oldModel.layers = selectedModel.layers; + const objEqual = isEqual(this.selectedFile, oldModel); + oldLayers.forEach((layer, index) => { + if (!isEqual(layer, selectedModel.layers[index])) { + layersEqual = false; + } + }); + return objEqual && layersEqual; + } else { + return isEqual(this.selectedFile, this.lastFileData); + } + } + updateFile() { const file = this.selectedFile; this.loadingAction = true; @@ -324,7 +354,7 @@ export class FolderComponent implements AfterViewInit { fileUpdatedSuccess() { this.loadingAction = false; this.selectedFileHasChanges = false; - Object.assign(this.lastFileData, this.selectedFile); + this.updateLastFileData(this.selectedFile); this.refreshFiles(); this.selectedFileChanged.emit(this.selectedFile); } @@ -336,16 +366,16 @@ export class FolderComponent implements AfterViewInit { case FolderType.Dataset: const dataset = file; Shared.openYesNoDialog("Obriši izvor podataka", "Eksperimenti i trenirani modeli nad ovim izvorom podataka će takođe biti obrisani, da li ste sigurni da želite da obrišete izvor: " + dataset.name + "?", () => { - if(this.selectedTab==TabType.MyDatasets){ - this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1); - this.files.splice(this.files.indexOf(file), 1); + if (this.selectedTab == TabType.MyDatasets) { + this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1); + this.files.splice(this.files.indexOf(file), 1); } this.loadingAction = true; this.datasetsService.deleteDataset(dataset).subscribe((response) => { this.loadingAction = false; - if(this.selectedTab==TabType.File){ + if (this.selectedTab == TabType.File) { this.refreshDatasets(null); - this.selectedFile=undefined!; + this.selectedFile = undefined!; setTimeout(() => { this.selectTab(TabType.MyDatasets); }); @@ -357,16 +387,16 @@ export class FolderComponent implements AfterViewInit { case FolderType.Model: const model = file; Shared.openYesNoDialog("Obriši konfiguraciju neuronske mreže", "Trenirani modeli za ovu konfiguraciju će takođe biti obrisani, da li ste sigurni da želite da obrišete konfiguraciju: " + model.name + "?", () => { - if(this.selectedTab==TabType.MyModels){ - this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1); - this.files.splice(this.files.indexOf(file), 1); + if (this.selectedTab == TabType.MyModels) { + this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1); + this.files.splice(this.files.indexOf(file), 1); } this.loadingAction = true; this.modelsService.deleteModel(file).subscribe((response) => { this.loadingAction = false; - if(this.selectedTab==TabType.File){ + if (this.selectedTab == TabType.File) { this.refreshModels(null); - this.selectedFile=undefined!; + this.selectedFile = undefined!; setTimeout(() => { this.selectTab(TabType.MyModels); }); @@ -389,20 +419,20 @@ export class FolderComponent implements AfterViewInit { } else { const experiment = file; Shared.openYesNoDialog("Obriši eksperiment", "Trenirani modeli za ovaj eksperiment će takođe biti obrisani, da li ste sigurni da želite da obrišete eksperiment: " + experiment.name + "?", () => { - if(this.selectedTab==TabType.MyExperiments){ - this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1); - this.files.splice(this.files.indexOf(file), 1); + if (this.selectedTab == TabType.MyExperiments) { + this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1); + this.files.splice(this.files.indexOf(file), 1); } this.loadingAction = true; this.experimentsService.deleteExperiment(experiment).subscribe((response) => { - this.loadingAction = false; - if(this.selectedTab==TabType.File){ - this.refreshExperiments(); - this.selectedFile=undefined!; - setTimeout(() => { - this.selectTab(TabType.MyExperiments); - }); - } + this.loadingAction = false; + if (this.selectedTab == TabType.File) { + this.refreshExperiments(); + this.selectedFile = undefined!; + setTimeout(() => { + this.selectTab(TabType.MyExperiments); + }); + } }); }); } @@ -489,21 +519,19 @@ export class FolderComponent implements AfterViewInit { hoverTab: TabType = TabType.None; selectTab(tab: TabType) { - setTimeout(() => { - if (tab == TabType.NewFile) { - this.selectNewFile(); - this.selectedFile=undefined!; - } - - this.listView = this.getListView(tab); - this.type = this.getFolderType(tab); - this.privacy = this.getPrivacy(tab); - this.selectedTab = tab; - this.files = this.folders[tab]; + if (tab == TabType.NewFile) { + this.selectNewFile(); + } else if (tab == TabType.File) { + this.selectFile(this.selectedFile); + } + this.listView = this.getListView(tab); + this.type = this.getFolderType(tab); + this.privacy = this.getPrivacy(tab); + this.selectedTab = tab; + this.files = this.folders[tab]; - if (tab !== TabType.File && tab !== TabType.NewFile) - this.searchTermsChanged(); - }); + if (tab !== TabType.File && tab !== TabType.NewFile) + this.searchTermsChanged(); } getListView(tab: TabType) { diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html index 1133eb52..9051a2d4 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -229,7 +229,7 @@ Stopa regularizacije - + {{ optionName }} -- cgit v1.2.3 From ec6816d0d9a737f9fe70ec8d77f15afcd4720354 Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Thu, 26 May 2022 00:58:36 +0200 Subject: Ispravljen raspored prikaza metrika, svaka vrednost i odgovarajuća vrednost na validacionom skupu se prikazuju na pojedinačnom grafiku. Metrike su filtrirane u zavisnosti od tipa problema. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/microservice/api/newmlservice.py | 13 +- .../_charts/line-chart/line-chart.component.css | 12 +- .../_charts/line-chart/line-chart.component.html | 26 ++- .../_charts/line-chart/line-chart.component.ts | 249 +++++++++++++++++++-- .../metric-view/metric-view.component.html | 21 +- .../_pages/experiment/experiment.component.html | 7 +- .../app/_pages/experiment/experiment.component.ts | 7 +- 7 files changed, 285 insertions(+), 50 deletions(-) (limited to 'backend') diff --git a/backend/microservice/api/newmlservice.py b/backend/microservice/api/newmlservice.py index 99e3cae5..943e18a1 100644 --- a/backend/microservice/api/newmlservice.py +++ b/backend/microservice/api/newmlservice.py @@ -1,3 +1,4 @@ +from cmath import nan from enum import unique from itertools import count import os @@ -374,13 +375,15 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): - classifier.compile(loss =paramsModel["lossFunction"] , optimizer =opt, metrics = ['accuracy','mae','mse']) + classifier.compile(loss =paramsModel["lossFunction"] , optimizer =opt, metrics = ['accuracy']) history=classifier.fit( x=x_train, y=y_train, epochs = paramsModel['epochs'],batch_size=int(paramsModel['batchSize']),callbacks=callback(x_test, y_test,paramsModel['_id']),validation_data=(x_val, y_val)) hist=history.history #plt.plot(hist['accuracy']) - #plt.show() + plt.plot(history.history['loss']) + plt.plot(history.history['val_loss']) + plt.show() y_pred=classifier.predict(x_test) y_pred=np.argmax(y_pred,axis=1) @@ -410,7 +413,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): #from ann_visualizer.visualize import ann_viz; #ann_viz(classifier, title="My neural network") - return filepath,[hist['loss'],hist['val_loss'],hist['accuracy'],hist['val_accuracy'],hist['mae'],hist['val_mae'],hist['mse'],hist['val_mse']] + return filepath,[hist['loss'],hist['val_loss'],hist['accuracy'],hist['val_accuracy'],[],[],[],[]] elif(problem_type=='binarni-klasifikacioni'): #print('*************************************************************************binarni') @@ -444,7 +447,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): classifier.add(tf.keras.layers.Dense(units=1, activation=paramsModel['outputLayerActivationFunction']))#izlazni sloj - classifier.compile(loss =paramsModel["lossFunction"] , optimizer =opt , metrics = ['accuracy','mae','mse']) + classifier.compile(loss =paramsModel["lossFunction"] , optimizer =opt , metrics = ['accuracy']) history=classifier.fit( x=x_train, y=y_train, epochs = paramsModel['epochs'],batch_size=int(paramsModel['batchSize']),callbacks=callback(x_test, y_test,paramsModel['_id']),validation_data=(x_val, y_val)) hist=history.history @@ -468,7 +471,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): logloss = float(sm.log_loss(y_test, y_pred)) """ - return filepath,[hist['loss'],hist['val_loss'],hist['accuracy'],hist['val_accuracy'],hist['mae'],hist['val_mae'],hist['mse'],hist['val_mse']] + return filepath,[hist['loss'],hist['val_loss'],hist['accuracy'],hist['val_accuracy'],[],[],[],[]] elif(problem_type=='regresioni'): reg=paramsModel['layers'][0]['regularisation'] diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css index 2eea561e..ea150b0f 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css @@ -1,11 +1,17 @@ canvas{ width:100% !important; - height:90% !important; + height:100% !important; border: 1px solid var(--ns-primary); background-color: var(--ns-bg-dark-100); border-radius: 5px; - margin: 10px; + margin: 0; font-size: 11 !important; + padding: 10px; } - \ No newline at end of file +.ns-col{ + margin: 5px; +} +.hide{ + display: none; +} diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html index 1c711562..e36d0dcf 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html @@ -1,4 +1,24 @@ -
- - +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+ +
+
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts index 7d21129c..acba7201 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts @@ -1,5 +1,7 @@ -import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core'; +import { Component, AfterViewInit, ElementRef, ViewChild, Input } from '@angular/core'; import { Chart } from 'chart.js'; +import Experiment from 'src/app/_data/Experiment'; +import Model, { ProblemType } from 'src/app/_data/Model'; @Component({ selector: 'app-line-chart', @@ -23,14 +25,18 @@ export class LineChartComponent implements AfterViewInit { wrapper!: ElementRef; @ViewChild('canvas') canvas!: ElementRef; - + @Input() experiment!:Experiment; constructor() { } width = 700; height = 400; - - myChart!: Chart; + history: any[] = []; + myChartAcc!: Chart; + myChartMae!: Chart; + myChartMse!: Chart; + myChartLoss!: Chart; + ProblemType=ProblemType; resize() { this.width = this.wrapper.nativeElement.offsetWidth; this.height = this.wrapper.nativeElement.offsetHeight; @@ -69,14 +75,69 @@ export class LineChartComponent implements AfterViewInit { this.dataValMSE.length = 0; this.dataValMSE.push(...myValMse); - this.myChart.update(); + this.myChartAcc.update(); + this.myChartLoss.update(); + this.myChartMae.update(); + this.myChartMse.update(); } + updateAll(history: any[],totalEpochs:number) { + const myAcc: number[] = []; + const myMae: number[] = []; + const myMse: number[] = []; + const myLoss: number[] = []; + const myValLoss: number[] = []; + const myValAcc: number[] = []; + const myValMAE: number[] = []; + const myValMSE: number[] = []; + + const myEpochs: number[] = []; + this.history = history; + this.history.forEach((metrics, epoch) => { + if(totalEpochs>100) + { + let epochEstimate=epoch*Math.round(Math.sqrt(totalEpochs)) + if(epochEstimate>totalEpochs) + epochEstimate=totalEpochs; + myEpochs.push(epochEstimate); + } + else + myEpochs.push(epoch + 1); + for (let key in metrics) { + let value = metrics[key]; + if (key === 'accuracy') { + myAcc.push(parseFloat(value)); + } + else if (key === 'loss') { + myLoss.push(parseFloat(value)); + } + else if (key === 'mae') { + myMae.push(parseFloat(value)); + } + else if (key === 'mse') { + myMse.push(parseFloat(value)); + } + else if (key === 'val_acc') { + myValAcc.push(parseFloat(value)); + } + else if (key === 'val_loss') { + myValLoss.push(parseFloat(value)); + } + else if (key === 'val_mae') { + myValMAE.push(parseFloat(value)); + } + else if (key === 'val_mse') { + myValMSE.push(parseFloat(value)); + } + } + }); + this.update(myEpochs, myAcc, myLoss, myMae, myMse, myValAcc,myValLoss,myValMAE,myValMSE); + } ngAfterViewInit(): void { window.addEventListener('resize', () => { this.resize() }); this.resize(); - this.myChart = new Chart("myChart", + this.myChartAcc = new Chart("myChartacc", { type: 'line', data: { @@ -92,7 +153,59 @@ export class LineChartComponent implements AfterViewInit { label: 'Val_Accuracy', data: this.dataValAcc, borderWidth: 1 + } + ] + }, + options: { + responsive: true, + maintainAspectRatio: true, + + plugins: { + legend: { + labels: { + // This more specific font property overrides the global property + color:'white', + font: { + size: 10 + } + } + } + }, + scales: { + x: { + ticks: { + color: 'white' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + }, + }, + y: { + beginAtZero: true, + ticks: { + color: 'white' + + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + } + }, + animation: { + duration: 0 + } + + } + }, + + ); + this.myChartLoss = new Chart("myChartloss", + { + type: 'line', + data: { + labels: this.dataEpoch, + datasets: [ { label: 'Loss', data: this.dataLOSS, @@ -103,16 +216,58 @@ export class LineChartComponent implements AfterViewInit { data: this.dataValLoss, borderWidth: 1 }, - { - label: 'MAE', - data: this.dataMAE, - borderWidth: 1 + ] + }, + options: { + responsive: true, + maintainAspectRatio: true, + + plugins: { + legend: { + labels: { + // This more specific font property overrides the global property + color:'white', + font: { + size: 10 + } + } + } }, - { - label: 'Val_MAE', - data: this.dataValMAE, - borderWidth: 1 + scales: { + x: { + ticks: { + color: 'white' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + }, + }, + y: { + beginAtZero: true, + ticks: { + color: 'white' + + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + } + }, + animation: { + duration: 0 + } + + } + }, + + ); + this.myChartMse = new Chart("myChartmse", + { + type: 'line', + data: { + labels: this.dataEpoch, + datasets: [ { label: 'MSE', data: this.dataMSE, @@ -166,8 +321,72 @@ export class LineChartComponent implements AfterViewInit { } } - } + }, + ); + this.myChartMae = new Chart("myChartmae", + { + type: 'line', + data: { + labels: this.dataEpoch, + datasets: [ + { + label: 'MAE', + data: this.dataMAE, + borderWidth: 1 + }, + { + label: 'Val_MAE', + data: this.dataValMAE, + borderWidth: 1 + }, + ] + }, + options: { + responsive: true, + maintainAspectRatio: true, + + plugins: { + legend: { + labels: { + // This more specific font property overrides the global property + color:'white', + font: { + size: 10 + } + } + } + }, + scales: { + x: { + ticks: { + color: 'white' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + }, + }, + y: { + beginAtZero: true, + ticks: { + color: 'white' + + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + } + + }, + animation: { + duration: 0 + } + + } + }, + + ); + } } diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.html b/frontend/src/app/_elements/metric-view/metric-view.component.html index 2ab0a425..139597f9 100644 --- a/frontend/src/app/_elements/metric-view/metric-view.component.html +++ b/frontend/src/app/_elements/metric-view/metric-view.component.html @@ -1,21 +1,2 @@ - - - + diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 17a6539d..b11729a7 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -67,7 +67,12 @@
- + +
+
+
+
+
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index ec4275fa..ff17500a 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -15,6 +15,7 @@ import { MetricViewComponent } from 'src/app/_elements/metric-view/metric-view.c import { ActivatedRoute, Router } from '@angular/router'; import { DatasetsService } from 'src/app/_services/datasets.service'; import { PredictorsService } from 'src/app/_services/predictors.service'; +import { LineChartComponent } from 'src/app/_elements/_charts/line-chart/line-chart.component'; @Component({ selector: 'app-experiment', @@ -33,7 +34,7 @@ export class ExperimentComponent implements AfterViewInit { @ViewChild("folderDataset") folderDataset!: FolderComponent; @ViewChild(ColumnTableComponent) columnTable!: ColumnTableComponent; @ViewChild("folderModel") folderModel!: FolderComponent; - @ViewChild("metricView") metricView!: MetricViewComponent; + @ViewChild(LineChartComponent) linechartComponent!: LineChartComponent; step1: boolean = false; step2: boolean = false; @@ -89,7 +90,7 @@ export class ExperimentComponent implements AfterViewInit { if (this.modelToTrain?._id == mId) { stat = stat.replace(/'/g, '"'); this.history.push(JSON.parse(stat)); - this.metricView.update(this.history,this.modelToTrain.epochs); + this.linechartComponent.updateAll(this.history,this.modelToTrain.epochs); } }); @@ -115,7 +116,7 @@ export class ExperimentComponent implements AfterViewInit { this.step3 = true; let numOfEpochsArray = Array.from({length: model.epochs}, (_, i) => i + 1); setTimeout(() => { - this.metricView.linechartComponent.update(numOfEpochsArray, predictor.metricsAcc, predictor.metricsLoss, predictor.metricsMae, predictor.metricsMse, predictor.metricsValAcc, predictor.metricsValLoss, predictor.metricsValMae, predictor.metricsValMse); + this.linechartComponent.update(numOfEpochsArray, predictor.metricsAcc, predictor.metricsLoss, predictor.metricsMae, predictor.metricsMse, predictor.metricsValAcc, predictor.metricsValLoss, predictor.metricsValMae, predictor.metricsValMse); }) }); }); -- cgit v1.2.3 From 60782001174dc7f6f8f5670bff5aaca54667b734 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 4 Jun 2022 01:17:55 +0200 Subject: Dodao poredjenje modela/prediktora nad eksperimentom. Popravio bug sa dodavanjem novog prediktora. --- backend/api/api/Controllers/PredictorController.cs | 22 ++++--- backend/microservice/api/controller.py | 5 +- .../_charts/line-chart/line-chart.component.css | 2 +- .../_charts/line-chart/line-chart.component.html | 15 ++--- .../_charts/line-chart/line-chart.component.ts | 23 +++++-- .../app/_pages/experiment/experiment.component.css | 30 +++++++++ .../_pages/experiment/experiment.component.html | 19 ++++-- .../app/_pages/experiment/experiment.component.ts | 71 ++++++++++++++++++++-- 8 files changed, 154 insertions(+), 33 deletions(-) (limited to 'backend') diff --git a/backend/api/api/Controllers/PredictorController.cs b/backend/api/api/Controllers/PredictorController.cs index 6ff7746a..56095553 100644 --- a/backend/api/api/Controllers/PredictorController.cs +++ b/backend/api/api/Controllers/PredictorController.cs @@ -21,7 +21,7 @@ namespace api.Controllers private readonly IHubContext _ichat; private readonly IModelService _modelService; - public PredictorController(IPredictorService predictorService, IConfiguration configuration, IJwtToken Token, IMlConnectionService mlConnectionService, IExperimentService experimentService,IUserService userService, IHubContext ichat,IModelService modelService) + public PredictorController(IPredictorService predictorService, IConfiguration configuration, IJwtToken Token, IMlConnectionService mlConnectionService, IExperimentService experimentService, IUserService userService, IHubContext ichat, IModelService modelService) { _predictorService = predictorService; jwtToken = Token; @@ -78,7 +78,7 @@ namespace api.Controllers //public ActionResult> Search(string name) //{ // string username = getUsername(); - + // if (username == null) // return BadRequest(); @@ -138,7 +138,7 @@ namespace api.Controllers List lista = _predictorService.SortPredictors(userId, ascdsc, latest); - if(latest == 0) + if (latest == 0) return lista; else { @@ -155,19 +155,23 @@ namespace api.Controllers [HttpPost("add")] public async Task> Post([FromBody] Predictor predictor) { - var user=_userService.GetUserById(predictor.uploaderId); + var user = _userService.GetUserById(predictor.uploaderId); predictor.dateCreated = DateTime.Now.ToUniversalTime(); var model = _modelService.GetOneModel(predictor.modelId); - if (model == null || user==null) + if (model == null || user == null) return BadRequest("Model not found or user doesnt exist"); - Predictor p=_predictorService.Exists(predictor.modelId, predictor.experimentId); - if (p == null) + Predictor p = _predictorService.Exists(predictor.modelId, predictor.experimentId); + + if (p == null) { _predictorService.Create(predictor); - else + } + else { + predictor._id = p._id; _predictorService.Update(p._id, predictor); + } if (ChatHub.CheckUser(user._id)) foreach(var connection in ChatHub.getAllConnectionsOfUser(user._id)) - await _ichat.Clients.Client(connection).SendAsync("NotifyPredictor", predictor._id,model.name); + await _ichat.Clients.Client(connection).SendAsync("NotifyPredictor", predictor._id, model._id); return CreatedAtAction(nameof(Get), new { id = predictor._id }, predictor); } diff --git a/backend/microservice/api/controller.py b/backend/microservice/api/controller.py index c82634a2..bc8c17a0 100644 --- a/backend/microservice/api/controller.py +++ b/backend/microservice/api/controller.py @@ -1,3 +1,4 @@ +from asyncio.windows_events import NULL from cmath import log from dataclasses import dataclass from distutils.command.upload import upload @@ -112,12 +113,12 @@ def train(): "metricsMse":histMetrics[6], "metricsValMse":histMetrics[7] } - #print(predictor) + print(predictor) url = config.api_url + "/Predictor/add" r = requests.post(url, json=predictor).text - #print(r) + print(r) return r @app.route('/predict', methods = ['POST']) diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css index 9694119d..862a86e1 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css @@ -4,7 +4,7 @@ } .bottom { - height: 10%; + height: 30px; } canvas { diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html index a81f9dc4..cc1c0121 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html @@ -1,28 +1,29 @@ -
+
- +
- +
- +
- +
-
-
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts index ceff02bd..b2eec377 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts @@ -26,8 +26,12 @@ export class LineChartComponent implements AfterViewInit { @ViewChild('wrapper') wrapper!: ElementRef; - @ViewChildren('canvas') - canvas!: QueryList; + + @ViewChild('myChartacc') myChartacc!: ElementRef; + @ViewChild('myChartloss') myChartloss!: ElementRef; + @ViewChild('myChartmse') myChartmse!: ElementRef; + @ViewChild('myChartmae') myChartmae!: ElementRef; + @Input() experiment!: Experiment; @Input() predictor?: Predictor; @@ -149,7 +153,7 @@ export class LineChartComponent implements AfterViewInit { window.addEventListener('resize', () => { this.resize() }); this.resize(); - this.myChartAcc = new Chart("myChartacc", + this.myChartAcc = new Chart(this.myChartacc.nativeElement, { type: 'line', data: { @@ -222,7 +226,7 @@ export class LineChartComponent implements AfterViewInit { ); if (this.experiment.type == ProblemType.BinaryClassification || this.experiment.type == ProblemType.MultiClassification) { } - this.myChartLoss = new Chart("myChartloss", + this.myChartLoss = new Chart(this.myChartloss.nativeElement, { type: 'line', data: { @@ -294,7 +298,7 @@ export class LineChartComponent implements AfterViewInit { }, ); - this.myChartMse = new Chart("myChartmse", + this.myChartMse = new Chart(this.myChartmse.nativeElement, { type: 'line', data: { @@ -366,7 +370,7 @@ export class LineChartComponent implements AfterViewInit { }, ); - this.myChartMae = new Chart("myChartmae", + this.myChartMae = new Chart(this.myChartmae.nativeElement, { type: 'line', data: { @@ -440,5 +444,12 @@ export class LineChartComponent implements AfterViewInit { ); } + + modelName: string = ''; + + setName(name: string) { + this.modelName = name; + this.predictor = undefined; + } } diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css index 59e004e9..37edd3c2 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.css +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -74,4 +74,34 @@ mat-stepper { .text-overflow-experiment-name { overflow-wrap: break-word; +} + +#compareButton { + position: absolute; + top: 10px; + right: 10px; +} + +.side-by-side { + display: flex; + flex-direction: row; + width: 100%; + height: 100%; +} + + +/* one item */ + +.side-by-side>*:first-child:nth-last-child(1) { + /* -or- li:only-child { */ + width: 100%; +} + + +/* two items */ + +.side-by-side>*:first-child:nth-last-child(2), +.side-by-side>*:first-child:nth-last-child(2)~li { + width: 50%; + margin: 5px; } \ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 2e5a269c..a0ed26ef 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -25,10 +25,10 @@ Predvideti:{{experiment.outputColumn}} lock - Odabir kolona + Priprema podataka -

Pripremite podatke i izaberite izlazne kolone

+

Pripremite podatke i odaberite ulazne i izlaznu kolonu

 @@ -62,12 +62,23 @@
- +
+ + +
+
+ + +
- +
+ + +