diff options
Diffstat (limited to 'frontend/src/app/_pages/add-model')
4 files changed, 246 insertions, 0 deletions
diff --git a/frontend/src/app/_pages/add-model/add-model.component.css b/frontend/src/app/_pages/add-model/add-model.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_pages/add-model/add-model.component.css diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html new file mode 100644 index 00000000..bc292bb9 --- /dev/null +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -0,0 +1,189 @@ +<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 }} + </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-4"></div> + </div> + +</div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/add-model/add-model.component.spec.ts b/frontend/src/app/_pages/add-model/add-model.component.spec.ts new file mode 100644 index 00000000..2926e1c4 --- /dev/null +++ b/frontend/src/app/_pages/add-model/add-model.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddModelComponent } from './add-model.component'; + +describe('AddModelComponent', () => { + let component: AddModelComponent; + let fixture: ComponentFixture<AddModelComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddModelComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AddModelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts new file mode 100644 index 00000000..3cb47d61 --- /dev/null +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import Model from 'src/app/_data/Model'; +import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from 'src/app/_data/Model'; + +@Component({ + selector: 'app-add-model', + templateUrl: './add-model.component.html', + styleUrls: ['./add-model.component.css'] +}) +export class AddModelComponent implements OnInit { + + newModel: Model + + ANNType = ANNType; + Encoding = Encoding; + ActivationFunction = ActivationFunction; + LossFunction = LossFunction; + Optimizer = Optimizer; + Object = Object; + + constructor() { + this.newModel = new Model(); + } + + ngOnInit(): void { + } + + addModel() { + //TODO + } + +} |