From cc3118ecac17539607f34ce3467347abc56f0240 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Thu, 7 Apr 2022 15:10:28 +0200
Subject: Tokom eksperimenta korisnik moze da izabere postojeci model ili da
 doda novi. Izmenjena model-load i experiment.component. Radi dodavanje
 dataseta i modela

---
 .../_elements/model-load/model-load.component.html | 409 +++++++++++----------
 1 file changed, 223 insertions(+), 186 deletions(-)

(limited to 'frontend/src/app/_elements/model-load/model-load.component.html')

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 0c6735a9..62f0932f 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.html
+++ b/frontend/src/app/_elements/model-load/model-load.component.html
@@ -1,221 +1,258 @@
+
 <div>
-    <div class="form-group row mt-3 mb-2 d-flex justify-content-center">
-        <h2 class="col-2"> Nov model: </h2>
+    <div class="col-12 d-flex my-5">
         <div class="col-3">
-            <label for="name" class="col-form-label">Naziv modela:</label>
-            <input type="text" class="form-control" name="name" placeholder="Naziv..." [(ngModel)]="newModel.name">
-        </div>
-        <div class="col-5">
-            <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
-            <div>
-                <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>
+        <button type="button" id="btnMyModel" class="btn" (click)="viewMyModelsForm()"
+            [ngClass]="{'btnType1': showMyModels, 'btnType2': !showMyModels}">
+            Izaberite model iz kolekcije
+        </button>
+        <h3 class="mt-3 mx-3">ili</h3>
+        <button type="button" id="btnNewModel" class="btn" (click)="viewNewModelForm()"
+            [ngClass]="{'btnType1': !showMyModels, 'btnType2': showMyModels}">
+            Dodajte novi model
+        </button>
     </div>
-    <h2 class="mt-5 mb-4">Parametri treniranja:</h2>
-    <div>
-        <div class="row p-2">
-            <div class="col-1">
-            </div>
-            <div class="col-3">
-                <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"
-                    (change)="filterOptions()">
-                    <option
-                        *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
-                        [value]="option">
-                        {{ optionName }}
-                    </option>
-                </select>
-            </div>
-            <div class="col-1">
-            </div>
-            <div class="col-3">
-                <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label>
-            </div>
-            <div class="col-1">
-                <input type="number" min="1" class="form-control" name="hiddenLayers"
-                    [(ngModel)]="newModel.hiddenLayers"
-                    (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])">
-            </div>
+
+    <div *ngIf="showMyModels" class="px-5 my-2">
+        <input *ngIf="showMyModels" type="text" class="form-control" placeholder="Pretraga"
+            [(ngModel)]="term">
+    </div>
+    <div *ngIf="showMyModels" class="px-5">
+        <div class="overflow-auto" style="max-height: 500px;">
+              <ul class="list-group">
+                  <li class="list-group-item p-3" *ngFor="let model of myModels|filter:term"
+                      [ngClass]="{'selectedModelClass': this.selectedModel == model}">
+                      <app-item-model name="usersModel" [model]="model"
+                          (click)="selectThisModel(model);"></app-item-model>
+                  </li>
+              </ul>
+              <div class="px-5 mt-5">
+                 <!--prikaz izabranog modela-->
+              </div>
         </div>
+    </div>
 
-        <div class="row p-2">
-            <div class="col-1">
-            </div>
-            <div class="col-3">
-                <label for="encoding" class="col-form-label">Enkoding: </label>
-            </div>
-            <div class="col-2">
-                <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding">
-                    <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
-                        [value]="option">
-                        {{ optionName }}
-                    </option>
-                </select>
-            </div>
 
-            <div class="col-1">
-            </div>
+    <div *ngIf="!showMyModels">
+        <div class="form-group row mt-3 mb-2 d-flex justify-content-center">
+            
             <div class="col-3">
-                <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label>
+                <label for="name" class="col-form-label">Naziv modela:</label>
+                <input type="text" class="form-control" name="name" placeholder="Naziv..." [(ngModel)]="newModel.name">
             </div>
