diff options
Diffstat (limited to 'frontend/src/app/_elements')
11 files changed, 472 insertions, 389 deletions
diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index 3e865576..ce9b9fad 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -8,7 +8,7 @@ display: flex; flex-direction: row; align-items: flex-end; - height: 4rem; + height: 3.1rem; } #tabs>.folder-tab:not(:first-child) { @@ -83,16 +83,15 @@ #search-options { margin-left: auto; - margin-top: 7px; display: flex; flex-direction: row; align-items: center; + height: 100%; } #selected-content { background-color: var(--ns-bg-dark-50); width: 100%; - height: 36rem; /*backdrop-filter: blur(2px);*/ border-color: var(--ns-primary); border-style: solid; @@ -120,4 +119,72 @@ .rounded-bottom { border-top-right-radius: 0; border-top-left-radius: 0; +} + +.separator { + border-left-color: var(--ns-primary); + border-left-width: 1px; + border-left-style: solid; +} + +.list-view { + height: 100%; + overflow-y: auto; +} + +.list-item { + height: 3rem; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid var(--ns-primary); +} + +.list-item:hover { + background-color: var(--ns-bg-dark-100); + box-shadow: 0px 3px 3px var(--ns-primary); +} + +.list-item:hover>.hover-hide { + display: none; +} + +.folder-inside { + width: 100%; + height: 40rem; + overflow-y: auto; +} + +.file-content { + width: 100%; + height: 100%; + position: relative; +} + +.file-bottom-buttons { + position: absolute; + bottom: 15px; + right: 15px; + display: flex; + flex-direction: row-reverse; +} + +.file-button { + position: relative; + color: var(--offwhite); + border-radius: 4px; + border: 1px solid var(--ns-primary); + margin: 5px; + padding: 5px; + cursor: pointer; + z-index: 1001; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.file-button:hover { + background-color: var(--ns-primary); }
\ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 95e99911..f0bc409a 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -1,4 +1,4 @@ -<div id="folder" style="width: 60rem;"> +<div id="folder"> <div id="tabs"> <div id="new-file-tab" class="folder-tab p-1 rounded-top" [style]="'z-index:' + newFileZIndex() + ' ;'" [ngClass]="{'selected-tab' : newFileSelected, 'hover-tab' : hoveringOverFileIndex == -2}"> <mat-icon class="text-offwhite">add</mat-icon> @@ -24,7 +24,6 @@ </div> <div id="search-options"> <div id="collapseFilters" class="collapse collapse-horizontal"> - <mat-icon class="text-offwhite ">timeline</mat-icon> Regresioni <mat-icon class="text-offwhite ">looks_two</mat-icon> @@ -32,19 +31,48 @@ <mat-icon class="text-offwhite ">auto_awesome_motion</mat-icon> Multiklasifikacioni </div> - <a class="tab-link p-1" data-bs-toggle="collapse" data-bs-target="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters"> + <button class="btn-clear icon-toggle" data-bs-toggle="collapse" data-bs-target="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters"> <mat-icon>filter_alt</mat-icon> - </a> + </button> <div id="collapseSort" class="collapse collapse-horizontal"> [sort options here TODO] </div> - <a class="tab-link p-1" data-bs-toggle="collapse" data-bs-target="#collapseSort" aria-expanded="false" aria-controls="collapseSort"> + <button class="btn-clear icon-toggle" data-bs-toggle="collapse" data-bs-target="#collapseSort" aria-expanded="false" aria-controls="collapseSort"> <mat-icon>sort</mat-icon> - </a> + </button> + <button class="btn-clear icon-toggle separator" [ngClass]="{'icon-toggle-on': listView}" (click)="toggleListView()"> + <mat-icon>view_list</mat-icon> + </button> + </div> + </div> + <!--{{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}--> + <div [ngSwitch]="listView" class="folder-inside"> + <div class="file-content" [ngSwitch]="type" *ngSwitchCase="false"> + <div class="file-bottom-buttons"> + <button class="btn-clear file-button" (click)="deleteFile()"> + <mat-icon>delete</mat-icon> + </button> + <button class="btn-clear file-button"> + <mat-icon>link</mat-icon> + </button> + <button class="btn-clear file-button"> + <mat-icon>zoom_out_map</mat-icon> + </button> + </div> + <app-form-model [model]="fileToDisplay" *ngSwitchCase="FolderType.Model"></app-form-model> + <app-form-dataset *ngSwitchCase="FolderType.Dataset"></app-form-dataset> + </div> + <div *ngSwitchCase="true" class="list-view"> + <div *ngFor="let file of filteredFiles; let i = index" class="list-item"> + <div class="mx-2"> + <a class="force-link" (click)="selectFile(i)">{{file.name}}</a> + </div> + <div class="mx-2 hover-hide"> + {{file.lastUpdated | date}} + </div> + </div> </div> </div> - <!-- {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}--> - <app-form-dataset></app-form-dataset> </div> <div id="footer" [ngSwitch]="newFileSelected"> <button mat-button (click)="saveNewFile()" class="bottom-button text-offwhite rounded-bottom" *ngSwitchCase="true"> diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index 91565f3c..4bf964b6 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -1,5 +1,6 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import Dataset from 'src/app/_data/Dataset'; +import { FolderFile, FolderType } from 'src/app/_data/FolderFile'; import Model from 'src/app/_data/Model'; @Component({ @@ -11,7 +12,7 @@ export class FolderComponent implements OnInit { @Input() folderName: string = 'Moji podaci'; - @Input() files!: (Dataset | Model)[] + @Input() files!: FolderFile[] newFile!: Dataset | Model; @@ -20,12 +21,12 @@ export class FolderComponent implements OnInit { newFileSelected: boolean = true; selectedFileIndex: number = -1; - selectedFile?: (Dataset | Model); + selectedFile?: FolderFile; hoveringOverFileIndex: number = -1; - fileToDisplay?: (Dataset | Model); + fileToDisplay?: FolderFile; - @Output() selectedFileChanged: EventEmitter<(Dataset | Model)> = new EventEmitter(); + @Output() selectedFileChanged: EventEmitter<FolderFile> = new EventEmitter(); @Output() okPressed: EventEmitter<string> = new EventEmitter(); searchTerm: string = ''; @@ -71,6 +72,7 @@ export class FolderComponent implements OnInit { this.fileToDisplay = this.newFile; this.selectedFile = this.newFile; this.newFileSelected = true; + this.listView = false; this.selectedFileChanged.emit(this.newFile); } @@ -79,6 +81,7 @@ export class FolderComponent implements OnInit { this.selectedFile = this.filteredFiles[index]; this.fileToDisplay = this.filteredFiles[index]; this.newFileSelected = false; + this.listView = false; this.selectedFileChanged.emit(this.selectedFile); } @@ -113,9 +116,10 @@ export class FolderComponent implements OnInit { clearSearchTerm() { this.searchTerm = ''; + this.searchTermsChanged(); } - filteredFiles: (Dataset | Model)[] = []; + filteredFiles: FolderFile[] = []; searchTermsChanged() { this.filteredFiles.length = 0; @@ -128,9 +132,21 @@ export class FolderComponent implements OnInit { } } } + + listView: boolean = false; + + toggleListView() { + this.listView = !this.listView; + } + + deleteFile() { + console.log('delete'); + } + + FolderType = FolderType; } -export enum FolderType { - Dataset, - Model -} +export enum Privacy { + Private, + Public +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.css b/frontend/src/app/_elements/form-dataset/form-dataset.component.css index 1a5bd03d..6b3e2bed 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.css +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css @@ -1,28 +1,24 @@ +.folderBox { + width: 100%; + height: 100%; + position: relative; +} - - .folderBox - { - width: 100%; - height: 93%; - position: relative; - } - - .icon-display { +.icon-display { position: absolute; - transform: scale(4); - vertical-align: middle; - top: 40%; + top: 50%; left: 50%; - } - .bottomBar - { - position: absolute; - bottom: 0%; - left: 5%; - } + transform: translate(-50%, -50%) scale(4); +} + +.bottomBar { + position: absolute; + bottom: 0%; + left: 5%; +} - #bottomButton{ +#bottomButton { background-color: var(--ns-bg-dark-100); width: 10%; height: 65%; - }
\ No newline at end of file +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.html b/frontend/src/app/_elements/form-dataset/form-dataset.component.html index 615e3afe..50a33583 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html @@ -1,8 +1,6 @@ <div class="folderBox"> - - <div > - <mat-icon class="icon-display">upload</mat-icon> - </div> + + <mat-icon class="icon-display">upload</mat-icon> <!-- <div class="px-5 mt-5"> @@ -10,64 +8,47 @@ </div> --> - <div class="bottomBar"> <div class="row"> - <div class="col-sm"> - <div role="group"> - <div class="row"> - <mat-form-field class="example-full-width" appearance="fill"> - <mat-label>Naziv</mat-label> - <input type="text" matInput value="titanik.csv" ><!--[formControl]="nameFormControl"--> - - <mat-error *ngIf="nameFormControl.hasError('required')"> - Naziv je <strong>obavezan</strong> - </mat-error> - </mat-form-field> - </div> + <div class="col-sm"> + <div role="group"> + <div class="row"> + <mat-form-field class="example-full-width" appearance="fill"> + <mat-label>Naziv</mat-label> + <input type="text" matInput value="titanik.csv"> + <!--[formControl]="nameFormControl"--> + + <mat-error *ngIf="nameFormControl.hasError('required')"> + Naziv je <strong>obavezan</strong> + </mat-error> + </mat-form-field> + </div> + </div> </div> - </div> - <div class="col-sm mb-3"> - - <input id="fileInput" class="form-control btn-lg" type="file" class="upload" (change)="changeListener($event)" accept=".csv"> - - </div> - <div class="col-sm"> - - <mat-form-field appearance="fill"> - <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (change)="update()"> - <mat-option *ngFor="let option of delimiterOptions"> - {{ option }} - </mat-option> - </mat-select> - </mat-form-field> - </div> - - <div class="col-sm"> + <div class="col-sm mb-3"> - <input type="checkbox" class="btn-check" id="checkboxAccessibleByLink" - [(ngModel)]="dataset.accessibleByLink" value=""> - <label class="btn btn-outline-primary" for="checkboxAccessibleByLink"> - <mat-icon>link</mat-icon> - </label> + <input id="fileInput" class="form-control btn-lg" type="file" class="upload" (change)="changeListener($event)" accept=".csv"> - </div> - <div class="col-sm"> - <button mat-button id="bottomButton"> - <mat-icon>zoom_in</mat-icon> - </button> - </div> + </div> + <div class="col-sm"> + + <mat-form-field appearance="fill"> + <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (change)="update()"> + <mat-option *ngFor="let option of delimiterOptions"> + {{ option }} + </mat-option> + </mat-select> + </mat-form-field> + </div> </div> - </div> + </div> <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> - - </div> -<!-- + <!-- <div class="d-flex flex-row align-items-center justify-content-center w-100 my-2"> <button (click)="uploadDataset()" class="btn btn-lg col-4" style="background-color:#003459; color:white;">Dodaj izvor podataka</button> </div> 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(); } } diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html index 92e9df38..b8220115 100644 --- a/frontend/src/app/_elements/graph/graph.component.html +++ b/frontend/src/app/_elements/graph/graph.component.html @@ -1,3 +1,3 @@ -<div #graphWrapper class="w-100" style="height: 16rem;"> +<div #graphWrapper class="w-100" style="height: 14rem;"> <canvas #graphCanvas></canvas> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts index c20d3dd7..5dec3152 100644 --- a/frontend/src/app/_elements/graph/graph.component.ts +++ b/frontend/src/app/_elements/graph/graph.component.ts @@ -1,6 +1,6 @@ import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import Dataset from 'src/app/_data/Dataset'; -import Model,{Layer} from 'src/app/_data/Model'; +import Model, { Layer } from 'src/app/_data/Model'; @Component({ selector: 'app-graph', @@ -22,11 +22,11 @@ export class GraphComponent implements AfterViewInit { @Input() lineColor: string = '#00a8e8'; @Input() nodeColor: string = '#222277'; @Input() borderColor: string = '#00a8e8'; - @Input() inputNodeColor: string = '#ffdd11'; - @Input() outputNodeColor: string = '#44ee22'; + @Input() inputNodeColor: string = '#00a8e8'; + @Input() outputNodeColor: string = '#dfd7d7'; - private ctx?: CanvasRenderingContext2D; - @Input() inputNeurons: number=1; + private ctx!: CanvasRenderingContext2D; + @Input() inputNeurons: number = 1; constructor() { } @@ -51,7 +51,7 @@ export class GraphComponent implements AfterViewInit { let inputNodeIndex = 0; const inputLayer: Node[] = []; while (inputNodeIndex < this.inputCols) { - const x = 0.5 / (this.inputNeurons + 2); + const x = 0.5 / (this.model!.hiddenLayers + 2); const y = (inputNodeIndex + 0.5) / this.inputCols; const node = new Node(x, y, this.inputNodeColor); inputLayer.push(node); @@ -63,9 +63,9 @@ export class GraphComponent implements AfterViewInit { while (layerIndex < this.model!.hiddenLayers + 1) { const newLayer: Node[] = []; let nodeIndex = 0; - while (nodeIndex < this.model!.layers[layerIndex].neurons) { + while (nodeIndex < this.model!.layers[layerIndex - 1].neurons) { const x = (layerIndex + 0.5) / (this.model!.hiddenLayers + 2); - const y = (nodeIndex + 0.5) / this.model!.layers[layerIndex].neurons; + const y = (nodeIndex + 0.5) / this.model!.layers[layerIndex - 1].neurons; const node = new Node(x, y, this.nodeColor); newLayer.push(node); nodeIndex += 1; @@ -81,7 +81,7 @@ export class GraphComponent implements AfterViewInit { } draw() { - this.ctx!.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height); + this.ctx.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height); let index = 0; while (index < this.layers!.length - 1) { @@ -101,22 +101,22 @@ export class GraphComponent implements AfterViewInit { } drawLine(node1: Node, node2: Node) { - this.ctx!.strokeStyle = this.lineColor; - this.ctx!.lineWidth = this.lineThickness; - this.ctx!.beginPath(); - this.ctx!.moveTo(node1.x * this.width, node1.y * this.height); - this.ctx!.lineTo(node2.x * this.width, node2.y * this.height); - this.ctx!.stroke(); + this.ctx.strokeStyle = this.lineColor; + this.ctx.lineWidth = this.lineThickness; + this.ctx.beginPath(); + this.ctx.moveTo(node1.x * this.width, node1.y * this.height); + this.ctx.lineTo(node2.x * this.width, node2.y * this.height); + this.ctx.stroke(); } drawNode(node: Node) { - this.ctx!.fillStyle = node.color; - this.ctx!.strokeStyle = this.borderColor; - this.ctx!.lineWidth = this.lineThickness; - this.ctx!.beginPath(); - this.ctx!.arc(node.x * this.width, node.y * this.height, this.nodeRadius, 0, 2 * Math.PI); - this.ctx!.fill(); - this.ctx!.stroke(); + this.ctx.fillStyle = node.color; + this.ctx.strokeStyle = this.borderColor; + this.ctx.lineWidth = this.lineThickness; + this.ctx.beginPath(); + this.ctx.arc(node.x * this.width, node.y * this.height, this.nodeRadius, 0, 2 * Math.PI); + this.ctx.fill(); + this.ctx.stroke(); } width = 200; diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 09d83bd1..9a54a9de 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -1,4 +1,4 @@ -<header class="bg-dark text-white"> +<header class="text-offwhite" style="background-color: #002b49;"> <div class="container"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <a routerLink="" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> @@ -6,10 +6,10 @@ </a> <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> - <li><a routerLink="" class="nav-link px-2" [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li> - <li><a routerLink="experiment" class="nav-link px-2" [class]="(currentUrl === '/experiment') ? 'text-secondary' : 'text-white'">Napravi eksperiment</a> + <li><a routerLink="" class="nav-link px-2" [class]="(currentUrl === '') ? 'text-primary' : 'text-offwhite'">Početna</a></li> + <li><a routerLink="experiment" class="nav-link px-2" [class]="(currentUrl === '/experiment') ? 'text-primary' : 'text-offwhite'">Napravi eksperiment</a> </li> - <li><a routerLink="archive" class="nav-link px-2" [class]="(currentUrl === '/archive') ? 'text-secondary' : 'text-white'">Arhiva</a> + <li><a routerLink="archive" class="nav-link px-2" [class]="(currentUrl === '/archive') ? 'text-primary' : 'text-offwhite'">Arhiva</a> </li> </ul> |