From 56fbc59007fe5064168af33c9770a0d378343b85 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sun, 17 Apr 2022 23:20:18 +0200 Subject: Promenio stil home strane. --- frontend/src/app/_pages/home/home.component.html | 62 ++++++++++++++---------- 1 file changed, 36 insertions(+), 26 deletions(-) (limited to 'frontend/src/app/_pages/home/home.component.html') diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index 08f95a69..8294a73b 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -1,56 +1,66 @@ -
+
-

Započnite sa treniranjem!

-
-
+ +
+ +

Započnite sa eksperimentisanjem! + lightbulb +

+ +
+ +
+
- storage + storage

Moji izvori podataka

- Preuredite vaše izvore - podataka, ili - dodajte novi. + Preuredite vaše izvore podataka, ili dodajte novi.

-
+
- model_training + model_training

Moji modeli

- Pregledajte vaše modele, menjajte ih, - napravite nove modele, ili - ih obrišite. + Pregledajte vaše modele, menjajte ih, napravite nove modele, ili ih obrišite.

-
+
- batch_prediction + batch_prediction

Rezultati treniranja

- Pregledajte sve vaše trenirane - modele, - koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite. + Pregledajte sve vaše trenirane modele, koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite.

-

Pogledajte javne izvore podataka!

- +
+

Pogledajte javne izvore podataka!

+
+ -

Pogledaj sve javne izvore podataka...

-

Iskoristite već trenirane modele!

+ +
+ Pogledaj sve javne izvore podataka... +
+ +
+

Iskoristite već trenirane modele!

+
-

Pogledaj sve javne trenirane modele...

+ +
+ Pogledaj sve javne trenirane modele... +
\ No newline at end of file -- cgit v1.2.3 From bcd4852ea7964e15f4ad7d0061522da42d866d37 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Tue, 19 Apr 2022 02:28:18 +0200 Subject: Dodao komponentu za prikaz dataseta sa tabelama. Promenio scrollbar i home stranicu. Zapoceo trening stranicu. --- frontend/angular.json | 7 +- .../carousel-vertical.component.css | 3 + .../carousel-vertical.component.html | 12 +++ .../carousel-vertical.component.spec.ts | 25 ++++++ .../carousel-vertical.component.ts | 65 ++++++++++++++ .../src/app/_elements/graph/graph.component.html | 2 +- .../src/app/_elements/navbar/navbar.component.html | 30 +++---- .../notifications/notifications.component.ts | 1 + .../app/_elements/playlist/playlist.component.css | 57 +++++++++++++ .../app/_elements/playlist/playlist.component.html | 19 +++++ .../_elements/playlist/playlist.component.spec.ts | 25 ++++++ .../app/_elements/playlist/playlist.component.ts | 49 +++++++++++ .../select-item-list.component.css | 0 .../select-item-list.component.html | 1 + .../select-item-list.component.spec.ts | 25 ++++++ .../select-item-list/select-item-list.component.ts | 15 ++++ frontend/src/app/_pages/home/home.component.html | 46 +++++----- frontend/src/app/app.module.ts | 8 +- frontend/src/app/training/training.component.html | 17 ++-- .../src/assets/images/add_model_background.jpg | Bin 56906 -> 0 bytes .../assets/images/logo_igrannonica_temp - Copy.png | Bin 0 -> 16336 bytes .../src/assets/images/logo_igrannonica_temp.png | Bin 0 -> 29448 bytes frontend/src/styles.css | 94 +++++++++++++++++++-- 23 files changed, 441 insertions(+), 60 deletions(-) create mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css create mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html create mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts create mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts create mode 100644 frontend/src/app/_elements/playlist/playlist.component.css create mode 100644 frontend/src/app/_elements/playlist/playlist.component.html create mode 100644 frontend/src/app/_elements/playlist/playlist.component.spec.ts create mode 100644 frontend/src/app/_elements/playlist/playlist.component.ts create mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.css create mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.html create mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts create mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.ts delete mode 100644 frontend/src/assets/images/add_model_background.jpg create mode 100644 frontend/src/assets/images/logo_igrannonica_temp - Copy.png create mode 100644 frontend/src/assets/images/logo_igrannonica_temp.png (limited to 'frontend/src/app/_pages/home/home.component.html') diff --git a/frontend/angular.json b/frontend/angular.json index 6653e4b1..d1983d31 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -108,5 +108,10 @@ } } }, - "defaultProject": "frontend" + "defaultProject": "frontend", + "cli": { + "warnings": { + "versionMismatch": false + } + } } \ No newline at end of file diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css new file mode 100644 index 00000000..3d4a2432 --- /dev/null +++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css @@ -0,0 +1,3 @@ +.carousel { + overscroll-behavior: contain; +} \ No newline at end of file diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html new file mode 100644 index 00000000..f52aee12 --- /dev/null +++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html @@ -0,0 +1,12 @@ +

+ {{scroll}} +

+
+
+
+ +