-            <div class="col-1">
-                <input type="number" min="1" class="form-control" name="hiddenLayerNeurons"
-                    [(ngModel)]="newModel.hiddenLayerNeurons">
-            </div>
-        </div>
-
-        <div class="row p-2">
-            <div class="col-1">
-            </div>
-            <div class="col-3">
-                <label for="optimizer" class="col-form-label">Optimizacija: </label>
+            <div class="col-5">
+                <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+                <div>
+                    <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea>
+                </div>
             </div>
             <div class="col-2">
-                <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer">
-                    <option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
-                        [value]="option">
-                        {{ optionName }}
-                    </option>
-                </select>
-            </div>
-            <div class="col-1">
-            </div>
-            <div class="col-3">
-                <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">
+                <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>
-        <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>
-            </div>
-            <div class="col-2">
-                <select id=lossFunctionOptions class="form-control" name="lossFunction"
-                    [(ngModel)]="newModel.lossFunction" aria-checked="true">
-                    <option
-                        *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
-                        [value]="option">
-                        {{ optionName }}
-                    </option>
-                </select>
-            </div>
-            <div class="col-1"></div>
-            <div class="col-3 mt-2">
-                <label for="type" class="form-check-label">Nasumičan redosled podataka?</label>
-                <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="newModel.randomOrder" type="checkbox"
-                    value="" checked>
+        <h2 class="mt-5 mb-4">Parametri treniranja:</h2>
+        <div>
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <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"
+                        (change)="filterOptions()">
+                        <option
+                            *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label>
+                </div>
+                <div class="col-1">
+                    <input type="number" min="1" class="form-control" name="hiddenLayers"
+                        [(ngModel)]="newModel.hiddenLayers"
+                        (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])">
+                </div>
             </div>
-        </div>
-        <div class="border m-3">
-            <div class="row p-2 m-2">
-                <div class="col-4">
-                    <label for="splitYesNo" class="form-check-label">
-                        <h3>Podela test skupa:&nbsp;&nbsp;
-                            <input id="splitYesNo" class="form-check-input" type="checkbox"
-                                [checked]="newModel.randomTestSet"
-                                (change)="newModel.randomTestSet = !newModel.randomTestSet">
-                        </h3>
-                    </label>
+
+            <div class="row p-2">
+                <div class="col-1">
                 </div>
-                <div class="col-8">
-                    trening
-                    <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10"
-                        name="randomTestSetDistribution" thumbLabel [disabled]="!newModel.randomTestSet"
-                        [(ngModel)]="tempTestSetDistribution">
-                    </mat-slider>
-                    test
+                <div class="col-3">
+                    <label for="encoding" class="col-form-label">Enkoding: </label>
+                </div>
+                <div class="col-2">
+                    <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding">
+                        <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label>
+                </div>
+                <div class="col-1">
+                    <input type="number" min="1" class="form-control" name="hiddenLayerNeurons"
+                        [(ngModel)]="newModel.hiddenLayerNeurons">
                 </div>
             </div>
 
-            <div class="row p-2 mx-2">
-                <div class="col-4">
-                    <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening
-                        skup:</label>
+            <div class="row p-2">
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <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">
+                        <option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-1">
+                </div>
+                <div class="col-3">
+                    <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">
+                </div>
+            </div>
+            <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>
                 </div>
                 <div class="col-2">
