diff options
Diffstat (limited to 'frontend/src/app/training')
| -rw-r--r-- | frontend/src/app/training/training.component.css | 39 | ||||
| -rw-r--r-- | frontend/src/app/training/training.component.html | 63 | ||||
| -rw-r--r-- | frontend/src/app/training/training.component.spec.ts | 25 | ||||
| -rw-r--r-- | frontend/src/app/training/training.component.ts | 105 |
4 files changed, 34 insertions, 198 deletions
diff --git a/frontend/src/app/training/training.component.css b/frontend/src/app/training/training.component.css deleted file mode 100644 index 490c56b5..00000000 --- a/frontend/src/app/training/training.component.css +++ /dev/null @@ -1,39 +0,0 @@ -#header { - background-color: #003459; - padding-top: 30px; - padding-bottom: 20px; -} - -#header h1 { - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; - text-align: center; - color: white; -} - -#container { - border-radius: 8px; -} - -#wrapper { - color: #003459; -} - -.btnType1 { - background-color: #003459; - color: white; -} - -.btnType2 { - background-color: white; - color: #003459; - border-color: #003459; -} - -.selectedExperimentClass { - /*border-color: 2px solid #003459;*/ - background-color: lightblue; -} - -ul li:hover { - background-color: lightblue; -}
\ No newline at end of file diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html index deac88cc..672e75fb 100644 --- a/frontend/src/app/training/training.component.html +++ b/frontend/src/app/training/training.component.html @@ -2,40 +2,45 @@ <h1>Trenirajte veštačku neuronsku mrežu</h1> </div> <div id="wrapper" class="mb-4"> - <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 id="container" class="container p-5 row" style="background-color: white; min-height: 100%;"> + <div class="col"></div> - <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> + <div class="col-10"> - <h2 class="my-5">3. Treniranje modela</h2> + <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)" [forExperiment]="selectedExperiment"></app-model-load> + + <h2 class="my-5">3. Treniranje modela</h2> - <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 + <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 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> - <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 class="col"></div> </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/training/training.component.spec.ts b/frontend/src/app/training/training.component.spec.ts deleted file mode 100644 index 1222cb40..00000000 --- a/frontend/src/app/training/training.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { TrainingComponent } from './training.component'; - -describe('TrainingComponent', () => { - let component: TrainingComponent; - let fixture: ComponentFixture<TrainingComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ TrainingComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(TrainingComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts deleted file mode 100644 index a0bec8e2..00000000 --- a/frontend/src/app/training/training.component.ts +++ /dev/null @@ -1,105 +0,0 @@ -import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; -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'; -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 implements OnInit { - - @ViewChild(ModelLoadComponent) modelLoadComponent?: ModelLoadComponent; - @ViewChild("trainButton") trainButtonRef!: ElementRef; - - @ViewChild(MetricViewComponent) metricViewComponent!: MetricViewComponent; - - myExperiments?: Experiment[]; - selectedExperiment?: Experiment; - selectedModel?: Model; - - trainingResult: any; - - history: any[] = []; - - term: string = ""; - - 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.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) { - this.selectedModel = model; - } - - trainModel() { - this.trainingResult = undefined; - - if (this.selectedExperiment == undefined) { - Shared.openDialog("Greška", "Molimo Vas da izaberete eksperiment iz kolekcije."); - return; - } - if (this.selectedModel == undefined) { - 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); - this.trainButtonRef.nativeElement.disabled = false; - Shared.openDialog("Obaveštenje", "Treniranje modela je počelo!"); - this.trainingResult = response; - }); - } -} |