From 869a4d17dd6bb312c661636f69efba89e45579ba Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Sun, 27 Mar 2022 16:24:46 +0200
Subject: Add-model - resen problem praznih redova na kraju csv fajla. Prilikom
 izbora dataseta, skroluje se do sledece forme.

---
 .../src/app/_pages/add-model/add-model.component.html |  7 +++----
 .../src/app/_pages/add-model/add-model.component.ts   | 19 ++++++++++++++++---
 2 files changed, 19 insertions(+), 7 deletions(-)

(limited to 'frontend')

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 09a11e37..b17093c3 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -47,14 +47,14 @@
                         <li class="list-group-item p-3" *ngFor="let dataset of myDatasets"
                             [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}">
                             <app-item-dataset name="usersDataset" [dataset]="dataset"
-                                (click)="selectThisDataset(dataset)"></app-item-dataset>
+                                (click)="scrollToNextForm(); selectThisDataset(dataset);"></app-item-dataset>
                         </li>
                     </ul>
                 </div>
             </div>
 
             <app-dataset-load *ngIf="!showMyDatasets" id="dataset"
-                (loaded)="datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.dataset!.hasHeader">
+                (loaded)="scrollToNextForm(); datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.dataset!.hasHeader">
             </app-dataset-load>
             <div class="px-5 mt-5">
                 <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable>
@@ -62,6 +62,7 @@
         </div>
 
         <!-- ULAZNE/IZLAZNE KOLONE -->
+        <span id="selectInAndOuts"></span>
         <div *ngIf="selectedDataset">
             <div class="row">
                 <div class="col d-flex justify-content-center">
@@ -151,8 +152,6 @@
             </div>
         </div>
 
-
-
         <h2 class="mt-5 mb-4">Parametri treniranja:</h2>
 
         <div>
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 995aaa87..d6e9dbc5 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -93,7 +93,7 @@ export class AddModelComponent implements OnInit {
     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) {
@@ -216,12 +216,16 @@ export class AddModelComponent implements OnInit {
       if (datasets[i]._id == dataset._id)
     }*/
 
-
     //this.datasetFile = csvRecords;
     this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => {
       if (file) {
         this.datasetFile = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter);
-        this.datasetFile.length = this.datasetFile.length - 1;
+        for (let i = this.datasetFile.length - 1; i >= 0; i--) {  //moguce da je vise redova na kraju fajla prazno i sl.
+          if (this.datasetFile[i].length != this.datasetFile[0].length)
+            this.datasetFile[i].pop();
+          else 
+            break; //nema potrebe dalje
+        }
         console.log(this.datasetFile);
       }
     });
@@ -230,6 +234,15 @@ export class AddModelComponent implements OnInit {
     this.resetCbsAndRbs();
   }
 
