diff options
Diffstat (limited to 'frontend/src/app/_elements')
4 files changed, 73 insertions, 22 deletions
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 f40ea476..85caca0d 100644 --- a/frontend/src/app/_elements/model-load/model-load.component.html +++ b/frontend/src/app/_elements/model-load/model-load.component.html @@ -43,11 +43,7 @@ <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea> </div> </div> - <div class="col-2"> - <label for="dateCreated" class="col-form-label">Datum:</label> - <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--" - value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly> - </div> + </div> <h2 class="mt-5 mb-4 mx-5">Parametri treniranja modela:</h2> <div> @@ -58,7 +54,7 @@ <label for="type" class="col-form-label">Tip problema: </label> </div> <div class="col-2"> - <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type" + <select id=typeOptions class="form-select" name="type" [(ngModel)]="newModel.type" (change)="filterOptions()"> <option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" @@ -86,7 +82,7 @@ <label for="optimizer" class="col-form-label">Optimizacija: </label> </div> <div class="col-2"> - <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer"> + <select id=optimizerOptions class="form-select" name="optimizer" [(ngModel)]="newModel.optimizer"> <option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" [value]="option"> @@ -108,10 +104,10 @@ <div class="row p-2"> <div class="col-1"></div> <div class="col-3"> - <label for="lossFunction" class="col-form-label">Funkcija obrade gubitka: </label> + <label for="lossFunction" class="col-form-label">Funkcija troška: </label> </div> <div class="col-2"> - <select id=lossFunctionOptions class="form-control" name="lossFunction" + <select id=lossFunctionOptions class="form-select" name="lossFunction" [(ngModel)]="newModel.lossFunction" aria-checked="true"> <option *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)" @@ -125,7 +121,33 @@ <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label> </div> <div class="col-1"> - <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize"> + + <input type="number" min="0" step="1" max="7" class="form-control" name="batchSizePower" [(ngModel)]="batchSizePower" (click)="updateBatchSize()" > + {{newModel.batchSize}} + <!--<select id=BatchSizeOptions class="form-select" name="batchSize" [(ngModel)]="newModel.batchSize"> + <option value="1">1</option> + <option value="2">2</option> + <option value="4">4</option> + <option value="8">8</option> + <option value="16">16</option> + <option value="32">32</option> + <option value="64">64</option> + <option value="128">128</option> + <option value="256">256</option> + <option value="512">512</option> + <option value="1024">1024</option> + </select>--> + </div> + + <div class="row p-2"> + <div class="col-1"></div> + <div class="col-3 m-1"> + <label for="epochs" class="col-form-label">Broj epoha: </label> + </div> + <div class="col-1"> + <input type="number" min="1" max="1000" class="form-control" name="epochs" + [(ngModel)]="newModel.epochs"> + </div> </div> </div> @@ -147,8 +169,8 @@ <div class="input-group-prepend"> <span class="input-group-text">#{{i+1}}</span> </div> - <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-control" - [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]"> + <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-select" + [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]" > <option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" [value]="option"> @@ -164,7 +186,7 @@ style="text-align: center;">Funkcija aktivacije<br>izlaznog sloja:</label> </div> <div class="col-2 mt-2"> - <select id=outputLayerActivationFunctionOptions class="form-control" + <select id=outputLayerActivationFunctionOptions class="form-select" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> <option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" 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 745dc12e..aa0797bd 100644 --- a/frontend/src/app/_elements/model-load/model-load.component.ts +++ b/frontend/src/app/_elements/model-load/model-load.component.ts @@ -43,6 +43,11 @@ export class ModelLoadComponent implements OnInit { ngOnInit(): void { } + batchSizePower:number=1; + updateBatchSize() + { + this.newModel.batchSize=2**this.batchSizePower; + } updateGraph() { this.graph.update(); diff --git a/frontend/src/app/_elements/notifications/notifications.component.html b/frontend/src/app/_elements/notifications/notifications.component.html index ef897cfc..3b2f4eaa 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.html +++ b/frontend/src/app/_elements/notifications/notifications.component.html @@ -11,14 +11,18 @@ </button> </h2> - <div id="collapseNotifs" class="collapse show"> + <div id="collapseNotifs" class="collapse show overflow-auto" style="max-height: 32rem;"> <div *ngFor="let notification of notifications" class="p-2 m-1 border rounded"> - <div class="d-flex flex-row"> - <p>{{notification.title}}</p> - </div> - <div *ngIf="notification.hasProgress" class="border-3 border-primary bg-dark m-1" style="height: 5px; margin-top: -10px !important;"> - <div class="bg-primary" style="height: 5px;" [style]="'width: '+(notification.progress*100)+'%;'"> + <div class="d-flex flex-row "> + <div> + <p>{{notification.title}}</p> + <div *ngIf="notification.hasProgress" class="border-3 border-primary bg-dark m-1" style="height: 5px; margin-top: -10px !important; min-width: 12rem;"> + <div class="bg-primary" style="height: 5px;" [style]="'width: '+(notification.progress*100)+'%;'"> + </div> + </div> </div> + <button type="button" class="btn-close ms-auto align-self-center" aria-label="Close" (click)="removeNotification(notification);"></button> </div> + </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts index e199f70a..9b460240 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.ts +++ b/frontend/src/app/_elements/notifications/notifications.component.ts @@ -21,13 +21,33 @@ export class NotificationsComponent implements OnInit { this.notifications.push(new Notification(`Obrađen izvor podataka: ${dName}`, dId, 1.0, false)); }); - this.signalRService.hubConnection.on("NotifyEpoch", (epoch: string, mName: string, mId: string, numEpochs) => { - //todo epoch - this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, 0.5)); + this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => { + const existingNotification = this.notifications.find(x => x.id === mId) + const progress = ((currentEpoch + 1) / totalEpochs); + console.log("Ukupno epoha", totalEpochs, "Trenutna epoha:", currentEpoch); + if (!existingNotification) + this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, progress, true)); + else { + existingNotification.progress = progress; + } + }); + + this.signalRService.hubConnection.on("NotifyModel", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => { + const existingNotification = this.notifications.find(x => x.id === mId) + const progress = ((currentEpoch + 1) / totalEpochs); + if (!existingNotification) + this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, progress, true)); + else { + existingNotification.progress = progress; + } }); } else { console.warn("Notifications: No connection!"); } } + removeNotification(notification: Notification) { + this.notifications.splice(this.notifications.indexOf(notification), 1); + } + } |