Dodao stranicu za eksperimente, ova stranica je zamena za add-model stranicu.

16 files changed, 233 insertions, 110 deletions

diff --git a/frontend/src/app/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts
new file mode 100644
index 00000000..706231c7
--- /dev/null
+++ b/frontend/src/app/_data/Experiment.ts
@@ -0,0 +1,12 @@
+export default class Experiment {
+    _id: string = '';
+    constructor(
+        public name: string = 'Novi experiment',
+        public description: string = '',
+        public datasetId: string = '',
+        public inputColumns: string[] = [],
+        public columnToPredict: string = '',
+        public dateCreated: Date = new Date(),
+        public lastUpdated: Date = new Date()
+    ) { }
+}
\ No newline at end of file
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 58bc3d4f..1ad4fc6d 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -7,11 +7,9 @@ export default class Model {
         public description: string = '',
         public dateCreated: Date = new Date(),
         public lastUpdated: Date = new Date(),
-        public datasetId: string = '',
+        public experimentId: string = '',
 
         // Test set settings
-        public inputColumns: string[] = [],
-        public columnToPredict: string = '',
         public randomOrder: boolean = true,
         public randomTestSet: boolean = true,
         public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U
@@ -168,31 +166,28 @@ export enum Metrics {
     MSE = 'mse',
     MAE = 'mae',
     RMSE = 'rmse'
-    
+
 }
-export enum MetricsRegression
-{
+export enum MetricsRegression {
     Mse = 'mse',
     Mae = 'mae',
     Mape = 'mape',
-    Msle='msle',
-    CosineProximity='cosine'
+    Msle = 'msle',
+    CosineProximity = 'cosine'
 }
-export enum MetricsBinaryClassification
-{
-    Accuracy='binary_accuracy',
-    Auc="AUC",
-    Precision='precision_score',
-    Recall='recall_score',
-    F1='f1_score',
-    
+export enum MetricsBinaryClassification {
+    Accuracy = 'binary_accuracy',
+    Auc = "AUC",
+    Precision = 'precision_score',
+    Recall = 'recall_score',
+    F1 = 'f1_score',
+
 
 }
-export enum MetricsMultiClassification
-{
-    Accuracy='categorical_accuracy',
-    Auc="AUC",
-    Precision='precision_score',
-    Recall='recall_score',
-    F1='f1_score',
+export enum MetricsMultiClassification {
+    Accuracy = 'categorical_accuracy',
+    Auc = "AUC",
+    Precision = 'precision_score',
+    Recall = 'recall_score',
+    F1 = 'f1_score',
 }
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.ts b/frontend/src/app/_elements/annvisual/annvisual.component.ts
index 53e4e2ca..df0a3898 100644
--- a/frontend/src/app/_elements/annvisual/annvisual.component.ts
+++ b/frontend/src/app/_elements/annvisual/annvisual.component.ts
@@ -18,7 +18,7 @@ export class AnnvisualComponent implements OnInit {
     let hiddenlayerstring: string = '';
     let digraphstring: string = 'digraph {';
 
-    for (let i = 0; i < this.model.inputColumns.length; i++) {
+    for (let i = 0; i < /*this.model.inputColumns.length*/ 10; i++) {
       inputlayerstring = inputlayerstring + 'i' + i + ',';
     }
     inputlayerstring = inputlayerstring.slice(0, -1);
@@ -35,7 +35,6 @@ export class AnnvisualComponent implements OnInit {
     }
     digraphstring = digraphstring + 'o}';
 
-
     graphviz('#graph').renderDot(digraphstring);
   }
 
diff --git a/frontend/src/app/_elements/model-load/model-load.component.css b/frontend/src/app/_elements/model-load/model-load.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/model-load/model-load.component.css
diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html
new file mode 100644
index 00000000..ced9b0d6
--- /dev/null
+++ b/frontend/src/app/_elements/model-load/model-load.component.html
@@ -0,0 +1 @@
+<p>model-load works!</p>
diff --git a/frontend/src/app/_elements/model-load/model-load.component.spec.ts b/frontend/src/app/_elements/model-load/model-load.component.spec.ts
new file mode 100644
index 00000000..1dafd966
--- /dev/null
+++ b/frontend/src/app/_elements/model-load/model-load.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModelLoadComponent } from './model-load.component';
+
+describe('ModelLoadComponent', () => {
+  let component: ModelLoadComponent;
+  let fixture: ComponentFixture<ModelLoadComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ModelLoadComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModelLoadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts
new file mode 100644
index 00000000..00532bea
--- /dev/null
+++ b/frontend/src/app/_elements/model-load/model-load.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-model-load',
+  templateUrl: './model-load.component.html',
+  styleUrls: ['./model-load.component.css']
+})
+export class ModelLoadComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html
index 82a1ea07..dbee4773 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.html
+++ b/frontend/src/app/_elements/navbar/navbar.component.html
@@ -8,8 +8,9 @@
             <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                 <li><a routerLink="" class="nav-link px-2"
                         [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li>
-                <li><a routerLink="add-model" class="nav-link px-2"
-                        [class]="(currentUrl === '/add-model') ? 'text-secondary' : 'text-white'">Dodaj model</a></li>
+                <li><a routerLink="experiment" class="nav-link px-2"
+                        [class]="(currentUrl === '/add-model') ? 'text-secondary' : 'text-white'">Eksperimentiši</a>
+                </li>
                 <li><a routerLink="my-predictors" class="nav-link px-2"
                         [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a>
                 </li>
@@ -18,7 +19,8 @@
             <div *ngIf="shared.loggedIn" class="dropdown text-end">
                 <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1"
                     data-bs-toggle="dropdown" aria-expanded="false">
-                    <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32" class="rounded-circle">
+                    <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32"
+                        class="rounded-circle">
                 </a>
                 <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1"
                     style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);"
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 97b35b7a..3d5fd7b1 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -1,11 +1,10 @@
-<div id="header">
+<!--<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 mt-3 mb-2 d-flex justify-content-center">
-            <!--justify-content-center-->
             <h2 class="col-2"> Nov model: </h2>
             <div class="col-3">
                 <label for="name" class="col-form-label">Naziv modela:</label>
@@ -63,12 +62,9 @@
                 <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable>
             </div>
         </div>
-
-        <!-- ULAZNE/IZLAZNE KOLONE -->
         <span id="selectInAndOuts"></span>
         <div
             *ngIf="selectedDataset && ((showMyDatasets && selectedDatasetLoaded) || (!showMyDatasets && datasetLoaded))">
-            <!--postignuto da se kod newdataseta ucita tabela pa ulazi/izlazi. ostalo srediti to kod mydatasets(dopuna 2. uslova)-->
             <div class="row">
                 <div class="col d-flex justify-content-center">
                     <h3>Izaberite ulazne kolone:</h3>
@@ -121,7 +117,6 @@
                             <div>
                                 <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
                                 <div id="columnReplacers">
-                                    <!--Ulazne kolone - popunjavanje null vrednosti -->
                                     <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3">
                                         <div *ngIf="getInputById('cb_'+column).checked" class="">
                                             <span class="w-20 mx-3">
@@ -198,9 +193,7 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <!--Izlazna kolona - popunjavanje null vrednosti -->
                                     <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3">
-                                        <!--moze bez for petlje (this.selectedOutputColumnVal je id), al ne moze ova fja array column onda-->
                                         <div class="input-group row" *ngIf="getInputById('rb_'+column).checked">
                                             <span class="input-group-text col-2 text-center">
                                                 {{column}}&nbsp;<span class="small"
@@ -212,7 +205,6 @@
 
                                             <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio"
                                                 [id]="'fillCol_'+column" class="col-1 mt-2" [name]="'delOp_'+column">
-                                            <!--OVDE SREDI IZGLED-->
                                             <select [id]="'replaceOptions'+i" class="form-control col-2"
                                                 *ngIf="isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0"
                                                 (change)="replaceWithSelectedNumber($event);">
@@ -254,8 +246,6 @@
         </div>
 
         <h2 class="mt-5 mb-4">Parametri treniranja:</h2>
-
-        <!--**********************************************************TIP*********************************************************-->
         <div>
             <div class="row p-2">
                 <div class="col-1">
@@ -273,7 +263,6 @@
                         </option>
                     </select>
                 </div>
-                <!--******************************************************************************************************************-->
                 <div class="col-1">
                 </div>
                 <div class="col-3">
@@ -287,8 +276,6 @@
             </div>
 
             <div class="row p-2">
-                <!--***********************************ENKODER*********************************************-->
-
                 <div class="col-1">
                 </div>
                 <div class="col-3">
@@ -303,8 +290,6 @@
                     </select>
                 </div>
 
-                <!--***********************************BROJ NEURONA SKRIVENOG SLOJA*********************************************-->
-
                 <div class="col-1">
                 </div>
                 <div class="col-3">
@@ -315,7 +300,6 @@
                         [(ngModel)]="newModel.hiddenLayerNeurons">
                 </div>
             </div>
-            <!--***********************************OPTIMIZACIJA*********************************************-->
 
             <div class="row p-2">
                 <div class="col-1">
@@ -364,7 +348,6 @@
                         type="checkbox" value="" checked>
                 </div>
             </div>
-            <!--************************************************************************************************* -->
             <div class="border m-3">
                 <div class="row p-2 m-2">
                     <div class="col-4">
@@ -397,8 +380,6 @@
                     </div>
                 </div>
             </div>
-
-            <!--***********************************AKTIVACIONE FUNKCIJE*********************************************-->
             <h3>Aktivacione funkcije:</h3>
 
             <div class="row p-2 m-2" style="align-self: center;">
@@ -443,10 +424,7 @@
                 </div>
             </div>
         </div>
-
         <br><br>
-        <!--**********************************************METRIKE ZA KOMPAJLER I GRAFIKE***********************************************-->
-
         <hr>
         <div class="form-check form-check-inline overflow-auto " style="width: max-content;">
             <h3>Izaberite metrike:</h3>
@@ -463,7 +441,6 @@
                 </div>
             </div>
         </div>
-        <!--<app-annvisual [model]="newModel"></app-annvisual>-->
         <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;"
@@ -482,6 +459,4 @@
         </div>
     </div>
 </div>
-
-<!--<button
-    (click)="calculateSumOfNullValuesInCol('Embarked'); calculateMeanColValue('Age');calculateMedianColValue('Age'); getNullValuesReplacersArray();">DUGME</button>-->
\ No newline at end of file
+-->
\ No newline at end of file
diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts
index b35b9fa4..d47b24e6 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -110,55 +110,55 @@ export class AddModelComponent implements OnInit {
   }
 
   saveModelWithNewDataset(callback: ((arg0: any) => void)) {
-
-    this.getCheckedInputCols();
-    this.getCheckedOutputCol();
-    this.getMetrics();
-
-    if (this.validationInputsOutput()) {
-      console.log('ADD MODEL: STEP 1 - UPLOAD FILE');
-      if (this.datasetLoadComponent) {
-        console.log("this.datasetLoadComponent.files:", this.datasetLoadComponent.files);
-        this.models.uploadData(this.datasetLoadComponent.files[0]).subscribe((file) => {
-          console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id);
+    /*
+        this.getCheckedInputCols();
+        this.getCheckedOutputCol();
+        this.getMetrics();
+    
+        if (this.validationInputsOutput()) {
+          console.log('ADD MODEL: STEP 1 - UPLOAD FILE');
           if (this.datasetLoadComponent) {
-            this.datasetLoadComponent.dataset.fileId = file._id;
-            this.datasetLoadComponent.dataset.username = shared.username;
-
-            this.datasets.addDataset(this.datasetLoadComponent.dataset).subscribe((dataset) => {
-              console.log('ADD MODEL: STEP 3 - ADD MODEL WITH DATASET ID ', dataset._id);
-              this.newModel.datasetId = dataset._id;
-
-              //da se doda taj dataset u listu postojecih, da bude izabran 
-              this.refreshMyDatasetList();
-              this.showMyDatasets = true;
-              this.selectThisDataset(dataset);
-
-              this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
-              this.tempTestSetDistribution = 90;
-              this.newModel.username = shared.username;
-
-              this.newModel.nullValuesReplacers = this.getNullValuesReplacersArray();
-
-              this.models.addModel(this.newModel).subscribe((response) => {
-                callback(response);
-              }, (error) => {
-                alert("Model sa unetim nazivom već postoji u Vašoj kolekciji.\nPromenite naziv modela i nastavite sa kreiranim datasetom.");
-              }); //kraj addModel subscribe
+            console.log("this.datasetLoadComponent.files:", this.datasetLoadComponent.files);
+            this.models.uploadData(this.datasetLoadComponent.files[0]).subscribe((file) => {
+              console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id);
+              if (this.datasetLoadComponent) {
+                this.datasetLoadComponent.dataset.fileId = file._id;
+                this.datasetLoadComponent.dataset.username = shared.username;
+    
+                this.datasets.addDataset(this.datasetLoadComponent.dataset).subscribe((dataset) => {
+                  console.log('ADD MODEL: STEP 3 - ADD MODEL WITH DATASET ID ', dataset._id);
+                  this.newModel.datasetId = dataset._id;
+    
+                  //da se doda taj dataset u listu postojecih, da bude izabran 
+                  this.refreshMyDatasetList();
+                  this.showMyDatasets = true;
+                  this.selectThisDataset(dataset);
+    
+                  this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
+                  this.tempTestSetDistribution = 90;
+                  this.newModel.username = shared.username;
+    
+                  this.newModel.nullValuesReplacers = this.getNullValuesReplacersArray();
+    
+                  this.models.addModel(this.newModel).subscribe((response) => {
+                    callback(response);
+                  }, (error) => {
+                    alert("Model sa unetim nazivom već postoji u Vašoj kolekciji.\nPromenite naziv modela i nastavite sa kreiranim datasetom.");
+                  }); //kraj addModel subscribe
+                }, (error) => {
+                  alert("Dataset sa unetim nazivom već postoji u Vašoj kolekciji.\nIzmenite naziv ili iskoristite postojeći dataset.");
+                }); //kraj addDataset subscribe
+              } //kraj treceg ifa
             }, (error) => {
-              alert("Dataset sa unetim nazivom već postoji u Vašoj kolekciji.\nIzmenite naziv ili iskoristite postojeći dataset.");
-            }); //kraj addDataset subscribe
-          } //kraj treceg ifa
-        }, (error) => {
-          //alert("greska uploadData");
-        }); //kraj uploadData subscribe
-
-      } //kraj drugog ifa
-    } //kraj prvog ifa
+              //alert("greska uploadData");
+            }); //kraj uploadData subscribe
+    
+          } //kraj drugog ifa
+        } //kraj prvog ifa*/
   }
 
   saveModelWithExistingDataset(callback: ((arg0: any) => void)): any {
-    if (this.selectedDataset) { //dataset je izabran
+    /*if (this.selectedDataset) { //dataset je izabran
       this.getCheckedInputCols();
       this.getCheckedOutputCol();
       this.getMetrics();
@@ -180,11 +180,11 @@ export class AddModelComponent implements OnInit {
     }
     else {
       alert("Molimo Vas da izaberete neki dataset iz kolekcije.");
-    }
+    }*/
   }
 
   getCheckedInputCols() {
-    this.newModel.inputColumns = [];
+    /*this.newModel.inputColumns = [];
     let checkboxes: any;
 
     checkboxes = document.getElementsByName("cbsNew");
@@ -193,11 +193,11 @@ export class AddModelComponent implements OnInit {
       let thatCb = <HTMLInputElement>checkboxes[i];
       if (thatCb.checked == true) // && thatCb.disabled == false ne treba nam ovo vise
         this.newModel.inputColumns.push(thatCb.value);
-    }
+    }*/
     //console.log(this.checkedInputCols);
   }
   getCheckedOutputCol() {
-    this.newModel.columnToPredict = '';
+    /*this.newModel.columnToPredict = '';
     let radiobuttons: any;
 
     radiobuttons = document.getElementsByName("rbsNew");
@@ -208,11 +208,11 @@ export class AddModelComponent implements OnInit {
         this.newModel.columnToPredict = thatRb.value;
         break;
       }
-    }
+    }*/
     //console.log(this.checkedOutputCol);
   }
-  validationInputsOutput(): boolean {
-    if (this.newModel.inputColumns.length == 0 && this.newModel.columnToPredict == '') {
+  validationInputsOutput() {
+    /*if (this.newModel.inputColumns.length == 0 && this.newModel.columnToPredict == '') {
       alert("Molimo Vas da izaberete ulazne i izlazne kolone za mrežu.");
       return false;
     }
@@ -231,7 +231,7 @@ export class AddModelComponent implements OnInit {
         return false;
       }
     }
-    return true;
+    return true;*/
   }
 
   selectThisDataset(dataset: Dataset) {
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index fd827ac9..93431397 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { AuthGuardService } from './_services/auth-guard.service';
-import { AddModelComponent } from './_pages/add-model/add-model.component';
 import { HomeComponent } from './_pages/home/home.component';
 import { MyDatasetsComponent } from './_pages/my-datasets/my-datasets.component';
 import { MyModelsComponent } from './_pages/my-models/my-models.component';
@@ -13,10 +12,12 @@ import { SettingsComponent } from './_pages/settings/settings.component';
 import { ProfileComponent } from './_pages/profile/profile.component';
 import { PredictComponent } from './_pages/predict/predict.component';
 import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-datasets.component';
+import { ExperimentComponent } from './experiment/experiment.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent, data: { title: 'Početna strana' } },
-  { path: 'add-model', component: AddModelComponent, data: { title: 'Dodaj model' } },
+  /*{ path: 'add-model', component: AddModelComponent, data: { title: 'Dodaj model' } },*/
+  { path: 'experiment', component: ExperimentComponent, data: { title: 'Dodaj 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' } },
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index d90de54d..d701f9d7 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -39,6 +39,9 @@ import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-dataset
 import { ReactiveBackgroundComponent } from './_elements/reactive-background/reactive-background.component';
 import { ItemModelComponent } from './_elements/item-model/item-model.component';
 import { AnnvisualComponent } from './_elements/annvisual/annvisual.component';
+import { ExperimentComponent } from './experiment/experiment.component';
+import { LoadingComponent } from './_elements/loading/loading.component';
+import { ModelLoadComponent } from './_elements/model-load/model-load.component';
 
 @NgModule({
   declarations: [
@@ -67,7 +70,10 @@ import { AnnvisualComponent } from './_elements/annvisual/annvisual.component';
     FilterDatasetsComponent,
     ReactiveBackgroundComponent,
     ItemModelComponent,
-    AnnvisualComponent
+    AnnvisualComponent,
+    ExperimentComponent,
+    LoadingComponent,
+    ModelLoadComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/experiment/experiment.component.css b/frontend/src/app/experiment/experiment.component.css
new file mode 100644
index 00000000..ee4b0448
--- /dev/null
+++ b/frontend/src/app/experiment/experiment.component.css
@@ -0,0 +1,39 @@
+#header {
+    background-color: #003459;
+    padding-top: 30px;
+    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;
+}
+
+#container {
+    border-radius: 8px;
+}
+
+#wrapper {
+    color: #003459;
+}
+
+.btnType1 {
+    background-color: #003459;
+    color: white;
+}
+
+.btnType2 {
+    background-color: white;
+    color: #003459;
+    border-color: #003459;
+}
+
+.selectedDatasetClass {
+    /*border-color: 2px solid #003459;*/
+    background-color: lightblue;
+}
+
+ul li:hover {
+    background-color: lightblue;
+}
\ No newline at end of file
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
new file mode 100644
index 00000000..42f2993d
--- /dev/null
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -0,0 +1,13 @@
+<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%;">
+        <h2>1. Izvor podataka</h2>
+        <app-dataset-load></app-dataset-load>
+        <h2>2. Preprocesiranje</h2>
+        <h2>3. Podešavanja mreže</h2>
+        <app-model-load></app-model-load>
+        <h2>4. Rezultati treniranja</h2>
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/experiment/experiment.component.spec.ts b/frontend/src/app/experiment/experiment.component.spec.ts
new file mode 100644
index 00000000..fd2bbd30
--- /dev/null
+++ b/frontend/src/app/experiment/experiment.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExperimentComponent } from './experiment.component';
+
+describe('ExperimentComponent', () => {
+  let component: ExperimentComponent;
+  let fixture: ComponentFixture<ExperimentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ExperimentComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExperimentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
new file mode 100644
index 00000000..16de7351
--- /dev/null
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-experiment',
+  templateUrl: './experiment.component.html',
+  styleUrls: ['./experiment.component.css']
+})
+export class ExperimentComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}