+  scrollToNextForm() {
+    console.log("USAO U SCROLL");
+    (<HTMLSelectElement>document.getElementById("selectInAndOuts")).scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+      inline: "nearest"
+    });
+  }
+
   resetSelectedDataset(): boolean {
     const temp = this.selectedDataset;
     this.selectedDataset = this.otherDataset;
-- 
cgit v1.2.3


From 7b46f81cfbb813638dc3d766878a6088fa47b17b Mon Sep 17 00:00:00 2001
From: Nevena Bojovic <nenabojov@gmail.com>
Date: Sun, 27 Mar 2022 22:34:12 +0200
Subject: Front razno.

---
 frontend/src/app/_data/Model.ts                          | 13 +++++++------
 .../src/app/_pages/add-model/add-model.component.html    | 16 ++++++++++------
 frontend/src/app/_pages/add-model/add-model.component.ts |  7 +++++--
 frontend/src/app/_pages/home/home.component.ts           |  2 ++
 frontend/src/app/_services/home.service.spec.ts          | 16 ++++++++++++++++
 frontend/src/app/_services/home.service.ts               |  9 +++++++++
 6 files changed, 49 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/app/_services/home.service.spec.ts
 create mode 100644 frontend/src/app/_services/home.service.ts

(limited to 'frontend')

diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index f6e01d08..48418d51 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -15,7 +15,7 @@ export default class Model {
         public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U
 
         // Neural net training settings
-        public type: ANNType = ANNType.FullyConnected,
+        public type: ProblemType = ProblemType.Regression,
         public encoding: Encoding = Encoding.Label,
         public optimizer: Optimizer = Optimizer.Adam,
         public lossFunction: LossFunction = LossFunction.MeanSquaredError,
@@ -23,8 +23,8 @@ export default class Model {
         public hiddenLayerNeurons: number = 1,
         public hiddenLayers: number = 1,
         public batchSize: number = 5,
-        public inputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
-        public hiddenLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
+        public hiddenLayerActivationFunction = [],
+        //public inputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
         public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
         public username: string = '',
         public nullValues: NullValueOptions = NullValueOptions.DeleteRows,
@@ -32,9 +32,10 @@ export default class Model {
     ) { }
 }
 
-export enum ANNType {
-    FullyConnected = 'potpuno povezana',
-    Convolutional = 'konvoluciona'
+export enum ProblemType {
+    Regression = 'regresioni',
+    BinaryClassification = 'binarni-klasifikacioni',
+    MultiClassification = 'multi-klasifikacioni'
 }
 
 // replaceMissing srednja vrednost mean, median, najcesca vrednost (mode)
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 b17093c3..9dde9afe 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -40,11 +40,11 @@
                     Dodajte novi dataset
                 </button>
             </div>
-
+            <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term">
             <div class="px-5">
                 <div *ngIf="showMyDatasets" class="overflow-auto" style="max-height: 500px;">
                     <ul class="list-group">
-                        <li class="list-group-item p-3" *ngFor="let dataset of myDatasets"
+                        <li class="list-group-item p-3" *ngFor="let dataset of myDatasets|filter:term"
                             [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}">
                             <app-item-dataset name="usersDataset" [dataset]="dataset"
                                 (click)="scrollToNextForm(); selectThisDataset(dataset);"></app-item-dataset>
@@ -71,7 +71,7 @@
                         <br>
                         <div *ngFor="let item of selectedDataset.header; let i = index">
                             <input class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}"
-                                name="cbsNew" checked [disabled]="this.selectedOutputColumnVal == item">&nbsp;
+                                name="cbsNew" [checked] = "this.selectedOutputColumnVal != item" [disabled]="this.selectedOutputColumnVal == item">&nbsp;
                             <label class="form-check-label" for="cb_{{item}}">
                                 {{item}}
                             </label>
@@ -159,11 +159,11 @@
                 <div class="col-1">
                 </div>
                 <div class="col-3">
-                    <label for="type" class="col-form-label">Tip mreže: </label>
+                    <label for="type" class="col-form-label">Tip problema: </label>
                 </div>
                 <div class="col-2">
                     <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type">
-                        <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)"
+                        <option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
                             [value]="option">
                             {{ optionName }}
                         </option>
@@ -258,12 +258,14 @@
             </div>
 
             <div class="row p-2">
-                <div class="col-1">
+                
+                 <!--   <div class="col-1">
                 </div>
                 <div class="col-3">
                     <label for="inputLayerActivationFunction" class="col-form-label">Funkcija aktivacije ulaznog
                         sloja:</label>
                 </div>
+               
                 <div class="col-2">
                     <select id=inputLayerActivationFunctionOptions class="form-control"
                         name="inputLayerActivationFunction" [(ngModel)]="newModel.inputLayerActivationFunction">
@@ -276,6 +278,8 @@
                 </div>
                 <div class="col-1">
                 </div>
+                 -->
+                
                 <div class="col-5">
                     <label for="splitYesNo" class="form-check-label">Podela test skupa:&nbsp;&nbsp;
                         <input id="splitYesNo" class="form-check-input" type="checkbox"
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 d6e9dbc5..37672d0a 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import Model, { ReplaceWith } from 'src/app/_data/Model';
-import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions } from 'src/app/_data/Model';
+import { ProblemType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions } from 'src/app/_data/Model';
 import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-load.component';
 import { ModelsService } from 'src/app/_services/models.service';
 import shared from 'src/app/Shared';
