aboutsummaryrefslogtreecommitdiff
path: root/frontend/src
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/app/_data/Experiment.ts37
-rw-r--r--frontend/src/app/_data/Model.ts31
-rw-r--r--frontend/src/app/_elements/model-load/model-load.component.html49
-rw-r--r--frontend/src/app/_elements/model-load/model-load.component.ts5
-rw-r--r--frontend/src/app/experiment/experiment.component.html127
-rw-r--r--frontend/src/app/experiment/experiment.component.ts18
6 files changed, 153 insertions, 114 deletions
diff --git a/frontend/src/app/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts
index a5aad218..453f6ca0 100644
--- a/frontend/src/app/_data/Experiment.ts
+++ b/frontend/src/app/_data/Experiment.ts
@@ -2,7 +2,7 @@ export default class Experiment {
_id: string = '';
uploaderId: string = '';
constructor(
- public name: string = 'Novi experiment',
+ public name: string = 'Novi eksperiment',
public description: string = '',
public datasetId: string = '',
public inputColumns: string[] = [],
@@ -10,7 +10,16 @@ export default class Experiment {
public nullValues: NullValueOptions = NullValueOptions.DeleteRows,
public nullValuesReplacers: NullValReplacer[] = [],
public dateCreated: Date = new Date(),
- public lastUpdated: Date = new Date()
+ public lastUpdated: Date = new Date(),
+ public modelIds: string[] = [],
+
+ // Test set settings
+ 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
+
+ //TODO - za svaku kolonu se bira enkoding
+ public encoding: Encoding = Encoding.Label
) { }
}
@@ -32,4 +41,28 @@ export class NullValReplacer {
"column": string;
"option": NullValueOptions;
"value": string;
+}
+
+export enum Encoding {
+ Label = 'label',
+ OneHot = 'onehot',
+ Ordinal = 'ordinal',
+ Hashing = 'hashing',
+ Binary = 'binary',
+ BaseN = 'baseN'
+ /*
+ BackwardDifference = 'backward difference',
+ CatBoost = 'cat boost',
+ Count = 'count',
+ GLMM = 'glmm',
+ Target = 'target',
+ Helmert = 'helmert',
+ JamesStein = 'james stein',
+ LeaveOneOut = 'leave one out',
+ MEstimate = 'MEstimate',
+ Sum = 'sum',
+ Polynomial = 'polynomial',
+ WOE = 'woe',
+ Quantile = 'quantile'
+ */
} \ No newline at end of file
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 9ea437b1..8a85e296 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -7,16 +7,10 @@ export default class Model {
public description: string = '',
public dateCreated: Date = new Date(),
public lastUpdated: Date = new Date(),
- public experimentId: string = '',
-
- // Test set settings
- 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
+ //public experimentId: string = '',
// Neural net training settings
public type: ProblemType = ProblemType.Regression,
- public encoding: Encoding = Encoding.Label,
public optimizer: Optimizer = Optimizer.Adam,
public lossFunction: LossFunction = LossFunction.MeanSquaredError,
public inputNeurons: number = 1,
@@ -39,29 +33,6 @@ export enum ProblemType {
// replaceMissing srednja vrednost mean, median, najcesca vrednost (mode)
// removeOutliers
-export enum Encoding {
- Label = 'label',
- OneHot = 'onehot',
- Ordinal = 'ordinal',
- Hashing = 'hashing',
- Binary = 'binary',
- BaseN = 'baseN'
- /*
- BackwardDifference = 'backward difference',
- CatBoost = 'cat boost',
- Count = 'count',
- GLMM = 'glmm',
- Target = 'target',
- Helmert = 'helmert',
- JamesStein = 'james stein',
- LeaveOneOut = 'leave one out',
- MEstimate = 'MEstimate',
- Sum = 'sum',
- Polynomial = 'polynomial',
- WOE = 'woe',
- Quantile = 'quantile'
- */
-}
export enum ActivationFunction {
// linear
diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html
index 0923c895..833b7181 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.html
+++ b/frontend/src/app/_elements/model-load/model-load.component.html
@@ -85,18 +85,6 @@
<div class="row p-2">
<div class="col-1">
</div>
- <div class="col-3">
- <label for="encoding" class="col-form-label">Enkoding: </label>
- </div>
- <div class="col-2">
- <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding">
- <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
- [value]="option">
- {{ optionName }}
- </option>
- </select>
- </div>
-
<div class="col-1">
</div>
<div class="col-3">
@@ -149,43 +137,6 @@
</select>
</div>
<div class="col-1"></div>
- <div class="col-3 mt-2">
- <label for="type" class="form-check-label">Nasumičan redosled podataka?</label>
- <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="newModel.randomOrder"
- type="checkbox" value="" checked>
- </div>
- </div>
- <div class="border m-3">
- <div class="row p-2 m-2">
- <div class="col-4">
- <label for="splitYesNo" class="form-check-label">
- <h3>Podela test skupa:&nbsp;&nbsp;
- <input id="splitYesNo" class="form-check-input" type="checkbox"
- [checked]="newModel.randomTestSet"
- (change)="newModel.randomTestSet = !newModel.randomTestSet">
- </h3>
- </label>
- </div>
- <div class="col-8">
- trening
- <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10"
- name="randomTestSetDistribution" thumbLabel [disabled]="!newModel.randomTestSet"
- [(ngModel)]="tempTestSetDistribution">
- </mat-slider>
- test
- </div>
- </div>
-
- <div class="row p-2 mx-2">
- <div class="col-4">
- <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening
- skup:</label>
- </div>
- <div class="col-2">
- <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90"
- [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet">
- </div>
- </div>
</div>
<h3>Aktivacione funkcije:</h3>
diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts
index ca6b8ea5..abf19d75 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.ts
+++ b/frontend/src/app/_elements/model-load/model-load.component.ts
@@ -1,6 +1,6 @@
import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
import Shared from 'src/app/Shared';
-import Model, { ActivationFunction, Encoding, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
+import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
import { ModelsService } from 'src/app/_services/models.service';
import { GraphComponent } from '../graph/graph.component';
@@ -20,7 +20,6 @@ export class ModelLoadComponent implements OnInit {
selectedModel?: Model;
ProblemType = ProblemType;
- Encoding = Encoding;
ActivationFunction = ActivationFunction;
metrics: any = Metrics;
LossFunction = LossFunction;
@@ -32,7 +31,6 @@ export class ModelLoadComponent implements OnInit {
term: string = "";
selectedProblemType: string = '';
selectedMetrics = [];
- tempTestSetDistribution = 90;
lossFunction: any = LossFunction;
showMyModels: boolean = true;
@@ -64,7 +62,6 @@ export class ModelLoadComponent implements OnInit {
uploadModel() { //console.log(this.selectedModel);
this.getMetrics();
- this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
this.newModel.username = Shared.username;
this.modelsService.addModel(this.newModel).subscribe((response) => {
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index 42797579..6020cab5 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -21,7 +21,16 @@
<div class="carousel-item">
<h2>2. Preprocesiranje</h2>
- <h3>Biranje ulaznih i izlaznih kolona:</h3>
+
+ <label for="name" class="col-form-label">Naziv eksperimenta:</label>
+ <input type="text" class="form-control mb-1" name="name" placeholder="Naziv..." [(ngModel)]="experiment.name">
+
+ <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+ <div>
+ <textarea class="form-control" name="desc" rows="3" [(ngModel)]="experiment.description"></textarea>
+ </div>
+
+ <h3 class="mt-3">Biranje ulaznih i izlaznih kolona:</h3>
<div *ngIf="selectedDataset">
<div class="row">
<div class="col d-flex justify-content-center">
@@ -31,8 +40,9 @@
<div *ngFor="let item of selectedDataset.columnInfo; let i = index">
<input class="form-check-input" type="checkbox" value="{{item.columnName}}"
id="cb_{{item.columnName}}" name="cbsNew"
- [checked]="this.selectedOutputColumnVal != item.columnName"
- [disabled]="this.selectedOutputColumnVal == item.columnName">&nbsp;
+ [checked]="experiment.outputColumn != item.columnName"
+ [disabled]="experiment.outputColumn == item.columnName"
+ (click)="checkedColumnsChanged(item, 0)">&nbsp;
<label class="form-check-label" for="cb_{{item.columnName}}">
{{item.columnName}}
</label>
@@ -44,8 +54,11 @@
<div id="divOutputs" class="form-check mt-2">
<br>
<div *ngFor="let item of selectedDataset.columnInfo; let i = index">
- <input class="form-check-input" type="radio" value="{{item.columnName}}" id="rb_{{item.columnName}}"
- name="rbsNew" (change)="this.selectedOutputColumnVal = item.columnName">&nbsp;
+ <input class="form-check-input" type="radio" value="{{item.columnName}}"
+ id="rb_{{item.columnName}}" name="rbsNew"
+ [(ngModel)]="this.experiment.outputColumn"
+ (change)="experiment.outputColumn = item.columnName"
+ (click)="checkedColumnsChanged(item, 1);">&nbsp;
<label class="form-check-label" for="rb_{{item.columnName}}">
{{item.columnName}}
</label>
@@ -54,11 +67,12 @@
</div>
</div>
</div>
+ <br>
<h3>Popunjavanje nedostajućih vrednosti:</h3>
<div class="form-check" *ngIf="selectedDataset">
<input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.DeleteRows"
- class="form-check-input" value="deleteRows" name="fillMissing" id="delRows" checked data-bs-toggle="collapse"
- data-bs-target="#fillMissingCustom.show">
+ class="form-check-input" value="deleteRows" name="fillMissing" id="delRows" checked
+ data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
<label for="delRows" class="form-check-label">Obriši sve
redove sa nedostajućim vrednostima ({{selectedDataset.nullRows}} / TODO)</label><br>
<input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.DeleteColumns"
@@ -66,29 +80,38 @@
data-bs-target="#fillMissingCustom.show">
<label for="delCols" class="form-check-label">Obriši sve
kolone sa nedostajućim vrednostima ({{selectedDataset.nullCols}} / TODO)</label><br>
- <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.Replace" class="form-check-input"
- name="fillMissing" id="replace" data-bs-toggle="collapse" data-bs-target="#fillMissingCustom:not(.show)">
+ <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.Replace"
+ class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse"
+ data-bs-target="#fillMissingCustom:not(.show)">
<label for="replace" class="form-check-label">Izabraću
vrednosti koje će da zamene nedostajuće vrednosti za svaku kolonu...</label><br><br>
<div class="collapse" id="fillMissingCustom">
<div>
<label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
+ <div class="my-3" *ngIf="getSelectedNullColumnsArray().length > 0" >
+ <label class="text-center form-control mx-3 text-secondary">
+ Kolone <span style="font-style: italic;" *ngFor="let colname of getSelectedNullColumnsArray(); let i = index">
+ <span *ngIf="i != getSelectedNullColumnsArray().length - 1">{{colname}}, </span>
+ <span *ngIf="i == getSelectedNullColumnsArray().length - 1">{{colname}} </span>
+ </span>
+ nemaju nedostajućih vrednosti za popunjavanje.
+ </label>
+ </div>
<div id="columnReplacers">
- <div *ngFor="let column of selectedDataset.columnInfo; let i = index" class="my-3">
- <div *ngIf="getInputById('cb_'+column.columnName).checked || selectedOutputColumnVal == column.columnName"
- class="">
+ <div *ngFor="let column of selectedColumnsInfoArray; let i = index" class="my-3">
+ <div *ngIf="column.numNulls > 0">
<span class="w-20 mx-3">
- {{column.columnName}}&nbsp;<span class="small" style="color:gray;">({{column.numNulls}}
- null)
+ {{column.columnName}}&nbsp;<span class="small" style="color:gray;">({{column.numNulls}} null)
</span>
</span>
-
- <label *ngIf="column.numNulls <= 0" class="text-center form-control mx-3 text-secondary">
+
+ <label *ngIf="column.numNulls <= 0"
+ class="text-center form-control mx-3 text-secondary">
Ova kolona nema
nedostajućih
vrednosti.
</label>
-
+
<div *ngIf="column.numNulls > 0" class="d-flex flex-row justify-content-end">
<div class="flex-grow-3 mx-3 me-auto">
<div class="input-group">
@@ -100,20 +123,22 @@
</label>
</div>
<input type="text" class="form-control" [id]="'fillText_'+column.columnName"
- (keyup)="checkFillColRadio(column.columnName)" placeholder="Unesi vrednost...">
-
+ (keyup)="checkFillColRadio(column.columnName)"
+ placeholder="Unesi vrednost...">
+
<div class="input-group-append">
<select [id]="'replaceOptions'+i" class="form-control btn-primary"
- *ngIf="column.isNumber" (change)="replace($event, column);">
+ *ngIf="column.isNumber" (change)="replace($event, column); checkFillColRadio(column.columnName);">
<option
*ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
[value]="option">
{{ optionName }}
</option>
</select>
- <select [id]="'replaceOptions'+i" class="form-control btn-outline-primary"
+ <select [id]="'replaceOptions'+i"
+ class="form-control btn-outline-primary"
*ngIf="!column.isNumber && column.numNulls > 0"
- (change)="replace($event, column);">
+ (change)="replace($event, column); checkFillColRadio(column.columnName);">
<option *ngFor="let option of column.uniqueValues" [value]="option">
{{ option }}
</option>
@@ -121,7 +146,7 @@
</div>
</div>
</div>
-
+
<div class="flex-shrink-1 mx-3">
<div class="input-group">
<label class="form-control" [for]="'delCol_'+column.columnName">Izbriši
@@ -131,7 +156,7 @@
(change)="emptyFillTextInput(column.columnName)"></label>
</div>
</div>
-
+
<div class="flex-shrink-1 mx-3">
<div class="input-group">
<label class="form-control" [for]="'delRows_'+column.columnName">Izbriši
@@ -196,6 +221,60 @@
</div>
</div>
+ <div id="randomOptions">
+ <div class="col-3 mt-2">
+ <label for="type" class="form-check-label">Nasumičan redosled podataka?</label>
+ <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="experiment.randomOrder"
+ type="checkbox" value="" checked>
+ </div>
+ <div class="border m-3">
+ <div class="row p-2 m-2">
+ <div class="col-4">
+ <label for="splitYesNo" class="form-check-label">
+ <h3>Podela test skupa:&nbsp;&nbsp;
+ <input id="splitYesNo" class="form-check-input" type="checkbox"
+ [checked]="experiment.randomTestSet"
+ (change)="experiment.randomTestSet = !experiment.randomTestSet">
+ </h3>
+ </label>
+ </div>
+ <div class="col-8">
+ trening
+ <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10"
+ name="randomTestSetDistribution" thumbLabel [disabled]="!experiment.randomTestSet"
+ [(ngModel)]="tempTestSetDistribution">
+ </mat-slider>
+ test
+ </div>
+ </div>
+
+ <div class="row p-2 mx-2">
+ <div class="col-4">
+ <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening
+ skup:</label>
+ </div>
+ <div class="col-2">
+ <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90"
+ [(ngModel)]="tempTestSetDistribution" [disabled]="!experiment.randomTestSet">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div id="encodingForColumns">
+ <div class="col-3">
+ <label for="encoding" class="col-form-label">Enkoding: </label>
+ </div>
+ <div class="col-2">
+ <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="experiment.encoding">
+ <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
+ [value]="option">
+ {{ optionName }}
+ </option>
+ </select>
+ </div>
+ </div>
+
</div>
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index 7ccca528..74ee9ee7 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
-import Experiment, { NullValReplacer, NullValueOptions, ReplaceWith } from '../_data/Experiment';
+import Experiment, { NullValReplacer, NullValueOptions, ReplaceWith, Encoding } from '../_data/Experiment';
import Model from '../_data/Model';
import Dataset, { ColumnInfo } from '../_data/Dataset';
import { ModelsService } from '../_services/models.service';
@@ -20,12 +20,15 @@ export class ExperimentComponent implements OnInit {
NullValueOptions = NullValueOptions;
ReplaceWith = ReplaceWith;
+ Encoding = Encoding;
Object = Object;
selectedColumnsInfoArray: ColumnInfo[] = [];
- selectedOutputColumnVal: string = '';
+ //selectedOutputColumnVal: string = '';
selectedNullColumnsArray: string[] = [];
+ tempTestSetDistribution = 90;
+
constructor(private modelsService: ModelsService, private experimentsService: ExperimentsService) { }
ngOnInit(): void {
@@ -179,10 +182,13 @@ export class ExperimentComponent implements OnInit {
for (let i = 0; i < pom.length; i++)
this.experiment.inputColumns.push(pom[i].columnName);
- this.selectedColumnsInfoArray = this.selectedColumnsInfoArray.filter(x => x.numNulls > 0);
- //TREBAJU MI NULLVALUESREPLACERI
+ //this.experiment.outputColumn = this.selectedOutputColumnVal;
+
+ this.selectedColumnsInfoArray = this.selectedColumnsInfoArray.filter(x => x.numNulls > 0); //obavezno
this.experiment.nullValuesReplacers = this.getNullValuesReplacersArray();
+ this.experiment.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
+
console.log("Eksperiment:", this.experiment);
this.experimentsService.addExperiment(this.experiment).subscribe((response) => {
@@ -193,7 +199,9 @@ export class ExperimentComponent implements OnInit {
Shared.openDialog("Obaveštenje", "Eksperiment je uspešno kreiran.");
}, (error) => {
-
+ if (error.error == "Experiment with this name exists") {
+ Shared.openDialog("Greška", "Eksperiment sa unetim nazivom već postoji u Vašoj kolekciji. Unesite neki drugi naziv.");
+ }
});
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-20 01:38:35 +0000