diff options
Diffstat (limited to 'frontend/src')
12 files changed, 149 insertions, 107 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.'); }); diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 41aec3b5..51374bd4 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -49,7 +49,6 @@ import { ItemExperimentComponent } from './_elements/item-experiment/item-experi import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.component'; import { Configuration } from './configuration.service'; import { PointLinechartComponent } from './point-linechart/point-linechart.component'; -import { GraficiComponent } from './grafici/grafici.component'; import { MixedChartComponent } from './mixed-chart/mixed-chart.component'; import { LineChartComponent } from './_elements/line-chart/line-chart.component'; @@ -92,15 +91,14 @@ export function initializeApp(appConfig: Configuration) { GraphComponent, TrainingComponent, ItemExperimentComponent, - YesNoDialogComponent, + YesNoDialogComponent, LineChartComponent, PointLinechartComponent, - GraficiComponent, MixedChartComponent, LineChartComponent, MetricViewComponent, - - + + ], imports: [ BrowserModule, diff --git a/frontend/src/app/grafici/grafici.component.css b/frontend/src/app/grafici/grafici.component.css deleted file mode 100644 index e69de29b..00000000 --- a/frontend/src/app/grafici/grafici.component.css +++ /dev/null diff --git a/frontend/src/app/grafici/grafici.component.html b/frontend/src/app/grafici/grafici.component.html deleted file mode 100644 index 5f987238..00000000 --- a/frontend/src/app/grafici/grafici.component.html +++ /dev/null @@ -1 +0,0 @@ -<p>grafici works!</p> diff --git a/frontend/src/app/grafici/grafici.component.spec.ts b/frontend/src/app/grafici/grafici.component.spec.ts deleted file mode 100644 index 9b5ba94d..00000000 --- a/frontend/src/app/grafici/grafici.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { GraficiComponent } from './grafici.component'; - -describe('GraficiComponent', () => { - let component: GraficiComponent; - let fixture: ComponentFixture<GraficiComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ GraficiComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(GraficiComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/grafici/grafici.component.ts b/frontend/src/app/grafici/grafici.component.ts deleted file mode 100644 index 749b35e2..00000000 --- a/frontend/src/app/grafici/grafici.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-grafici', - templateUrl: './grafici.component.html', - styleUrls: ['./grafici.component.css'] -}) -export class GraficiComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html index 2bee3b12..fa80089e 100644 --- a/frontend/src/app/training/training.component.html +++ b/frontend/src/app/training/training.component.html @@ -33,9 +33,8 @@ <h2 class="mt-5">Rezultati treniranja</h2> <div class="m-3" *ngIf="trainingResult"> <h2 class="my-2">Rezultati treniranja:</h2> - <p> - {{trainingResult}} - </p> + {{trainingResult}} + <app-metric-view *ngIf="trainingResult" [metrics]="trainingResult"></app-metric-view> </div> </div> diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts index 4c38f166..6b5405cb 100644 --- a/frontend/src/app/training/training.component.ts +++ b/frontend/src/app/training/training.component.ts @@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router'; import Shared from '../Shared'; import Experiment from '../_data/Experiment'; import Model, { ProblemType } from '../_data/Model'; +import { MetricViewComponent } from '../_elements/metric-view/metric-view.component'; import { ModelLoadComponent } from '../_elements/model-load/model-load.component'; import { AuthService } from '../_services/auth.service'; import { ExperimentsService } from '../_services/experiments.service'; @@ -17,6 +18,7 @@ import { SignalRService } from '../_services/signal-r.service'; export class TrainingComponent implements OnInit { @ViewChild(ModelLoadComponent) modelLoadComponent?: ModelLoadComponent; + @ViewChild(MetricViewComponent) metricViewComponent!: MetricViewComponent; myExperiments?: Experiment[]; selectedExperiment?: Experiment; @@ -24,16 +26,11 @@ export class TrainingComponent implements OnInit { trainingResult: any; + history: any[] = []; + term: string = ""; constructor(private modelsService: ModelsService, private route: ActivatedRoute, private experimentsService: ExperimentsService, private authService: AuthService, private signalRService: SignalRService) { - if (this.signalRService.hubConnection) { - this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => { - if (this.selectedModel?._id == mId) { - this.trainingResult = stat; - } - }); - } } ngOnInit(): void { @@ -45,17 +42,32 @@ export class TrainingComponent implements OnInit { this.authService.loggedInEvent.subscribe(_ => { this.fetchExperiments(experimentId); - this.signalRService.startConnection() + this.signalRService.startConnection(); }); + + console.log(this.signalRService.hubConnection); + if (this.signalRService.hubConnection) { + this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => { + console.log(this.selectedModel?._id, mId); + if (this.selectedModel?._id == mId) { + stat = stat.replace(/'/g, '"'); + this.trainingResult = JSON.parse(stat); + //console.log('JSON', this.trainingResult); + this.history.push(this.trainingResult); + this.metricViewComponent.update(this.history); + } + }); + } }); } fetchExperiments(andSelectWithId: string | null = '') { this.experimentsService.getMyExperiments().subscribe((experiments) => { - this.myExperiments = experiments; + this.myExperiments = experiments.reverse(); this.selectedExperiment = this.myExperiments.filter(x => x._id == andSelectWithId)[0]; - console.log("selektovan exp u training comp: ", this.selectedExperiment); + if (this.modelLoadComponent) + this.modelLoadComponent.newModel.type = this.selectedExperiment.type; }); } @@ -82,8 +94,7 @@ export class TrainingComponent implements OnInit { } this.modelsService.trainModel(this.selectedModel._id, this.selectedExperiment._id).subscribe((response: any) => { //console.log('Train model complete!', response); - Shared.openDialog("Obaveštenje", "Treniranje modela je uspešno završeno!"); - this.trainingResult = response; + Shared.openDialog("Obaveštenje", "Treniranje modela je počelo!"); }); } } |