diff options
Diffstat (limited to 'frontend/src/app/_elements/form-model')
3 files changed, 53 insertions, 60 deletions
diff --git a/frontend/src/app/_elements/form-model/form-model.component.css b/frontend/src/app/_elements/form-model/form-model.component.css index f4d085ea..051e23fc 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -12,8 +12,10 @@ mat-form-field{ padding: 0; } hr{ - color: var(--offwhite) !important; - margin-bottom: 30px;; + color:var(--ns-primary) 100%; + margin-bottom: 30px; + height: 2px; + } .row{ margin: 0; @@ -29,7 +31,7 @@ mat-icon{ .neuron{ text-align: justify; - border: 1px solid white; + border: 1px solid var(--ns-primary); border-radius: 5px; padding: 0; color: white!important; @@ -39,7 +41,7 @@ mat-icon{ } mat-form-field{ - font-size: 12px; + font-size: 15px; } col-1{ text-align: center; 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 ac5ca9ab..6435b8d6 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -4,28 +4,20 @@ <div class="row"> <mat-form-field class="example-full-width" appearance="fill"> <mat-label>Naziv</mat-label> - <input type="text" matInput [formControl]="nameFormControl"> - <mat-error *ngIf="nameFormControl.hasError('name') && !nameFormControl.hasError('required')"> - Unesite naziv - </mat-error> - <mat-error *ngIf="nameFormControl.hasError('required')"> - Naziv je <strong>obavezan</strong> - </mat-error> + <input type="text" matInput [(ngModel)]="newModel.name"> </mat-form-field> </div> <div class="row"> <mat-form-field appearance="fill"> <mat-label>Tip problema</mat-label> - <mat-select matNativeControl required [formControl]="selectTypeFormControl"> + <mat-select [(ngModel)]="newModel.type"> <mat-option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option"> {{ optionName }} </mat-option> </mat-select> - <mat-error *ngIf="selectTypeFormControl.hasError('required')"> - Obavezno polje - </mat-error> + </mat-form-field> </div> </div> @@ -33,31 +25,27 @@ <div class="row"> <mat-form-field appearance="fill"> <mat-label>Optimizacija</mat-label> - <mat-select matNativeControl required [formControl]="selectOptFormControl"> + <mat-select [(ngModel)]="newModel.optimizer"> <mat-option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" [value]="option"> {{ optionName }} </mat-option> </mat-select> - <mat-error *ngIf="selectOptFormControl.hasError('required')"> - Obavezno polje - </mat-error> + </mat-form-field> </div> <div class="row"> <mat-form-field appearance="fill"> <mat-label>Funkcija troška</mat-label> - <mat-select matNativeControl required [formControl]="selectLFFormControl"> + <mat-select [(ngModel)]="newModel.lossFunction"> <mat-option - *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)" + *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)" [value]="option"> {{ optionName }} </mat-option> </mat-select> - <mat-error *ngIf="selectLFFormControl.hasError('required')"> - Obavezno polje - </mat-error> + </mat-form-field> </div> </div> @@ -66,32 +54,28 @@ <mat-form-field appearance="fill"> <mat-label>Funkcija aktivacije izlaznog sloja</mat-label> - <mat-select matNativeControl required [formControl]="selectAFFormControl" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> + <mat-select name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> <mat-option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" [value]="option"> {{ optionName }} </mat-option> </mat-select> - <mat-error *ngIf="selectAFFormControl.hasError('required')"> - Obavezno polje - </mat-error> + </mat-form-field> </div> <div class="row"> <mat-form-field appearance="fill"> - <mat-label>Funkcija troška</mat-label> - <mat-select matNativeControl required [formControl]="selectLFFormControl"> + <mat-label>Stopa učenja</mat-label> + <mat-select [(ngModel)]="newModel.learningRate"> <mat-option - *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)" + *ngFor="let option of Object.keys(LearningRate); let optionName of Object.values(LearningRate)" [value]="option"> {{ optionName }} </mat-option> </mat-select> - <mat-error *ngIf="selectLFFormControl.hasError('required')"> - Obavezno polje - </mat-error> + </mat-form-field> </div> </div> @@ -130,19 +114,19 @@ {{item}} <div class="neuron"> <div style="text-align: center;"> - <label >Skriveni sloj</label> + <label >Skriveni sloj {{i+1}}</label> </div> <div class="row" style="margin-bottom: -10px;"> <mat-form-field appearance="fill"> <mat-label>Aktivaciona funkcija</mat-label> - <mat-select matNativeControl required [formControl]="selectActivationFormControl"> - <mat-option value="saab">Relu</mat-option> - <mat-option value="mercedes">Sigmoid</mat-option> - <mat-option value="audi">Softmax</mat-option> - </mat-select> - <mat-error *ngIf="selectActivationFormControl.hasError('required')"> - Obavezno polje - </mat-error> + <mat-select [(ngModel)]="newModel.layers[i].activationFunction"> + <mat-option + *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" + [value]="option"> + {{ optionName }} + </mat-option> + </mat-select> + </mat-form-field> </div> <div class="row" > @@ -155,26 +139,27 @@ <div class='row' style="margin-bottom: -7px;"> <mat-form-field appearance="fill"> <mat-label>Regularizacija</mat-label> - <mat-select matNativeControl required [formControl]="selectRegularisationFormControl"> - <mat-option value="l1">L1</mat-option> - <mat-option value="l2">L2</mat-option> - </mat-select> - <mat-error *ngIf="selectRegularisationFormControl.hasError('required')"> - Obavezno polje - </mat-error> + <mat-select [(ngModel)]="newModel.layers[i].regularisation"> + <mat-option + *ngFor="let option of Object.keys(Regularisation); let optionName of Object.values(Regularisation)" + [value]="option"> + {{ optionName }} + </mat-option> + </mat-select> + </mat-form-field> </div> <div class="row" style="margin-bottom: -7px;"> <mat-form-field appearance="fill"> <mat-label>Stopa regularizacije</mat-label> - <mat-select matNativeControl required [formControl]="selectRRateFormControl"> - <mat-option value="saab">0.001</mat-option> - <mat-option value="mercedes">0.01</mat-option> - <mat-option value="audi">0.1</mat-option> - </mat-select> - <mat-error *ngIf="selectRRateFormControl.hasError('required')"> - Obavezno polje - </mat-error> + <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> + </mat-select> + </mat-form-field> </div> </div> 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 40bc30ea..c3c73b3e 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit ,Input, ViewChild, Output, EventEmitter} from '@angul import {FormControl, Validators} from '@angular/forms'; import Shared from 'src/app/Shared'; import Experiment from 'src/app/_data/Experiment'; -import Model, {Layer, ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model'; +import Model, {Layer, ActivationFunction, LossFunction,LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType ,Regularisation,RegularisationRate} from 'src/app/_data/Model'; import { GraphComponent } from '../graph/graph.component'; import {FormGroupDirective, NgForm} from '@angular/forms'; import {ErrorStateMatcher} from '@angular/material/core'; @@ -35,19 +35,25 @@ export class FormModelComponent implements OnInit { selectActivationFormControl = new FormControl('', Validators.required); selectRegularisationFormControl = new FormControl('', Validators.required); selectRRateFormControl = new FormControl('', Validators.required); + newModel: Model = new Model(); myModels?: Model[]; + selectedModel?: Model; ProblemType = ProblemType; ActivationFunction = ActivationFunction; + RegularisationRate=RegularisationRate; + Regularisation=Regularisation; metrics: any = Metrics; LossFunction = LossFunction; Optimizer = Optimizer; Object = Object; document = document; shared = Shared; - + LearningRate=LearningRate; + Layer=Layer; + term: string = ""; selectedMetrics = []; lossFunction: any = LossFunction; |