From dac8e0f3a723a43013d6412def50ca04e7976b1f Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Mon, 16 May 2022 00:54:23 +0200
Subject: Promenjen font i naziv arhive.

---
 frontend/src/styles/font.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

(limited to 'frontend/src/styles')

diff --git a/frontend/src/styles/font.css b/frontend/src/styles/font.css
index a4d876f5..d5841a63 100644
--- a/frontend/src/styles/font.css
+++ b/frontend/src/styles/font.css
@@ -1,6 +1,5 @@
-/*p,
-a {
+div{
     font-family: Helvetica, sans-serif;
     letter-spacing: 2px;
     font-weight: 100;
-}*/
\ No newline at end of file
+}
\ No newline at end of file
-- 
cgit v1.2.3


From b6bade63bf3b9ec356a53862d8a3d4727281f6f8 Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Tue, 17 May 2022 21:24:55 +0200
Subject: Omogućena responzivnost grafika toka obuke, promenjen font..
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_charts/line-chart/line-chart.component.css    |  5 ++--
 .../_charts/line-chart/line-chart.component.html   |  6 ++---
 .../_charts/line-chart/line-chart.component.ts     | 28 ++++++++++++++++++----
 frontend/src/styles/font.css                       |  2 +-
 4 files changed, 31 insertions(+), 10 deletions(-)

(limited to 'frontend/src/styles')

diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
index 35c7c8d5..2eea561e 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
@@ -6,5 +6,6 @@ canvas{
     background-color: var(--ns-bg-dark-100);
     border-radius: 5px;
     margin: 10px;
-    font-size: 10px !important;
-  }
\ No newline at end of file
+    font-size: 11 !important;
+  }
+ 
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
index 5bb7aae6..d48212cd 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
@@ -1,4 +1,4 @@
-
-    <canvas  id="myChart" >   
+<div #wrapper style="width:100%;height:95%;">
+    <canvas  id="myChart" #canvas>   
     </canvas>