@@ -23,7 +23,7 @@ export class AddModelComponent implements OnInit {
 
   newModel: Model;
 
-  ANNType = ANNType;
+  ProblemType = ProblemType;
   Encoding = Encoding;
   ActivationFunction = ActivationFunction;
   LossFunction = LossFunction;
@@ -47,6 +47,9 @@ export class AddModelComponent implements OnInit {
 
   tempTestSetDistribution: number = 90;
 
+  //accepted: Boolean;
+  term: string = "";
+
   constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) {
     this.newModel = new Model();
 
diff --git a/frontend/src/app/_pages/home/home.component.ts b/frontend/src/app/_pages/home/home.component.ts
index 7e4471e8..c9267e77 100644
--- a/frontend/src/app/_pages/home/home.component.ts
+++ b/frontend/src/app/_pages/home/home.component.ts
@@ -3,6 +3,8 @@ import Dataset from 'src/app/_data/Dataset';
 import Predictor from 'src/app/_data/Predictor';
 import { ItemDatasetComponent } from 'src/app/_elements/item-dataset/item-dataset.component';
 import shared from 'src/app/Shared';
+import { DatasetsService } from 'src/app/_services/datasets.service';
+import { PredictorsService } from 'src/app/_services/predictors.service';
 
 @Component({
   selector: 'app-home',
diff --git a/frontend/src/app/_services/home.service.spec.ts b/frontend/src/app/_services/home.service.spec.ts
new file mode 100644
index 00000000..1afaf229
--- /dev/null
+++ b/frontend/src/app/_services/home.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { HomeService } from './home.service';
+
+describe('HomeService', () => {
+  let service: HomeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(HomeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_services/home.service.ts b/frontend/src/app/_services/home.service.ts
new file mode 100644
index 00000000..0026413a
--- /dev/null
+++ b/frontend/src/app/_services/home.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HomeService {
+
+  constructor() { }
+}
-- 
cgit v1.2.3


From d2be4f674d4e0de79f77f299fed3cef0f061df2a Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Sun, 27 Mar 2022 23:43:48 +0200
Subject: Dodata je komponenta za vizuelizaciju veštačke neuronske mreže.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json                         | 303 ++++++++++++++++++++-
 frontend/package.json                              |   4 +-
 .../_elements/annvisual/annvisual.component.css    |   0
 .../_elements/annvisual/annvisual.component.html   |   5 +
 .../annvisual/annvisual.component.spec.ts          |  25 ++
 .../app/_elements/annvisual/annvisual.component.ts |  47 ++++
 6 files changed, 382 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/app/_elements/annvisual/annvisual.component.css
 create mode 100644 frontend/src/app/_elements/annvisual/annvisual.component.html
 create mode 100644 frontend/src/app/_elements/annvisual/annvisual.component.spec.ts
 create mode 100644 frontend/src/app/_elements/annvisual/annvisual.component.ts

(limited to 'frontend')

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8c025c8b..3d909d7a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -26,6 +26,7 @@
         "bootstrap": "^5.1.3",
         "chart.js": "^3.7.1",
         "csv-parser": "^3.0.0",
+        "d3-graphviz": "^2.6.1",
         "mdb-angular-ui-kit": "^2.0.0",
         "ng-uikit-pro-standard": "^1.0.0",
         "ng2-charts": "^3.0.8",
@@ -33,7 +34,7 @@
         "ngx-cookie-service": "^13.1.2",
         "ngx-csv-parser": "^0.0.7",
         "rxjs": "~7.5.0",
-        "tslib": "^2.3.0",
+        "tslib": "^2.3.1",
         "websocket-ts": "^1.1.1",
         "zone.js": "~0.11.4"
       },
@@ -42,6 +43,7 @@
         "@angular/cli": "~13.2.5",
         "@angular/compiler-cli": "~13.2.0",
         "@types/crypto-js": "^4.1.1",
+        "@types/d3-graphviz": "^2.6.7",
         "@types/jasmine": "~3.10.0",
         "@types/node": "^12.11.1",
         "jasmine-core": "~4.0.0",
@@ -2743,6 +2745,57 @@
       "integrity": "sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==",
       "dev": true
     },
+    "node_modules/@types/d3-color": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.4.2.tgz",
+      "integrity": "sha512-fYtiVLBYy7VQX+Kx7wU/uOIkGQn8aAEY8oWMoyja3N4dLd8Yf6XgSIR/4yWvMuveNOH5VShnqCgRqqh/UNanBA==",
+      "dev": true
+    },
+    "node_modules/@types/d3-graphviz": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-graphviz/-/d3-graphviz-2.6.7.tgz",
+      "integrity": "sha512-dKJjD5HiFvAmC0FL/c70VB1diie8FCpyiCZfxMlf6TwYBqUyFvS4XJt6MoxjIuQTJhKDBGzrIvDOgM8gYMLSVA==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-selection": "^1",
+        "@types/d3-transition": "^1",
+        "@types/d3-zoom": "^1"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.4.2.tgz",
+      "integrity": "sha512-ylycts6llFf8yAEs1tXzx2loxxzDZHseuhPokrqKprTQSTcD3JbJI1omZP1rphsELZO3Q+of3ff0ZS7+O6yVzg==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-color": "^1"
+      }
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.4.3.tgz",
+      "integrity": "sha512-GjKQWVZO6Sa96HiKO6R93VBE8DUW+DDkFpIMf9vpY5S78qZTlRRSNUsHr/afDpF7TvLDV7VxrUFOWW7vdIlYkA==",
+      "dev": true
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-J+a3SuF/E7wXbOSN19p8ZieQSFIm5hU2Egqtndbc54LXaAEOpLfDx4sBu/PKAKzHOdgKK1wkMhINKqNh4aoZAg==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-selection": "^1"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-1.8.3.tgz",
+      "integrity": "sha512-3kHkL6sPiDdbfGhzlp5gIHyu3kULhtnHTTAl3UBZVtWB1PzcLL8vdmz5mTx7plLiUqOA2Y+yT2GKjt/TdA2p7Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-interpolate": "^1",
+        "@types/d3-selection": "^1"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
@@ -4565,6 +4618,99 @@
       "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=",
       "dev": true
     },
+    "node_modules/d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+    },
+    "node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+    },
+    "node_modules/d3-drag": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+      "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+      "dependencies": {
+        "d3-dispatch": "1",
+        "d3-selection": "1"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ=="
+    },
+    "node_modules/d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+    },
+    "node_modules/d3-graphviz": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/d3-graphviz/-/d3-graphviz-2.6.1.tgz",
+      "integrity": "sha512-878AFSagQyr5tTOrM7YiVYeUC2/NoFcOB3/oew+LAML0xekyJSw9j3WOCUMBsc95KYe9XBYZ+SKKuObVya1tJQ==",
+      "dependencies": {
+        "d3-dispatch": "^1.0.3",
+        "d3-format": "^1.2.0",
+        "d3-interpolate": "^1.1.5",
+        "d3-path": "^1.0.5",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "^1.0.6",
+        "d3-transition": "^1.1.1",
+        "d3-zoom": "^1.5.0",
+        "viz.js": "^1.8.2"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "dependencies": {
+        "d3-color": "1"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "node_modules/d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
+    },
+    "node_modules/d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+    },
+    "node_modules/d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+      "dependencies": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
+      "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
+      "dependencies": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
     "node_modules/date-format": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.4.tgz",
@@ -11042,6 +11188,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/viz.js": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/viz.js/-/viz.js-1.8.2.tgz",
+      "integrity": "sha512-W+1+N/hdzLpQZEcvz79n2IgUE9pfx6JLdHh3Kh8RGvLL8P1LdJVQmi2OsDcLdY4QVID4OUy+FPelyerX0nJxIQ==",
+      "deprecated": "no longer supported"
+    },
     "node_modules/void-elements": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
@@ -13445,6 +13597,57 @@
       "integrity": "sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==",
       "dev": true
     },
