Merge branch 'dev' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into dev

6 files changed, 75 insertions, 23 deletions

diff --git a/frontend/src/app/_data/Notification.ts b/frontend/src/app/_data/Notification.ts
index c505d399..94a3be1d 100644
--- a/frontend/src/app/_data/Notification.ts
+++ b/frontend/src/app/_data/Notification.ts
@@ -1,5 +1,4 @@
 export default class Notification {
-    _id: string = '';
     constructor(
         public title: string = 'Treniranje u toku...',
         public id: string = '042',
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> &nbsp;&nbsp;
-                <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);
+  }
+
 }
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index e22f7a88..238668d9 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -20,6 +20,7 @@ const routes: Routes = [
   /*{ path: 'add-model', component: AddModelComponent, data: { title: 'Dodaj model' } },*/
   { path: 'experiment', component: ExperimentComponent, data: { title: 'Dodaj eksperiment' } },
   { path: 'training', component: TrainingComponent, data: { title: 'Treniraj model' } },
+  { path: 'training/:id', component: TrainingComponent, data: { title: 'Treniraj model' } },
   { path: 'my-datasets', component: MyDatasetsComponent, canActivate: [AuthGuardService], data: { title: 'Moji izvori podataka' } },
   { path: 'my-models', component: MyModelsComponent, canActivate: [AuthGuardService], data: { title: 'Moji modeli' } },
   { path: 'my-predictors', component: MyPredictorsComponent, canActivate: [AuthGuardService], data: { title: 'Moji trenirani modeli' } },
@@ -28,6 +29,7 @@ const routes: Routes = [
   { path: 'browse-datasets', component: FilterDatasetsComponent, data: { title: 'Javni izvori podataka' } },
   { path: 'browse-predictors', component: BrowsePredictorsComponent, data: { title: 'Javni trenirani modeli' } },
   { path: 'predict/:id', component: PredictComponent, data: { title: 'Predvidi vrednosti' } },
+  
 ];
 
 @NgModule({