diff options
Diffstat (limited to 'frontend/src/app/_elements/form-model')
3 files changed, 266 insertions, 271 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 051e23fc..c0ae9365 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -1,52 +1,114 @@ -#container{ - color:var(--offwhite); +#container { + color: var(--offwhite); } -mat-label{ + +mat-label { color: var(--offwhite) !important; } -select{ + +select { color: var(--offwhite) !important; } -mat-form-field{ + +mat-form-field { color: var(--offwhite) !important; padding: 0; + margin: 5px; + font-size: 12px; + width: 100%; } -hr{ - color:var(--ns-primary) 100%; - margin-bottom: 30px; - height: 2px; +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{ - + +.neuron { text-align: justify; - border: 1px solid var(--ns-primary); + border: 1px solid white; border-radius: 5px; padding: 0; - color: white!important; + color: var(--offwhite) !important; background-color: var(--ns-bg-dark-100) !important; min-width: none; max-width: 12.5rem; - } -mat-form-field{ - font-size: 15px; -} -col-1{ + +col-1 { text-align: center; } -mat-icon{ - margin-right: 5px; - margin-left: -7px; + +.row { + margin: 0; + padding: 0; +} + +.ns-row { + width: 98%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0; + padding: 0; +} + +.ns-col { + flex-grow: 1; + padding: 2px; + margin-bottom: 0; + padding-bottom: 0; +} + +::ng-deep .mat-form-field-wrapper { + margin-bottom: -1.85em; +} + +.break-1, +.break-2 { + height: 1px; + width: 100%; +} + +@media screen and (min-width: 1200px) { + .break-1 { + display: none; + } +} + +@media screen and (min-width: 2175px) { + .break-2 { + display: none; + } +} + +#layers-control { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +#layers { + margin: 0; + padding: 0; + display: flex; + flex-direction: row; + overflow-x: auto; + overflow-wrap: break-word; + overflow-y: hidden; + width: 100%; +} + +.layer { + border: 1px solid var(--ns-primary); + border-radius: 4px; + margin: 5px; + padding: 3px; + width: 12rem; + height: 13rem; +} + +.layer>mat-form-field { + margin-left: 0; }
\ 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 6435b8d6..396d40c6 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -1,169 +1,153 @@ <div id="container"> - <div class="row"> - <div class="col-sm"> - <div class="row"> - <mat-form-field class="example-full-width" appearance="fill"> - <mat-label>Naziv</mat-label> - <input type="text" matInput [(ngModel)]="newModel.name"> - </mat-form-field> + <div class="ns-row"> + + <div class="ns-col"> + <mat-form-field class="example-full-width" appearance="fill"> + <mat-label>Naziv</mat-label> + <input type="text" matInput [(ngModel)]="newModel.name"> + </mat-form-field> </div> - <div class="row"> + <div class="ns-col"> <mat-form-field appearance="fill"> <mat-label>Tip problema</mat-label> - <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 [(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-form-field> + + </mat-form-field> </div> - </div> - <div class="col-sm"> - <div class="row"> + + <div class="break-1"></div> + + <div class="ns-col"> <mat-form-field appearance="fill"> <mat-label>Optimizacija</mat-label> - <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 [(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-form-field> + + </mat-form-field> </div> - <div class="row"> - <mat-form-field appearance="fill"> + <div class="ns-col"> + <mat-form-field appearance="fill"> <mat-label>Funkcija troška</mat-label> <mat-select [(ngModel)]="newModel.lossFunction"> - <mat-option - *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)" - [value]="option"> - {{ optionName }} - </mat-option> + <mat-option *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)" [value]="option"> + {{ optionName }} + </mat-option> </mat-select> - - </mat-form-field> + + </mat-form-field> </div> - </div> - <div class="col-sm"> - <div class="row"> - - <mat-form-field appearance="fill"> - <mat-label>Funkcija aktivacije izlaznog sloja</mat-label> - <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-form-field> - + + <div class="break-2"></div> + + <div class="ns-col"> + <mat-form-field appearance="fill"> + <mat-label>Funkcija aktivacije izlaznog sloja</mat-label> + <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-form-field> </div> - <div class="row"> - <mat-form-field appearance="fill"> + <div class="ns-col"> + <mat-form-field appearance="fill"> <mat-label>Stopa učenja</mat-label> - <mat-select [(ngModel)]="newModel.learningRate"> - <mat-option - *ngFor="let option of Object.keys(LearningRate); let optionName of Object.values(LearningRate)" - [value]="option"> - {{ optionName }} - </mat-option> + <mat-select [(ngModel)]="newModel.learningRate"> + <mat-option *ngFor="let option of Object.keys(LearningRate); let optionName of Object.values(LearningRate)" [value]="option"> + {{ optionName }} + </mat-option> </mat-select> - - </mat-form-field> - </div> - </div> - <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> + </mat-form-field> </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 class="break-1"></div> + + <div class="ns-col"> + <mat-form-field appearance="fill"> + <mat-label>Broj epoha</mat-label> + <input type="number" matInput [(ngModel)]="newModel.epochs" min="1" max="1000"> + </mat-form-field> </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); let i=index" > - {{item}} - <div class="neuron"> - <div style="text-align: center;"> - <label >Skriveni sloj {{i+1}}</label> - </div> - <div class="row" style="margin-bottom: -10px;"> + <div class="ns-col"> <mat-form-field appearance="fill"> - <mat-label>Aktivaciona funkcija</mat-label> - <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" > - <div class="col-6" style="font-size: 13px;" >Broj čvorova</div> - <mat-icon (click)="addNeuron(i)">add_circle</mat-icon> - <div class="col-1">{{newModel.layers[i].neurons}}</div> - <mat-icon (click)="removeNeuron(i)">remove_circle</mat-icon> - + <mat-label>Broj uzoraka po iteraciji</mat-label> + + <mat-select matNativeControl required [(value)]="newModel.batchSize"> + <mat-option *ngFor="let option of Object.keys(BatchSize); let optionName of Object.values(BatchSize)" [value]="option">{{option}}</mat-option> + </mat-select> + </mat-form-field> </div> - <div class='row' style="margin-bottom: -7px;"> - <mat-form-field appearance="fill"> - <mat-label>Regularizacija</mat-label> - <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 [(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> +</div> + + +<!--kraj unosa parametara--> +<hr> +<div class="m-2"> + <app-graph [model]="newModel" [inputCols]="newModel.inputColNum"></app-graph> + <div id="layers-control"> + <div>Broj Skrivenih Slojeva</div> + <button class="btn-clear btn-icon" (click)="addLayer()"> + <mat-icon>add</mat-icon> + </button> + <div>{{newModel.hiddenLayers}}</div> + <button class="btn-clear btn-icon" (click)="removeLayer()"> + <mat-icon>remove</mat-icon> + </button> + </div> +</div> +<hr> +<div id="layers"> + + <div class="layer" *ngFor="let item of newModel.layers; let i=index"> + <div class="text-center"> + #{{i+1}} + </div> + + <mat-form-field appearance="fill"> + <mat-label>Aktivaciona funkcija</mat-label> + <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 class="d-flex flex-row align-items-center justify-content-center m-1"> + <div class="col-6" style="font-size: 13px;">Broj čvorova</div> + <button class="btn-clear btn-icon" (click)="addNeuron(i)"> + <mat-icon>add</mat-icon> + </button> + <div class="col-1">{{newModel.layers[i].neurons}}</div> + <button class="btn-clear btn-icon" (click)="removeNeuron(i)"> + <mat-icon>remove</mat-icon> + </button> </div> - <br> - </div> - - </div>
\ No newline at end of file + + <mat-form-field appearance="fill"> + <mat-label>Regularizacija</mat-label> + <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> + + <mat-form-field appearance="fill"> + <mat-label>Stopa regularizacije</mat-label> + <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>
\ 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 c3c73b3e..c29fd0bb 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -1,37 +1,36 @@ -import { Component, OnInit ,Input, ViewChild, Output, EventEmitter} from '@angular/core'; -import {FormControl, Validators} from '@angular/forms'; +import { Component, OnInit, Input, ViewChild, Output, EventEmitter, AfterViewInit } from '@angular/core'; +import { FormControl, Validators } from '@angular/forms'; import Shared from 'src/app/Shared'; import Experiment from 'src/app/_data/Experiment'; -import Model, {Layer, ActivationFunction, LossFunction,LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType ,Regularisation,RegularisationRate} from 'src/app/_data/Model'; +import Model, { Layer, ActivationFunction, LossFunction, LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType, Regularisation, RegularisationRate, BatchSize } from 'src/app/_data/Model'; import { GraphComponent } from '../graph/graph.component'; -import {FormGroupDirective, NgForm} from '@angular/forms'; -import {ErrorStateMatcher} from '@angular/material/core'; +import { FormGroupDirective, NgForm } from '@angular/forms'; +import { ErrorStateMatcher } from '@angular/material/core'; + @Component({ selector: 'app-form-model', templateUrl: './form-model.component.html', styleUrls: ['./form-model.component.css'] }) -export class FormModelComponent implements OnInit { +export class FormModelComponent implements AfterViewInit { @ViewChild(GraphComponent) graph!: GraphComponent; @Input() forExperiment?: Experiment; @Output() selectedModelChangeEvent = new EventEmitter<Model>(); - constructor() { - this.newModel.epochs=1; - this.newModel.batchSize=1; -} - - ngOnInit(): void { + constructor() { } + + ngAfterViewInit(): void { } + selectFormControl = new FormControl('', Validators.required); 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); + 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); @@ -43,92 +42,44 @@ export class FormModelComponent implements OnInit { ProblemType = ProblemType; ActivationFunction = ActivationFunction; - RegularisationRate=RegularisationRate; - Regularisation=Regularisation; + RegularisationRate = RegularisationRate; + Regularisation = Regularisation; metrics: any = Metrics; LossFunction = LossFunction; Optimizer = Optimizer; + BatchSize = BatchSize; Object = Object; document = document; shared = Shared; - LearningRate=LearningRate; - Layer=Layer; - + LearningRate = LearningRate; + Layer = Layer; + term: string = ""; selectedMetrics = []; lossFunction: any = LossFunction; showMyModels: boolean = true; - - hiddenLayers=[]; - - - updateGraph() { + console.log(this.newModel.layers); this.graph.update(); } - removeLayer(){ - if(this.newModel.hiddenLayers>1) - { - this.newModel.layers.splice(this.newModel.layers.length-1,1); - this.newModel.hiddenLayers-=1; + + removeLayer() { + if (this.newModel.hiddenLayers > 1) { + this.newModel.layers.splice(this.newModel.layers.length - 1, 1); + this.newModel.hiddenLayers -= 1; this.updateGraph(); } } - addLayer(){ - if(this.newModel.hiddenLayers<12) - { + addLayer() { + if (this.newModel.hiddenLayers < 128) { this.newModel.layers.push(new Layer(this.newModel.layers.length)); - this.newModel.hiddenLayers+=1; + this.newModel.hiddenLayers += 1; this.updateGraph(); } - - } - 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() @@ -140,18 +91,16 @@ export class FormModelComponent implements OnInit { numSequence(n: number): Array<number> { return Array(n); } - - removeNeuron(index:number){ - if(this.newModel.layers[index].neurons>1) - { - this.newModel.layers[index].neurons-=1; + + removeNeuron(index: number) { + if (this.newModel.layers[index].neurons > 1) { + this.newModel.layers[index].neurons -= 1; this.updateGraph(); } } - addNeuron(index:number){ - if(this.newModel.layers[index].neurons<100) - { - this.newModel.layers[index].neurons+=1; + addNeuron(index: number) { + if (this.newModel.layers[index].neurons < 100) { + this.newModel.layers[index].neurons += 1; this.updateGraph(); } } |