From ca592566e80a7a83fff85e0b5a11bcca06f7e017 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Tue, 15 Mar 2022 21:27:46 +0100
Subject: Uredjena stranica add-model i komponenta dataset-load.

---
 .../app/_pages/add-model/add-model.component.css   |  17 ++
 .../app/_pages/add-model/add-model.component.html  | 322 +++++++++------------
 2 files changed, 156 insertions(+), 183 deletions(-)

(limited to 'frontend/src/app/_pages/add-model')

diff --git a/frontend/src/app/_pages/add-model/add-model.component.css b/frontend/src/app/_pages/add-model/add-model.component.css
index e69de29b..004b9cac 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.css
+++ b/frontend/src/app/_pages/add-model/add-model.component.css
@@ -0,0 +1,17 @@
+#header {
+    background-color: #003459;
+    padding-top: 25px;
+    padding-bottom: 20px;
+}
+#header h1 {
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    text-align: center;
+    color: white;
+}
+
+#wrapper {
+    background-image: url('/assets/images/add_model_background.jpg');
+}
+#container {
+    border-radius: 8px;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html
index bc292bb9..e141b228 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -1,189 +1,145 @@
-<div class="container p-3" style="background-color: rgb(249, 251, 253); min-height: 100%;">
-
-    <h2 class="my-4 text-primary"> Nov model: </h2>
-    <div class="form-group row align-items-center">
-        <label for="name" class="col-sm-2 col-form-label col-form-label-lg">Naziv</label>
-        <div class="col-sm-7">
-            <input type="text" class="form-control form-control-lg" name="name" placeholder="Naziv..."
-                [(ngModel)]="newModel.name">
-        </div>
-
-        <div class="col-sm-3">
-            <input type="text" class="form-control-plaintext text-center" id="dateCreated" placeholder="--/--/--"
-                value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="desc" class="col-sm-2 col-form-label">Opis</label>
-        <div class="col-sm-10">
-            <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea>
-        </div>
-    </div>
-
-    <!--<div class="form-group row">
-    <label for="value" class="col-4">Vrednost</label>
-    <div class="input-group">
-        <input type="number" min="0" class="form-control" name="value" placeholder="Vrednost..."
-            [(ngModel)]="newModel.value">
-        <div class="input-group-prepend">
-            <span class="input-group-text">#</span>
-        </div>
-        <input type="number" min="1" class="form-control" name="count" placeholder="Br." [(ngModel)]="newModel.count">
-        <input type="text" class="form-control" name="sum" placeholder="Suma"
-            value="=({{newModel.value * newModel.count}})" readonly>
-        </div>
-    </div>-->
-
-    <div class="my-4">
-        <label for="dataset">Izvor podataka:</label>
-        <app-dataset-load id="dataset"></app-dataset-load>
-    </div>
-
-    <div class="form-group row my-2">
-        <div class="col-sm-2 col-form-label">
-            <label for="type" class="form-check-label">Podela test skupa:
-                <input class="mx-3 form-check-input" type="checkbox" [checked]="newModel.randomTestSet"
-                    (change)="newModel.randomTestSet = !newModel.randomTestSet">
-            </label>
-
-        </div>
-        <div>
-            <input type="range" min="0.1" max="0.9" step="0.1" class="form-control" name="randomTestSetDistribution"
-                [disabled]="!newModel.randomTestSet" [(ngModel)]="newModel.randomTestSetDistribution">
-        </div>
-    </div>
-
-    <h3> Parametri treniranja </h3>
-
-    <div class="form-group row my-2">
-        <label for="type" class="col-sm-2 col-form-label">Tip mreže: </label>
-        <div class="col-sm-10">
-            <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type">
-                <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="encoding" class="col-sm-2 col-form-label">Enkoding: </label>
-        <div class="col-sm-10">
-            <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>
-
-    <div class="form-group row my-2">
-        <label for="optimizer" class="col-sm-2 col-form-label">Optimizacija: </label>
-        <div class="col-sm-10">
-            <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 }}
+<div id="header">
+    <h1>Napravite svoj model veštačke neuronske mreže</h1>
+</div>
+
+<div id="wrapper">
+    
+    <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
+        
+        <div class="form-group row mb-4 d-flex"> <!--justify-content-center-->
+            <h2 class="col-sm-2" style="color: #00171f"> Nov model: </h2>
+            <div class="col-sm-3">
+                <div class="mb-4">
+                    <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="d-inline-flex align-items-center">
+                    <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="col-sm-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>
+    
+        <div class="my-5 justify-content-center">
+            <h2>Izvor podataka:</h2>
+            <app-dataset-load id="dataset"></app-dataset-load>
+        </div>
+        
+        <h2>Parametri treniranja:</h2>
+
+        <div class="row">
+            <div class="col-2 mt-4">
+                <label for="type" class="col-form-label">Tip mreže: </label>
+                <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type">
+                    <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)"
+                        [value]="option">
+                        {{ optionName }}
+                    </option>
+                </select>
+            </div>
+            <div class="col-1 mt-4">
+                <label for="encoding" class="col-form-label">Enkoding: </label>
+                <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 mt-4">
+                <label for="optimizer" class="col-form-label">Optimizacija: </label>
+                <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 mt-4"> 
+                <label for="lossFunction" class="col-form-label">Funkcija obrade gubitka: </label>
+                <select id=lossFunctionOptions class="form-control" name="lossFunction" [(ngModel)]="newModel.lossFunction">
+                    <option *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)"
+                        [value]="option">
+                        {{ optionName }}
+                    </option>
+                </select>
+            </div>
+            <div class="col-2">
+                <label for="inputLayerActivationFunction" class="col-form-label">Funkcija aktivacije<br>ulaznog sloja:</label>
+                <select id=inputLayerActivationFunctionOptions class="form-control" name="inputLayerActivationFunction"
+                    [(ngModel)]="newModel.inputLayerActivationFunction">
+                    <option
+                        *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                        [value]="option">
+                        {{ optionName }}
+                    </option>
+                </select>
+            </div>
+            <div class="col">
+                <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije<br>skrivenih slojeva:</label>
+                <select id=hiddenLayerActivationFunctionOptions class="form-control" name="hiddenLayerActivationFunction"
+                    [(ngModel)]="newModel.hiddenLayerActivationFunction">
+                    <option
+                        *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                        [value]="option">
+                        {{ optionName }}
                 </option>
