From 9174136e033421beec30eb3cc574d6e37d090857 Mon Sep 17 00:00:00 2001 From: Danijel Andjelkovic Date: Thu, 7 Apr 2022 15:14:20 +0200 Subject: Dodao graph komponentu za brzo iscrtavanje grafa neuronske mreze. --- .../src/app/_elements/graph/graph.component.css | 0 .../src/app/_elements/graph/graph.component.html | 3 + .../app/_elements/graph/graph.component.spec.ts | 25 ++++ .../src/app/_elements/graph/graph.component.ts | 145 +++++++++++++++++++++ .../_elements/item-model/item-model.component.html | 3 +- .../_elements/model-load/model-load.component.html | 6 +- .../_elements/model-load/model-load.component.ts | 9 +- 7 files changed, 186 insertions(+), 5 deletions(-) create mode 100644 frontend/src/app/_elements/graph/graph.component.css create mode 100644 frontend/src/app/_elements/graph/graph.component.html create mode 100644 frontend/src/app/_elements/graph/graph.component.spec.ts create mode 100644 frontend/src/app/_elements/graph/graph.component.ts (limited to 'frontend/src/app/_elements') diff --git a/frontend/src/app/_elements/graph/graph.component.css b/frontend/src/app/_elements/graph/graph.component.css new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html new file mode 100644 index 00000000..527d3f1a --- /dev/null +++ b/frontend/src/app/_elements/graph/graph.component.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/frontend/src/app/_elements/graph/graph.component.spec.ts b/frontend/src/app/_elements/graph/graph.component.spec.ts new file mode 100644 index 00000000..99783d42 --- /dev/null +++ b/frontend/src/app/_elements/graph/graph.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GraphComponent } from './graph.component'; + +describe('GraphComponent', () => { + let component: GraphComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GraphComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(GraphComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts new file mode 100644 index 00000000..c17e8906 --- /dev/null +++ b/frontend/src/app/_elements/graph/graph.component.ts @@ -0,0 +1,145 @@ +import { Component, Input, OnInit } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; +import Model from 'src/app/_data/Model'; + +@Component({ + selector: 'app-graph', + templateUrl: './graph.component.html', + styleUrls: ['./graph.component.css'] +}) +export class GraphComponent implements OnInit { + + @Input() model?: Model; + @Input() inputCols: number = 1; + + @Input() lineThickness: number = 5; + @Input() nodeRadius: number = 15; + @Input() lineColor: string = '#ff0000'; + @Input() nodeColor: string = '#222277'; + @Input() inputNodeColor: string = '#44ee22'; + @Input() outputNodeColor: string = '#559977'; + + private wrapper?: HTMLDivElement; + private canvas?: HTMLCanvasElement; + private ctx?: CanvasRenderingContext2D; + + constructor() { } + + ngOnInit(): void { + this.wrapper = (document.getElementById('graphWrapper')); + this.canvas = (document.getElementById('graphCanvas')); + const ctx = this.canvas.getContext('2d'); + if (ctx) { + this.ctx = ctx; + } else { + console.warn('Could not get canvas context!'); + } + + window.addEventListener('resize', () => { this.resize() }); + this.update(); + this.resize(); + + /*setInterval(() => { + this.update(); + }, 5000);*/ + } + + layers?: Node[][]; + + update() { + this.layers = []; + + let inputNodeIndex = 0; + const inputLayer: Node[] = []; + while (inputNodeIndex < this.inputCols) { + const x = 0.5 / (this.model!.hiddenLayers + 2); + const y = (inputNodeIndex + 0.5) / this.inputCols; + const node = new Node(x, y, this.inputNodeColor); + inputLayer.push(node); + inputNodeIndex += 1; + } + this.layers.push(inputLayer); + + let layerIndex = 1; + while (layerIndex < this.model!.hiddenLayers + 1) { + const newLayer: Node[] = []; + let nodeIndex = 0; + while (nodeIndex < this.model!.hiddenLayerNeurons) { + const x = (layerIndex + 0.5) / (this.model!.hiddenLayers + 2); + const y = (nodeIndex + 0.5) / this.model!.hiddenLayerNeurons; + const node = new Node(x, y, this.nodeColor); + newLayer.push(node); + nodeIndex += 1; + } + this.layers.push(newLayer); + layerIndex += 1; + } + + const outX = 1 - (0.5 / (this.model!.hiddenLayers + 2)); + const outY = 0.5; + this.layers.push([new Node(outX, outY, this.outputNodeColor)]) + this.draw(); + } + + draw() { + this.ctx!.clearRect(0, 0, this.canvas!.width, this.canvas!.height); + + let index = 0; + while (index < this.layers!.length - 1) { + for (let node1 of this.layers![index]) { + for (let node2 of this.layers![index + 1]) { + this.drawLine(node1, node2); + } + } + index += 1; + } + + for (let layer of this.layers!) { + for (let node of layer) { + this.drawNode(node); + } + } + } + + drawLine(node1: Node, node2: Node) { + this.ctx!.strokeStyle = this.lineColor; + this.ctx!.beginPath(); + this.ctx!.moveTo(node1.x * this.width, node1.y * this.height); + this.ctx!.lineTo(node2.x * this.width, node2.y * this.height); + this.ctx!.stroke(); + } + + drawNode(node: Node) { + this.ctx!.fillStyle = node.color; + this.ctx!.strokeStyle = '#000'; + this.ctx!.beginPath(); + this.ctx!.arc(node.x * this.width, node.y * this.height, this.nodeRadius, 0, 2 * Math.PI); + this.ctx!.fill(); + this.ctx!.stroke(); + } + + width = 200; + height = 200; + ratio = 1; + + resize() { + this.width = this.wrapper!.offsetWidth; + this.height = this.wrapper!.offsetHeight; + this.ratio = this.width / this.height; + + if (this.canvas) { + this.canvas.width = this.width; + this.canvas.height = this.height; + } + + this.draw(); + } +} + +class Node { + constructor( + public x: number, + public y: number, + public color: string + ) { } +} diff --git a/frontend/src/app/_elements/item-model/item-model.component.html b/frontend/src/app/_elements/item-model/item-model.component.html index c8c1a36d..695c580e 100644 --- a/frontend/src/app/_elements/item-model/item-model.component.html +++ b/frontend/src/app/_elements/item-model/item-model.component.html @@ -1,4 +1,3 @@ -
{{model.name}} @@ -9,6 +8,6 @@ {{"Datum kreiranja: " + model.dateCreated}}
{{"Poslednje ažuriranje: " + model.lastUpdated}}

- +
\ No newline at end of file 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 0c6735a9..f7d8a077 100644 --- a/frontend/src/app/_elements/model-load/model-load.component.html +++ b/frontend/src/app/_elements/model-load/model-load.component.html @@ -43,7 +43,8 @@
+ (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" + (ngModelChange)="updateGraph()">
@@ -69,7 +70,7 @@
+ [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()">
@@ -212,6 +213,7 @@ +