+    "@types/d3-color": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.4.2.tgz",
+      "integrity": "sha512-fYtiVLBYy7VQX+Kx7wU/uOIkGQn8aAEY8oWMoyja3N4dLd8Yf6XgSIR/4yWvMuveNOH5VShnqCgRqqh/UNanBA==",
+      "dev": true
+    },
+    "@types/d3-graphviz": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-graphviz/-/d3-graphviz-2.6.7.tgz",
+      "integrity": "sha512-dKJjD5HiFvAmC0FL/c70VB1diie8FCpyiCZfxMlf6TwYBqUyFvS4XJt6MoxjIuQTJhKDBGzrIvDOgM8gYMLSVA==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "^1",
+        "@types/d3-transition": "^1",
+        "@types/d3-zoom": "^1"
+      }
+    },
+    "@types/d3-interpolate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.4.2.tgz",
+      "integrity": "sha512-ylycts6llFf8yAEs1tXzx2loxxzDZHseuhPokrqKprTQSTcD3JbJI1omZP1rphsELZO3Q+of3ff0ZS7+O6yVzg==",
+      "dev": true,
+      "requires": {
+        "@types/d3-color": "^1"
+      }
+    },
+    "@types/d3-selection": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.4.3.tgz",
+      "integrity": "sha512-GjKQWVZO6Sa96HiKO6R93VBE8DUW+DDkFpIMf9vpY5S78qZTlRRSNUsHr/afDpF7TvLDV7VxrUFOWW7vdIlYkA==",
+      "dev": true
+    },
+    "@types/d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-J+a3SuF/E7wXbOSN19p8ZieQSFIm5hU2Egqtndbc54LXaAEOpLfDx4sBu/PKAKzHOdgKK1wkMhINKqNh4aoZAg==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "^1"
+      }
+    },
+    "@types/d3-zoom": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-1.8.3.tgz",
+      "integrity": "sha512-3kHkL6sPiDdbfGhzlp5gIHyu3kULhtnHTTAl3UBZVtWB1PzcLL8vdmz5mTx7plLiUqOA2Y+yT2GKjt/TdA2p7Q==",
+      "dev": true,
+      "requires": {
+        "@types/d3-interpolate": "^1",
+        "@types/d3-selection": "^1"
+      }
+    },
     "@types/eslint": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
