diff options
Diffstat (limited to 'frontend/src/app')
4 files changed, 189 insertions, 55 deletions
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 61c27ae6..216e1c36 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -12,8 +12,8 @@ export default class Model { public randomTestSetDistribution: number = 0.10, //0.1-0.9 (10% - 90%) // Neural net training settings - public encoding: Encoding = Encoding.Label, public type: ANNType = ANNType.FullyConnected, + public encoding: Encoding = Encoding.Label, public optimizer: Optimizer = Optimizer.Adam, public lossFunction: LossFunction = LossFunction.MeanSquaredError, public inputNeurons: number = 1, diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html index 48883ba0..0b62a515 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html @@ -1,28 +1,30 @@ -<div class="container"> +<div> - <input style="display: inline-block; width:350px;" list=delimiterOptions placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control" [(ngModel)]="delimiter"> - <datalist id=delimiterOptions> - <option *ngFor="let option of delimiterOptions">{{option}}</option> - </datalist> - - <input style="display: inline-block" [ngStyle]="{width:'350px'}" list=headerOptions placeholder="Da li .csv ima header?" class="form-control" [(ngModel)]="header"> - <datalist id=headerOptions> - <option *ngFor="let option of headerOptions">{{option}}</option> - </datalist> + <input style="display: inline-block; width:350px;" list=delimiterOptions + placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control" [(ngModel)]="delimiter"> + <datalist id=delimiterOptions> + <option *ngFor="let option of delimiterOptions">{{option}}</option> + </datalist> + + <input style="display: inline-block" [ngStyle]="{width:'350px'}" list=headerOptions + placeholder="Da li .csv ima header?" class="form-control" [(ngModel)]="header"> + <datalist id=headerOptions> + <option *ngFor="let option of headerOptions">{{option}}</option> + </datalist> - <br><br> + <br><br> - <input class="form-control mb-5" type="file" class="upload" (change)="changeListener($event)"> + <input class="form-control mb-5" type="file" class="upload" (change)="changeListener($event)"> - <table class="table table-bordered table-light mt-5"> - <thead> - <tr> - <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th> - </tr> - </thead> - <tbody> - <!--<tr *ngFor="let row of csvRecords | ((header == 'Da') ? (slice:1:11) : (slice:0:11))">--> - <!--<ng-container *ngIf="header == 'Da'"> + <table class="table table-bordered table-light mt-5"> + <thead> + <tr> + <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th> + </tr> + </thead> + <tbody> + <!--<tr *ngFor="let row of csvRecords | ((header == 'Da') ? (slice:1:11) : (slice:0:11))">--> + <!--<ng-container *ngIf="header == 'Da'"> <tr *ngFor="let row of csvRecords | slice:1:11"> <td *ngFor="let col of row">{{col}}</td> </tr> @@ -32,15 +34,15 @@ <td *ngFor="let col of row">{{col}}</td> </tr> </ng-container>--> - - <tr *ngFor="let row of csvRecords | slice:1:11"> - <td *ngFor="let col of row">{{col}}</td> - </tr> - </tbody> - </table> - <div *ngIf="csvRecords[0]" id="info"> - . . . <br> - {{rowsNumber}} x {{colsNumber}} - </div> - </div>
\ No newline at end of file + <tr *ngFor="let row of csvRecords | slice:1:11"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + </tbody> + </table> + <div *ngIf="csvRecords[0]" id="info"> + . . . <br> + {{rowsNumber}} x {{colsNumber}} + </div> + +</div>
\ 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 a14411e5..bc292bb9 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -1,4 +1,4 @@ -<div class="container p-3" style="background-color: rgb(249, 251, 253);"> +<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"> @@ -9,7 +9,8 @@ </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> @@ -20,16 +21,6 @@ </div> </div> - <div style="flex-direction: column; align-items: center; justify-items: center;"> - <label for="type">Tip: </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="form-group row"> <label for="value" class="col-4">Vrednost</label> <div class="input-group"> @@ -41,22 +32,158 @@ <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> + </div>--> <div class="my-4"> <label for="dataset">Izvor podataka:</label> - <!--<app-upload-dataset id="dataset"></app-upload-dataset>--> + <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"> + <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 }} + </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> + </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"> + </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-1"></div> - <div class="col-3"> - <input type="text" class="form-control-plaintext text-center" id="dateCreated" placeholder="--/--/--" - value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly> - </div> + <div class="col-4"></div> </div> </div>
\ 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 1836af52..3cb47d61 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import Model from 'src/app/_data/Model'; -import { ANNType } from 'src/app/_data/Model'; +import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from 'src/app/_data/Model'; @Component({ selector: 'app-add-model', @@ -10,7 +10,12 @@ import { ANNType } from 'src/app/_data/Model'; export class AddModelComponent implements OnInit { newModel: Model + ANNType = ANNType; + Encoding = Encoding; + ActivationFunction = ActivationFunction; + LossFunction = LossFunction; + Optimizer = Optimizer; Object = Object; constructor() { |