diff options
Diffstat (limited to 'frontend/src/app/_elements/form-model/form-model.component.html')
| -rw-r--r-- | frontend/src/app/_elements/form-model/form-model.component.html | 341 |
1 files changed, 171 insertions, 170 deletions
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 e51c2cac..fa57ad46 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -1,219 +1,220 @@ -<div id="container"> - <div class="ns-row"> +<div *ngIf="newModel"> + <div id="container"> + <div class="ns-row"> + + <div class="ns-col"> + <mat-form-field class="example-full-width" appearance="fill" class="mat-fix"> + <mat-label>Naziv</mat-label> + <input type="text" matInput [(ngModel)]="newModel.name"> + </mat-form-field> + </div> + <div class="ns-col"> + <mat-form-field appearance="fill" class="mat-fix"> + <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> + </mat-form-field> + </div> + + <div class="break-1"></div> + + <div class="ns-col"> + <mat-form-field appearance="fill" class="mat-fix"> + <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> + + </mat-form-field> + </div> + <div class="ns-col"> + <mat-form-field appearance="fill" class="mat-fix"> + <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-select> + </mat-form-field> + </div> + + <div class="break-2"></div> + + <div class="ns-col"> + <mat-form-field appearance="fill" class="mat-fix"> + <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="ns-col"> + <mat-form-field appearance="fill" class="mat-fix"> + <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> + </mat-form-field> + </div> + + <div class="break-1"></div> + + <div class="ns-col"> + <mat-form-field appearance="fill" class="mat-fix"> + <mat-label>Broj epoha</mat-label> + <input type="number" matInput [(ngModel)]="newModel.epochs" min="1" max="1000"> + </mat-form-field> + </div> + <div class="ns-col"> + <mat-form-field appearance="fill" class="mat-fix"> + <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="ns-col"> - <mat-form-field class="example-full-width" appearance="fill" class="mat-fix"> - <mat-label>Naziv</mat-label> - <input type="text" matInput [(ngModel)]="newModel.name"> - </mat-form-field> </div> - <div class="ns-col"> - <mat-form-field appearance="fill" class="mat-fix"> - <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> - </mat-form-field> + </div> + <div> + <div class="ns-row" style="margin-top: 10px;"> + <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary);margin-left: 10px;"> + + <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div> + <div class="text-center pt-0 mt-0">Trening + <mat-slider min="10" max="90" step="10" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider> + Test</div> + + </div> + <div class="ns-col slider rounded text-offwhite justify-content-center align-items-center" style="border:1px solid var(--ns-primary);margin-left: 10px;"> + <mat-checkbox class="pt-4" color="accent">Nasumični redosled podataka</mat-checkbox> + </div> + + </div> + </div> - <div class="break-1"></div> + <!--kraj unosa parametara--> + <hr> + <div class="m-2"> + <app-graph [model]="newModel"></app-graph> + </div> + <div class="ns-row"> - <div class="ns-col"> - <mat-form-field appearance="fill" class="mat-fix"> - <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> + <div class="ns-col" id="layers-control"> + <div>Broj Skrivenih Slojeva</div> + <button class="btn-clear btn-icon bubble" (click)="addLayer()"> + <mat-icon>add</mat-icon> + </button> + <div>{{newModel.hiddenLayers}}</div> + <button class="btn-clear btn-icon bubble" (click)="removeLayer()"> + <mat-icon>remove</mat-icon> + </button> - </mat-form-field> </div> + <div class="break-1"></div> <div class="ns-col"> <mat-form-field appearance="fill" class="mat-fix"> - <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"> + <mat-label>Aktivaciona funkcija svih slojeva</mat-label> + + <mat-select [(ngModel)]="selectedActivation" (selectionChange)="changeAllActivation()"> + <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="break-2"></div> - <div class="ns-col"> <mat-form-field appearance="fill" class="mat-fix"> - <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-label>Broj neurona svih slojeva</mat-label> + <input matInput type="number" min="1" max="18" [(ngModel)]="selectedNumberOfNeurons" (change)="changeAllNumberOfNeurons()"> </mat-form-field> </div> + <div class="break-2"></div> <div class="ns-col"> <mat-form-field appearance="fill" class="mat-fix"> - <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"> + <mat-label>Regularizacija svih slojeva</mat-label> + <mat-select [(ngModel)]="selectedRegularisation" (selectionChange)="changeAllRegularisation()"> + <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="break-1"></div> - <div class="ns-col"> <mat-form-field appearance="fill" class="mat-fix"> - <mat-label>Broj epoha</mat-label> - <input type="number" matInput [(ngModel)]="newModel.epochs" min="1" max="1000"> - </mat-form-field> - </div> - <div class="ns-col"> - <mat-form-field appearance="fill" class="mat-fix"> - <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-label>Stopa regularizacije svih slojeva</mat-label> + <mat-select [(ngModel)]="selectedRegularisationRate" (selectionChange)="changeAllRegularisationRate()"> + <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> -<div> - <div class="ns-row" style="margin-top: 10px;"> - <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary);margin-left: 10px;"> - - <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div> - <div class="text-center pt-0 mt-0">Trening - <mat-slider min="10" max="90" step="10" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider> - Test</div> - - </div> - <div class="ns-col slider rounded text-offwhite justify-content-center align-items-center" style="border:1px solid var(--ns-primary);margin-left: 10px;"> - <mat-checkbox class="pt-4" color="accent">Nasumični redosled podataka</mat-checkbox> - </div> - </div> -</div> - -<!--kraj unosa parametara--> -<hr> -<div class="m-2"> - <app-graph [model]="newModel" [inputColumns]="forExperiment?.inputColumns"></app-graph> -</div> -<div class="ns-row"> - - <div class="ns-col" id="layers-control"> - <div>Broj Skrivenih Slojeva</div> - <button class="btn-clear btn-icon bubble" (click)="addLayer()"> - <mat-icon>add</mat-icon> - </button> - <div>{{newModel.hiddenLayers}}</div> - <button class="btn-clear btn-icon bubble" (click)="removeLayer()"> - <mat-icon>remove</mat-icon> - </button> - - </div> - <div class="break-1"></div> - <div class="ns-col"> - <mat-form-field appearance="fill" class="mat-fix"> - <mat-label>Aktivaciona funkcija svih slojeva</mat-label> - - <mat-select [(ngModel)]="selectedActivation" (selectionChange)="changeAllActivation()"> - <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="ns-col"> - <mat-form-field appearance="fill" class="mat-fix"> - <mat-label>Broj neurona svih slojeva</mat-label> - <input matInput type="number" min="1" max="18" [(ngModel)]="selectedNumberOfNeurons" (change)="changeAllNumberOfNeurons()"> - </mat-form-field> - </div> - <div class="break-2"></div> - <div class="ns-col"> - <mat-form-field appearance="fill" class="mat-fix"> - <mat-label>Regularizacija svih slojeva</mat-label> - <mat-select [(ngModel)]="selectedRegularisation" (selectionChange)="changeAllRegularisation()"> - <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="ns-col"> - <mat-form-field appearance="fill" class="mat-fix"> - <mat-label>Stopa regularizacije svih slojeva</mat-label> - <mat-select [(ngModel)]="selectedRegularisationRate" (selectionChange)="changeAllRegularisationRate()"> - <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> -<!--kraj selectall**********************************************************************************--> -<div id="layers"> + <!--kraj selectall**********************************************************************************--> + <div id="layers"> - <div class="layer" *ngFor="let item of newModel.layers; let i=index"> + <div class="layer" *ngFor="let item of newModel.layers; let i=index"> - <mat-form-field appearance="fill" class="mat-fix"> - <mat-label>Aktivacija</mat-label> - <button matPrefix class="btn-clear center-center text-offwhite"> + <mat-form-field appearance="fill" class="mat-fix"> + <mat-label>Aktivacija</mat-label> + <button matPrefix class="btn-clear center-center text-offwhite"> <div> #{{i+1}} </div> </button> - <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 tm"> - <div class="col-6" style="font-size: 13px;">Broj čvorova</div> - <button class="btn-clear btn-icon bubble" (click)="addNeuron(i)"> + <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 tm"> + <div class="col-6" style="font-size: 13px;">Broj čvorova</div> + <button class="btn-clear btn-icon bubble" (click)="addNeuron(i)"> <mat-icon>add</mat-icon> </button> - <div class="col-2 text-center">{{newModel.layers[i].neurons}}</div> - <button class="btn-clear btn-icon bubble" (click)="removeNeuron(i)"> + <div class="col-2 text-center">{{newModel.layers[i].neurons}}</div> + <button class="btn-clear btn-icon bubble" (click)="removeNeuron(i)"> <mat-icon>remove</mat-icon> </button> - </div> + </div> - <mat-form-field appearance="fill" class="mat-fix"> - <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" class="mat-fix"> - <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> + <mat-form-field appearance="fill" class="mat-fix"> + <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" class="mat-fix"> + <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>
\ No newline at end of file |