Izmenjen izgled i dodate metrike za iscrtavanje grafika toka obuke.

6 files changed, 92 insertions, 30 deletions

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 @@
 
     <canvas  id="myChart" >   
-    </canvas>
\ No newline at end of file
+    </canvas>
+    
\ 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);
 
@@ -42,6 +38,18 @@ export class LineChartComponent implements AfterViewInit {
     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);
 
     this.myChart.update();
@@ -61,19 +69,39 @@ export class LineChartComponent implements AfterViewInit {
             
           },
           {
+            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 @@
-<div id="container">
-    <div id="left">
-        <app-line-chart></app-line-chart>
+  <!--<div class="container" style="margin:auto;">
+    <div class="row">
+      <div class="col-xl">
+          <div class="demo-content"><app-line-chart-acc [dataAcc]="myAcc" [dataEpoch]=""[dataValAcc]=""></app-line-chart-acc></div>
+      </div>
+      <div class="col-xl">
+          <div class="demo-content"><app-line-chart-loss></app-line-chart-loss></div>
+      </div>
+  </div>
+  <div class="row">
+    <div class="col-xl">
+        <div class="demo-content"><app-line-chart-mae></app-line-chart-mae></div>
     </div>
-    <div id="right" >
-        <app-scatterchart></app-scatterchart>
+    <div class="col-xl">
+        <div class="demo-content"><app-line-chart-mse></app-line-chart-mse></div>
     </div>
-</div>
\ No newline at end of file
+</div>
+</div>-->
+<app-line-chart></app-line-chart>
+  
+
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