diff options
| -rw-r--r-- | .gitignore | 3 | ||||
| -rw-r--r-- | frontend/src/app/_elements/navbar/navbar.component.ts | 8 | ||||
| -rw-r--r-- | frontend/src/app/_services/signal-r.service.ts | 5 | ||||
| -rw-r--r-- | frontend/src/app/experiment/experiment.component.html | 16 | ||||
| -rw-r--r-- | frontend/src/app/training/training.component.html | 50 |
5 files changed, 53 insertions, 29 deletions
@@ -10,3 +10,6 @@ backend/microservice/api/__pycache__/ production/app/node_modules/ production/app/dist/ backend/microservice/api/temp/ +backend/microservice/Boston.csv +backend/microservice/diamonds.csv +backend/microservice/IMDB-Movie-Data.csv diff --git a/frontend/src/app/_elements/navbar/navbar.component.ts b/frontend/src/app/_elements/navbar/navbar.component.ts index 368508ed..d5d1744f 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.ts +++ b/frontend/src/app/_elements/navbar/navbar.component.ts @@ -4,6 +4,7 @@ import { AuthService } from '../../_services/auth.service'; import shared from 'src/app/Shared'; import { UserInfoService } from 'src/app/_services/user-info.service'; import { MatDialog } from '@angular/material/dialog'; +import { SignalRService } from 'src/app/_services/signal-r.service'; @Component({ selector: 'app-navbar', @@ -15,11 +16,15 @@ export class NavbarComponent implements OnInit { currentUrl: string; shared = shared; - constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService, private matDialog: MatDialog) { + constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService, private matDialog: MatDialog, private signalRService: SignalRService) { shared.dialog = matDialog; this.currentUrl = this.location.path(); this.location.onUrlChange(() => { this.currentUrl = this.location.path(); + }); + + this.auth.loggedInEvent.subscribe(_ => { + this.signalRService.startConnection(); }) } @@ -34,5 +39,6 @@ export class NavbarComponent implements OnInit { logOut() { this.auth.logOut(); + this.signalRService.stopConnection(); } } diff --git a/frontend/src/app/_services/signal-r.service.ts b/frontend/src/app/_services/signal-r.service.ts index 109fc9e5..6a2e61e9 100644 --- a/frontend/src/app/_services/signal-r.service.ts +++ b/frontend/src/app/_services/signal-r.service.ts @@ -24,5 +24,10 @@ export class SignalRService { .then(() => {}) .catch(err => {}) } + + public stopConnection = () => { + this.hubConnection?.stop(); + } + constructor(private cookie: CookieService) { } } diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html index a2a45f20..4bdd79b2 100644 --- a/frontend/src/app/experiment/experiment.component.html +++ b/frontend/src/app/experiment/experiment.component.html @@ -12,7 +12,7 @@ <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" (click)="updateCarouselIndex(2)" [ngClass]="{'boldClass' : carouselIndex == 2}" style="text-decoration: none">Dodaj eksperiment</a> </div> - <div id="carouselExampleControls" class="carousel slide px-5 mt-5" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false"> + <div id="carouselExampleControls" class="carousel px-5 mt-5" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false"> <div class="carousel-inner"> <div class="carousel-item active mt-2"> <h2 class="mb-5">1. Izvor podataka</h2> @@ -123,13 +123,17 @@ </div> <div class="flex-shrink-1 mx-3"> - <div class="input-group"> + <div class="input-group" *ngIf="column.columnName != this.experiment.outputColumn"> <label class="form-control" [for]="'delCol_'+column.columnName">Izbriši - kolonu - <input type="radio" [id]="'delCol_'+column.columnName" + kolonu + <input type="radio" [id]="'delCol_'+column.columnName" [name]="'delOp_'+column.columnName" - (change)="emptyFillTextInput(column.columnName)"></label> + (change)="emptyFillTextInput(column.columnName)"> + </label> </div> + <label class="form-control text-secondary" role="alert" *ngIf="column.columnName == this.experiment.outputColumn"> + (Izlazna kolona) + </label> </div> <div class="flex-shrink-1 mx-3"> @@ -209,7 +213,7 @@ </div> <div class="carousel-item mt-2"> - <h2 class="mb-4">3. Dodaj eskperiment</h2> + <h2 class="mb-4">3. Dodaj eksperiment</h2> <div class="row"> <div class="col"></div> diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html index 25a29828..f20b0085 100644 --- a/frontend/src/app/training/training.component.html +++ b/frontend/src/app/training/training.component.html @@ -2,32 +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%;"> + <div class="row"> + <div class="col"></div> - <div class="col-10"> + <div class="col-10"> - <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>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 *ngIf="selectedExperiment" (selectedModelChangeEvent)="selectModel($event)" [forExperiment]="selectedExperiment"></app-model-load> - <h3 *ngIf="!selectedExperiment">Morate prvo izabrati eksperiment.</h3> + <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 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 id="trainButton" #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> + <app-metric-view *ngIf="trainingResult" [metrics]="trainingResult"></app-metric-view> + </div> </div> <h2 class="mt-5">Rezultati treniranja</h2> @@ -36,7 +44,5 @@ <app-metric-view *ngIf="trainingResult" [metrics]="trainingResult"></app-metric-view> </div> </div> - - <div class="col"></div> </div> </div>
\ No newline at end of file |