diff options
Diffstat (limited to 'frontend/src/app')
6 files changed, 277 insertions, 45 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 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 @@ -<div #wrapper class="position-relative" style="width:100%;height:95%;"> - <canvas id="myChart" #canvas> - </canvas> +<div #wrapper class="position-relative " style="width:100%;height:95%;"> + <div class="ns-row" [ngClass]="{'hide':experiment.type != ProblemType.Regression}"> + <div class="ns-col" > + <canvas id="myChartmae" #canvasmae> + </canvas> + </div> + <div class="ns-col"> + <canvas id="myChartmse" #canvasmse> + </canvas> + </div> + </div> + <div class="ns-row" [ngClass]="{'hide':experiment.type == ProblemType.Regression}"> + <div class="ns-col" > + <canvas id="myChartloss" #canvasloss> + </canvas> + </div> + <div class="ns-col" > + <canvas id="myChartacc" #canvasacc> + </canvas> + </div> + + </div> + </div>
\ 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 @@ - <!--<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 class="col-xl"> - <div class="demo-content"><app-line-chart-mse></app-line-chart-mse></div> - </div> -</div> -</div>--> -<app-line-chart></app-line-chart> - + 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 @@ </div> <div #steps id="step_4" class="step-content" *ngIf="step3"> <div class="step-content-inside"> - <app-metric-view #metricView></app-metric-view> + <app-line-chart [experiment]="experiment"></app-line-chart> + </div> + </div> + <div #steps id="step_5" class="step-content" *ngIf="step4"> + <div class="step-content-inside"> + <app-form-predictor></app-form-predictor> </div> </div> </div> diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index cbe2dcbe..36abca16 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); }) }); }); |