-            </select>
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="lossFunction" class="col-sm-2 col-form-label">Funkcija obrade gubitka: </label>
-        <div class="col-sm-10">
-            <select id=lossFunctionOptions class="form-control" name="lossFunction" [(ngModel)]="newModel.lossFunction">
-                <option *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="inputNeurons" class="col-sm-2 col-form-label">Broj ulaznih neurona: </label>
-        <div class="col-sm-10">
-            <input type="number" min="1" class="form-control" name="inputNeurons" [(ngModel)]="newModel.inputNeurons">
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="inputLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije ulaznog sloja:
-        </label>
-        <div class="col-sm-10">
-            <select id=inputLayerActivationFunctionOptions class="form-control" name="inputLayerActivationFunction"
-                [(ngModel)]="newModel.inputLayerActivationFunction">
-                <option
-                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="hiddenLayerNeurons" class="col-sm-2 col-form-label">Broj neurona skrivenih slojeva: </label>
-        <div class="col-sm-10">
-            <input type="number" min="1" class="form-control" name="hiddenLayerNeurons"
-                [(ngModel)]="newModel.hiddenLayerNeurons">
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="hiddenLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije skrivenih
-            slojeva:
-        </label>
-        <div class="col-sm-10">
-            <select id=hiddenLayerActivationFunctionOptions class="form-control" name="hiddenLayerActivationFunction"
-                [(ngModel)]="newModel.hiddenLayerActivationFunction">
-                <option
-                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="hiddenLayers" class="col-sm-2 col-form-label">Broj skrivenih slojeva: </label>
-        <div class="col-sm-10">
-            <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers">
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="outputLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije izlaznog
-            sloja:
-        </label>
-        <div class="col-sm-10">
-            <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>
+                </select>
+            </div>
+            <div class="col">
+                <label for="outputLayerActivationFunction" class="col-form-label">Funkcija aktivacije<br>izlaznog sloja:</label>
+                <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>
+
+        <div class="row mt-5">
+            <div class="col-2">
+                <label for="inputNeurons" class="col-form-label">Broj ulaznih neurona: </label>
+                <input type="number" min="1" class="form-control" name="inputNeurons" [(ngModel)]="newModel.inputNeurons">
+            </div>
+            <div class="col-2">
+                <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label>
+                <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers">
+            </div>
+            <div class="col-3 ">
+                <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label>
+                <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" [(ngModel)]="newModel.hiddenLayerNeurons">
+            </div>
+            <div class="col-2">
+                <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
+                <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
+            </div>
+            <div class="col mt-1">
+                <label for="type" class="form-check-label mb-3">&nbsp;&nbsp;Podela test skupa:
+                    <input class="mx-3 form-check-input" type="checkbox" [checked]="newModel.randomTestSet"
+                        (change)="newModel.randomTestSet = !newModel.randomTestSet">
+                </label>
+                <input type="range" min="0.1" max="0.9" step="0.1" class="form-control" name="randomTestSetDistribution"
+                [disabled]="!newModel.randomTestSet" [(ngModel)]="newModel.randomTestSetDistribution">
+            </div>
         </div>
-    </div>
 
-    <div class="form-group row my-2">
-        <label for="batchSize" class="col-sm-2 col-form-label">Broj uzorka po iteraciji: </label>
-        <div class="col-sm-10">
-            <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
+        <br><br>
+        <div class="form-group row mt-5">
+            <div class="col-4"></div>
+            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="addModel();">Napravi model</button>
+            <div class="col-4"></div>
         </div>
-    </div>
 
-    <div class=" form-group row my-4">
-        <div class="col-4"></div>
-        <button class="btn btn-lg btn-primary col-4" (click)="addModel();">Dodaj</button>
-        <div class="col-4"></div>
     </div>
-
-</div>
\ No newline at end of file
+</div>
-- 
cgit v1.2.3