-    
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
index e873618c..89a76a44 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
 import { Chart } from 'chart.js';
 
 @Component({
@@ -19,11 +19,27 @@ export class LineChartComponent implements AfterViewInit {
   dataValLoss:number[]=[];
   dataEpoch: number[] = [];
 
+  @ViewChild('wrapper')
+  wrapper!: ElementRef;
+  @ViewChild('canvas')
+  canvas!: ElementRef;
+
   constructor() {
+    
   }
-
+  width = 700;
+  height = 400;
+  
   myChart!: Chart;
-
+  resize() {
+    this.width = this.wrapper.nativeElement.offsetWidth;
+    this.height = this.wrapper.nativeElement.offsetHeight;
+
+    if (this.canvas) {
+      this.canvas.nativeElement.width = this.width;
+      this.canvas.nativeElement.height = this.height;
+    }
+  }
   update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[], myValAcc:number[],myValLoss:number[],myValMae:number[],myValMse:number[]) {
     this.dataAcc.length = 0;
     this.dataAcc.push(...myAcc);
@@ -56,6 +72,9 @@ export class LineChartComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
+    
+    window.addEventListener('resize', () => { this.resize() });
+    this.resize();
     this.myChart = new Chart("myChart",
       {
         type: 'line',
@@ -69,7 +88,7 @@ export class LineChartComponent implements AfterViewInit {
             
           },
           {
-            label: 'VAl_Accuracy',
+            label: 'Val_Accuracy',
             data: this.dataMSE,
             borderWidth: 1
           },
@@ -150,3 +169,4 @@ export class LineChartComponent implements AfterViewInit {
     );
   }
 }
+
diff --git a/frontend/src/styles/font.css b/frontend/src/styles/font.css
index d5841a63..79e71ca6 100644
--- a/frontend/src/styles/font.css
+++ b/frontend/src/styles/font.css
@@ -1,5 +1,5 @@
 div{
     font-family: Helvetica, sans-serif;
-    letter-spacing: 2px;
+    letter-spacing: 1px;
     font-weight: 100;
 }
\ No newline at end of file
-- 
cgit v1.2.3


From 05aaef1e6fc0431206994b0fc18d470a84e650c1 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Fri, 20 May 2022 02:25:15 +0200
Subject: Popravio tooltipove chartova tako da nisu odseceni unutar kolona.

---
 .../_charts/box-plot/box-plot.component.html       |   2 +-
 .../_charts/line-chart/line-chart.component.html   |   4 +-
 .../_charts/pie-chart/pie-chart.component.html     |   2 +-
 .../column-table/column-table.component.css        |   4 +-
 frontend/src/app/app.component.ts                  | 114 ++++++++++++++++++++-
 frontend/src/styles/helper.css                     |   8 ++
 6 files changed, 127 insertions(+), 7 deletions(-)

(limited to 'frontend/src/styles')

diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
index 688eafae..3b2bf976 100644
--- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
@@ -1,3 +1,3 @@
-<div class="chart-wrapper">
+<div class="chart-wrapper position-relative">
     <canvas #boxplot [width]="width" [height]="height"></canvas>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
index d48212cd..1c711562 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
@@ -1,4 +1,4 @@
-<div #wrapper style="width:100%;height:95%;">
-    <canvas  id="myChart" #canvas>   
+<div #wrapper class="position-relative" style="width:100%;height:95%;">
+    <canvas id="myChart" #canvas>   
     </canvas>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
index 7faf3af0..fe3998ff 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
@@ -1,3 +1,3 @@
-<div class="chart-wrapper">
+<div class="chart-wrapper position-relative">
     <canvas #piechart [width]="width" [height]="height"></canvas>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css
index 311773f7..40ae3c05 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.css
+++ b/frontend/src/app/_elements/column-table/column-table.component.css
@@ -13,7 +13,7 @@ table.fixed {
 }
 
 table.fixed td {
-    overflow: hidden;
+    /* overflow: hidden; */
     max-width: 200px;
     min-width: 200px;
     vertical-align: middle;
@@ -21,7 +21,7 @@ table.fixed td {
 }
 
 table.fixed th {
-    overflow: hidden;
+    /* overflow: hidden; */
     max-width: 250px;
     min-width: 120px;
     vertical-align: middle;
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index e301b46f..5660f676 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -6,6 +6,7 @@ import { AuthService } from './_services/auth.service';
 import { SignalRService } from './_services/signal-r.service';
 import { HttpClient } from '@angular/common/http';
 import Shared from './Shared';
+import { Chart } from 'chart.js';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -14,6 +15,117 @@ import Shared from './Shared';
 export class AppComponent implements OnInit, AfterViewInit {
   constructor(private router: Router, private titleService: Title, private authService: AuthService, private signalRService: SignalRService, private http: HttpClient) {
 
+    const getOrCreateTooltip = (chart: { canvas: { parentNode: { querySelector: (arg0: string) => any; appendChild: (arg0: any) => void; }; }; }) => {
+      let tooltipEl = chart.canvas.parentNode.querySelector('div');
+
+      if (!tooltipEl) {
+        tooltipEl = document.createElement('div');
+        tooltipEl.style.background = 'rgba(0, 0, 0, 0.7)';
+        tooltipEl.style.borderRadius = '3px';
+        tooltipEl.style.color = 'white';
+        tooltipEl.style.opacity = 1;
+        tooltipEl.style.pointerEvents = 'none';
+        tooltipEl.style.position = 'absolute';
+        tooltipEl.style.transform = 'translate(-50%, 0)';
+        tooltipEl.style.transition = 'all .1s ease';
+        tooltipEl.style.zIndex = 9000;
+
+        tooltipEl.classList.add("clearfix");
+
+        const table = document.createElement('table');
+        table.style.margin = '0px';
+
+        tooltipEl.appendChild(table);
+        chart.canvas.parentNode.appendChild(tooltipEl);
+      }
+
+      return tooltipEl;
+    };
+
+    const externalTooltipHandler = (context: { chart: any; tooltip: any; }) => {
+      // Tooltip Element
+      const { chart, tooltip } = context;
+      const tooltipEl = getOrCreateTooltip(chart);
+
+      // Hide if no tooltip
+      if (tooltip.opacity === 0) {
+        tooltipEl.style.opacity = 0;
+        return;
+      }
+
+      // Set Text
+      if (tooltip.body) {
+        const titleLines = tooltip.title || [];
+        const bodyLines = tooltip.body.map((b: { lines: any; }) => b.lines);
+
+        const tableHead = document.createElement('thead');
+
+        titleLines.forEach((title: string) => {
+          const tr = document.createElement('tr');
+          tr.style.borderWidth = '' + 0;
+
+          const th = document.createElement('th');
+          th.style.borderWidth = '' + 0;
+          const text = document.createTextNode(title);
+
+          th.appendChild(text);
+          tr.appendChild(th);
+          tableHead.appendChild(tr);
+        });
+
+        const tableBody = document.createElement('tbody');
+        bodyLines.forEach((body: string, i: string | number) => {
+          const colors = tooltip.labelColors[i];
+
+          const span = document.createElement('span');
+          span.style.background = colors.backgroundColor;
+          span.style.borderColor = colors.borderColor;
+          span.style.borderWidth = '2px';
+          span.style.marginRight = '10px';
+          span.style.height = '10px';
+          span.style.width = '10px';
+          span.style.display = 'inline-block';
+
+          const tr = document.createElement('tr');
+          tr.style.backgroundColor = 'inherit';
+          tr.style.borderWidth = '' + 0;
+
+          const td = document.createElement('td');
+          td.style.borderWidth = '' + 0;
+
+          const text = document.createTextNode(body);
+
+          td.appendChild(span);
+          td.appendChild(text);
+          tr.appendChild(td);
+          tableBody.appendChild(tr);
+        });
+
+        const tableRoot = tooltipEl.querySelector('table');
+
+        // Remove old children
+        while (tableRoot.firstChild) {
+          tableRoot.firstChild.remove();
+        }
+
+        // Add new children
+        tableRoot.appendChild(tableHead);
+        tableRoot.appendChild(tableBody);
+      }
+
+      const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
+
+      // Display, position, and set styles for font
+      tooltipEl.style.opacity = 1;
+      tooltipEl.style.left = positionX + tooltip.caretX + 'px';
+      tooltipEl.style.top = positionY + tooltip.caretY + 'px';
+      tooltipEl.style.font = tooltip.options.bodyFont.string;
+      tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
+    };
+
+    Chart.defaults.plugins.tooltip.enabled = false;
+    Chart.defaults.plugins.tooltip.position = 'nearest';
+    Chart.defaults.plugins.tooltip.external = externalTooltipHandler;
   }
   ngAfterViewInit(): void {
   }
@@ -40,7 +152,7 @@ export class AppComponent implements OnInit, AfterViewInit {
         }
       });
     if (!this.authService.isAuthenticated()) {
-      if(!this.authService.alreadyGuest())
+      if (!this.authService.alreadyGuest())
         this.authService.addGuestToken();
     }
     this.signalRService.startConnection();
diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css
index 971a2ed6..155fc3e1 100644
--- a/frontend/src/styles/helper.css
+++ b/frontend/src/styles/helper.css
@@ -142,4 +142,12 @@ select:-webkit-autofill {
 
 a {
     color: var(--ns-accent) !important;
+}
+
+.clearfix:after {
+    content: "\0020";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
 }
\ No newline at end of file
-- 
cgit v1.2.3


From 447dbf0fe8cdb02bf5e8fb41540eac79329b3013 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Fri, 20 May 2022 04:01:11 +0200
Subject: lossFunction prikaz

---
 backend/api/api/Program.cs                         |  2 +-
 frontend/src/app/_data/Model.ts                    | 13 ++++++------
 .../src/app/_elements/folder/folder.component.html |  2 +-
 .../_elements/form-model/form-model.component.html |  8 ++++----
 .../_elements/form-model/form-model.component.ts   | 23 +++++++++++++++++-----
 frontend/src/styles/helper.css                     |  3 +--
 6 files changed, 32 insertions(+), 19 deletions(-)

(limited to 'frontend/src/styles')

diff --git a/backend/api/api/Program.cs b/backend/api/api/Program.cs
index 5977e843..cf64d58d 100644
--- a/backend/api/api/Program.cs
+++ b/backend/api/api/Program.cs
@@ -37,7 +37,7 @@ builder.Services.AddScoped<IFileService, FileService>();
 builder.Services.AddScoped<IJwtToken, JwtToken>();
 builder.Services.AddScoped<IExperimentService, ExperimentService>();
 builder.Services.AddHostedService<TempFileService>();
-//builder.Services.AddHostedService<FillAnEmptyDb>();
+builder.Services.AddHostedService<FillAnEmptyDb>();
 
 //Ml Api Ip Filter
 builder.Services.AddScoped<MlApiCheckActionFilter>(container =>
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index f527dc7f..898805d3 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -2,6 +2,7 @@ import { NgIf } from "@angular/common";
 import { FolderFile } from "./FolderFile";
 
 export default class Model extends FolderFile {
+    public lossFunction: LossFunction;
     constructor(
         name: string = 'Novi model',
         public description: string = '',
@@ -12,7 +13,6 @@ export default class Model extends FolderFile {
         // Neural net training settings
         public type: ProblemType = ProblemType.Regression,
         public optimizer: Optimizer = Optimizer.Adam,
-        public lossFunction: LossFunction = LossFunctionRegression[0],
         public inputNeurons: number = 1,
         public hiddenLayers: number = 1,
         public batchSize: BatchSize = BatchSize.O3,
@@ -28,11 +28,12 @@ export default class Model extends FolderFile {
         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
-        public validationSize:number=0.1,
+        public validationSize: number = 0.1,
         public isPublic: boolean = false,
         public accessibleByLink: boolean = false
     ) {
         super(name, dateCreated, lastUpdated);
+        this.lossFunction = (this.type == ProblemType.Regression ? LossFunctionRegression[0] : (this.type == ProblemType.BinaryClassification ? LossFunctionBinaryClassification[0] : LossFunctionMultiClassification[0]));
     }
 }
 export class Layer {
@@ -45,8 +46,8 @@ export class Layer {
     ) { }
 }
 export enum LearningRate {
-    LR1 = '0.00001',
-    LR2 = '0.0001',
+    // LR1 = '0.00001',
+    // LR2 = '0.0001',
     LR3 = '0.001',
     LR4 = '0.003',
     LR5 = '0.01',
@@ -120,7 +121,7 @@ export enum LossFunction {
     SquaredHingeLoss = 'squared_hinge',
     HingeLoss = 'hinge',
     // multi-class classification loss functions
-    CategoricalCrossEntropy = 'categorical_crossentropy',
+    // CategoricalCrossEntropy = 'categorical_crossentropy',
     SparseCategoricalCrossEntropy = 'sparse_categorical_crossentropy',
     KLDivergence = 'kullback_leibler_divergence',
 
@@ -134,7 +135,7 @@ export enum LossFunction {
 export const LossFunctionRegression = [LossFunction.MeanAbsoluteError, LossFunction.MeanSquaredError, LossFunction.MeanSquaredLogarithmicError]
 export const LossFunctionBinaryClassification = [LossFunction.BinaryCrossEntropy, LossFunction.SquaredHingeLoss, LossFunction.HingeLoss]
 
-export const LossFunctionMultiClassification = [LossFunction.CategoricalCrossEntropy, LossFunction.SparseCategoricalCrossEntropy, LossFunction.KLDivergence]
+export const LossFunctionMultiClassification = [/*LossFunction.CategoricalCrossEntropy,*/ LossFunction.SparseCategoricalCrossEntropy, LossFunction.KLDivergence]
 
 export enum Optimizer {
     Adam = 'Adam',
diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index da182945..7c42b1db 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -134,7 +134,7 @@
             </div>
         </button>
         <ng-container *ngSwitchCase="false">
-            <button mat-button (click)="ok()" class="bottom-button text-offwhite rounded-bottom" *ngIf="!selectedFileHasChanges">
+            <button mat-button (click)="ok()" class="bottom-button text-offwhite rounded-bottom" *ngIf="!selectedFileHasChanges && !archive">
                 <div class="f-row">
                     <div>Ok</div>
                     <div class="p-1 w-100" *ngIf="loadingAction">
diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html
index bed69998..b986e154 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -11,7 +11,7 @@
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Tip problema</mat-label>
-                    <mat-select [(ngModel)]="forProblemType" [disabled]="this.hideProblemType" (valueChange)="editEvent.emit()">
+                    <mat-select [(ngModel)]="forProblemType" [disabled]="this.hideProblemType" (valueChange)="editEvent.emit(); newModel.type = forProblemType;">
                         <mat-option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -35,7 +35,7 @@
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Funkcija troška</mat-label>
-                    <mat-select [(ngModel)]="newModel.lossFunction" (valueChange)="editEvent.emit()">
+                    <mat-select [(ngModel)]="lossFunction" (valueChange)="newModel.lossFunction = lossFunction!; editEvent.emit();">
                         <mat-option *ngFor="let option of Object.keys(lossFunctions[forProblemType]); let optionName of Object.values(lossFunctions[forProblemType])" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -48,7 +48,7 @@
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Funkcija aktivacije izlaznog sloja</mat-label>
-                    <mat-select name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction" (valueChange)="editEvent.emit()">
+                    <mat-select name="outputLayerActivationFunction" [(ngModel)]="outputLayerActivationFunction" (valueChange)="newModel.outputLayerActivationFunction = outputLayerActivationFunction!; editEvent.emit();">
                         <mat-option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -229,7 +229,7 @@
 
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Stopa regularizacije</mat-label>
-                    <mat-select [(ngModel)]="newModel.layers[i].regularisationRate" (valueChange)="editEvent.emit()">
+                    <mat-select [(ngModel)]="newModel.layers[i].regularisationRate">
                         <mat-option *ngFor="let option of Object.keys(RegularisationRate); let optionName of Object.values(RegularisationRate)" [value]="option">
                             {{ optionName }}
                         </mat-option>
diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts
index 196d575b..646af08c 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -15,18 +15,22 @@ export class FormModelComponent implements AfterViewInit {
   @ViewChild(GraphComponent) graph!: GraphComponent;
   @Input() forExperiment!: Experiment;
   @Output() selectedModelChangeEvent = new EventEmitter<Model>();
-  @Input() hideProblemType: boolean;
-  @Input() forProblemType: ProblemType;
+  @Input() hideProblemType!: boolean;
+  @Input() forProblemType!: ProblemType;
   testSetDistribution: number = 70;
   validationSize: number = 15;
   constructor() {
-    this.hideProblemType = false;
-    this.forProblemType = ProblemType.BinaryClassification;
   }
 
   @Output() editEvent = new EventEmitter();
 
-  ngAfterViewInit(): void { }
+  ngAfterViewInit(): void {
+    this.lossFunction = this.lossFunctions[this.forProblemType][0];
+    this.outputLayerActivationFunction = this.outputLayerActivationFunctions[this.forProblemType][0];
+
+    this.newModel.lossFunction = this.lossFunction;
+    this.newModel.outputLayerActivationFunction = this.outputLayerActivationFunction;
+  }
 
   selectFormControl = new FormControl('', Validators.required);
   nameFormControl = new FormControl('', [Validators.required, Validators.email]);
@@ -67,6 +71,12 @@ export class FormModelComponent implements AfterViewInit {
     [ProblemType.MultiClassification]: LossFunctionMultiClassification
   };
 
+  outputLayerActivationFunctions: { [index: string]: ActivationFunction[] } = {
+    [ProblemType.Regression]: [ActivationFunction.Linear],
+    [ProblemType.BinaryClassification]: [ActivationFunction.Sigmoid],
+    [ProblemType.MultiClassification]: [ActivationFunction.Softmax]
+  };
+
   loadModel(model: Model) {
     this.newModel = model;
     this.forProblemType = model.type;
@@ -121,6 +131,9 @@ export class FormModelComponent implements AfterViewInit {
   selectedRegularisation: Regularisation = Regularisation.L1;
   selectedNumberOfNeurons: number = 3;
 
+  lossFunction: LossFunction = LossFunction.MeanAbsoluteError;
+  outputLayerActivationFunction: ActivationFunction = ActivationFunction.Linear;
+
   changeAllActivation() {
     for (let i = 0; i < this.newModel.layers.length; i++) {
       this.newModel.layers[i].activationFunction = this.selectedActivation;
diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css
index 155fc3e1..b6a58243 100644
--- a/frontend/src/styles/helper.css
+++ b/frontend/src/styles/helper.css
@@ -17,8 +17,7 @@
 .bg-controls {
     position: fixed;
     bottom: 10px;
-    left: 50%;
-    right: 50%;
+    left: 5rem;
 }
 
 .center-horizontal {
-- 
cgit v1.2.3