@@ -14874,6 +15077,99 @@
       "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=",
       "dev": true
     },
+    "d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+    },
+    "d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+    },
+    "d3-drag": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+      "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-selection": "1"
+      }
+    },
+    "d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ=="
+    },
+    "d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+    },
+    "d3-graphviz": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/d3-graphviz/-/d3-graphviz-2.6.1.tgz",
+      "integrity": "sha512-878AFSagQyr5tTOrM7YiVYeUC2/NoFcOB3/oew+LAML0xekyJSw9j3WOCUMBsc95KYe9XBYZ+SKKuObVya1tJQ==",
+      "requires": {
+        "d3-dispatch": "^1.0.3",
+        "d3-format": "^1.2.0",
+        "d3-interpolate": "^1.1.5",
+        "d3-path": "^1.0.5",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "^1.0.6",
+        "d3-transition": "^1.1.1",
+        "d3-zoom": "^1.5.0",
+        "viz.js": "^1.8.2"
+      }
+    },
+    "d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "requires": {
+        "d3-color": "1"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
+    },
+    "d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+    },
+    "d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+      "requires": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
+    "d3-zoom": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
+      "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
     "date-format": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.4.tgz",
@@ -19594,6 +19890,11 @@
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
       "dev": true
     },
+    "viz.js": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/viz.js/-/viz.js-1.8.2.tgz",
+      "integrity": "sha512-W+1+N/hdzLpQZEcvz79n2IgUE9pfx6JLdHh3Kh8RGvLL8P1LdJVQmi2OsDcLdY4QVID4OUy+FPelyerX0nJxIQ=="
+    },
     "void-elements": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8cd6db58..975c740f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,6 +28,7 @@
     "bootstrap": "^5.1.3",
     "chart.js": "^3.7.1",
     "csv-parser": "^3.0.0",
