diff options
9 files changed, 166 insertions, 67 deletions
diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 22756c36..14c957cb 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -3420,9 +3420,9 @@ } }, "node_modules/async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "dependencies": { "lodash": "^4.17.14" @@ -14355,9 +14355,9 @@ "dev": true }, "async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "requires": { "lodash": "^4.17.14" 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; diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css new file mode 100644 index 00000000..c8db6056 --- /dev/null +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css @@ -0,0 +1,5 @@ +.container{ + max-width: 15rem; + border: 1px solid white; + border-radius: 5px; +} diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html new file mode 100644 index 00000000..65e0f626 --- /dev/null +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html @@ -0,0 +1,40 @@ +<div class="container"> + <mat-form-field appearance="fill"> + <mat-label>Aktivaciona funkcija</mat-label> + <mat-select matNativeControl required [formControl]="selectFormControl"> + <mat-option label="--select something --"></mat-option> + <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="selectFormControl.hasError('required')"> + Obavezno polje + </mat-error> + </mat-form-field> +<br> + Broj čvorova: <input type="number" min="1" class="form-control" name="hiddenLayersNeurons"> + <br> + <mat-form-field appearance="fill"> + <mat-label>Regularizacija</mat-label> + <mat-select matNativeControl required [formControl]="selectFormControl"> + <mat-option label="--select something --"></mat-option> + <mat-option value="l1">L1</mat-option> + <mat-option value="l2">L2</mat-option> + </mat-select> + <mat-error *ngIf="selectFormControl.hasError('required')"> + Obavezno polje + </mat-error> + </mat-form-field> + <br> + <mat-form-field appearance="fill"> + <mat-label>Stopa regularizacije</mat-label> + <mat-select matNativeControl required [formControl]="selectFormControl"> + <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="selectFormControl.hasError('required')"> + Obavezno polje + </mat-error> + </mat-form-field> +</div> diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts new file mode 100644 index 00000000..103e4539 --- /dev/null +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HiddenLayerComponent } from './hidden-layer.component'; + +describe('HiddenLayerComponent', () => { + let component: HiddenLayerComponent; + let fixture: ComponentFixture<HiddenLayerComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ HiddenLayerComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HiddenLayerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts new file mode 100644 index 00000000..fa9a1114 --- /dev/null +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts @@ -0,0 +1,16 @@ +import { Component, OnInit } from '@angular/core'; +import { FormControl, Validators } from '@angular/forms'; + +@Component({ + selector: 'app-hidden-layer', + templateUrl: './hidden-layer.component.html', + styleUrls: ['./hidden-layer.component.css'] +}) +export class HiddenLayerComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + selectFormControl = new FormControl('', Validators.required); +} diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 5502df26..a7850552 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -45,7 +45,7 @@ import { ColumnTableComponent } from './_elements/column-table/column-table.comp import { FolderComponent } from './_elements/folder/folder.component'; import { TestComponent } from './_pages/test/test.component'; import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component'; - +import { HiddenLayerComponent } from './_elements/hidden-layer/hidden-layer.component'; export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); } @@ -78,7 +78,8 @@ export function initializeApp(appConfig: Configuration) { BoxPlotComponent, FolderComponent, TestComponent, - DoughnutChartComponent + DoughnutChartComponent, + HiddenLayerComponent ], imports: [ BrowserModule, |