diff options
Diffstat (limited to 'frontend/src')
16 files changed, 156 insertions, 76 deletions
diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index 137c383c..0745f73d 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -45,7 +45,7 @@ export class ColumnTableComponent implements AfterViewInit { this.datasetService.getDatasetFilePartial(this.dataset.fileId, 0, 10).subscribe((response: string | undefined) => { if (response && this.dataset != undefined) { - this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter); + this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter.toString() == "") ? "," : this.dataset.delimiter); } }); }); diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index 1ce4e6a3..458e6b4f 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -64,10 +64,6 @@ background-color: var(--ns-primary); } -#search ::ng-deep .mat-form-field-wrapper { - margin-top: -2.1rem; -} - #searchbar { height: 2.5rem; background-color: var(--ns-bg-dark-100); 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 56eb3cef..da31cfcb 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.css +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css @@ -1,46 +1,48 @@ .folderBox { width: 100%; - height: 90%; + height: 100%; position: relative; } -.file-container{ +.file-container { border: 4px solid transparent; position: relative; margin-left: 3%; margin-top: 3rem; width: 94%; - min-height: 500px; + min-height: 300px; + height: 75%; } -.fileButton{ + +.fileButton { position: absolute; margin-top: -3rem; display: flex; flex-direction: row; align-items: center; } -.fileButton label{ + +.fileButton label { margin-left: 10px; } -.dottedClass -{ + +.dottedClass { border: 4px dotted white; border-radius: 25px; } -.hidden{ +.hidden { visibility: hidden; } .file { position: absolute; - width: 100%; - height: 100%; - opacity: 0; + width: 100%; + height: 100%; + opacity: 0; } -.file input{ - +.file input { border-radius: 4px; margin-top: -15px; width: 100%; @@ -55,9 +57,9 @@ } .bottomBar { - position: absolute; - bottom: -6%; - left: 5%; + width: 50%; + margin: 1rem; + align-items: flex-start; } #bottomButton { 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 5776085f..8c279523 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -21,7 +21,6 @@ mat-form-field { hr { color: var(--offwhite) !important; margin-bottom: 30px; - } .neuron { @@ -33,16 +32,14 @@ hr { background-color: var(--ns-bg-dark-100) !important; min-width: none; max-width: 12.5rem; - } - .row { margin: 0; padding: 0; } -::ng-deep .mat-form-field-wrapper { +.mat-fix ::ng-deep .mat-form-field-wrapper { margin-bottom: -1.85em; } @@ -70,12 +67,21 @@ hr { margin: 5px; padding: 0px; width: 12rem; - height: 13.5rem; + height: 11.1rem; +} + +.tm { + margin-left: 10px; +} + +.layer>* { + margin-top: 0; } .layer>mat-form-field { margin-left: 0; } -.m-2{ + +.m-2 { max-height: 20 rem; }
\ 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 2139a1c0..f11b609d 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -2,13 +2,13 @@ <div class="ns-row"> <div class="ns-col"> - <mat-form-field class="example-full-width" appearance="fill"> + <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"> + <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"> @@ -21,7 +21,7 @@ <div class="break-1"></div> <div class="ns-col"> - <mat-form-field appearance="fill"> + <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"> @@ -32,21 +32,20 @@ </mat-form-field> </div> <div class="ns-col"> - <mat-form-field appearance="fill"> + <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"> + <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"> @@ -56,7 +55,7 @@ </mat-form-field> </div> <div class="ns-col"> - <mat-form-field appearance="fill"> + <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"> @@ -69,13 +68,13 @@ <div class="break-1"></div> <div class="ns-col"> - <mat-form-field appearance="fill"> + <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"> + <mat-form-field appearance="fill" class="mat-fix"> <mat-label>Broj uzoraka po iteraciji</mat-label> <mat-select matNativeControl required [(value)]="newModel.batchSize"> @@ -108,7 +107,7 @@ </div> <div class="break-1"></div> <div class="ns-col"> - <mat-form-field appearance="fill"> + <mat-form-field appearance="fill" class="mat-fix"> <mat-label>Aktivaciona funkcija svih slojeva</mat-label> <mat-select [(ngModel)]="selectedActivation" (selectionChange)="changeAllActivation()"> @@ -120,14 +119,14 @@ </div> <div class="ns-col"> - <mat-form-field appearance="fill"> + <mat-form-field appearance="fill" class="mat-fix"> <mat-label>Broj Neurona svih slojeva</mat-label> <input matInput type="number" [(ngModel)]="selectedNumberOfNeurons" (change)="changeAllNumberOfNeurons()"> </mat-form-field> </div> <div class="break-2"></div> <div class="ns-col"> - <mat-form-field appearance="fill"> + <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"> @@ -138,7 +137,7 @@ </div> <div class="ns-col"> - <mat-form-field appearance="fill"> + <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"> @@ -152,13 +151,12 @@ </div> <!--kraj selectall**********************************************************************************--> -<hr> <div id="layers"> <div class="layer" *ngFor="let item of newModel.layers; let i=index"> - <mat-form-field appearance="fill"> + <mat-form-field appearance="fill" class="mat-fix"> <mat-label>Aktivacija</mat-label> <button matPrefix class="btn-clear center-center text-offwhite"> <div> @@ -172,7 +170,7 @@ </mat-select> </mat-form-field> - <div class="d-flex flex-row align-items-center justify-content-center m-1"> + <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" (click)="addNeuron(i)"> <mat-icon>add</mat-icon> @@ -183,7 +181,7 @@ </button> </div> - <mat-form-field appearance="fill"> + <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"> @@ -192,7 +190,7 @@ </mat-select> </mat-form-field> - <mat-form-field appearance="fill"> + <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"> diff --git a/frontend/src/app/_elements/navbar/navbar.component.css b/frontend/src/app/_elements/navbar/navbar.component.css index e69de29b..fcfad876 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.css +++ b/frontend/src/app/_elements/navbar/navbar.component.css @@ -0,0 +1,8 @@ +.dropdown-item:hover { + background-color: var(--ns-primary); +} + +h4 { + margin-top: 0.82rem; + margin-right: 10px; +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 9a54a9de..105151aa 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -2,11 +2,11 @@ <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"> - <img src="../../../assets/images/logo_igrannonica_temp.png" class="bi me-2" width="64" height="64"> + <img src="../../../assets/images/logo.png" class="bi me-2" width="64" height="64"> + <h4>Igr<span class="highlight">ann</span>onica</h4> </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-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-primary' : 'text-offwhite'">Arhiva</a> @@ -17,7 +17,7 @@ <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32" class="rounded-circle"> </a> - <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);" data-popper-placement="bottom-end"> + <ul class="dropdown-menu text-small ns-bg-dark-100" aria-labelledby="dropdownUser1" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);" data-popper-placement="bottom-end"> <li><a class="dropdown-item" routerLink="profile">Moj profil</a></li> <li> <hr class="dropdown-divider"> @@ -26,10 +26,10 @@ </ul> </div> <div *ngIf="!shared.loggedIn" class="dropdown text-end"> - <button type="button" mat-raised-button color="primary" class="mx-2" data-bs-toggle="modal" data-bs-target="#modalForLogin"> + <button type="button" mat-raised-button color="accent" class="mx-2" data-bs-toggle="modal" data-bs-target="#modalForLogin"> Prijavi se </button> - <button type="button" mat-raised-button color="primary" data-bs-toggle="modal" data-bs-target="#modalForRegister"> + <button type="button" mat-raised-button color="accent" data-bs-toggle="modal" data-bs-target="#modalForRegister"> Registruj se </button> </div> diff --git a/frontend/src/app/_elements/navbar/navbar.component.ts b/frontend/src/app/_elements/navbar/navbar.component.ts index 368508ed..e2551f7a 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.ts +++ b/frontend/src/app/_elements/navbar/navbar.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Location } from '@angular/common'; import { AuthService } from '../../_services/auth.service'; import shared from 'src/app/Shared'; @@ -8,7 +8,8 @@ import { MatDialog } from '@angular/material/dialog'; @Component({ selector: 'app-navbar', templateUrl: './navbar.component.html', - styleUrls: ['./navbar.component.css'] + styleUrls: ['./navbar.component.css'], + encapsulation: ViewEncapsulation.Emulated }) export class NavbarComponent implements OnInit { diff --git a/frontend/src/app/_elements/playlist/playlist.component.ts b/frontend/src/app/_elements/playlist/playlist.component.ts index 74527b39..7529b36b 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.ts +++ b/frontend/src/app/_elements/playlist/playlist.component.ts @@ -37,7 +37,7 @@ export class PlaylistComponent implements OnInit { tableData.loaded = true; tableData.numRows = dataset.rowCount; tableData.numCols = dataset.columnInfo.length; - tableData.data = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); + tableData.data = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter.toString() == "") ? "," : dataset.delimiter); this.tableDatas!.push(tableData); } }); diff --git a/frontend/src/app/_pages/archive/archive.component.html b/frontend/src/app/_pages/archive/archive.component.html index 1d5d144f..8cc7f0fd 100644 --- a/frontend/src/app/_pages/archive/archive.component.html +++ b/frontend/src/app/_pages/archive/archive.component.html @@ -1,17 +1,23 @@ <div class="d-flex flex-column align-items-center"> - <div *ngIf="publicDatasets.length > 0" class="my-5"> + <div class="my-5" style="height: fit-content;"> <app-playlist [datasets]="publicDatasets"></app-playlist> - - <div class="rounded-pill bg-light p-4 m-2 text-center position-relative"> - <a routerLink="browse-datasets" class="stretched-link">Pogledaj sve javne izvore podataka...</a> - </div> </div> <div id="cards" class="row align-items-view align-items-stretch justify-content-center"> <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> <div class="card-body"> + <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training + </mat-icon> + <h3 class="card-title my-2">Moji eksperimenti</h3> + <p class="card-text"> + <a class="stretched-link" routerLink="my-models">Pregledajte</a> vaše modele, menjajte ih, napravite nove modele, ili ih obrišite. + </p> + </div> + </div> + <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> + <div class="card-body"> <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">storage</mat-icon> - <h3 class="card-title my-2">Moji izvori podataka</h3> + <h3 class="card-title my-2">Izvori podataka</h3> <p class="card-text"> <a class="stretched-link" routerLink="my-datasets">Preuredite</a> vaše izvore podataka, ili dodajte novi. </p> @@ -21,7 +27,7 @@ <div class="card-body"> <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training </mat-icon> - <h3 class="card-title my-2">Moji modeli</h3> + <h3 class="card-title my-2">Modeli</h3> <p class="card-text"> <a class="stretched-link" routerLink="my-models">Pregledajte</a> vaše modele, menjajte ih, napravite nove modele, ili ih obrišite. </p> diff --git a/frontend/src/app/_pages/home/home.component.css b/frontend/src/app/_pages/home/home.component.css index e69de29b..22137c24 100644 --- a/frontend/src/app/_pages/home/home.component.css +++ b/frontend/src/app/_pages/home/home.component.css @@ -0,0 +1,20 @@ +.logo { + margin: 0 !important; +} + +#title { + color: var(--offwhite); +} + +h1 { + font-size: 64px !important; + font-weight: 900 !important; + margin-top: 1rem; + margin-bottom: 2.5rem; +} + +.card { + margin: 2.5rem !important; + padding: 3rem; + width: 26rem !important; +}
\ No newline at end of file diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index e682d8dd..508382da 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -1,20 +1,32 @@ <div class="d-flex flex-column align-items-center"> - <div class="ann-logo"> - <img src="../../../assets/images/logo_igrannonica_temp.png" class="bi me-2" width="256" height="256" role="img"> + <div class="logo"> + <img src="../../../assets/images/logo.png" class="bi me-2" width="256" height="256" role="img"> </div> - <div class="d-flex flex-column align-items-center"> + <div id="title"> + <h1>Igr<span class="highlight">ann</span>onica</h1> + </div> - <div class="rounded-pill bg-light px-4 m-4 shadow-accent position-relative"> - <a routerLink="experiment" class="stretched-link"> - <h2 class="my-4">Započnite sa eksperimentisanjem! - <mat-icon>lightbulb</mat-icon> - </h2> - </a> + <div id="cards" class="row align-items-view align-items-stretch justify-content-center"> + <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> + <div class="card-body"> + <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training</mat-icon> + <h3 class="card-title my-2">Experimentiši</h3> + <p class="card-text"> + U tri koraka <a class="stretched-link" routerLink="experiment">napravite novu neuronsku mrežu</a>. Koristite postojeće izvore podataka, modele, itd. + </p> + </div> + </div> + <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> + <div class="card-body"> + <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">storage + </mat-icon> + <h3 class="card-title my-2">Arhiva</h3> + <p class="card-text"> + <a class="stretched-link" routerLink="archive">Upravljajte</a> izvorima podataka, eksperimentima, modelima, i rezultatima treniranja. Pogledajte podatke koje su podelili drugi korisnici. + </p> + </div> </div> - - - </div> </div>
\ No newline at end of file diff --git a/frontend/src/assets/images/logo.png b/frontend/src/assets/images/logo.png Binary files differindex 2e15550a..dc8830de 100644 --- a/frontend/src/assets/images/logo.png +++ b/frontend/src/assets/images/logo.png diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index c8d240f6..d4772134 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -32,7 +32,6 @@ text-align: center; } - .row-height { white-space: nowrap; height: 1rem; @@ -131,4 +130,15 @@ position: absolute; top: 5px; right: 5px; +} + +input:-webkit-autofill, +textarea:-webkit-autofill, +select:-webkit-autofill { + -webkit-box-shadow: 0 0 0 1000px var(--ns-bg) inset !important; + -webkit-text-fill-color: var(--ns-accent) !important; +} + +a { + color: var(--ns-accent) !important; }
\ No newline at end of file diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css index 676bec32..c0af31c3 100644 --- a/frontend/src/styles/layout.css +++ b/frontend/src/styles/layout.css @@ -31,9 +31,26 @@ body { padding: 2px; margin-bottom: 0; padding-bottom: 0; + flex-grow: 1; + flex-shrink: 0; + flex-basis: 50%; +} + +@media screen and (min-width: 1200px) { + .ns-col { + flex-basis: 25%; + } } -.break-1, +@media screen and (min-width: 1600px) { + .ns-col { + flex-basis: 12.5%; + width: 10%; + } +} + +*/ +/*.break-1, .break-2 { height: 1px; width: 100%; @@ -45,11 +62,11 @@ body { } } -@media screen and (min-width: 2175px) { +@media screen and (min-width: 1600px) { .break-2 { display: none; } -} +}*/ .center-center { text-align: center; diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index c517e885..a76f4714 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -45,6 +45,10 @@ a { color: var(--offwhite) !important; } +.highlight { + color: var(--ns-accent); +} + /* Ripple effect */ |
