diff options
Diffstat (limited to 'frontend/src/app/_elements')
5 files changed, 121 insertions, 46 deletions
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.ts b/frontend/src/app/_elements/line-chart/line-chart.component.ts index 68663861..1a8579a0 100644 --- a/frontend/src/app/_elements/line-chart/line-chart.component.ts +++ b/frontend/src/app/_elements/line-chart/line-chart.component.ts @@ -1,6 +1,6 @@ -import { Component, OnInit,Input } from '@angular/core'; -import { BaseChartDirective } from 'ng2-charts'; -import {Chart} from 'chart.js'; +import { Component, OnInit, Input } from '@angular/core'; +import { Chart } from 'chart.js'; + @Component({ selector: 'app-line-chart', templateUrl: './line-chart.component.html', @@ -8,32 +8,81 @@ import {Chart} from 'chart.js'; }) export class LineChartComponent implements OnInit { - @Input() dataAcc=[] ; - @Input() dataEpoch=[]; - constructor() { } + + dataAcc: number[] = []; + dataMAE: number[] = []; + dataMSE: number[] = []; + dataLOSS: number[] = []; + + dataEpoch: number[] = []; + + constructor() { + /*let i = 0; + setInterval(() => { + this.dataAcc.push(0.5); + this.dataEpoch.push(i); + i++; + this.update(); + }, 200);*/ + } + + myChart!: Chart; + + update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[]) { + this.dataAcc.length = 0; + this.dataAcc.push(...myAcc); + + this.dataEpoch.length = 0; + this.dataEpoch.push(...myEpochs); + + this.dataMAE.length = 0; + this.dataMAE.push(...myMae); + + this.dataLOSS.length = 0; + this.dataLOSS.push(...myLoss); + + this.dataMSE.length = 0; + this.dataMSE.push(...myMse); + + this.myChart.update(); + } ngOnInit(): void { - var myChart=new Chart("myChart", + this.myChart = new Chart("myChart", { type: 'line', - data: { - labels:this.dataEpoch, - datasets: [{ - label: 'Vrednost', + data: { + labels: this.dataEpoch, + datasets: [{ + label: 'Accuracy', data: this.dataAcc, borderWidth: 1 - }] - }, - options: { - scales: { + }, + { + label: 'Loss', + data: this.dataLOSS, + borderWidth: 1 + }, + { + label: 'MAE', + data: this.dataMAE, + borderWidth: 1 + }, + { + label: 'MSE', + data: this.dataMSE, + borderWidth: 1 + } + ] + }, + options: { + scales: { y: { - beginAtZero: true + beginAtZero: true } + } } - } } ); - } } -
\ No newline at end of file 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 7408547a..e7a4c547 100644 --- a/frontend/src/app/_elements/metric-view/metric-view.component.html +++ b/frontend/src/app/_elements/metric-view/metric-view.component.html @@ -1,5 +1,5 @@ <div> - <app-line-chart [data]="myAcc"> - + <app-line-chart> + </app-line-chart> -</div> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.ts b/frontend/src/app/_elements/metric-view/metric-view.component.ts index 76dd7d20..9193a0e5 100644 --- a/frontend/src/app/_elements/metric-view/metric-view.component.ts +++ b/frontend/src/app/_elements/metric-view/metric-view.component.ts @@ -1,32 +1,49 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit, ViewChild } from '@angular/core'; import { SignalRService } from 'src/app/_services/signal-r.service'; +import { LineChartComponent } from '../line-chart/line-chart.component'; @Component({ selector: 'app-metric-view', templateUrl: './metric-view.component.html', styleUrls: ['./metric-view.component.css'] }) export class MetricViewComponent implements OnInit { - myAcc:[]=[]; - myMae:[]=[]; - myMse:[]=[]; - myEpochs:[]=[]; + @ViewChild(LineChartComponent) linechartComponent!: LineChartComponent; + + @Input() history!: any[]; + constructor(private signalRService: SignalRService) { } ngOnInit(): void { - if(this.signalRService.hubConnection) - { - this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => { - console.log(stat) - console.log(totalEpochs) - const data=JSON.parse(stat) - for (let key in data) - { - let value = data[key]; - console.log(value) + } + + update(history: any[]) { + const myAcc: number[] = []; + const myMae: number[] = []; + const myMse: number[] = []; + const myLoss: number[] = []; + + const myEpochs: number[] = []; + this.history = history; + this.history.forEach((metrics, epoch) => { + myEpochs.push(epoch + 1); + for (let key in metrics) { + let value = metrics[key]; + console.log(key, ':::', value, epoch); + 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)); } - }); - - } + } + }); + this.linechartComponent.update(myEpochs, myAcc, myLoss, myMae, myMse); } -} +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html index 1afb1ecb..1f9852d1 100644 --- a/frontend/src/app/_elements/model-load/model-load.component.html +++ b/frontend/src/app/_elements/model-load/model-load.component.html @@ -173,7 +173,7 @@ </div> </div> - <div class="form-check form-check-inline overflow-auto m-4" style="width: max-content;"> + <!--<div class="form-check form-check-inline overflow-auto m-4" style="width: max-content;"> <h3>Izaberite metrike:</h3> <div id="divMetricsinput" class="mt-2 mx-5"> @@ -185,7 +185,7 @@ </label> </div> </div> - </div> + </div>--> <div class="form-group row mt-3 mb-3"> <div class="col"></div> diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts index 8bf8fd93..0799b4d4 100644 --- a/frontend/src/app/_elements/model-load/model-load.component.ts +++ b/frontend/src/app/_elements/model-load/model-load.component.ts @@ -4,6 +4,7 @@ import Experiment from 'src/app/_data/Experiment'; import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model'; import { AuthService } from 'src/app/_services/auth.service'; import { ModelsService } from 'src/app/_services/models.service'; +import { SignalRService } from 'src/app/_services/signal-r.service'; import { GraphComponent } from '../graph/graph.component'; @@ -48,10 +49,11 @@ export class ModelLoadComponent implements OnInit { }) } - fetchModels() { + fetchModels(andSelectWithId: string | null = '') { //if (this.forExperiment == undefined) { this.modelsService.getMyModels().subscribe((models) => { - this.myModels = models; + this.myModels = models.reverse(); + this.selectThisModel(this.myModels.filter(x => x._id == andSelectWithId)[0]); }); /*} else { @@ -90,7 +92,14 @@ export class ModelLoadComponent implements OnInit { this.newModel.uploaderId = Shared.userId; this.modelsService.addModel(this.newModel).subscribe((response) => { - Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.'); + console.log(this.newModel); + //Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.'); + + Shared.openYesNoDialog("Model dodat", "Model je uspešno dodat u bazu. Da li želite da nastavite treniranje sa dodatim modelom?", () => { + this.fetchModels(response._id); + this.showMyModels = true; + }); + this.fetchModels(); }, (error) => { Shared.openDialog('Greška', 'Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite naziv modela i nastavite sa kreiranim datasetom.'); }); |