-                    <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90"
-                        [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet">
+                    <select id=lossFunctionOptions class="form-control" name="lossFunction"
+                        [(ngModel)]="newModel.lossFunction" aria-checked="true">
+                        <option
+                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-1"></div>
+                <div class="col-3 mt-2">
+                    <label for="type" class="form-check-label">Nasumičan redosled podataka?</label>
+                    <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="newModel.randomOrder" type="checkbox"
+                        value="" checked>
                 </div>
             </div>
-        </div>
-        <h3>Aktivacione funkcije:</h3>
+            <div class="border m-3">
+                <div class="row p-2 m-2">
+                    <div class="col-4">
+                        <label for="splitYesNo" class="form-check-label">
+                            <h3>Podela test skupa:&nbsp;&nbsp;
+                                <input id="splitYesNo" class="form-check-input" type="checkbox"
+                                    [checked]="newModel.randomTestSet"
+                                    (change)="newModel.randomTestSet = !newModel.randomTestSet">
+                            </h3>
+                        </label>
+                    </div>
+                    <div class="col-8">
+                        trening
+                        <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10"
+                            name="randomTestSetDistribution" thumbLabel [disabled]="!newModel.randomTestSet"
+                            [(ngModel)]="tempTestSetDistribution">
+                        </mat-slider>
+                        test
+                    </div>
+                </div>
 
-        <div class="row p-2 m-2" style="align-self: center;">
-            <div class="col-3">
-                <label for="hiddenLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija
-                    aktivacije skrivenih
-                    slojeva:</label>
+                <div class="row p-2 mx-2">
+                    <div class="col-4">
+                        <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening
+                            skup:</label>
+                    </div>
+                    <div class="col-2">
+                        <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90"
+                            [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet">
+                    </div>
+                </div>
             </div>
-            <div class="col-3">
-                <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index">
-                    <div class="input-group mb-2">
-                        <div class="input-group-prepend">
-                            <span class="input-group-text">#{{i+1}}</span>
+            <h3>Aktivacione funkcije:</h3>
+
+            <div class="row p-2 m-2" style="align-self: center;">
+                <div class="col-3">
+                    <label for="hiddenLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija
+                        aktivacije skrivenih
+                        slojeva:</label>
+                </div>
+                <div class="col-3">
+                    <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index">
+                        <div class="input-group mb-2">
+                            <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]">
+                                <option
+                                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                                    [value]="option">
+                                    {{ optionName }}
+                                </option>
+                            </select>
                         </div>
-                        <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-control"
-                            [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]">
-                            <option
-                                *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                                [value]="option">
-                                {{ optionName }}
-                            </option>
-                        </select>
                     </div>
                 </div>
-            </div>
-            <div class="col-3">
-                <label for="outputLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija
-                    aktivacije izlaznog
-                    sloja:</label>
-            </div>
-            <div class="col-3">
-                <select id=outputLayerActivationFunctionOptions class="form-control"
-                    name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
-                    <option
-                        *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                        [value]="option">
-                        {{ optionName }}
-                    </option>
-                </select>
-            </div>
-            <div class="col">
+                <div class="col-3">
+                    <label for="outputLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija
+                        aktivacije izlaznog
+                        sloja:</label>
+                </div>
+                <div class="col-3">
+                    <select id=outputLayerActivationFunctionOptions class="form-control"
+                        name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
+                        <option
+                            *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </div>
+                <div class="col">
+                </div>
             </div>
         </div>
-    </div>
-    <br><br>
-    <hr>
-    <div class="form-check form-check-inline overflow-auto " style="width: max-content;">
-        <h3>Izaberite metrike:</h3>
-        <div id="divMetricsinput">
+        <br><br>
+        <hr>
+        <div class="form-check form-check-inline overflow-auto " style="width: max-content;">
+            <h3>Izaberite metrike:</h3>
+            <div id="divMetricsinput">
 
-            <div *ngFor="let option of Object.keys(metrics); let optionName of Object.values(metrics) "
-                class="form-check form-check-inline">
+                <div *ngFor="let option of Object.keys(metrics); let optionName of Object.values(metrics) "
+                    class="form-check form-check-inline">
 
-                <input name="cbmetrics" class="form-check-input" type="checkbox" value="{{option}}"
-                    id="metrics_{{option}}" style="float: left;">
-                <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2">
-                    {{optionName}}
-                </label>
+                    <input name="cbmetrics" class="form-check-input" type="checkbox" value="{{option}}"
+                        id="metrics_{{option}}" style="float: left;">
+                    <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2">
+                        {{optionName}}
+                    </label>
+                </div>
             </div>
         </div>
-    </div>
-    <div class="form-group row mt-5 mb-3">
-        <div class="col"></div>
-        <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="addModel();">Sačuvaj
-            model</button>
-        <div class="col"></div>
+        <div class="form-group row mt-5 mb-3">
+            <div class="col"></div>
+            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="uploadModel();">Sačuvaj
+                model</button>
+            <div class="col"></div>
+        </div>
     </div>
 </div>
\ No newline at end of file
-- 
cgit v1.2.3