diff options
Diffstat (limited to 'frontend/src/app/_elements/form-model')
3 files changed, 305 insertions, 100 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..f4d085ea 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,50 @@ -*{ +#container{ + color:var(--offwhite); +} +mat-label{ color: var(--offwhite) !important; +} +select{ + color: var(--offwhite) !important; +} +mat-form-field{ + color: var(--offwhite) !important; + padding: 0; +} +hr{ + color: var(--offwhite) !important; + margin-bottom: 30px;; +} +.row{ + margin: 0; + padding: 0; +} +mat-icon{ + color: var(--ns-primary); +} +#rowhn{ + margin-bottom:-50px; + padding: 0; +} +.neuron{ + + text-align: justify; + border: 1px solid white; + border-radius: 5px; + padding: 0; + color: white!important; + background-color: var(--ns-bg-dark-100) !important; + min-width: none; + max-width: 12.5rem; + +} +mat-form-field{ + font-size: 12px; +} +col-1{ + text-align: center; +} +mat-icon{ + margin-right: 5px; + margin-left: -7px; }
\ 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..0b63c5ac 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -1,31 +1,29 @@ -<div class="container"> +<div id="container"> <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]="selectTypeFormControl"> + <mat-option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option"> {{ optionName }} - </option> - </select> - <mat-error *ngIf="selectFormControl.hasError('required')"> + </mat-option> + </mat-select> + <mat-error *ngIf="selectTypeFormControl.hasError('required')"> Obavezno polje </mat-error> </mat-form-field> @@ -35,105 +33,152 @@ <div class="row"> <mat-form-field appearance="fill"> <mat-label>Optimizacija</mat-label> - <select matNativeControl required [formControl]="selectFormControl"> - <option + <mat-select matNativeControl required [formControl]="selectOptFormControl"> + <mat-option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" [value]="option"> {{ optionName }} - </option> - </select> - <mat-error *ngIf="selectFormControl.hasError('required')"> + </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>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-error *ngIf="selectFormControl.hasError('required')"> - Obavezno polje + <mat-form-field appearance="fill"> + <mat-label>Funkcija troška</mat-label> + <mat-select matNativeControl required [formControl]="selectLFFormControl"> + <mat-option + *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> <div class="col-sm"> <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-error *ngIf="selectFormControl.hasError('required')"> - Obavezno polje - </mat-error> - </mat-form-field> + + <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-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>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-error *ngIf="selectFormControl.hasError('required')"> - Obavezno polje + <mat-form-field appearance="fill"> + <mat-label>Funkcija troška</mat-label> + <mat-select matNativeControl required [formControl]="selectLFFormControl"> + <mat-option + *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> - <div class="col-sm"> + <div class="col"> + <div class="row"> + <div class="col-7">Broj Epoha</div> + <mat-icon (click)="addEpoch()">add_circle</mat-icon> + <div class="col-1">{{newModel.epochs}}</div> + <mat-icon (click)="removeEpoch()">remove_circle</mat-icon> + </div> + <br> + <br> <div class="row"> + <div class="col-7">Broj Uzoraka Po Iteraciji</div> + <mat-icon (click)="addBatch()">add_circle</mat-icon> + <div class="col-1">{{newModel.batchSize}}</div> + <mat-icon (click)="removeBatch()">remove_circle</mat-icon> + </div> + </div> + </div><!--kraj unosa parametara--> + <hr> + <div class="m-5"> + <app-graph [model]="newModel" [inputCols]="newModel.inputColNum"></app-graph> + <div class="row" id="rowhn"> + <div class="col-3"></div> + <div class="col-2">Broj Skrivenih Slojeva</div> + <div class="col-1"><mat-icon (click)="addLayer()" (ngModelChange)="updateGraph()">add_circle</mat-icon></div> + <div class="col-1">{{newModel.hiddenLayers}}</div> + <div class="col-1"><mat-icon (click)="removeLayer()" (ngModelChange)="updateGraph()">remove_circle</mat-icon></div> + </div> + </div> + <hr> + <div class="row" style="max-width:60rem ;"> + + <div class="col text-center" *ngFor="let item of numSequence(newModel.hiddenLayers)" > + {{item}} + <div class="neuron"> + <div style="text-align: center;"> + <label >Skriveni sloj</label> + </div> + <div class="row" style="margin-bottom: -10px;"> <mat-form-field appearance="fill"> - <mat-label>Funkcija aktivacije izlaznog sloja</mat-label> - <select matNativeControl required [formControl]="selectFormControl" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> - <option - *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" - [value]="option"> - {{ optionName }} - </option> - </select> - <mat-error *ngIf="selectFormControl.hasError('required')"> + <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-form-field> + </div> + <div class="row" > + <div class="col-6" style="font-size: 13px;" >Broj čvorova</div> + <mat-icon (click)="addNeuron()">add_circle</mat-icon> + <div class="col-1">{{newModel.hiddenLayerNeurons}}</div> + <mat-icon (click)="removeNeuron()">remove_circle</mat-icon> + </div> - <div class="row"> - <mat-form-field appearance="fill"> - <mat-label>Funkcija troška</mat-label> - <select matNativeControl required [formControl]="selectFormControl"> - <option - *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)" - [value]="option"> - {{ optionName }} - </option> - </select> - <mat-error *ngIf="selectFormControl.hasError('required')"> - Obavezno polje + <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-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-form-field> + </div> </div> + <br> </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> - <div class="m-5"> - <app-graph [model]="newModel" [inputCols]="4"></app-graph> - <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()"> - </div> - </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..b1d0a2a9 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', @@ -14,19 +16,25 @@ export class FormModelComponent implements OnInit { @Input() forExperiment?: Experiment; @Output() selectedModelChangeEvent = new EventEmitter<Model>(); - constructor() { } + constructor() { + this.newModel.epochs=1; + this.newModel.batchSize=1; +} 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]); + selectTypeFormControl=new FormControl('', Validators.required); + selectOptFormControl=new FormControl('', Validators.required); + selectLFFormControl=new FormControl('', Validators.required); + selectLRFormControl=new FormControl('', Validators.required); + selectEpochFormControl=new FormControl('', Validators.required); + selectAFFormControl=new FormControl('', Validators.required); + selectBSFormControl=new FormControl('', Validators.required); + selectActivationFormControl = new FormControl('', Validators.required); + selectRegularisationFormControl = new FormControl('', Validators.required); + selectRRateFormControl = new FormControl('', Validators.required); newModel: Model = new Model(); myModels?: Model[]; selectedModel?: Model; @@ -45,10 +53,115 @@ export class FormModelComponent implements OnInit { lossFunction: any = LossFunction; showMyModels: boolean = true; + + hiddenLayers=[]; + + - batchSizePower: number = 2; updateGraph() { this.graph.update(); } + removeLayer(){ + if(this.newModel.hiddenLayers>1) + { + this.newModel.hiddenLayers-=1; + this.updateGraph(); + } + else + { + this.newModel.hiddenLayers=this.newModel.hiddenLayers; + } + + } + addLayer(){ + if(this.newModel.hiddenLayers<12) + { + this.newModel.hiddenLayers+=1; + this.updateGraph(); + } + else + { + this.newModel.hiddenLayers=this.newModel.hiddenLayers; + + } + } + removeBatch(){ + if(this.newModel.batchSize>1) + { + this.newModel.batchSize=this.newModel.batchSize/2; + } + else + { + this.newModel.batchSize=this.newModel.batchSize; + } + + } + addBatch(){ + if(this.newModel.batchSize<600) + { + this.newModel.batchSize=this.newModel.batchSize*2; + } + else + { + this.newModel.batchSize=this.newModel.batchSize; + + } + } + removeEpoch(){ + if(this.newModel.epochs>1) + { + this.newModel.epochs=this.newModel.epochs-1; + } + else + { + this.newModel.epochs=this.newModel.epochs; + } + + } + addEpoch(){ + if(this.newModel.epochs<100) + { + this.newModel.epochs=this.newModel.epochs+1; + } + else + { + this.newModel.epochs=this.newModel.epochs; + + } + } + /* + setNeurons() + { + for(let i=0;i<this.newModel.hiddenLayers;i++){ + this.newModel.hiddenLayerNeurons[i]=1; + } + }*/ + numSequence(n: number): Array<number> { + return Array(n); + } + removeNeuron(){ + if(this.newModel.hiddenLayerNeurons>1) + { + this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons-1; + this.updateGraph(); + } + else + { + this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons; + } + + } + addNeuron(){ + if(this.newModel.hiddenLayerNeurons<100) + { + this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons+1; + this.updateGraph(); + } + else + { + this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons; + + } + } } |