diff options
Diffstat (limited to 'frontend/src/app/_elements/model-load')
| -rw-r--r-- | frontend/src/app/_elements/model-load/model-load.component.html | 48 | ||||
| -rw-r--r-- | frontend/src/app/_elements/model-load/model-load.component.ts | 10 |
2 files changed, 33 insertions, 25 deletions
diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html index 62f0932f..0923c895 100644 --- a/frontend/src/app/_elements/model-load/model-load.component.html +++ b/frontend/src/app/_elements/model-load/model-load.component.html @@ -1,4 +1,3 @@ - <div> <div class="col-12 d-flex my-5"> <div class="col-3"> @@ -15,28 +14,27 @@ </div> <div *ngIf="showMyModels" class="px-5 my-2"> - <input *ngIf="showMyModels" type="text" class="form-control" placeholder="Pretraga" - [(ngModel)]="term"> + <input *ngIf="showMyModels" type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term"> </div> <div *ngIf="showMyModels" class="px-5"> <div class="overflow-auto" style="max-height: 500px;"> - <ul class="list-group"> - <li class="list-group-item p-3" *ngFor="let model of myModels|filter:term" - [ngClass]="{'selectedModelClass': this.selectedModel == model}"> - <app-item-model name="usersModel" [model]="model" - (click)="selectThisModel(model);"></app-item-model> - </li> - </ul> - <div class="px-5 mt-5"> - <!--prikaz izabranog modela--> - </div> + <ul class="list-group"> + <li class="list-group-item p-3" *ngFor="let model of myModels|filter:term" + [ngClass]="{'selectedModelClass': this.selectedModel == model}"> + <app-item-model name="usersModel" [model]="model" (click)="selectThisModel(model);"> + </app-item-model> + </li> + </ul> + <div class="px-5 mt-5"> + <!--prikaz izabranog modela--> + </div> </div> </div> <div *ngIf="!showMyModels"> <div class="form-group row mt-3 mb-2 d-flex justify-content-center"> - + <div class="col-3"> <label for="name" class="col-form-label">Naziv modela:</label> <input type="text" class="form-control" name="name" placeholder="Naziv..." [(ngModel)]="newModel.name"> @@ -79,7 +77,8 @@ <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])"> + (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" + (ngModelChange)="updateGraph()"> </div> </div> @@ -105,7 +104,7 @@ </div> <div class="col-1"> <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" - [(ngModel)]="newModel.hiddenLayerNeurons"> + [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()"> </div> </div> @@ -117,7 +116,8 @@ </div> <div class="col-2"> <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer"> - <option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" + <option + *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" [value]="option"> {{ optionName }} </option> @@ -151,8 +151,8 @@ <div class="col-1"></div> <div class="col-3 mt-2"> <label for="type" class="form-check-label">Nasumičan redosled podataka?</label> - <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="newModel.randomOrder" type="checkbox" - value="" checked> + <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="newModel.randomOrder" + type="checkbox" value="" checked> </div> </div> <div class="border m-3"> @@ -191,7 +191,8 @@ <div class="row p-2 m-2" style="align-self: center;"> <div class="col-3"> - <label for="hiddenLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija + <label for="hiddenLayerActivationFunction" class="col-form-label" + style="text-align: center;">Funkcija aktivacije skrivenih slojeva:</label> </div> @@ -213,7 +214,8 @@ </div> </div> <div class="col-3"> - <label for="outputLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija + <label for="outputLayerActivationFunction" class="col-form-label" + style="text-align: center;">Funkcija aktivacije izlaznog sloja:</label> </div> @@ -248,9 +250,11 @@ </div> </div> </div> + <app-graph [model]="newModel" [inputCols]="1"></app-graph> <div class="form-group row mt-5 mb-3"> <div class="col"></div> - <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="uploadModel();">Sačuvaj + <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" + (click)="uploadModel();">Sačuvaj model</button> <div class="col"></div> </div> diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts index 6db40916..ca6b8ea5 100644 --- a/frontend/src/app/_elements/model-load/model-load.component.ts +++ b/frontend/src/app/_elements/model-load/model-load.component.ts @@ -1,9 +1,8 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core'; import Shared from 'src/app/Shared'; import Model, { ActivationFunction, Encoding, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model'; import { ModelsService } from 'src/app/_services/models.service'; -import { Output } from '@angular/core'; -import { EventEmitter } from '@angular/core'; +import { GraphComponent } from '../graph/graph.component'; @Component({ @@ -13,6 +12,7 @@ import { EventEmitter } from '@angular/core'; }) export class ModelLoadComponent implements OnInit { + @ViewChild(GraphComponent) graph!: GraphComponent; @Output() selectedModelChangeEvent = new EventEmitter<Model>(); newModel: Model = new Model(); @@ -46,6 +46,10 @@ export class ModelLoadComponent implements OnInit { ngOnInit(): void { } + updateGraph() { + this.graph.update(); + } + getMetrics() { this.newModel.metrics = []; let cb = document.getElementsByName("cbmetrics"); |