From 781e458149b4c123d0ccfe99c36abc42f2e72055 Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Wed, 11 May 2022 23:51:26 +0200 Subject: Izmenjen izgled i dodate metrike za iscrtavanje grafika toka obuke. --- .../_charts/line-chart/line-chart.component.css | 4 +- .../_charts/line-chart/line-chart.component.html | 3 +- .../_charts/line-chart/line-chart.component.ts | 46 +++++++++++++++++----- .../metric-view/metric-view.component.css | 24 ++++++----- .../metric-view/metric-view.component.html | 25 +++++++++--- .../_elements/metric-view/metric-view.component.ts | 20 +++++++++- 6 files changed, 92 insertions(+), 30 deletions(-) (limited to 'frontend/src') 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 124b39e8..a190693a 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,7 +1,7 @@ canvas{ - width:95% !important; - height:95% !important; + width:100% !important; + height:90% !important; border: 1px solid var(--ns-primary); background-color: var(--ns-bg-dark-100); border-radius: 5px; 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 6ffddd1f..5bb7aae6 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,3 +1,4 @@ - \ No newline at end of file + + \ 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 0924801e..414d6327 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 @@ -13,22 +13,18 @@ export class LineChartComponent implements AfterViewInit { dataMAE: number[] = []; dataMSE: number[] = []; dataLOSS: number[] = []; - + dataValAcc:number[]=[]; + dataValMAE:number[]=[]; + dataValMSE:number[]=[]; + dataValLoss: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[]) { + update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[], myValAcc:number[],myValLoss:number[],myValMae:number[],myValMse:number[]) { this.dataAcc.length = 0; this.dataAcc.push(...myAcc); @@ -41,6 +37,18 @@ export class LineChartComponent implements AfterViewInit { this.dataLOSS.length = 0; this.dataLOSS.push(...myLoss); + this.dataMSE.length = 0; + this.dataMSE.push(...myValAcc); + + this.dataMSE.length = 0; + this.dataMSE.push(...myValLoss); + + this.dataMSE.length = 0; + this.dataMSE.push(...myValMae); + + this.dataMSE.length = 0; + this.dataMSE.push(...myValMse); + this.dataMSE.length = 0; this.dataMSE.push(...myMse); @@ -60,20 +68,40 @@ export class LineChartComponent implements AfterViewInit { borderWidth: 1, }, + { + label: 'VAl_Accuracy', + data: this.dataMSE, + borderWidth: 1 + }, { label: 'Loss', data: this.dataLOSS, borderWidth: 1 }, + { + label: 'Val_Loss', + data: this.dataMSE, + borderWidth: 1 + }, { label: 'MAE', data: this.dataMAE, borderWidth: 1 }, + { + label: 'Val_MAE', + data: this.dataMSE, + borderWidth: 1 + }, { label: 'MSE', data: this.dataMSE, borderWidth: 1 + }, + { + label: 'Val_MSE', + data: this.dataMSE, + borderWidth: 1 } ] }, diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.css b/frontend/src/app/_elements/metric-view/metric-view.component.css index a59dd081..d27418c3 100644 --- a/frontend/src/app/_elements/metric-view/metric-view.component.css +++ b/frontend/src/app/_elements/metric-view/metric-view.component.css @@ -1,19 +1,23 @@ -#container{ +.row{ + margin: 0 !important; + padding: 0 !important; +} +.container{ width: 100%; height: 90%; border-radius: 5px; border:1px solid var(--ns-primary); - display: table; background-color: rgba(0, 65, 101, 0.7); margin-top: 20px; -} -#left{ - float: left; - width: 70% !important; + margin: 0 !important; + padding: 0 !important; + width: 100%; height: 100%; } -#right{ - float: right; - width: 30%; - height: 50%; +app-line-chart{ + width: 100%; + height: 100%; + border-radius: 5px; + border:1px solid var(--ns-primary); + background-color: rgba(0, 65, 101, 0.7); } 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 b000c569..2ab0a425 100644 --- a/frontend/src/app/_elements/metric-view/metric-view.component.html +++ b/frontend/src/app/_elements/metric-view/metric-view.component.html @@ -1,8 +1,21 @@ -
-
- + + + + 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 6fd2f320..fbca2edf 100644 --- a/frontend/src/app/_elements/metric-view/metric-view.component.ts +++ b/frontend/src/app/_elements/metric-view/metric-view.component.ts @@ -1,6 +1,5 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core'; import { LineChartComponent } from '../_charts/line-chart/line-chart.component'; - @Component({ selector: 'app-metric-view', templateUrl: './metric-view.component.html', @@ -9,6 +8,7 @@ import { LineChartComponent } from '../_charts/line-chart/line-chart.component'; export class MetricViewComponent implements OnInit { @ViewChild(LineChartComponent) linechartComponent!: LineChartComponent; + constructor() { } ngOnInit(): void { @@ -21,6 +21,10 @@ export class MetricViewComponent implements OnInit { 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; @@ -41,9 +45,21 @@ export class MetricViewComponent implements OnInit { 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.linechartComponent.update(myEpochs, myAcc, myLoss, myMae, myMse); + this.linechartComponent.update(myEpochs, myAcc, myLoss, myMae, myMse, myValAcc,myValLoss,myValMAE,myValMSE); } } \ No newline at end of file -- cgit v1.2.3