diff options
Diffstat (limited to 'frontend/src/app/training')
| -rw-r--r-- | frontend/src/app/training/training.component.html | 63 | ||||
| -rw-r--r-- | frontend/src/app/training/training.component.ts | 64 |
2 files changed, 86 insertions, 41 deletions
diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html index 0ce4cc89..deac88cc 100644 --- a/frontend/src/app/training/training.component.html +++ b/frontend/src/app/training/training.component.html @@ -2,45 +2,40 @@ <h1>Trenirajte veštačku neuronsku mrežu</h1> </div> <div id="wrapper" class="mb-4"> - <div id="container" class="container p-5 row" style="background-color: white; min-height: 100%;"> - <div class="col"></div> + <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> + <h2>1. Izaberite eksperiment iz kolekcije</h2> + <div class="px-5 mt-5 mb-3"> + <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term"> + </div> + <div class="overflow-auto px-5" style="max-height: 500px;"> + <ul class="list-group"> + <li class="list-group-item p-3" *ngFor="let experiment of myExperiments|filter:term" [ngClass]="{'selectedExperimentClass': this.selectedExperiment == experiment}"> + <app-item-experiment [experiment]="experiment" (click)="selectThisExperiment(experiment);"></app-item-experiment> + </li> + </ul> + </div> - <div class="col-10"> + <h2 class="mt-5 mb-2">2. Izaberite model</h2> + <app-model-load *ngIf="selectedExperiment" (selectedModelChangeEvent)="selectModel($event)" [forExperiment]="selectedExperiment"></app-model-load> + <h3 *ngIf="!selectedExperiment">Morate prvo izabrati eksperiment.</h3> - <h2>1. Izaberite eksperiment iz kolekcije</h2> - <div class="px-5 mt-5 mb-3"> - <input type="text" class="form-control" placeholder="Pretraga" - [(ngModel)]="term"> - </div> - <div class="overflow-auto px-5" style="max-height: 500px;"> - <ul class="list-group"> - <li class="list-group-item p-3" *ngFor="let experiment of myExperiments|filter:term" - [ngClass]="{'selectedExperimentClass': this.selectedExperiment == experiment}"> - <app-item-experiment [experiment]="experiment" - (click)="selectThisExperiment(experiment);"></app-item-experiment> - </li> - </ul> - </div> - - <h2 class="mt-5 mb-2">2. Izaberite model</h2> - <app-model-load (selectedModelChangeEvent)="selectModel($event)"></app-model-load> - - <h2 class="my-5">3. Treniranje modela</h2> + <h2 class="my-5">3. Treniranje modela</h2> - <div class="d-flex flex-row justify-content-center align-items-center my-3"> - <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj + <div class="d-flex flex-row justify-content-center align-items-center my-3"> + <button #trainButton class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj model</button> - </div> - - <h2 class="mt-5">Rezultati treniranja</h2> - <div class="m-3" *ngIf="trainingResult"> - <h2 class="my-2">Rezultati treniranja:</h2> - <p> - {{trainingResult}} - </p> - </div> </div> - <div class="col"></div> + <h2 class="mt-5">Rezultati treniranja</h2> + <div class="m-3" *ngIf="trainingResult"> + <h2 class="my-2">Rezultati treniranja:</h2> + <app-metric-view *ngIf="trainingResult" [metrics]="trainingResult"></app-metric-view> + </div> + </div> + + <h2 class="mt-5">Rezultati treniranja</h2> + <div class="m-3" *ngIf="trainingResult"> + <h2 class="my-2">Rezultati treniranja:</h2> + <app-metric-view *ngIf="trainingResult" [metrics]="trainingResult"></app-metric-view> </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts index 027d2c22..a0bec8e2 100644 --- a/frontend/src/app/training/training.component.ts +++ b/frontend/src/app/training/training.component.ts @@ -1,17 +1,26 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; import Shared from '../Shared'; import Experiment from '../_data/Experiment'; -import Model from '../_data/Model'; -import { DatasetsService } from '../_services/datasets.service'; +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'; import { ModelsService } from '../_services/models.service'; +import { SignalRService } from '../_services/signal-r.service'; @Component({ selector: 'app-training', templateUrl: './training.component.html', styleUrls: ['./training.component.css'] }) -export class TrainingComponent{ +export class TrainingComponent implements OnInit { + + @ViewChild(ModelLoadComponent) modelLoadComponent?: ModelLoadComponent; + @ViewChild("trainButton") trainButtonRef!: ElementRef; + + @ViewChild(MetricViewComponent) metricViewComponent!: MetricViewComponent; myExperiments?: Experiment[]; selectedExperiment?: Experiment; @@ -19,16 +28,55 @@ export class TrainingComponent{ trainingResult: any; + history: any[] = []; + term: string = ""; - constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private experimentsService: ExperimentsService) { + constructor(private modelsService: ModelsService, private route: ActivatedRoute, private experimentsService: ExperimentsService, private authService: AuthService, private signalRService: SignalRService) { + } + + ngOnInit(): void { + this.route.queryParams.subscribe(params => { + let experimentId = this.route.snapshot.paramMap.get("id"); + + this.fetchExperiments(experimentId); + + this.authService.loggedInEvent.subscribe(_ => { + this.fetchExperiments(experimentId); + + 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]; + if (this.modelLoadComponent) + this.modelLoadComponent.newModel.type = this.selectedExperiment.type; }); } selectThisExperiment(experiment: Experiment) { this.selectedExperiment = experiment; + if (this.modelLoadComponent) + this.modelLoadComponent.newModel.type = this.selectedExperiment.type; } selectModel(model: Model) { @@ -46,9 +94,11 @@ export class TrainingComponent{ Shared.openDialog("Greška", "Molimo Vas da izaberete model."); return; } + this.trainButtonRef.nativeElement.disabled = true; 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.trainButtonRef.nativeElement.disabled = false; + Shared.openDialog("Obaveštenje", "Treniranje modela je počelo!"); this.trainingResult = response; }); } |