+    "d3-graphviz": "^2.6.1",
     "mdb-angular-ui-kit": "^2.0.0",
     "ng-uikit-pro-standard": "^1.0.0",
     "ng2-charts": "^3.0.8",
@@ -35,7 +36,7 @@
     "ngx-cookie-service": "^13.1.2",
     "ngx-csv-parser": "^0.0.7",
     "rxjs": "~7.5.0",
-    "tslib": "^2.3.0",
+    "tslib": "^2.3.1",
     "websocket-ts": "^1.1.1",
     "zone.js": "~0.11.4"
   },
@@ -44,6 +45,7 @@
     "@angular/cli": "~13.2.5",
     "@angular/compiler-cli": "~13.2.0",
     "@types/crypto-js": "^4.1.1",
+    "@types/d3-graphviz": "^2.6.7",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
     "jasmine-core": "~4.0.0",
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.css b/frontend/src/app/_elements/annvisual/annvisual.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.html b/frontend/src/app/_elements/annvisual/annvisual.component.html
new file mode 100644
index 00000000..6dd3b3ae
--- /dev/null
+++ b/frontend/src/app/_elements/annvisual/annvisual.component.html
@@ -0,0 +1,5 @@
+<div style="text-align: center; width: 100%;" >
+    <button (click)="d3()">Prikaz veštačke neuronske mreže</button>
+    <div id="graph"></div>
+  </div>
+
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts b/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts
new file mode 100644
index 00000000..cb07ef1d
--- /dev/null
+++ b/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnnvisualComponent } from './annvisual.component';
+
+describe('AnnvisualComponent', () => {
+  let component: AnnvisualComponent;
+  let fixture: ComponentFixture<AnnvisualComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AnnvisualComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnnvisualComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.ts b/frontend/src/app/_elements/annvisual/annvisual.component.ts
new file mode 100644
index 00000000..ff5b45d6
--- /dev/null
+++ b/frontend/src/app/_elements/annvisual/annvisual.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnInit,Input } from '@angular/core';
+import Model from 'src/app/_data/Model';
+import { graphviz }  from 'd3-graphviz';
+
+@Component({
+  selector: 'app-annvisual',
+  templateUrl: './annvisual.component.html',
+  styleUrls: ['./annvisual.component.css']
+})
+export class AnnvisualComponent implements OnInit {
+  ngOnInit(): void {
+    throw new Error('Method not implemented.');
+  }
+
+  @Input() model: Model = new Model();
+
+  d3(){
+    let inputlayerstring:string='';
+    let hiddenlayerstring:string='';
+    let digraphstring:string='digraph {';
+
+    for(let i=0;i<this.model.inputNeurons;i++)
+    {
+      inputlayerstring=inputlayerstring+'i'+i+',';
+    }
+    inputlayerstring=inputlayerstring.slice(0,-1);
+
+    digraphstring=digraphstring+'->';
+
+    for(let j=0;j<this.model.hiddenLayers;j++)
+    {
+      for(let i=0;i<this.model.hiddenLayerNeurons;i++)
+      {
+        hiddenlayerstring=hiddenlayerstring+'h'+j+'_'+i+',';
+      }
+      hiddenlayerstring=hiddenlayerstring.slice(0,1);
+      digraphstring=digraphstring+hiddenlayerstring+'->';
+      hiddenlayerstring='';
+    }
+    digraphstring=digraphstring+'o}';
+    alert(digraphstring);
+    
+    graphviz('#graph').renderDot(digraphstring);
+    }
+
+
+}
-- 
cgit v1.2.3