diff options
Diffstat (limited to 'frontend/src')
25 files changed, 434 insertions, 139 deletions
diff --git a/frontend/src/app/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts new file mode 100644 index 00000000..706231c7 --- /dev/null +++ b/frontend/src/app/_data/Experiment.ts @@ -0,0 +1,12 @@ +export default class Experiment { + _id: string = ''; + constructor( + public name: string = 'Novi experiment', + public description: string = '', + public datasetId: string = '', + public inputColumns: string[] = [], + public columnToPredict: string = '', + public dateCreated: Date = new Date(), + public lastUpdated: Date = new Date() + ) { } +}
\ No newline at end of file diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index d9ba7885..85b6db2b 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -7,11 +7,9 @@ export default class Model { public description: string = '', public dateCreated: Date = new Date(), public lastUpdated: Date = new Date(), - public datasetId: string = '', + public experimentId: string = '', // Test set settings - public inputColumns: string[] = [], - public columnToPredict: string = '', public randomOrder: boolean = true, public randomTestSet: boolean = true, public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U @@ -168,31 +166,28 @@ export enum Metrics { MSE = 'mse', MAE = 'mae', RMSE = 'rmse' - + } -export enum MetricsRegression -{ +export enum MetricsRegression { Mse = 'mse', Mae = 'mae', Mape = 'mape', - Msle='msle', - CosineProximity='cosine' + Msle = 'msle', + CosineProximity = 'cosine' } -export enum MetricsBinaryClassification -{ - Accuracy='binary_accuracy', - Auc="AUC", - Precision='precision_score', - Recall='recall_score', - F1='f1_score', - +export enum MetricsBinaryClassification { + Accuracy = 'binary_accuracy', + Auc = "AUC", + Precision = 'precision_score', + Recall = 'recall_score', + F1 = 'f1_score', + } -export enum MetricsMultiClassification -{ - Accuracy='categorical_accuracy', - Auc="AUC", - Precision='precision_score', - Recall='recall_score', - F1='f1_score', +export enum MetricsMultiClassification { + Accuracy = 'categorical_accuracy', + Auc = "AUC", + Precision = 'precision_score', + Recall = 'recall_score', + F1 = 'f1_score', } diff --git a/frontend/src/app/_data/Notification.ts b/frontend/src/app/_data/Notification.ts new file mode 100644 index 00000000..181bb332 --- /dev/null +++ b/frontend/src/app/_data/Notification.ts @@ -0,0 +1,8 @@ +export default class Notification { + _id: string = ''; + constructor( + public title: string = 'Treniranje u toku...', + public id: string = '042', + public progress: number = 0.5 + ) { } +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.ts b/frontend/src/app/_elements/annvisual/annvisual.component.ts index 53e4e2ca..df0a3898 100644 --- a/frontend/src/app/_elements/annvisual/annvisual.component.ts +++ b/frontend/src/app/_elements/annvisual/annvisual.component.ts @@ -18,7 +18,7 @@ export class AnnvisualComponent implements OnInit { let hiddenlayerstring: string = ''; let digraphstring: string = 'digraph {'; - for (let i = 0; i < this.model.inputColumns.length; i++) { + for (let i = 0; i < /*this.model.inputColumns.length*/ 10; i++) { inputlayerstring = inputlayerstring + 'i' + i + ','; } inputlayerstring = inputlayerstring.slice(0, -1); @@ -35,7 +35,6 @@ export class AnnvisualComponent implements OnInit { } digraphstring = digraphstring + 'o}'; - graphviz('#graph').renderDot(digraphstring); } diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html index bd9e7a13..8fcd44ac 100644 --- a/frontend/src/app/_elements/datatable/datatable.component.html +++ b/frontend/src/app/_elements/datatable/datatable.component.html @@ -1,25 +1,31 @@ <div *ngIf="data"> - <div class="table-responsive" style="max-height: 50vh; max-width: 100%; overflow: scroll;"> - <table *ngIf="hasHeader" class="table table-bordered table-light"> - <thead> - <tr> - <th *ngFor="let item of data[0]; let i = index">{{item}}</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let row of data | slice:1"> - <td *ngFor="let col of row">{{col}}</td> - </tr> - </tbody> - </table> + <div class="table-responsive" style="height: 34rem; overflow: auto; border-radius: 5px;" class="mh-5"> + <div *ngIf="!loaded" style="background-color: #003459; width: 100%; height: 100%;" + class="d-flex justify-content-center align-items-center"> + <app-loading></app-loading> + </div> + <div *ngIf="loaded"> + <table *ngIf="hasHeader" class="table table-bordered table-light"> + <thead> + <tr> + <th *ngFor="let item of data[0]; let i = index">{{item}}</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let row of data | slice:1"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + </tbody> + </table> - <table *ngIf="data.length > 0 && !hasHeader" class="table table-bordered table-light"> - <tbody> - <tr *ngFor="let row of data"> - <td *ngFor="let col of row">{{col}}</td> - </tr> - </tbody> - </table> + <table *ngIf="data.length > 0 && !hasHeader" class="table table-bordered table-light"> + <tbody> + <tr *ngFor="let row of data"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + </tbody> + </table> + </div> </div> <div id="info"> diff --git a/frontend/src/app/_elements/datatable/datatable.component.ts b/frontend/src/app/_elements/datatable/datatable.component.ts index d3740d83..3343f6f0 100644 --- a/frontend/src/app/_elements/datatable/datatable.component.ts +++ b/frontend/src/app/_elements/datatable/datatable.component.ts @@ -11,6 +11,8 @@ export class DatatableComponent implements OnInit { @Input() data?: any[] = []; + loaded = false; + constructor() { } ngOnInit(): void { diff --git a/frontend/src/app/_elements/loading/loading.component.css b/frontend/src/app/_elements/loading/loading.component.css new file mode 100644 index 00000000..f39f60ee --- /dev/null +++ b/frontend/src/app/_elements/loading/loading.component.css @@ -0,0 +1,81 @@ +.lds-grid { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} + +.lds-grid div { + position: absolute; + width: 16px; + height: 16px; + border-radius: 50%; + background: #fff; + animation: lds-grid 1.2s linear infinite; +} + +.lds-grid div:nth-child(1) { + top: 8px; + left: 8px; + animation-delay: 0s; +} + +.lds-grid div:nth-child(2) { + top: 8px; + left: 32px; + animation-delay: -0.4s; +} + +.lds-grid div:nth-child(3) { + top: 8px; + left: 56px; + animation-delay: -0.8s; +} + +.lds-grid div:nth-child(4) { + top: 32px; + left: 8px; + animation-delay: -0.4s; +} + +.lds-grid div:nth-child(5) { + top: 32px; + left: 32px; + animation-delay: -0.8s; +} + +.lds-grid div:nth-child(6) { + top: 32px; + left: 56px; + animation-delay: -1.2s; +} + +.lds-grid div:nth-child(7) { + top: 56px; + left: 8px; + animation-delay: -0.8s; +} + +.lds-grid div:nth-child(8) { + top: 56px; + left: 32px; + animation-delay: -1.2s; +} + +.lds-grid div:nth-child(9) { + top: 56px; + left: 56px; + animation-delay: -1.6s; +} + +@keyframes lds-grid { + + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0.5; + } +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/loading/loading.component.html b/frontend/src/app/_elements/loading/loading.component.html new file mode 100644 index 00000000..d2c7b74e --- /dev/null +++ b/frontend/src/app/_elements/loading/loading.component.html @@ -0,0 +1,11 @@ +<div class="lds-grid"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/loading/loading.component.spec.ts b/frontend/src/app/_elements/loading/loading.component.spec.ts new file mode 100644 index 00000000..7aacfad9 --- /dev/null +++ b/frontend/src/app/_elements/loading/loading.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoadingComponent } from './loading.component'; + +describe('LoadingComponent', () => { + let component: LoadingComponent; + let fixture: ComponentFixture<LoadingComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LoadingComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LoadingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/loading/loading.component.ts b/frontend/src/app/_elements/loading/loading.component.ts new file mode 100644 index 00000000..4dff0cdf --- /dev/null +++ b/frontend/src/app/_elements/loading/loading.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-loading', + templateUrl: './loading.component.html', + styleUrls: ['./loading.component.css'] +}) +export class LoadingComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_elements/model-load/model-load.component.css b/frontend/src/app/_elements/model-load/model-load.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_elements/model-load/model-load.component.css diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html new file mode 100644 index 00000000..ced9b0d6 --- /dev/null +++ b/frontend/src/app/_elements/model-load/model-load.component.html @@ -0,0 +1 @@ +<p>model-load works!</p> diff --git a/frontend/src/app/_elements/model-load/model-load.component.spec.ts b/frontend/src/app/_elements/model-load/model-load.component.spec.ts new file mode 100644 index 00000000..1dafd966 --- /dev/null +++ b/frontend/src/app/_elements/model-load/model-load.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ModelLoadComponent } from './model-load.component'; + +describe('ModelLoadComponent', () => { + let component: ModelLoadComponent; + let fixture: ComponentFixture<ModelLoadComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ModelLoadComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ModelLoadComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts new file mode 100644 index 00000000..00532bea --- /dev/null +++ b/frontend/src/app/_elements/model-load/model-load.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-model-load', + templateUrl: './model-load.component.html', + styleUrls: ['./model-load.component.css'] +}) +export class ModelLoadComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 82a1ea07..dbee4773 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -8,8 +8,9 @@ <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="add-model" class="nav-link px-2" - [class]="(currentUrl === '/add-model') ? 'text-secondary' : 'text-white'">Dodaj model</a></li> + <li><a routerLink="experiment" class="nav-link px-2" + [class]="(currentUrl === '/add-model') ? 'text-secondary' : 'text-white'">Eksperimentiši</a> + </li> <li><a routerLink="my-predictors" class="nav-link px-2" [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a> </li> @@ -18,7 +19,8 @@ <div *ngIf="shared.loggedIn" class="dropdown text-end"> <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"> + <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);" diff --git a/frontend/src/app/_elements/notifications/notifications.component.html b/frontend/src/app/_elements/notifications/notifications.component.html index d1da41b4..0b87e4fc 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.html +++ b/frontend/src/app/_elements/notifications/notifications.component.html @@ -1,3 +1,20 @@ -<div *ngIf="notifications" class="position-fixed card card-body bg-dark text-white m-3" style="bottom: 0; right: 0;"> - <h3>Notifikacije</h3> -</div>
\ No newline at end of file +<div *ngIf="notifications" class="position-fixed card card-body p-1 m-3" style="bottom: 0; right: 0; width: 18rem;"> + <h2 class="m-auto" (click)="closed = !closed;" data-bs-toggle="collapse" href="#collapseNotifs" role="button" + aria-expanded="true" aria-controls="collapseNotifs">Notifikacije + <button class="border-0 bg-white"> + <mat-icon class="position-absolute" style="top: 8px; right: 12px;">{{closed ? 'keyboard_arrow_up' : + 'keyboard_arrow_down'}}</mat-icon> + </button> + </h2> + + <div id="collapseNotifs" class="collapse show"> + <div *ngFor="let notification of notifications" class="p-2 m-1 border rounded"> + <div class="d-flex flex-row"> + <p>{{notification.title}}</p> + </div> + <div class="border-3 border-primary bg-dark m-1" style="height: 5px; margin-top: -10px !important;"> + <div class="bg-primary" style="height: 5px;" [style]="'width: '+(notification.progress*100)+'%;'"> + </div> + </div> + </div> + </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts index 6c1d555b..82613448 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.ts +++ b/frontend/src/app/_elements/notifications/notifications.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { WebSocketService } from 'src/app/_services/web-socket.service'; +import Notification from 'src/app/_data/Notification'; @Component({ selector: 'app-notifications', @@ -8,9 +9,16 @@ import { WebSocketService } from 'src/app/_services/web-socket.service'; }) export class NotificationsComponent implements OnInit { - notifications?: any[]; + notifications?: Notification[]; + closed: boolean = false; - constructor(private wsService: WebSocketService) { } + constructor(private wsService: WebSocketService) { + this.notifications = [ + new Notification("Titanik (Preziveli)", "79768456867", 0.2), + new Notification("Test Prediktor 1", "56758768678", 0.4), + new Notification("Test Prediktor 2", "11344556425", 0.7) + ] + } ngOnInit(): void { // this.wsService.send('test'); diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html index 9d727236..179e9aea 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -1,11 +1,10 @@ -<div id="header"> +<!--<div id="header"> <h1>Napravite svoj model veštačke neuronske mreže</h1> </div> <div id="wrapper"> <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> <div class="form-group row mt-3 mb-2 d-flex justify-content-center"> - <!--justify-content-center--> <h2 class="col-2"> Nov model: </h2> <div class="col-3"> <label for="name" class="col-form-label">Naziv modela:</label> @@ -26,16 +25,12 @@ <div class="py-3 pr-5 justify-content-center"> - <!--Od naslova Izvor podataka pa sve do prikaza tabele (i to) premesteno u dataset-load.component--> <app-dataset-load (selectedDatasetChangeEvent)="datasetHasChanged($event)"></app-dataset-load> </div> - - <!-- ULAZNE/IZLAZNE KOLONE --> <span id="selectInAndOuts"></span> <div - *ngIf="selectedDataset && ((showMyDatasets) || (!showMyDatasets))"> - <!--postignuto da se kod newdataseta ucita tabela pa ulazi/izlazi. ostalo srediti to kod mydatasets(dopuna 2. uslova)--> + *ngIf="selectedDataset && ((showMyDatasets && selectedDatasetLoaded) || (!showMyDatasets && datasetLoaded))"> <div class="row"> <div class="col d-flex justify-content-center"> <h3>Izaberite ulazne kolone:</h3> @@ -88,7 +83,6 @@ <div> <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label> <div id="columnReplacers"> - <!--Ulazne kolone - popunjavanje null vrednosti --> <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3"> <div *ngIf="getInputById('cb_'+column).checked" class=""> <span class="w-20 mx-3"> @@ -165,9 +159,7 @@ </div> </div> </div> - <!--Izlazna kolona - popunjavanje null vrednosti --> <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3"> - <!--moze bez for petlje (this.selectedOutputColumnVal je id), al ne moze ova fja array column onda--> <div class="input-group row" *ngIf="getInputById('rb_'+column).checked"> <span class="input-group-text col-2 text-center"> {{column}} <span class="small" @@ -179,7 +171,6 @@ <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio" [id]="'fillCol_'+column" class="col-1 mt-2" [name]="'delOp_'+column"> - <!--OVDE SREDI IZGLED--> <select [id]="'replaceOptions'+i" class="form-control col-2" *ngIf="isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" (change)="replaceWithSelectedNumber($event);"> @@ -221,8 +212,6 @@ </div> <h2 class="mt-5 mb-4">Parametri treniranja:</h2> - - <!--**********************************************************TIP*********************************************************--> <div> <div class="row p-2"> <div class="col-1"> @@ -240,7 +229,6 @@ </option> </select> </div> - <!--******************************************************************************************************************--> <div class="col-1"> </div> <div class="col-3"> @@ -254,8 +242,6 @@ </div> <div class="row p-2"> - <!--***********************************ENKODER*********************************************--> - <div class="col-1"> </div> <div class="col-3"> @@ -270,8 +256,6 @@ </select> </div> - <!--***********************************BROJ NEURONA SKRIVENOG SLOJA*********************************************--> - <div class="col-1"> </div> <div class="col-3"> @@ -282,7 +266,6 @@ [(ngModel)]="newModel.hiddenLayerNeurons"> </div> </div> - <!--***********************************OPTIMIZACIJA*********************************************--> <div class="row p-2"> <div class="col-1"> @@ -331,7 +314,6 @@ type="checkbox" value="" checked> </div> </div> - <!--************************************************************************************************* --> <div class="border m-3"> <div class="row p-2 m-2"> <div class="col-4"> @@ -364,8 +346,6 @@ </div> </div> </div> - - <!--***********************************AKTIVACIONE FUNKCIJE*********************************************--> <h3>Aktivacione funkcije:</h3> <div class="row p-2 m-2" style="align-self: center;"> @@ -410,10 +390,7 @@ </div> </div> </div> - <br><br> - <!--**********************************************METRIKE ZA KOMPAJLER I GRAFIKE***********************************************--> - <hr> <div class="form-check form-check-inline overflow-auto " style="width: max-content;"> <h3>Izaberite metrike:</h3> @@ -430,7 +407,6 @@ </div> </div> </div> - <!--<app-annvisual [model]="newModel"></app-annvisual>--> <div class="form-group row mt-5 mb-3"> <div class="col"></div> <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" @@ -449,6 +425,4 @@ </div> </div> </div> - -<!--<button - (click)="calculateSumOfNullValuesInCol('Embarked'); calculateMeanColValue('Age');calculateMedianColValue('Age'); getNullValuesReplacersArray();">DUGME</button>-->
\ No newline at end of file +-->
\ No newline at end of file diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts index 192fc6ff..ba8f7d01 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -108,55 +108,55 @@ export class AddModelComponent implements OnInit { } saveModelWithNewDataset(callback: ((arg0: any) => void)) { - - this.getCheckedInputCols(); - this.getCheckedOutputCol(); - this.getMetrics(); - - if (this.validationInputsOutput()) { - console.log('ADD MODEL: STEP 1 - UPLOAD FILE'); - if (this.selectedDataset) { - //console.log("this.datasetLoadComponent.files:", this.datasetLoadComponent.files); - /*this.models.uploadData(this.datasetLoadComponent.files[0]).subscribe((file) => { ZAKOMENTARISANO ZBOG KOMPAJLERSKE GRESKE TOKOM REORGANIZACIJE - console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id); - if (this.selectedDataset) { - this.selectedDataset!.fileId = file._id; - this.selectedDataset!.username = shared.username; - - this.datasets.addDataset(this.selectedDataset!).subscribe((dataset) => { - console.log('ADD MODEL: STEP 3 - ADD MODEL WITH DATASET ID ', dataset._id); - this.newModel.datasetId = dataset._id; - - //da se doda taj dataset u listu postojecih, da bude izabran - this.refreshMyDatasetList(); MORA OVO - this.showMyDatasets = true; - this.selectThisDataset(dataset); - - this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10; - this.tempTestSetDistribution = 90; - this.newModel.username = shared.username; - - this.newModel.nullValuesReplacers = this.getNullValuesReplacersArray(); - - this.models.addModel(this.newModel).subscribe((response) => { - callback(response); - }, (error) => { - shared.openDialog("Neuspeo pokušaj!", "Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite naziv modela i nastavite sa kreiranim datasetom."); - }); //kraj addModel subscribe + /* + this.getCheckedInputCols(); + this.getCheckedOutputCol(); + this.getMetrics(); + + if (this.validationInputsOutput()) { + console.log('ADD MODEL: STEP 1 - UPLOAD FILE'); + if (this.datasetLoadComponent) { + console.log("this.datasetLoadComponent.files:", this.datasetLoadComponent.files); + this.models.uploadData(this.datasetLoadComponent.files[0]).subscribe((file) => { + console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id); + if (this.datasetLoadComponent) { + this.datasetLoadComponent.dataset.fileId = file._id; + this.datasetLoadComponent.dataset.username = shared.username; + + this.datasets.addDataset(this.datasetLoadComponent.dataset).subscribe((dataset) => { + console.log('ADD MODEL: STEP 3 - ADD MODEL WITH DATASET ID ', dataset._id); + this.newModel.datasetId = dataset._id; + + //da se doda taj dataset u listu postojecih, da bude izabran + this.refreshMyDatasetList(); + this.showMyDatasets = true; + this.selectThisDataset(dataset); + + this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10; + this.tempTestSetDistribution = 90; + this.newModel.username = shared.username; + + this.newModel.nullValuesReplacers = this.getNullValuesReplacersArray(); + + this.models.addModel(this.newModel).subscribe((response) => { + callback(response); + }, (error) => { + alert("Model sa unetim nazivom već postoji u Vašoj kolekciji.\nPromenite naziv modela i nastavite sa kreiranim datasetom."); + }); //kraj addModel subscribe + }, (error) => { + alert("Dataset sa unetim nazivom već postoji u Vašoj kolekciji.\nIzmenite naziv ili iskoristite postojeći dataset."); + }); //kraj addDataset subscribe + } //kraj treceg ifa }, (error) => { - shared.openDialog("Neuspeo pokušaj!", "Dataset sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset."); - }); //kraj addDataset subscribe - } //kraj treceg ifa - }, (error) => { - - }); //kraj uploadData subscribe*/ - - } //kraj drugog ifa - } //kraj prvog ifa + //alert("greska uploadData"); + }); //kraj uploadData subscribe + + } //kraj drugog ifa + } //kraj prvog ifa*/ } saveModelWithExistingDataset(callback: ((arg0: any) => void)): any { - if (this.selectedDataset) { //dataset je izabran + /*if (this.selectedDataset) { //dataset je izabran this.getCheckedInputCols(); this.getCheckedOutputCol(); this.getMetrics(); @@ -177,12 +177,12 @@ export class AddModelComponent implements OnInit { } } else { - shared.openDialog("Obaveštenje", "Molimo Vas da izaberete neki dataset iz kolekcije."); - } + alert("Molimo Vas da izaberete neki dataset iz kolekcije."); + }*/ } getCheckedInputCols() { - this.newModel.inputColumns = []; + /*this.newModel.inputColumns = []; let checkboxes: any; checkboxes = document.getElementsByName("cbsNew"); @@ -191,11 +191,11 @@ export class AddModelComponent implements OnInit { let thatCb = <HTMLInputElement>checkboxes[i]; if (thatCb.checked == true) // && thatCb.disabled == false ne treba nam ovo vise this.newModel.inputColumns.push(thatCb.value); - } + }*/ //console.log(this.checkedInputCols); } getCheckedOutputCol() { - this.newModel.columnToPredict = ''; + /*this.newModel.columnToPredict = ''; let radiobuttons: any; radiobuttons = document.getElementsByName("rbsNew"); @@ -206,12 +206,12 @@ export class AddModelComponent implements OnInit { this.newModel.columnToPredict = thatRb.value; break; } - } + }*/ //console.log(this.checkedOutputCol); } - validationInputsOutput(): boolean { - if (this.newModel.inputColumns.length == 0 && this.newModel.columnToPredict == '') { - shared.openDialog("Neuspeo pokušaj!", "Molimo Vas da izaberete ulazne i izlazne kolone za mrežu."); + validationInputsOutput() { + /*if (this.newModel.inputColumns.length == 0 && this.newModel.columnToPredict == '') { + alert("Molimo Vas da izaberete ulazne i izlazne kolone za mrežu."); return false; } else if (this.newModel.inputColumns.length == 0) { @@ -229,7 +229,7 @@ export class AddModelComponent implements OnInit { return false; } } - return true; + return true;*/ } /*selectThisDataset(dataset: Dataset) { diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index fd827ac9..93431397 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -2,7 +2,6 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AuthGuardService } from './_services/auth-guard.service'; -import { AddModelComponent } from './_pages/add-model/add-model.component'; import { HomeComponent } from './_pages/home/home.component'; import { MyDatasetsComponent } from './_pages/my-datasets/my-datasets.component'; import { MyModelsComponent } from './_pages/my-models/my-models.component'; @@ -13,10 +12,12 @@ import { SettingsComponent } from './_pages/settings/settings.component'; import { ProfileComponent } from './_pages/profile/profile.component'; import { PredictComponent } from './_pages/predict/predict.component'; import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-datasets.component'; +import { ExperimentComponent } from './experiment/experiment.component'; const routes: Routes = [ { path: '', component: HomeComponent, data: { title: 'Početna strana' } }, - { path: 'add-model', component: AddModelComponent, data: { title: 'Dodaj model' } }, + /*{ path: 'add-model', component: AddModelComponent, data: { title: 'Dodaj model' } },*/ + { path: 'experiment', component: ExperimentComponent, data: { title: 'Dodaj model' } }, { path: 'my-datasets', component: MyDatasetsComponent, canActivate: [AuthGuardService], data: { title: 'Moji izvori podataka' } }, { path: 'my-models', component: MyModelsComponent, canActivate: [AuthGuardService], data: { title: 'Moji modeli' } }, { path: 'my-predictors', component: MyPredictorsComponent, canActivate: [AuthGuardService], data: { title: 'Moji trenirani modeli' } }, diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index b9ad524f..04523989 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -39,6 +39,9 @@ import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-dataset import { ReactiveBackgroundComponent } from './_elements/reactive-background/reactive-background.component'; import { ItemModelComponent } from './_elements/item-model/item-model.component'; import { AnnvisualComponent } from './_elements/annvisual/annvisual.component'; +import { ExperimentComponent } from './experiment/experiment.component'; +import { LoadingComponent } from './_elements/loading/loading.component'; +import { ModelLoadComponent } from './_elements/model-load/model-load.component'; import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.component'; import { AddNewDatasetComponent } from './_elements/add-new-dataset/add-new-dataset.component'; @@ -70,6 +73,9 @@ import { AddNewDatasetComponent } from './_elements/add-new-dataset/add-new-data ReactiveBackgroundComponent, ItemModelComponent, AnnvisualComponent, + ExperimentComponent, + LoadingComponent, + ModelLoadComponent, AlertDialogComponent, AddNewDatasetComponent ], diff --git a/frontend/src/app/experiment/experiment.component.css b/frontend/src/app/experiment/experiment.component.css new file mode 100644 index 00000000..ee4b0448 --- /dev/null +++ b/frontend/src/app/experiment/experiment.component.css @@ -0,0 +1,39 @@ +#header { + background-color: #003459; + padding-top: 30px; + padding-bottom: 20px; +} + +#header h1 { + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + text-align: center; + color: white; +} + +#container { + border-radius: 8px; +} + +#wrapper { + color: #003459; +} + +.btnType1 { + background-color: #003459; + color: white; +} + +.btnType2 { + background-color: white; + color: #003459; + border-color: #003459; +} + +.selectedDatasetClass { + /*border-color: 2px solid #003459;*/ + background-color: lightblue; +} + +ul li:hover { + background-color: lightblue; +}
\ No newline at end of file diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html new file mode 100644 index 00000000..42f2993d --- /dev/null +++ b/frontend/src/app/experiment/experiment.component.html @@ -0,0 +1,13 @@ +<div id="header"> + <h1>Napravite svoj model veštačke neuronske mreže</h1> +</div> +<div id="wrapper"> + <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> + <h2>1. Izvor podataka</h2> + <app-dataset-load></app-dataset-load> + <h2>2. Preprocesiranje</h2> + <h2>3. Podešavanja mreže</h2> + <app-model-load></app-model-load> + <h2>4. Rezultati treniranja</h2> + </div> +</div>
\ No newline at end of file diff --git a/frontend/src/app/experiment/experiment.component.spec.ts b/frontend/src/app/experiment/experiment.component.spec.ts new file mode 100644 index 00000000..fd2bbd30 --- /dev/null +++ b/frontend/src/app/experiment/experiment.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ExperimentComponent } from './experiment.component'; + +describe('ExperimentComponent', () => { + let component: ExperimentComponent; + let fixture: ComponentFixture<ExperimentComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ExperimentComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ExperimentComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts new file mode 100644 index 00000000..16de7351 --- /dev/null +++ b/frontend/src/app/experiment/experiment.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-experiment', + templateUrl: './experiment.component.html', + styleUrls: ['./experiment.component.css'] +}) +export class ExperimentComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} |