diff options
Diffstat (limited to 'frontend/src/app/_elements/form-model')
3 files changed, 71 insertions, 59 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 9340fed5..c650bdeb 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -1,3 +1,12 @@ -*{ +mat-label{ + color: var(--offwhite) !important; +} +select{ + color: var(--offwhite) !important; +} +mat-form-field{ + color: var(--offwhite) !important; +} +hr{ color: var(--offwhite) !important; }
\ No newline at end of file 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 5db2cb49..69635a4a 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -2,29 +2,27 @@ <div class="row"> <div class="col-sm"> <div class="row"> - <mat-form-field appearance="fill"> - <mat-label>Naziv</mat-label> - <select matNativeControl required [formControl]="selectFormControl"> - <option label="--select something --"></option> - <option value="saab">Saab</option> - <option value="mercedes">Mercedes</option> - <option value="audi">Audi</option> - </select> - <mat-error *ngIf="selectFormControl.hasError('required')"> - Obavezno polje - </mat-error> - </mat-form-field> + <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> + </mat-form-field> </div> <div class="row"> <mat-form-field appearance="fill"> <mat-label>Tip problema</mat-label> - <select matNativeControl required [formControl]="selectFormControl"> - <option + <mat-select matNativeControl required [formControl]="selectFormControl"> + <mat-option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option"> {{ optionName }} - </option> - </select> + </mat-option> + </mat-select> <mat-error *ngIf="selectFormControl.hasError('required')"> Obavezno polje </mat-error> @@ -35,13 +33,13 @@ <div class="row"> <mat-form-field appearance="fill"> <mat-label>Optimizacija</mat-label> - <select matNativeControl required [formControl]="selectFormControl"> - <option + <mat-select matNativeControl required [formControl]="selectFormControl"> + <mat-option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" [value]="option"> {{ optionName }} - </option> - </select> + </mat-option> + </mat-select> <mat-error *ngIf="selectFormControl.hasError('required')"> Obavezno polje </mat-error> @@ -50,12 +48,12 @@ <div class="row"> <mat-form-field appearance="fill"> <mat-label>Learning rate</mat-label> - <select matNativeControl required [formControl]="selectFormControl"> - <option label="--select something --"></option> - <option value="saab">Saab</option> - <option value="mercedes">Mercedes</option> - <option value="audi">Audi</option> - </select> + <mat-select matNativeControl required [formControl]="selectFormControl"> + <mat-option label="--select something --"></mat-option> + <mat-option value="saab">Saab</mat-option> + <mat-option value="mercedes">Mercedes</mat-option> + <mat-option value="audi">Audi</mat-option> + </mat-select> <mat-error *ngIf="selectFormControl.hasError('required')"> Obavezno polje </mat-error> @@ -66,12 +64,12 @@ <div class="row"> <mat-form-field appearance="fill"> <mat-label>Broj epoha</mat-label> - <select matNativeControl required [formControl]="selectFormControl"> - <option label="--select something --"></option> - <option value="saab">Saab</option> - <option value="mercedes">Mercedes</option> - <option value="audi">Audi</option> - </select> + <mat-select matNativeControl required [formControl]="selectFormControl"> + <mat-option label="--select something --"></mat-option> + <mat-option value="saab">Saab</mat-option> + <mat-option value="mercedes">Mercedes</mat-option> + <mat-option value="audi">Audi</mat-option> + </mat-select> <mat-error *ngIf="selectFormControl.hasError('required')"> Obavezno polje </mat-error> @@ -80,12 +78,12 @@ <div class="row"> <mat-form-field appearance="fill"> <mat-label>Broj uzoraka po iteraciji</mat-label> - <select matNativeControl required [formControl]="selectFormControl"> - <option label="--select something --"></option> - <option value="saab">Saab</option> - <option value="mercedes">Mercedes</option> - <option value="audi">Audi</option> - </select> + <mat-select matNativeControl required [formControl]="selectFormControl"> + <mat-option label="--select something --"></mat-option> + <mat-option value="saab">Saab</mat-option> + <mat-option value="mercedes">Mercedes</mat-option> + <mat-option value="audi">Audi</mat-option> + </mat-select> <mat-error *ngIf="selectFormControl.hasError('required')"> Obavezno polje </mat-error> @@ -96,13 +94,13 @@ <div class="row"> <mat-form-field appearance="fill"> <mat-label>Funkcija aktivacije izlaznog sloja</mat-label> - <select matNativeControl required [formControl]="selectFormControl" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> - <option + <mat-select matNativeControl required [formControl]="selectFormControl" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> + <mat-option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" [value]="option"> {{ optionName }} - </option> - </select> + </mat-option> + </mat-select> <mat-error *ngIf="selectFormControl.hasError('required')"> Obavezno polje </mat-error> @@ -111,13 +109,13 @@ <div class="row"> <mat-form-field appearance="fill"> <mat-label>Funkcija troška</mat-label> - <select matNativeControl required [formControl]="selectFormControl"> - <option + <mat-select matNativeControl required [formControl]="selectFormControl"> + <mat-option *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)" [value]="option"> {{ optionName }} - </option> - </select> + </mat-option> + </mat-select> <mat-error *ngIf="selectFormControl.hasError('required')"> Obavezno polje </mat-error> @@ -125,15 +123,24 @@ </div> </div> </div><!--kraj unosa parametara--> - + <div class="col-1"> - <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()"> - </div> + <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()"> + </div> + <hr> <div class="m-5"> <app-graph [model]="newModel" [inputCols]="4"></app-graph> + Broj skrivenih slojeva: <div class="col-1"> - <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()"> + <input type="number" min="1" class="form" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()"> </div> </div> + </div> + <hr> + <div class="row"> + + <div class="col"> + <app-hidden-layer></app-hidden-layer> + </div> </div>
\ No newline at end of file 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 6f795161..c5ab9811 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -4,6 +4,8 @@ import Shared from 'src/app/Shared'; import Experiment from 'src/app/_data/Experiment'; import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model'; import { GraphComponent } from '../graph/graph.component'; +import {FormGroupDirective, NgForm} from '@angular/forms'; +import {ErrorStateMatcher} from '@angular/material/core'; @Component({ selector: 'app-form-model', templateUrl: './form-model.component.html', @@ -18,15 +20,9 @@ export class FormModelComponent implements OnInit { ngOnInit(): void { } - animalControl = new FormControl('', Validators.required); selectFormControl = new FormControl('', Validators.required); - /*animals: Animal[] = [ - {name: 'Dog', sound: 'Woof!'}, - {name: 'Cat', sound: 'Meow!'}, - {name: 'Cow', sound: 'Moo!'}, - {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'}, - ]; - */ + nameFormControl = new FormControl('', [Validators.required, Validators.email]); + newModel: Model = new Model(); myModels?: Model[]; selectedModel?: Model; |