{{item.name}}

+ +
+
+
\ No newline at end of file diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts new file mode 100644 index 00000000..0c736e90 --- /dev/null +++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CarouselVerticalComponent } from './carousel-vertical.component'; + +describe('CarouselVerticalComponent', () => { + let component: CarouselVerticalComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CarouselVerticalComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CarouselVerticalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts new file mode 100644 index 00000000..d8849ea6 --- /dev/null +++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts @@ -0,0 +1,65 @@ +import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; + +@Component({ + selector: 'app-carousel-vertical', + templateUrl: './carousel-vertical.component.html', + styleUrls: ['./carousel-vertical.component.css'] +}) +export class CarouselVerticalComponent implements OnInit, AfterViewInit { + + @ViewChild('wrapper') wrapper!: ElementRef; + + @Input() items!: any[]; + + itemsToShow: any[] = []; + + @Input() type: string = "Object"; + + scroll = 0; + height = 9; //rem + + currentIndex = 0; + + @Input() shownElements: number = 5; + + constructor() { + } + + ngOnInit(): void { + this.itemsToShow = [...this.items.slice(0, this.shownElements)]; + console.log('0', this.itemsToShow); + } + + ngAfterViewInit(): void { + const container = this.wrapper.nativeElement + + container.addEventListener('scroll', (event: Event) => { + this.scroll = (container.scrollTop / (container.scrollHeight - container.clientHeight)); + if (this.scroll == 1.0) { + //console.log('removed', this.itemsToShow.splice(0, 1)[0].name); + const itemToAdd = this.items[(this.currentIndex + this.shownElements) % (this.items.length - 1)]; + this.itemsToShow.push(itemToAdd); + //console.log('added', itemToAdd.name); + this.currentIndex = (this.currentIndex + 1); + container.scrollTop = (container.scrollHeight - container.clientHeight) / 2; + } + }); + } + + clickItem(index: number) { + } + + calcVisibility(i: number) { + //return ((Math.sin((((i) / this.shownElements) - this.scroll) * Math.PI) + 1) / 2) + const iPercent = (i + 1 - this.scroll) / this.shownElements; + return iPercent; + } + + calcStyle(i: number) { + const a = this.calcVisibility(i) + const v = (Math.sin(a * Math.PI) + 1) / 2; + return `transform: translateY(${v * 100}%) scale(${v}) perspective(${v * 200}em) rotateX(${(1 - a) * 180 - 90}deg); + opacity: ${v}; + height: ${this.height}rem;`; + } +} diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html index 1c21fb6c..92e9df38 100644 --- a/frontend/src/app/_elements/graph/graph.component.html +++ b/frontend/src/app/_elements/graph/graph.component.html @@ -1,3 +1,3 @@
- +
\ 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 7d0c4cd8..41105405 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -2,32 +2,24 @@
- +
- -
- -
diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts index 9b460240..d64530b9 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.ts +++ b/frontend/src/app/_elements/notifications/notifications.component.ts @@ -25,6 +25,7 @@ export class NotificationsComponent implements OnInit { const existingNotification = this.notifications.find(x => x.id === mId) const progress = ((currentEpoch + 1) / totalEpochs); console.log("Ukupno epoha", totalEpochs, "Trenutna epoha:", currentEpoch); + console.log("stat:", stat); if (!existingNotification) this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, progress, true)); else { diff --git a/frontend/src/app/_elements/playlist/playlist.component.css b/frontend/src/app/_elements/playlist/playlist.component.css new file mode 100644 index 00000000..7ce320d9 --- /dev/null +++ b/frontend/src/app/_elements/playlist/playlist.component.css @@ -0,0 +1,57 @@ +.ns-wrapper { + width: 100%; + max-width: 800px; + max-height: 600px; + height: 100%; + transform-style: preserve-3d; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +.ns-cards { + position: relative; + width: 300%; + height: 36rem; + margin-bottom: 20px; +} + +.ns-card { + position: absolute; + width: 60%; + height: 100%; + left: 0; + right: 0; + margin: auto; + transition: transform 0.4s ease; + cursor: pointer; +} + +input[type=radio] { + display: none; +} + +#item-1:checked~.ns-cards #view-item-3, +#item-2:checked~.ns-cards #view-item-1, +#item-3:checked~.ns-cards #view-item-2 { + transform: translatex(-40%) scale(0.8); + opacity: 0.4; + z-index: 0; +} + +#item-1:checked~.ns-cards #view-item-2, +#item-2:checked~.ns-cards #view-item-3, +#item-3:checked~.ns-cards #view-item-1 { + transform: translatex(40%) scale(0.8); + opacity: 0.4; + z-index: 0; +} + +#item-1:checked~.ns-cards #view-item-1, +#item-2:checked~.ns-cards #view-item-2, +#item-3:checked~.ns-cards #view-item-3 { + transform: translatex(0) scale(1); + opacity: 1; + z-index: 1; +} \ No newline at end of file diff --git a/frontend/src/app/_elements/playlist/playlist.component.html b/frontend/src/app/_elements/playlist/playlist.component.html new file mode 100644 index 00000000..fdb426ed --- /dev/null +++ b/frontend/src/app/_elements/playlist/playlist.component.html @@ -0,0 +1,19 @@ +
+ + + +
+ + + +
+
+ +
+
\ No newline at end of file diff --git a/frontend/src/app/_elements/playlist/playlist.component.spec.ts b/frontend/src/app/_elements/playlist/playlist.component.spec.ts new file mode 100644 index 00000000..0afe8041 --- /dev/null +++ b/frontend/src/app/_elements/playlist/playlist.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PlaylistComponent } from './playlist.component'; + +describe('PlaylistComponent', () => { + let component: PlaylistComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PlaylistComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PlaylistComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/playlist/playlist.component.ts b/frontend/src/app/_elements/playlist/playlist.component.ts new file mode 100644 index 00000000..74527b39 --- /dev/null +++ b/frontend/src/app/_elements/playlist/playlist.component.ts @@ -0,0 +1,49 @@ +import { Component, Input, OnInit } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; +import { TableData } from 'src/app/_elements/datatable/datatable.component'; +import { CsvParseService } from 'src/app/_services/csv-parse.service'; +import { DatasetsService } from 'src/app/_services/datasets.service'; + +@Component({ + selector: 'app-playlist', + templateUrl: './playlist.component.html', + styleUrls: ['./playlist.component.css'] +}) +export class PlaylistComponent implements OnInit { + + selectedId: string = "0"; + + @Input() datasets!: Dataset[]; + + tableDatas?: TableData[]; + + constructor(private datasetService: DatasetsService, private csv: CsvParseService) { + + } + + getIndex(str: string) { + return parseInt(str); + } + + ngOnInit(): void { + this.tableDatas = []; + + this.datasets.forEach((dataset, index) => { + if (index < 3) { + this.datasetService.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => { + if (file) { + const tableData = new TableData(); + tableData.hasInput = true; + 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); + this.tableDatas!.push(tableData); + } + }); + } + }); + + console.log(this.tableDatas); + } +} diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.css b/frontend/src/app/_elements/select-item-list/select-item-list.component.css new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.html b/frontend/src/app/_elements/select-item-list/select-item-list.component.html new file mode 100644 index 00000000..b92b7adb --- /dev/null +++ b/frontend/src/app/_elements/select-item-list/select-item-list.component.html @@ -0,0 +1 @@ +

select-item-list works!

diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts b/frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts new file mode 100644 index 00000000..0abc7ab5 --- /dev/null +++ b/frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SelectItemListComponent } from './select-item-list.component'; + +describe('SelectItemListComponent', () => { + let component: SelectItemListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SelectItemListComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SelectItemListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.ts b/frontend/src/app/_elements/select-item-list/select-item-list.component.ts new file mode 100644 index 00000000..f6aae7a0 --- /dev/null +++ b/frontend/src/app/_elements/select-item-list/select-item-list.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-select-item-list', + templateUrl: './select-item-list.component.html', + styleUrls: ['./select-item-list.component.css'] +}) +export class SelectItemListComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index 8294a73b..b673d074 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -1,5 +1,8 @@
- + +
@@ -11,7 +14,7 @@
-
+
storage

Moji izvori podataka

@@ -20,7 +23,7 @@

-
+
model_training @@ -30,7 +33,7 @@

-
+
batch_prediction @@ -44,23 +47,28 @@
-
-

Pogledajte javne izvore podataka!

-
- - +
+ + -
- Pogledaj sve javne izvore podataka... +
+ Pogledaj sve javne izvore podataka... +
-
-

Iskoristite već trenirane modele!

-
- - +
\ No newline at end of file diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 26417373..7862c872 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -50,6 +50,9 @@ import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.comp import { Configuration } from './configuration.service'; import { PlaygroundComponent } from './_pages/playground/playground.component'; import { GradientBackgroundComponent } from './_elements/gradient-background/gradient-background.component'; +import { CarouselVerticalComponent } from './_elements/carousel-vertical/carousel-vertical.component'; +import { SelectItemListComponent } from './_elements/select-item-list/select-item-list.component'; +import { PlaylistComponent } from './_elements/playlist/playlist.component'; export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); @@ -91,7 +94,10 @@ export function initializeApp(appConfig: Configuration) { ItemExperimentComponent, YesNoDialogComponent, PlaygroundComponent, - GradientBackgroundComponent + GradientBackgroundComponent, + CarouselVerticalComponent, + SelectItemListComponent, + PlaylistComponent ], imports: [ BrowserModule, diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html index 0ce4cc89..9f2481a2 100644 --- a/frontend/src/app/training/training.component.html +++ b/frontend/src/app/training/training.component.html @@ -2,36 +2,33 @@

Trenirajte veštačku neuronsku mrežu

-
+

1. Izaberite eksperiment iz kolekcije

- +
    -
  • - +
  • +
- +

2. Izaberite model

- +

3. Treniranje modela

- +

Rezultati treniranja

Rezultati treniranja:

diff --git a/frontend/src/assets/images/add_model_background.jpg b/frontend/src/assets/images/add_model_background.jpg deleted file mode 100644 index d86f0566..00000000 Binary files a/frontend/src/assets/images/add_model_background.jpg and /dev/null differ diff --git a/frontend/src/assets/images/logo_igrannonica_temp - Copy.png b/frontend/src/assets/images/logo_igrannonica_temp - Copy.png new file mode 100644 index 00000000..a9d7d396 Binary files /dev/null and b/frontend/src/assets/images/logo_igrannonica_temp - Copy.png differ diff --git a/frontend/src/assets/images/logo_igrannonica_temp.png b/frontend/src/assets/images/logo_igrannonica_temp.png new file mode 100644 index 00000000..9e8e8855 Binary files /dev/null and b/frontend/src/assets/images/logo_igrannonica_temp.png differ diff --git a/frontend/src/styles.css b/frontend/src/styles.css index b6555f43..5e59e735 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -4,18 +4,96 @@ body { background-color: #003459; } -.shadowed { - box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px; +.shadowed:hover { + box-shadow: rgba(0, 152, 189, 0.4) 0px 5px, rgba(0, 152, 189, 0.3) 0px 10px, rgba(0, 152, 189, 0.2) 0px 15px, rgba(0, 152, 189, 0.1) 0px 20px, rgba(0, 152, 189, 0.05) 0px 25px; } -.shadowed:last-child { - box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px; +.shadowed:first-child:hover { + box-shadow: rgba(0, 152, 189, 0.4) -5px 5px, rgba(0, 152, 189, 0.3) -10px 10px, rgba(0, 152, 189, 0.2) -15px 15px, rgba(0, 152, 189, 0.1) -20px 20px, rgba(0, 152, 189, 0.05) -25px 25px; } -.shadowed:first-child { - box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px; +.shadowed:last-child:hover { + box-shadow: rgba(0, 152, 189, 0.4) 5px 5px, rgba(0, 152, 189, 0.3) 10px 10px, rgba(0, 152, 189, 0.2) 15px 15px, rgba(0, 152, 189, 0.1) 20px 20px, rgba(0, 152, 189, 0.05) 25px 25px; } -.shadow-accent { - box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px; +.shadow-accent:hover { + box-shadow: rgba(0, 152, 189, 0.4) 0px 5px, rgba(0, 152, 189, 0.3) 0px 10px, rgba(0, 152, 189, 0.2) 0px 15px, rgba(0, 152, 189, 0.1) 0px 20px, rgba(0, 152, 189, 0.05) 0px 25px; + animation-name: holo-hover; + animation-duration: 300ms; + transform: perspective(100em) rotateX(10deg); +} + + +/*Mora da se ispravi za media kada je ekran premali pa se poredjaju u kolonu*/ + +.align-items-view>*:first-child { + transform: perspective(100em) rotateY(25deg) translateZ(1em); +} + +.align-items-view>* { + transform: perspective(100em) translateZ(-2em); +} + +.align-items-view>*:last-child { + transform: perspective(100em) rotateY(-25deg) translateZ(1em); +} + +.bg-light { + background-color: rgba(0, 152, 189, 0.3) !important; +} + +a { + color: #00a8e8 !important; +} + +@keyframes holo-hover { + to { + transform: perspective(100em) rotateX(10deg); + } +} + +@keyframes logo-animation { + from { + transform: perspective(100em) rotateX(50deg) rotateZ(0deg); + } + to { + transform: perspective(100em) rotateX(50deg) rotateZ(360deg); + } +} + +.ann-logo { + animation-name: logo-animation; + animation-duration: 3140ms; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + + +/* width */ + +::-webkit-scrollbar { + width: 10px; + height: 10px; +} + + +/* Track */ + +::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0); +} + + +/* Handle */ + +::-webkit-scrollbar-thumb { + background: rgba(0, 188, 252, 0.6); + border-radius: 25px; +} + + +/* Handle on hover */ + +::-webkit-scrollbar-thumb:hover { + background: rgba(0, 188, 252, 0.8); } \ No newline at end of file -- cgit v1.2.3 From c71ced076e4e0b713d428eca304f541f02c8ee6f Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 18:59:27 +0200 Subject: Doterao stil za playlist komponentu, i tabelu podataka. Dodao arhivu u navbar i obrisao neke stare rute. --- .../_elements/datatable/datatable.component.html | 34 ++++++------- .../src/app/_elements/navbar/navbar.component.html | 6 +-- .../app/_elements/playlist/playlist.component.css | 10 ++-- .../app/_elements/playlist/playlist.component.html | 10 ++-- .../src/app/_pages/archive/archive.component.html | 42 +++++++++++++++- .../src/app/_pages/archive/archive.component.ts | 12 ++++- frontend/src/app/_pages/home/home.component.html | 57 +--------------------- frontend/src/app/app.component.ts | 1 - frontend/src/styles/helper.css | 17 +++++++ frontend/src/styles/theme.css | 17 ++++++- 10 files changed, 112 insertions(+), 94 deletions(-) (limited to 'frontend/src/app/_pages/home/home.component.html') diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html index 8db62aff..fe359db0 100644 --- a/frontend/src/app/_elements/datatable/datatable.component.html +++ b/frontend/src/app/_elements/datatable/datatable.component.html @@ -1,18 +1,16 @@
-
-
+
+
-
+
Tabela {{tableData.numCols}}x{{tableData.numRows}}
-
- +
+
@@ -22,21 +20,17 @@ - - - - -
{{item}}
{{col}}
+ {{tableData.numRows - 11}} redova...
- - - - - - - -
{{col}}
+ {{tableData.numRows - 10}} redova...
+ + + +
+
+ {{tableData.numRows - 11}} redova...
+
+ + +
diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 41105405..5390136d 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -9,9 +9,7 @@
  • Početna
  • Napravi eksperiment
    • -
  • Treniraj model -
    • -
  • Predvidi +
  • Arhiva
    • @@ -20,8 +18,6 @@ mdo
      -
    • Nov model...
      • -
    • Podešavanja
    • Moj profil
    • diff --git a/frontend/src/app/_elements/playlist/playlist.component.css b/frontend/src/app/_elements/playlist/playlist.component.css index 7ce320d9..83448e51 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.css +++ b/frontend/src/app/_elements/playlist/playlist.component.css @@ -13,7 +13,7 @@ .ns-cards { position: relative; width: 300%; - height: 36rem; + height: 26rem; margin-bottom: 20px; } @@ -28,6 +28,10 @@ cursor: pointer; } +.ns-card:hover { + opacity: 1 !important; +} + input[type=radio] { display: none; } @@ -36,7 +40,7 @@ input[type=radio] { #item-2:checked~.ns-cards #view-item-1, #item-3:checked~.ns-cards #view-item-2 { transform: translatex(-40%) scale(0.8); - opacity: 0.4; + opacity: 0.5; z-index: 0; } @@ -44,7 +48,7 @@ input[type=radio] { #item-2:checked~.ns-cards #view-item-3, #item-3:checked~.ns-cards #view-item-1 { transform: translatex(40%) scale(0.8); - opacity: 0.4; + opacity: 0.5; z-index: 0; } diff --git a/frontend/src/app/_elements/playlist/playlist.component.html b/frontend/src/app/_elements/playlist/playlist.component.html index fdb426ed..97ebe6a5 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.html +++ b/frontend/src/app/_elements/playlist/playlist.component.html @@ -3,17 +3,17 @@
      -
      -
      - +
      +

      {{datasets[getIndex(selectedId)].name}}

      \ No newline at end of file diff --git a/frontend/src/app/_pages/archive/archive.component.html b/frontend/src/app/_pages/archive/archive.component.html index 44c4d9c2..1d5d144f 100644 --- a/frontend/src/app/_pages/archive/archive.component.html +++ b/frontend/src/app/_pages/archive/archive.component.html @@ -1 +1,41 @@ -

      archive works!

      +
      +
      + + +
      + Pogledaj sve javne izvore podataka... +
      +
      + +
      +
      +
      + storage +

      Moji izvori podataka

      +

      + Preuredite vaše izvore podataka, ili dodajte novi. +

      +
      +
      +
      +
      + model_training + +

      Moji modeli

      +

      + Pregledajte vaše modele, menjajte ih, napravite nove modele, ili ih obrišite. +

      +
      +
      +
      +
      + batch_prediction + +

      Rezultati treniranja

      +

      + Pregledajte sve vaše trenirane modele, koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite. +

      +
      +
      +
      +
      \ No newline at end of file diff --git a/frontend/src/app/_pages/archive/archive.component.ts b/frontend/src/app/_pages/archive/archive.component.ts index e3ffd6e2..47f96218 100644 --- a/frontend/src/app/_pages/archive/archive.component.ts +++ b/frontend/src/app/_pages/archive/archive.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; +import { DatasetsService } from 'src/app/_services/datasets.service'; @Component({ selector: 'app-archive', @@ -7,9 +9,17 @@ import { Component, OnInit } from '@angular/core'; }) export class ArchiveComponent implements OnInit { - constructor() { } + publicDatasets: Dataset[] = []; + + constructor(private datasetsService: DatasetsService) { } ngOnInit(): void { + this.datasetsService.getPublicDatasets().subscribe((datasets) => { + this.publicDatasets = datasets; + this.publicDatasets.forEach((element, index) => { + this.publicDatasets[index] = (element); + }) + }); } } diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index b673d074..f73e7571 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -3,7 +3,7 @@
    -
    +
    @@ -13,62 +13,7 @@
    -
    -
    -
    - storage -

    Moji izvori podataka

    -

    - Preuredite vaše izvore podataka, ili dodajte novi. -

    -
    -
    -
    -
    - model_training - -

    Moji modeli

    -

    - Pregledajte vaše modele, menjajte ih, napravite nove modele, ili ih obrišite. -

    -
    -
    -
    -
    - batch_prediction - -

    Rezultati treniranja

    -

    - Pregledajte sve vaše trenirane modele, koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite. -

    -
    -
    -
    -
    -
    - - - -
    - Pogledaj sve javne izvore podataka... -
    - -
    \ No newline at end of file diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index bd9a3b0d..4a0d85c8 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -6,7 +6,6 @@ import { AuthService } from './_services/auth.service'; import { SignalRService } from './_services/signal-r.service'; import { HttpClient } from '@angular/common/http'; import Shared from './Shared'; -import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index bcd02646..58f00c20 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -24,4 +24,21 @@ margin-top: 50%; margin-left: auto; transform: translateX(-50%); +} + +.footer-center { + position: relative; + height: 1rem; +} + +.footer-center>* { + position: fixed; + bottom: 8%; + left: 50%; + transform: translateX(-50%); +} + +.row-height { + white-space: nowrap; + height: 1rem; } \ No newline at end of file diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index 3ef44e54..820f5a5a 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -1,7 +1,10 @@ :root { --ns-primary: #00a8e8; --ns-bg: #003459; - --ns-bg-transparent: rgba(0, 152, 189, 0.3) + --ns-bg-light-30: rgba(0, 152, 189, 0.3); + --ns-bg-dark-100: rgba(0, 65, 101, 1.0); + --ns-bg-dark-50: rgba(0, 65, 101, 0.5); + --offwhite: #ebe6e6; } body { @@ -10,9 +13,19 @@ body { } .bg-light { - background-color: var(--ns-bg-transparent) !important; + background-color: var(--ns-bg-light-30) !important; +} + +.ns-bg-dark-50 {} + +.ns-bg-dark-100 { + background-color: var(--ns-bg-dark-100) !important; } a { color: var(--ns-primary) !important; +} + +.text-offwhite { + color: var(--offwhite); } \ No newline at end of file -- cgit v1.2.3 From 044ef1a76cf2f53b0dd86c4a77fabd01a81e93ad Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Mon, 25 Apr 2022 03:40:36 +0200 Subject: Ažurirane komponente form-model i hidden-layer. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/_data/Model.ts | 6 +- .../_elements/form-model/form-model.component.css | 16 +++ .../_elements/form-model/form-model.component.html | 134 +++++++++++---------- .../_elements/form-model/form-model.component.ts | 32 ++++- .../hidden-layer/hidden-layer.component.css | 14 ++- .../hidden-layer/hidden-layer.component.html | 21 ++-- .../hidden-layer/hidden-layer.component.ts | 8 +- frontend/src/app/_pages/home/home.component.html | 3 + 8 files changed, 155 insertions(+), 79 deletions(-) (limited to 'frontend/src/app/_pages/home/home.component.html') diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index b273f56a..6cef09e5 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -21,7 +21,9 @@ export default class Model { public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, public uploaderId: string = '', public metrics: string[] = [], // TODO add to add-model form - public epochs: number = 5 // TODO add to add-model form + public epochs: number = 5, // TODO add to add-model form + public inputColNum:number=5, + public learningRate:number=0.01 ) { } } @@ -156,4 +158,4 @@ export enum MetricsMultiClassification { Precision = 'precision_score', Recall = 'recall_score', F1 = 'f1_score', -} +} \ No newline at end of file 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 c650bdeb..20546e17 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -1,3 +1,6 @@ +#container{ + color:var(--offwhite); +} mat-label{ color: var(--offwhite) !important; } @@ -6,7 +9,20 @@ select{ } mat-form-field{ color: var(--offwhite) !important; + padding: 0; } 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; } \ 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 69635a4a..40631570 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -1,4 +1,4 @@ -
    +
    @@ -16,14 +16,14 @@
    Tip problema - + {{ optionName }} - + Obavezno polje @@ -33,114 +33,122 @@
    Optimizacija - + {{ optionName }} - + Obavezno polje
    - - Learning rate - - - Saab - Mercedes - Audi + + Funkcija troška + + + {{ optionName }} + - - Obavezno polje + + Obavezno polje
    - + + + Funkcija aktivacije izlaznog sloja + + + {{ optionName }} + + + + Obavezno polje + + + +
    +
    + + Funkcija troška + + + {{ optionName }} + + + + Obavezno polje + + +
    +
    +
    +
    + Broj epoha - + Saab Mercedes Audi - + Obavezno polje
    - + Broj uzoraka po iteraciji - + Saab Mercedes Audi - + Obavezno polje
    -
    -
    - - Funkcija aktivacije izlaznog sloja - - - {{ optionName }} - - - - Obavezno polje - - -
    -
    - - Funkcija troška - - - {{ optionName }} - - - - Obavezno polje - - -
    -
    - -
    - -
    - - Broj skrivenih slojeva: -
    - + + +
    +
    +
    Broj Skrivenih Slojeva
    +
    add_circle
    +
    {{newModel.hiddenLayers}}
    +
    remove_circle
    -
    -
    - +
    +
    \ 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 c5ab9811..6dad9e6c 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -22,6 +22,13 @@ export class FormModelComponent implements OnInit { } 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); newModel: Model = new Model(); myModels?: Model[]; @@ -41,10 +48,33 @@ export class FormModelComponent implements OnInit { lossFunction: any = LossFunction; showMyModels: boolean = true; - + batchSizePower: number = 2; + + updateGraph() { this.graph.update(); } + removeLayer(){ + if(this.newModel.hiddenLayers>0) + { + this.newModel.hiddenLayers-=1; + } + else + { + this.newModel.hiddenLayers=this.newModel.hiddenLayers; + } + + } + addLayer(){ + if(this.newModel.hiddenLayers<12) + { + this.newModel.hiddenLayers+=1; + } + else + { + this.newModel.hiddenLayers=this.newModel.hiddenLayers; + } + } } diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css index c8db6056..dd96e0c5 100644 --- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css @@ -1,5 +1,17 @@ .container{ - max-width: 15rem; + + text-align: justify; border: 1px solid white; border-radius: 5px; + padding: 0; + color: white!important; + background-color: var(--ns-bg-dark-100) !important; + } +mat-form-field{ + font-size: 10px; +} +input{ + background-color: #004165; + color: aliceblue; +} \ No newline at end of file diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html index 65e0f626..16c41b28 100644 --- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html @@ -1,39 +1,42 @@
    +
    + +
    Aktivaciona funkcija - - + Relu Sigmoid Softmax - + Obavezno polje
    - Broj čvorova: +
    + +

    Regularizacija - - + L1 L2 - + Obavezno polje
    Stopa regularizacije - + 0.001 0.01 0.1 - + Obavezno polje diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts index fa9a1114..301476de 100644 --- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts @@ -1,16 +1,18 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, Validators } from '@angular/forms'; - +import Model from 'src/app/_data/Model'; @Component({ selector: 'app-hidden-layer', templateUrl: './hidden-layer.component.html', styleUrls: ['./hidden-layer.component.css'] }) export class HiddenLayerComponent implements OnInit { - + hiddenLayerNum:number=1; constructor() { } ngOnInit(): void { } - selectFormControl = new FormControl('', Validators.required); + selectActivationFormControl = new FormControl('', Validators.required); + selectRegularisationFormControl = new FormControl('', Validators.required); + selectRRateFormControl = new FormControl('', Validators.required); } diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index f73e7571..956e9784 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -16,4 +16,7 @@
    + + +
    \ No newline at end of file -- cgit v1.2.3 From f20f77226f0106ed2c9e2bb7b49550f5e5eb4c50 Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Mon, 25 Apr 2022 13:05:47 +0200 Subject: Ažurirana komponenta form-model, dodata mogućnost iscrtavanja kartica za skrivene slojeve u zavisnosti od broja slojeva. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_elements/form-model/form-model.component.css | 2 ++ .../_elements/form-model/form-model.component.html | 22 +++++++++++++--------- .../_elements/form-model/form-model.component.ts | 4 ++++ .../_pages/experiment/experiment.component.html | 3 ++- frontend/src/app/_pages/home/home.component.html | 4 +--- 5 files changed, 22 insertions(+), 13 deletions(-) (limited to 'frontend/src/app/_pages/home/home.component.html') 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 b4477bce..f4d085ea 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -34,6 +34,8 @@ mat-icon{ padding: 0; color: white!important; background-color: var(--ns-bg-dark-100) !important; + min-width: none; + max-width: 12.5rem; } mat-form-field{ 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 7d669d1d..0b63c5ac 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -124,13 +124,15 @@
    -
    +
    -
    +
    + {{item}}
    -
    - +
    +
    +
    Aktivaciona funkcija @@ -142,17 +144,15 @@ Obavezno polje -
    +
    - -
    Broj čvorova
    add_circle
    {{newModel.hiddenLayerNeurons}}
    remove_circle
    -
    +
    Regularizacija @@ -163,7 +163,8 @@ Obavezno polje -
    +
    +
    Stopa regularizacije @@ -175,6 +176,9 @@ Obavezno polje +
    +
    +
    \ 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 cff967aa..b1d0a2a9 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -54,6 +54,7 @@ export class FormModelComponent implements OnInit { showMyModels: boolean = true; + hiddenLayers=[]; @@ -136,6 +137,9 @@ export class FormModelComponent implements OnInit { this.newModel.hiddenLayerNeurons[i]=1; } }*/ + numSequence(n: number): Array { + return Array(n); + } removeNeuron(){ if(this.newModel.hiddenLayerNeurons>1) { diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 2ffc7d8b..c988a50a 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -28,7 +28,8 @@
    Insert odabir kolona
    -
    Insert treniranje
    + +
    \ 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 956e9784..e682d8dd 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -16,7 +16,5 @@
    - - - +
    \ No newline at end of file -- cgit v1.2.3 From 1b9e3a2470d1123b362ad47725bd76b2eb7b39eb Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Thu, 28 Apr 2022 22:09:08 +0200 Subject: Dodatne stranice i komponente tako da su vise u skladu sa novom temom (navbar, home, archive). --- docs/logo/logo.png | Bin 13315 -> 11962 bytes .../column-table/column-table.component.ts | 2 +- .../src/app/_elements/folder/folder.component.css | 4 --- .../form-dataset/form-dataset.component.css | 34 ++++++++++--------- .../_elements/form-model/form-model.component.css | 18 +++++++---- .../_elements/form-model/form-model.component.html | 34 +++++++++---------- .../src/app/_elements/navbar/navbar.component.css | 8 +++++ .../src/app/_elements/navbar/navbar.component.html | 10 +++--- .../src/app/_elements/navbar/navbar.component.ts | 5 +-- .../app/_elements/playlist/playlist.component.ts | 2 +- .../src/app/_pages/archive/archive.component.html | 20 ++++++++---- frontend/src/app/_pages/home/home.component.css | 20 ++++++++++++ frontend/src/app/_pages/home/home.component.html | 36 ++++++++++++++------- frontend/src/assets/images/logo.png | Bin 13315 -> 11962 bytes frontend/src/styles/helper.css | 12 ++++++- frontend/src/styles/layout.css | 23 +++++++++++-- frontend/src/styles/theme.css | 4 +++ 17 files changed, 156 insertions(+), 76 deletions(-) (limited to 'frontend/src/app/_pages/home/home.component.html') diff --git a/docs/logo/logo.png b/docs/logo/logo.png index 2e15550a..dc8830de 100644 Binary files a/docs/logo/logo.png and b/docs/logo/logo.png differ 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 @@
    - + Naziv
    - + Tip problema @@ -21,7 +21,7 @@
    - + Optimizacija @@ -32,21 +32,20 @@
    - + Funkcija troška {{ optionName }} -
    - + Funkcija aktivacije izlaznog sloja @@ -56,7 +55,7 @@
    - + Stopa učenja @@ -69,13 +68,13 @@
    - + Broj epoha
    - + Broj uzoraka po iteraciji @@ -108,7 +107,7 @@
    - + Aktivaciona funkcija svih slojeva @@ -120,14 +119,14 @@
    - + Broj Neurona svih slojeva
    - + Regularizacija svih slojeva @@ -138,7 +137,7 @@
    - + Stopa regularizacije svih slojeva @@ -152,13 +151,12 @@
    -
    - + Aktivacija
    - + Regularizacija @@ -192,7 +190,7 @@ - + Stopa regularizacije 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 @@
    - + +

    Igrannonica
    - -
    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 @@
    -
    +
    - -
    - Pogledaj sve javne izvore podataka... -
    +
    +
    + model_training + +

    Moji eksperimenti

    +

    + Pregledajte vaše modele, menjajte ih, napravite nove modele, ili ih obrišite. +

    +
    +
    storage -

    Moji izvori podataka

    +

    Izvori podataka

    Preuredite vaše izvore podataka, ili dodajte novi.

    @@ -21,7 +27,7 @@
    model_training -

    Moji modeli

    +

    Modeli

    Pregledajte vaše modele, menjajte ih, napravite nove modele, ili ih obrišite.

    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 @@
    - \ No newline at end of file diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index fc6d3c6b..5a763152 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -32,6 +32,7 @@ import { ScatterchartComponent } from './_elements/_charts/scatterchart/scatterc import { BarchartComponent } from './_elements/_charts/barchart/barchart.component'; import { PieChartComponent } from './_elements/_charts/pie-chart/pie-chart.component'; import { BoxPlotComponent } from './_elements/_charts/box-plot/box-plot.component'; +import {LineChartComponent} from './_elements/_charts/line-chart/line-chart.component'; // Elements import { NavbarComponent } from './_elements/navbar/navbar.component'; import { NotificationsComponent } from './_elements/notifications/notifications.component'; @@ -49,6 +50,7 @@ import { TestComponent } from './_pages/test/test.component'; import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component'; import { HeatmapComponent } from './_elements/_charts/heatmap/heatmap.component'; import { HeatMapAllModule } from '@syncfusion/ej2-angular-heatmap'; +import { MetricViewComponent } from './_elements/metric-view/metric-view.component'; export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); @@ -85,7 +87,10 @@ export function initializeApp(appConfig: Configuration) { MissingvaluesDialogComponent, TestComponent, DoughnutChartComponent, - HeatmapComponent + HeatmapComponent, + MetricViewComponent, + LineChartComponent + ], imports: [ BrowserModule, -- cgit v1.2.3