From 8392d3cf8ba8cdecc7676e2e3d55edae11c048ef Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Wed, 13 Apr 2022 20:56:09 +0200
Subject: Sredjen izgled stranica "Napravi eksperiment" i "Treniraj model", kao
 i komponenti model-load i dataset-load. Kod dodavanja modela, postavljeno da
 sve metrike budu automatski cekirane.

---
 .../_elements/model-load/model-load.component.css  |  4 ++
 .../_elements/model-load/model-load.component.html | 82 ++++++++++------------
 2 files changed, 41 insertions(+), 45 deletions(-)

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

diff --git a/frontend/src/app/_elements/model-load/model-load.component.css b/frontend/src/app/_elements/model-load/model-load.component.css
index 8e9a66f6..c716f964 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.css
+++ b/frontend/src/app/_elements/model-load/model-load.component.css
@@ -1,11 +1,15 @@
 .btnType1 {
     background-color: #003459;
     color: white;
+    padding-top: 2vh;
+    padding-bottom: 2vh;
 }
 .btnType2 {
     background-color: white;
     color: #003459;
     border-color: #003459;
+    padding-top: 2vh;
+    padding-bottom: 2vh;
 }
 .selectedModelClass {
     /*border-color: 2px solid #003459;*/
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 833b7181..f40ea476 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.html
+++ b/frontend/src/app/_elements/model-load/model-load.component.html
@@ -1,7 +1,5 @@
 <div>
-    <div class="col-12 d-flex my-5">
-        <div class="col-3">
-        </div>
+    <div class="d-flex flex-row justify-content-center align-items-center mt-3 mb-5">
         <button type="button" id="btnMyModel" class="btn" (click)="viewMyModelsForm()"
             [ngClass]="{'btnType1': showMyModels, 'btnType2': !showMyModels}">
             Izaberite model iz kolekcije
@@ -13,7 +11,7 @@
         </button>
     </div>
 
-    <div *ngIf="showMyModels" class="px-5 my-2">
+    <div *ngIf="showMyModels" class="px-5 my-3">
         <input *ngIf="showMyModels" type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term">
     </div>
     <div *ngIf="showMyModels" class="px-5">
@@ -51,11 +49,11 @@
                     value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
             </div>
         </div>
-        <h2 class="mt-5 mb-4">Parametri treniranja:</h2>
+        <h2 class="mt-5 mb-4 mx-5">Parametri treniranja modela:</h2>
         <div>
+
             <div class="row p-2">
-                <div class="col-1">
-                </div>
+                <div class="col-1"></div>
                 <div class="col-3">
                     <label for="type" class="col-form-label">Tip problema: </label>
                 </div>
@@ -69,8 +67,7 @@
                         </option>
                     </select>
                 </div>
-                <div class="col-1">
-                </div>
+                <div class="col-1"></div>
                 <div class="col-3">
                     <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label>
                 </div>
@@ -82,20 +79,6 @@
                 </div>
             </div>
 
-            <div class="row p-2">
-                <div class="col-1">
-                </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" (ngModelChange)="updateGraph()">
-                </div>
-            </div>
-
             <div class="row p-2">
                 <div class="col-1">
                 </div>
@@ -114,15 +97,16 @@
                 <div class="col-1">
                 </div>
                 <div class="col-3">
-                    <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
+                    <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="batchSize" [(ngModel)]="newModel.batchSize">
+                    <input type="number" min="1" class="form-control" name="hiddenLayerNeurons"
+                        [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()">
                 </div>
             </div>
+
             <div class="row p-2">
-                <div class="col-1">
-                </div>
+                <div class="col-1"></div>
                 <div class="col-3">
                     <label for="lossFunction" class="col-form-label">Funkcija obrade gubitka: </label>
                 </div>
@@ -137,17 +121,27 @@
                     </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="m-5">
+                <app-graph [model]="newModel" [inputCols]="1"></app-graph>
             </div>
-            <h3>Aktivacione funkcije:</h3>
 
-            <div class="row p-2 m-2" style="align-self: center;">
+            <h3 class="mx-5 mt-4">Aktivacione funkcije:</h3>
+
+            <div class="row p-2" style="align-self: center;">
+                <div class="col-1"></div>
                 <div class="col-3">
                     <label for="hiddenLayerActivationFunction" class="col-form-label"
-                        style="text-align: center;">Funkcija
-                        aktivacije skrivenih
-                        slojeva:</label>
+                        style="text-align: center;">Funkcija aktivacije<br>skrivenih slojeva:</label>
                 </div>
-                <div class="col-3">
+                <div class="col-2 mt-2">
                     <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index">
                         <div class="input-group mb-2">
                             <div class="input-group-prepend">
@@ -164,13 +158,12 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-1"></div>
+                <div class="col-2">
                     <label for="outputLayerActivationFunction" class="col-form-label"
-                        style="text-align: center;">Funkcija
-                        aktivacije izlaznog
-                        sloja:</label>
+                        style="text-align: center;">Funkcija aktivacije<br>izlaznog sloja:</label>
                 </div>
-                <div class="col-3">
+                <div class="col-2 mt-2">
                     <select id=outputLayerActivationFunctionOptions class="form-control"
                         name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
                         <option
@@ -184,25 +177,24 @@
                 </div>
             </div>
         </div>
-        <br><br>
-        <hr>
-        <div class="form-check form-check-inline overflow-auto " style="width: max-content;">
+
+        <div class="form-check form-check-inline overflow-auto m-4" style="width: max-content;">
             <h3>Izaberite metrike:</h3>
-            <div id="divMetricsinput">
+            <div id="divMetricsinput" class="mt-2 mx-5">
 
                 <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;">
+                        id="metrics_{{option}}" style="float: left;" checked>
                     <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2">
                         {{optionName}}
                     </label>
                 </div>
             </div>
         </div>
-        <app-graph [model]="newModel" [inputCols]="1"></app-graph>
-        <div class="form-group row mt-5 mb-3">
+        
+        <div class="form-group row mt-3 mb-3">
             <div class="col"></div>
             <button class="btn btn-lg col-4" style="background-color:#003459; color:white;"
                 (click)="uploadModel();">Sačuvaj
-- 
cgit v1.2.3