├── .gitignore ├── assets └── img │ └── favicon.ico ├── src ├── orientation.ts ├── point.ts ├── connector │ ├── connector.ts │ ├── connectorSimple.ts │ ├── connectorArrow.ts │ └── connectorArrowDash.ts ├── neuralNeworkBuilder.ts ├── neuralNetwork.ts ├── quadrilateral.ts ├── neuron.ts ├── mlp │ ├── mlp_layer.ts │ └── mlp.ts ├── cnn │ ├── cnn_layer.ts │ └── cnn.ts └── rnn │ ├── rnn_layer.ts │ └── rnn.ts ├── tsconfig.json ├── tslint.json ├── package.json ├── LICENSE ├── gulpfile.js ├── index.html └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | package-lock.json 4 | dist 5 | .tscache -------------------------------------------------------------------------------- /assets/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nokia/BYONND/HEAD/assets/img/favicon.ico -------------------------------------------------------------------------------- /src/orientation.ts: -------------------------------------------------------------------------------- 1 | export enum Orientation { 2 | HORIZONTAL = "Horizontal", 3 | VERTICAL = "Vertical" 4 | } 5 | -------------------------------------------------------------------------------- /src/point.ts: -------------------------------------------------------------------------------- 1 | export class Point { 2 | public x: number; 3 | public y: number; 4 | constructor(x: number, y: number) { 5 | this.x = x; 6 | this.y = y; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "src/**/*.ts" 4 | ], 5 | "compilerOptions": { 6 | "noImplicitAny": false, 7 | "target": "es6", 8 | "rootDir": ".", 9 | "outDir": "dist" 10 | } 11 | } -------------------------------------------------------------------------------- /src/connector/connector.ts: -------------------------------------------------------------------------------- 1 | import { Point } from "../point"; 2 | 3 | export abstract class Connector { 4 | public p1: Point; 5 | public p2: Point; 6 | constructor(p1: Point, p2: Point) { 7 | this.p1 = p1; 8 | this.p2 = p2; 9 | } 10 | 11 | public display(canvas: HTMLCanvasElement) {} 12 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "semicolon": true, 4 | "quotemark": [ 5 | true, 6 | "double" 7 | ], 8 | "curly": true, 9 | "member-access": true, 10 | "no-debugger": true, 11 | "no-console": [ 12 | true, 13 | "log" 14 | ], 15 | "prefer-const": true, 16 | "triple-equals": [ 17 | true, 18 | "allow-null-check" 19 | ], 20 | "indent": [ 21 | true, 22 | "tabs" 23 | ] 24 | } 25 | } -------------------------------------------------------------------------------- /src/connector/connectorSimple.ts: -------------------------------------------------------------------------------- 1 | import { Point } from "../point"; 2 | import { Connector } from "./connector"; 3 | 4 | export class ConnectorSimple extends Connector { 5 | public p1: Point; 6 | public p2: Point; 7 | constructor(p1: Point, p2: Point) { 8 | super(p1, p2); 9 | } 10 | 11 | // Override 12 | public display(canvas: HTMLCanvasElement): void { 13 | const context = canvas.getContext("2d"); 14 | context.save(); 15 | context.beginPath(); 16 | context.lineWidth = 1; 17 | context.moveTo(this.p1.x, this.p1.y); 18 | context.lineTo(this.p2.x, this.p2.y); 19 | context.strokeStyle = "#000000"; 20 | context.stroke(); 21 | context.restore(); 22 | } 23 | } -------------------------------------------------------------------------------- /src/neuralNeworkBuilder.ts: -------------------------------------------------------------------------------- 1 | import { NeuralNetwork } from "./neuralNetwork"; 2 | import { MLP } from "./mlp/mlp"; 3 | import { CNN } from "./cnn/cnn"; 4 | import { RNN } from "./rnn/rnn"; 5 | 6 | export class NeuralNetworkBuilder { 7 | public canvas: HTMLCanvasElement; 8 | constructor(canvas: HTMLCanvasElement) { 9 | this.canvas = canvas; 10 | } 11 | 12 | public build(type: string): NeuralNetwork { 13 | switch(type) { 14 | case "mlp": 15 | return new MLP(this.canvas); 16 | break; 17 | case "cnn": 18 | return new CNN(this.canvas); 19 | break; 20 | case "rnn": 21 | return new RNN(this.canvas); 22 | break; 23 | default: 24 | return null; 25 | break; 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /src/neuralNetwork.ts: -------------------------------------------------------------------------------- 1 | import { Orientation } from "./orientation"; 2 | 3 | export abstract class NeuralNetwork { 4 | public canvas: HTMLCanvasElement; 5 | public error: string; 6 | 7 | public abstract init(): void; 8 | 9 | public abstract addLayer(x?: number, y?: number, c?: number): void; 10 | 11 | public abstract define(nb: number|Array|Array>, 12 | nbLayers?: number, data?: Array, orientation?: Orientation) :void; 13 | 14 | public abstract draw(): void; 15 | 16 | public abstract display(): void; 17 | 18 | public abstract getNbNeurons(): number; 19 | 20 | public abstract getNbLayers(): number; 21 | 22 | public abstract isContracted(): boolean; 23 | 24 | public abstract getError(): string; 25 | } -------------------------------------------------------------------------------- /src/quadrilateral.ts: -------------------------------------------------------------------------------- 1 | import { Point } from "./point"; 2 | 3 | export class Quadrilateral { 4 | public p1: Point; 5 | public p2: Point; 6 | public p3: Point; 7 | public p4: Point; 8 | constructor(p1: Point, p2: Point, p4: Point, p3: Point) { 9 | this.p1 = p1; 10 | this.p2 = p2; 11 | this.p3 = p3; 12 | this.p4 = p4; 13 | } 14 | 15 | public display(canvas: HTMLCanvasElement): void { 16 | const context = canvas.getContext("2d"); 17 | context.beginPath(); 18 | context.lineWidth = 1; 19 | context.moveTo(this.p1.x, this.p1.y); 20 | context.lineTo(this.p2.x, this.p2.y); 21 | context.lineTo(this.p3.x, this.p3.y); 22 | context.lineTo(this.p4.x, this.p4.y); 23 | context.lineTo(this.p1.x, this.p1.y); 24 | context.strokeStyle = "#124191"; 25 | context.stroke(); 26 | context.fillStyle="#239DF9"; 27 | context.fill(); 28 | } 29 | } -------------------------------------------------------------------------------- /src/connector/connectorArrow.ts: -------------------------------------------------------------------------------- 1 | import { Point } from "../point"; 2 | import { Connector } from "./connector"; 3 | 4 | export class ConnectorArrow extends Connector { 5 | public p1: Point; 6 | public p2: Point; 7 | constructor(p1: Point, p2: Point) { 8 | super(p1, p2); 9 | } 10 | 11 | // Override 12 | public display(canvas: HTMLCanvasElement): void { 13 | const context = canvas.getContext("2d"); 14 | context.beginPath(); 15 | const headlen = 10; 16 | const angle = Math.atan2(this.p2.y - this.p1.y, this.p2.x - this.p1.x); 17 | context.save(); 18 | context.moveTo(this.p1.x, this.p1.y,); 19 | context.lineTo(this.p2.x, this.p2.y); 20 | context.lineTo(this.p2.x - headlen * Math.cos(angle - Math.PI / 6), this.p2.y - headlen * Math.sin(angle - Math.PI / 6)); 21 | context.moveTo(this.p2.x, this.p2.y); 22 | context.lineTo(this.p2.x - headlen * Math.cos(angle + Math.PI / 6), this.p2.y - headlen * Math.sin(angle + Math.PI / 6)); 23 | context.stroke(); 24 | context.restore(); 25 | } 26 | } -------------------------------------------------------------------------------- /src/connector/connectorArrowDash.ts: -------------------------------------------------------------------------------- 1 | import { Point } from "../point"; 2 | import { Connector } from "./connector"; 3 | 4 | export class ConnectorArrowDash extends Connector { 5 | public p1: Point; 6 | public p2: Point; 7 | constructor(p1: Point, p2: Point) { 8 | super(p1, p2); 9 | } 10 | 11 | // Override 12 | public display(canvas: HTMLCanvasElement): void { 13 | const context = canvas.getContext("2d"); 14 | context.save(); 15 | context.beginPath(); 16 | const headlen = 10; 17 | const angle = Math.atan2(this.p2.y - this.p1.y, this.p2.x - this.p1.x); 18 | context.setLineDash([5, 15]); 19 | context.moveTo(this.p1.x, this.p1.y); 20 | context.lineTo(this.p2.x, this.p2.y); 21 | context.stroke(); 22 | context.restore(); 23 | context.save(); 24 | context.beginPath(); 25 | context.moveTo(this.p2.x, this.p2.y); 26 | context.lineTo(this.p2.x - headlen * Math.cos(angle - Math.PI / 6), this.p2.y - headlen * Math.sin(angle - Math.PI / 6)); 27 | context.moveTo(this.p2.x, this.p2.y); 28 | context.lineTo(this.p2.x - headlen * Math.cos(angle + Math.PI / 6), this.p2.y - headlen * Math.sin(angle + Math.PI / 6)); 29 | context.stroke(); 30 | context.restore(); 31 | } 32 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "byonnd", 3 | "version": "1.0.0", 4 | "description": "A lib to design Neural Networks in an HTML Canvas", 5 | "main": "main.js", 6 | "scripts": { 7 | "start": "gulp", 8 | "lint": "tslint --project tslint.json", 9 | "lint-quick-fix": "tslint --fix -c tslint.json 'src/**/*.ts'" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "" 14 | }, 15 | "keywords": [ 16 | "javascript" 17 | ], 18 | "author": "sebferrer", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "" 22 | }, 23 | "homepage": "", 24 | "devDependencies": { 25 | "browserify": "^16.2.2", 26 | "del": "^3.0.0", 27 | "gulp": "^3.9.1", 28 | "gulp-delete-lines": "0.0.7", 29 | "gulp-regex-replace": "^0.2.3", 30 | "gulp-replace": "^1.0.0", 31 | "gulp-ts-package": "^1.1.2", 32 | "gulp-tsc": "^1.3.2", 33 | "gulp-typescript": "^5.0.0-alpha.3", 34 | "gulp-typescript-babel": "^1.0.0", 35 | "gulp-util": "^3.0.8", 36 | "run-sequence": "^2.2.1", 37 | "tsify": "^4.0.0", 38 | "tslint": "^5.11.0", 39 | "typescript": "^3.0.1", 40 | "vinyl-source-stream": "^2.0.0" 41 | }, 42 | "dependencies": { 43 | "exec": "^0.2.1", 44 | "gulp-concat": "^2.6.1", 45 | "gulp-exec": "^3.0.2", 46 | "merge2": "^1.2.2", 47 | "uglify": "^0.1.5" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/neuron.ts: -------------------------------------------------------------------------------- 1 | export class Neuron { 2 | public x: number; 3 | public y: number; 4 | public radius: number; 5 | public active: boolean; 6 | public value: string; 7 | public hovered: boolean; 8 | constructor(x: number, y: number, radius: number, 9 | active: boolean, value: string, hovered?: boolean) { 10 | this.x = x; 11 | this.y = y; 12 | this.radius = radius; 13 | this.active = active; 14 | this.value = value; 15 | this.hovered = hovered; 16 | } 17 | 18 | public display(canvas: HTMLCanvasElement): void { 19 | const context = canvas.getContext("2d"); 20 | context.beginPath(); 21 | context.fillStyle = this.active ? "#FFBF02" : "#239DF9"; 22 | context.lineWidth = 2; 23 | context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); 24 | context.strokeStyle = this.active ? "#FF7900" : "#124191"; 25 | context.stroke(); 26 | context.fill(); 27 | context.font = (this.radius) + "px Arial"; 28 | context.fillStyle = "#124191"; 29 | const value = this.value === "" ? "" : this.value[0]; 30 | context.fillText(value, this.x - this.radius / 3, this.y + this.radius / 4); 31 | } 32 | 33 | public activate(): void { 34 | this.active = true; 35 | } 36 | 37 | public disable(): void { 38 | this.active = false; 39 | } 40 | 41 | public collision(x: number, y: number): boolean { 42 | const dx = x - this.x; 43 | const dy = y - this.y; 44 | return ((dx * dx) / (this.radius * this.radius) + (dy * dy) / 45 | (this.radius * this.radius) <= 1); 46 | } 47 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | BSD 3-Clause License 2 | 3 | Copyright (c) 2018, Nokia 4 | All rights reserved. 5 | 6 | Redistribution and use in source and binary forms, with or without 7 | modification, are permitted provided that the following conditions are met: 8 | 9 | * Redistributions of source code must retain the above copyright notice, this 10 | list of conditions and the following disclaimer. 11 | 12 | * Redistributions in binary form must reproduce the above copyright notice, 13 | this list of conditions and the following disclaimer in the documentation 14 | and/or other materials provided with the distribution. 15 | 16 | * Neither the name of the copyright holder nor the names of its 17 | contributors may be used to endorse or promote products derived from 18 | this software without specific prior written permission. 19 | 20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 21 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 22 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 23 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 24 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 25 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 26 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 27 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 28 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 29 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 30 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /* Dependencies */ 2 | var gulp = require("gulp"), 3 | runSequence = require("run-sequence"), 4 | del = require("del"), 5 | ts = require('gulp-typescript'), 6 | concat = require('gulp-concat'), 7 | replace = require('gulp-replace'), 8 | replaceRegex = require('gulp-regex-replace'), 9 | deleteLines = require('gulp-delete-lines'); 10 | 11 | var tsProject = ts.createProject('tsconfig.json'); 12 | var tsProjectES5 = ts.createProject('tsconfig-es5.json'); 13 | 14 | /* Clean */ 15 | gulp.task("clean", () => del(["./dist"])); 16 | 17 | /* Copy tasks */ 18 | gulp.task("copy-html", () => gulp.src("src/*.html").pipe(gulp.dest("dist"))); 19 | gulp.task("copy-css", () => gulp.src("./css/**/*.css").pipe(gulp.dest("./dist/css"))); 20 | gulp.task("copy-assets", () => gulp.src("./assets/**/*.*").pipe(gulp.dest("./dist/assets"))); 21 | gulp.task("copy-things", ["copy-html", "copy-css", "copy-assets"]); 22 | 23 | /* TS to ES6 */ 24 | gulp.task('build-es6', function () { 25 | gulp.src("src/**/*.ts") 26 | .pipe(tsProject()) 27 | .pipe(concat('bundle.js')) 28 | .pipe(replace('export ', '')) 29 | .pipe(deleteLines({ 'filters': [/import/i] })) 30 | .pipe(gulp.dest("dist/")) 31 | }); 32 | 33 | /* TS to ES5 */ 34 | gulp.task('build-es5', function () { 35 | gulp.src("src/**/*.ts") 36 | .pipe(tsProjectES5()) 37 | .pipe(concat('bundle.js')) 38 | .pipe(replace('export ', '')) 39 | .pipe(deleteLines({ 'filters': [/use strict/i] })) 40 | .pipe(deleteLines({ 'filters': [/Object.defineProperty/i] })) 41 | .pipe(deleteLines({ 'filters': [/\/\*\* @class \*\//i] })) 42 | .pipe(deleteLines({ 'filters': [/}\(\)\);/i] })) 43 | .pipe(deleteLines({ 'filters': [/exports./i] })) 44 | .pipe(deleteLines({ 'filters': [/require\("/i] })) 45 | //.pipe(deleteLines({ 'filters': [/(?<=};)(.*)(?=return)(.*)(function)/i] })) 46 | .pipe(gulp.dest("dist/")) 47 | }); 48 | 49 | 50 | /* Default */ 51 | gulp.task("default", function () { 52 | return runSequence( 53 | "clean", 54 | "copy-things", 55 | "build-es6" 56 | ); 57 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BYONND 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /src/mlp/mlp_layer.ts: -------------------------------------------------------------------------------- 1 | import { Connector } from "../connector/connector"; 2 | import { Point } from "../point"; 3 | import { Neuron } from "../neuron"; 4 | import { ConnectorSimple } from "../connector/connectorSimple"; 5 | 6 | export class MLP_Layer { 7 | public size: number; 8 | public contracted: boolean; 9 | public parentLayer: MLP_Layer; 10 | public neurons: Neuron[]; 11 | public y: number; 12 | public connectors: Connector[]; 13 | constructor(size: number) { 14 | this.size = size; 15 | this.contracted = this.size > 60 ? true : false; 16 | this.parentLayer = null; 17 | this.neurons = new Array(); 18 | this.y = 100; 19 | this.connectors = new Array(); 20 | } 21 | 22 | public getRadius(): number { 23 | return this.neurons[0].radius; 24 | } 25 | 26 | public setRadius(newRadius: number) { 27 | for (let i = 0; i < this.neurons.length; i++) { 28 | this.neurons[i].radius = newRadius; 29 | } 30 | } 31 | 32 | public getX(): number { 33 | return this.neurons[0].x; 34 | } 35 | 36 | public getY(): number { 37 | return this.neurons[0].y; 38 | } 39 | 40 | public getNbNeurons(): number { 41 | return this.size; 42 | } 43 | 44 | public display(canvas: HTMLCanvasElement): void { 45 | const context = canvas.getContext("2d"); 46 | if (!this.contracted) { 47 | for (let i = 0; i < this.size; i++) { 48 | this.neurons[i].display(canvas); 49 | } 50 | } 51 | else { 52 | const canvas_width = canvas.width; 53 | for (let i = 0; i < this.neurons.length; i++) { 54 | this.neurons[i].display(canvas); 55 | } 56 | context.font = "30px Arial"; 57 | const text = ". . . . . " + this.size + " neurons . . . . ."; 58 | context.fillText(text, canvas_width / 2 - text.length * 6, this.getY() + this.getRadius() / 2); 59 | } 60 | } 61 | 62 | public createConnectors(): void { 63 | if (this.connectors.length === 0) { 64 | if (!this.contracted && !this.parentLayer.contracted) { 65 | this.connectors = Array(); 66 | for (let i = 0; i < this.parentLayer.size; i++) { 67 | for (let j = 0; j < this.size; j++) { 68 | this.connectors.push( 69 | new ConnectorSimple( 70 | new Point(this.neurons[j].x, 71 | this.getY() - this.getRadius()), 72 | new Point(this.parentLayer.neurons[i].x, 73 | this.parentLayer.getY() + this.parentLayer.getRadius()) 74 | ) 75 | ); 76 | } 77 | } 78 | } 79 | else { 80 | for (let i = 0; i < 11; i++) { 81 | for (let j = 0; j < 11; j++) { 82 | this.connectors.push( 83 | new ConnectorSimple( 84 | new Point(50 + i * 101, 85 | this.getY() - this.getRadius() - 5), 86 | new Point(50 + j * 101, 87 | this.parentLayer.getY() - this.parentLayer.getRadius() + 35) 88 | ) 89 | ); 90 | } 91 | } 92 | } 93 | } 94 | } 95 | 96 | public activateNextNeuron(): boolean { 97 | if (!this.contracted) { 98 | let neuronIndex = -1; 99 | let i = 0; 100 | let found = false; 101 | while (i < this.neurons.length && !found) { 102 | if (this.neurons[i].active) { 103 | neuronIndex = i; 104 | found = true; 105 | } 106 | i++; 107 | } 108 | if (neuronIndex === -1) { 109 | this.neurons[0].activate(); 110 | return true; 111 | } 112 | else { 113 | this.neurons[neuronIndex].disable(); 114 | if (neuronIndex === this.neurons.length - 1) { 115 | this.neurons[0].activate(); 116 | return false; 117 | } 118 | else { 119 | this.neurons[neuronIndex + 1].activate(); 120 | return true; 121 | } 122 | } 123 | } 124 | return true; 125 | } 126 | 127 | public activateNeuron(index: number) { 128 | index = index % this.neurons.length; 129 | for (let i = 0; i < this.neurons.length; i++) { 130 | this.neurons[i].disable(); 131 | } 132 | this.neurons[index].activate(); 133 | } 134 | 135 | public disable(): void { 136 | for (let i = 0; i < this.neurons.length; i++) { 137 | this.neurons[i].disable(); 138 | } 139 | } 140 | } -------------------------------------------------------------------------------- /src/cnn/cnn_layer.ts: -------------------------------------------------------------------------------- 1 | import { Neuron } from "../neuron"; 2 | import { Connector } from "../connector/connector"; 3 | import { ConnectorSimple } from "../connector/connectorSimple"; 4 | import { Point } from "../point"; 5 | import { Quadrilateral } from "../quadrilateral"; 6 | 7 | export class CNN_Layer { 8 | public size_x: number; 9 | public size_y: number; 10 | public nbChannels: number; 11 | public isRoot: boolean; 12 | public isLeaf: boolean; 13 | public contracted: boolean; 14 | public parentLayer: CNN_Layer; 15 | public neurons: Neuron[][]; 16 | public y: number; 17 | public connectors: ConnectorSimple[]; 18 | public pos_x: number; 19 | public pos_y: number; 20 | public width: number; 21 | public height: number; 22 | constructor(size_x: number, size_y?: number, nbChannels?: number) { 23 | this.size_x = size_x; 24 | this.size_y = size_y == null ? 1 : size_y; 25 | this.nbChannels = nbChannels == null ? 0 : nbChannels; 26 | this.isLeaf = this.size_y === 1 && this.nbChannels === 0 ? true : false; 27 | this.contracted = ( this.size_x > 60 || 28 | this.size_y > 60 ) ? true : false; 29 | this.parentLayer = null; 30 | this.neurons = new Array>(); 31 | this.y = 100; 32 | this.connectors = new Array(); 33 | } 34 | 35 | public createConnectors(): void { 36 | if (this.connectors.length === 0) { 37 | this.connectors = Array(); 38 | if(this.size_y > 1 || this.parentLayer.size_y > 1) { 39 | for (let i = 0; i < 3; i++) { 40 | for (let j = 0; j < 3; j++) { 41 | this.connectors.push( 42 | new ConnectorSimple( 43 | new Point((this.pos_x+(this.width/2)), 44 | (this.pos_y+this.height/2)), 45 | new Point((this.parentLayer.pos_x+(this.parentLayer.width/2)-this.parentLayer.width/4+this.parentLayer.width/4*i), 46 | (this.parentLayer.y+this.parentLayer.height/2)-this.parentLayer.height/4+this.parentLayer.height/4*j) 47 | ) 48 | ); 49 | } 50 | } 51 | } 52 | else { 53 | if(this.parentLayer.getNbNeurons() > 25 || this.getNbNeurons() > 25) { 54 | for (let i = 0; i < 11; i++) { 55 | for (let j = 0; j < 11; j++) { 56 | this.connectors.push( 57 | new ConnectorSimple( 58 | new Point(50 + i * 95, 59 | this.getY() - this.getRadius() - 5), 60 | new Point(50 + j * 95, 61 | this.parentLayer.getY() - this.parentLayer.getRadius() + 35) 62 | ) 63 | ); 64 | } 65 | } 66 | } 67 | else { 68 | for (let i = 0; i < this.parentLayer.getNbNeurons(); i++) { 69 | for (let j = 0; j < this.getNbNeurons(); j++) { 70 | this.connectors.push( 71 | new ConnectorSimple( 72 | new Point(this.neurons[0][j].x, 73 | this.getY() - this.getRadius()), 74 | new Point(this.parentLayer.neurons[0][i].x, 75 | this.parentLayer.getY() + this.parentLayer.getRadius()) 76 | ) 77 | ); 78 | } 79 | } 80 | } 81 | } 82 | } 83 | } 84 | 85 | public display(canvas: HTMLCanvasElement): void { 86 | const context = canvas.getContext("2d"); 87 | if (!this.contracted) { 88 | for (let j = 0; j < this.size_y; j++) { 89 | for (let i = 0; i < this.size_x; i++) { 90 | this.neurons[j][i].display(canvas); 91 | } 92 | } 93 | } 94 | else { 95 | const condensed_layer = new Quadrilateral( new Point(this.pos_x, this.pos_y), 96 | new Point(this.pos_x+this.width, this.pos_y), 97 | new Point(this.pos_x+60, this.pos_y+this.height), 98 | new Point(this.pos_x+this.width+60, this.pos_y+this.height)); 99 | condensed_layer.display(canvas); 100 | } 101 | if(!this.isLeaf) { 102 | context.font = "20px Arial"; 103 | context.fillStyle = "#124191"; 104 | let text = this.size_x + " x "+this.size_y; 105 | context.fillText(text, this.pos_x-100, this.pos_y+30); 106 | context.font = "30px Arial"; 107 | context.fillStyle = "#124191"; 108 | text = "X "+this.nbChannels; 109 | context.fillText(text, this.pos_x+this.width+50, this.pos_y+(this.height/2)); 110 | } 111 | } 112 | 113 | public getNbNeurons(): number { 114 | return this.size_x*this.size_y; 115 | } 116 | 117 | public getX(): number { 118 | return this.neurons[0][0].x; 119 | } 120 | 121 | public getY(): number { 122 | return this.neurons[0][0].y; 123 | } 124 | 125 | public getRadius(): number { 126 | return this.neurons[0][0].radius; 127 | } 128 | 129 | public setRadius(newRadius: number) { 130 | for (let i = 0; i < this.size_y; i++) { 131 | for (let j = 0; j < this.size_x; j++) { 132 | this.neurons[i][j].radius = newRadius; 133 | } 134 | } 135 | } 136 | 137 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # byonnd-design 2 | 3 | Build Your Own Neural Newtork Design
4 | Vanilla Javascript graphic library to design neural networks on HTML5 canvas

5 | This designer can handle 3 types of neural networks: 6 | * Multilayer Perceptrons (MLP) 7 | * Convolutional Neural Networks (CNN) 8 | * Recurrent Neural Network (RNN) 9 |

10 | 11 | ## How to use? 12 | The only thing you need is an HTML Canvas: 13 | 14 | ### Declare your canvas 15 | 16 | ``` 17 | 18 | ``` 19 | Then, you can instantiate your neural network builder by passing the canvas as parameter: 20 | 21 | ### Instanciate your neural network builder 22 | 23 | ``` 24 | let neuralNetworkBuilder = new NeuralNetworkBuilder(canvas); 25 | ``` 26 | You're now ready to design any kind of neural network among those mentioned above. 27 | 28 | 29 | ## Multilayer Perceptron (MLP) 30 | First step, instantiate your new neural network: 31 | ``` 32 | let neuralNetwork = neuralNetworkBuilder.build("mlp"); 33 | ``` 34 | Then, you have two choices. The argument of the function **addLayer** is the numer of neurons for each layer 35 | 36 | ### Add layers separately 37 | ``` 38 | neuralNetwork.addLayer(25); 39 | neuralNetwork.addLayer(20); 40 | neuralNetwork.addLayer(15); 41 | neuralNetwork.addLayer(10); 42 | neuralNetwork.addLayer(5); 43 | ``` 44 | ### Define all layers in one line 45 | ``` 46 | neuralNetwork.define([25, 20, 15, 10, 5]); 47 | ``` 48 | When your neural network is ready, you can draw it to your canvas 49 | ### Draw neural network 50 | ``` 51 | neuralNetwork.draw(); 52 | ``` 53 | ### Here's the result: 54 | ![mlp1](http://sebferrer.fr/byonndimgs/mlp1.png) 55 | ### Assign values to neurons 56 | You can assign values to neuron using its **value** parameter: 57 | 58 | ``` 59 | let input_array = "1000101010001000101010001"; 60 | for(let i = 0; i < input_array.length; i++) { 61 | neuralNetwork.layers[0].neurons[i].value = input_array[i]; 62 | } 63 | let output_array = "ABCDE"; 64 | for(let i = 0; i < output_array.length; i++) { 65 | neuralNetwork.layers[neuralNetwork.getNbLayers()-1].neurons[i].value = output_array[i]; 66 | } 67 | ``` 68 | In this example, we assign values to the input neurons and the output neurons. 69 | ![mlp2](http://sebferrer.fr/byonndimgs/mlp2.png) 70 | ## Convolutional Neural Network (CNN) 71 | First step, instantiate your new neural network: 72 | ``` 73 | let neuralNetwork = neuralNetworkBuilder.build("cnn"); 74 | ``` 75 | Then, you have two choices. The arguments of the function **addLayer** are: 76 | * x - dimension 77 | * y - dimension 78 | * Number of channels 79 | 80 | ### Add layers separately 81 | ``` 82 | neuralNetwork.addLayer(50, 50, 2); 83 | neuralNetwork.addLayer(25, 25, 4); 84 | neuralNetwork.addLayer(12, 12, 8); 85 | neuralNetwork.addLayer(6, 6, 12); 86 | neuralNetwork.addLayer(36); 87 | neuralNetwork.addLayer(26); 88 | ``` 89 | ### Define all layers in one line 90 | ``` 91 | neuralNetwork.define([[50, 50, 2], [25, 25, 4], [12, 12, 8], [6, 6, 12], [36, 1, 0], [26, 1, 0]]); 92 | ``` 93 | ### Activate a neuron 94 | You can also activate a neuron in your drawing by the **activate** function: 95 | ``` 96 | neuralNetwork.layers[neuralNetwork.layers.length-1].neurons[0][2].activate(); 97 | ``` 98 | In this example, we activate the third neuron of the last layer, the output layer.
99 | When your neural network is ready, you can draw it to your canvas 100 | 101 | ### Draw neural network 102 | ``` 103 | neuralNetwork.draw(); 104 | ``` 105 | ### Here's the result: 106 | ![cnn](http://sebferrer.fr/byonndimgs/cnn1.png) 107 | 108 | ## Recurrent Neural Network (RNN) 109 | First step, instantiate your new neural network: 110 | ``` 111 | let neuralNetwork = neuralNetworkBuilder.build("rnn"); 112 | ``` 113 | Then, you have define your neural network with the **define** function. The arguments are: 114 | * The length of the serie you want to display 115 | * The number of layers bewteen the input layer and the output layer 116 | * (optional) The data serie you want to display to illustrate your neural network 117 | 118 | ### Define the RNN horizontally 119 | ``` 120 | neuralNetwork.define(10, 2, ["h","e","l","l","o","w","o","r","l","d","!"]); 121 | ``` 122 | When your neural network is ready, you can draw it to your canvas. By default it draws it horizontally. 123 | ### Draw neural network 124 | ``` 125 | neuralNetwork.draw(); 126 | ``` 127 | ### Here's the result: 128 | ![rnn](http://sebferrer.fr/byonndimgs/rnn1.png) 129 | 130 | To change the orientation of the neural network, just add "horizontal" or "vertical" as last parameter. 131 | ### Define the RNN vertically 132 | ``` 133 | neuralNetwork.define(10, 2, ["h","e","l","l","o","w","o","r","l","d","!"], "vertical"); 134 | ```` 135 | ### Here's the result: 136 | ![rnn](http://sebferrer.fr/byonndimgs/rnn2.png) 137 | -------------------------------------------------------------------------------- /src/cnn/cnn.ts: -------------------------------------------------------------------------------- 1 | import { CNN_Layer } from "../cnn/cnn_layer"; 2 | import { Neuron } from "../neuron"; 3 | import { NeuralNetwork } from "../neuralNetwork"; 4 | 5 | export class CNN extends NeuralNetwork { 6 | public layers: CNN_Layer[]; 7 | constructor(canvas: HTMLCanvasElement) { 8 | super(); 9 | this.canvas = canvas; 10 | this.layers = new Array(); 11 | this.error = ""; 12 | } 13 | 14 | // Override 15 | public init(): void { 16 | this.initLayers(this.canvas); 17 | this.createConnectors(); 18 | } 19 | 20 | // Override 21 | public draw(): void { 22 | const context = this.canvas.getContext("2d"); 23 | context.save(); 24 | context.clearRect(0, 0, this.canvas.width, this.canvas.height); 25 | this.display(); 26 | } 27 | 28 | // Override 29 | public display(): void { 30 | for (let i = this.layers.length - 1; i > 0; i--) { 31 | this.layers[i].display(this.canvas); 32 | for (let j = 0; j < this.layers[i].connectors.length; j++) { 33 | this.layers[i].connectors[j].display(this.canvas); 34 | } 35 | } 36 | this.layers[0].display(this.canvas); 37 | } 38 | 39 | // Override 40 | public addLayer(nbX, nbY, nbChannels): void { 41 | try { 42 | const layer = new CNN_Layer(nbX, nbY, nbChannels); 43 | this.layers.push(layer); 44 | this.init(); 45 | } 46 | catch { 47 | this.error = "Error: can't add an empty layer"; 48 | } 49 | } 50 | 51 | // Override 52 | public define(nbNeuronsChannel: Array>) :void { 53 | for(let i = 0; i < nbNeuronsChannel.length; i++) { 54 | this.addLayer(nbNeuronsChannel[i][0], nbNeuronsChannel[i][1], nbNeuronsChannel[i][2]); 55 | } 56 | } 57 | 58 | public createConnectors(): void { 59 | for (let i = 1; i < this.layers.length; i++) { 60 | this.layers[i].createConnectors(); 61 | } 62 | } 63 | 64 | public initLayers(canvas: HTMLCanvasElement): void { 65 | for (let iLayer = 0; iLayer < this.layers.length; iLayer++) { 66 | if (iLayer > 0) { 67 | this.layers[iLayer].parentLayer = this.layers[iLayer - 1]; 68 | if(this.layers[iLayer].parentLayer.size_y === 1) { 69 | this.layers[iLayer].y = this.layers[iLayer].parentLayer.y + this.layers[iLayer].parentLayer.height + 150; 70 | } 71 | else { 72 | this.layers[iLayer].y = this.layers[iLayer].parentLayer.y + this.layers[iLayer].parentLayer.height + 60; 73 | } 74 | } 75 | if(!this.layers[iLayer].contracted) { 76 | for (let j = 0; j < this.layers[iLayer].size_y; j++) { 77 | this.layers[iLayer].neurons.push(new Array()); 78 | for (let i = 0; i < this.layers[iLayer].size_x; i++) { 79 | const max_radius = 20; 80 | const min_radius = 1; 81 | const displaySize = this.layers[iLayer].contracted ? max_radius : this.layers[iLayer].size_x; 82 | const canvas_width = canvas.width; 83 | let gap = 4; 84 | let neuron_radius = this.layers[iLayer].isLeaf ? 85 | canvas_width / (this.layers[iLayer].size_x * 2.5) : 86 | canvas_width / (this.layers[iLayer].size_x * 5); 87 | neuron_radius = neuron_radius > max_radius ? max_radius : neuron_radius; 88 | neuron_radius = neuron_radius < min_radius ? min_radius : neuron_radius; 89 | const free_space = canvas_width - displaySize * (neuron_radius * 2 + gap); 90 | const offset = this.layers[iLayer].isLeaf ? 2.2 : 1.5; 91 | this.layers[iLayer].neurons[j].push( 92 | new Neuron(free_space / 2 + neuron_radius + (i * neuron_radius * offset) + gap + j * (neuron_radius / 4), 93 | this.layers[iLayer].y + (neuron_radius / 2) * j, neuron_radius, false, "")); 94 | gap += 4; 95 | } 96 | } 97 | this.layers[iLayer].pos_x = this.layers[iLayer].neurons[0][0].x; 98 | this.layers[iLayer].pos_y = this.layers[iLayer].neurons[0][0].y; 99 | this.layers[iLayer].width = this.layers[iLayer].neurons[this.layers[iLayer].size_y-1][this.layers[iLayer].size_x-1].x - this.layers[iLayer].pos_x; 100 | this.layers[iLayer].height = this.layers[iLayer].neurons[this.layers[iLayer].size_y-1][this.layers[iLayer].size_x-1].y - this.layers[iLayer].pos_y; 101 | } 102 | else { 103 | this.layers[iLayer].pos_x = 300; 104 | this.layers[iLayer].pos_y = this.layers[iLayer].y; 105 | this.layers[iLayer].width = 350; 106 | this.layers[iLayer].height = 150; 107 | } 108 | } 109 | this.layers[0].isRoot = true; 110 | } 111 | 112 | // Override 113 | public getNbNeurons(): number { 114 | let nbNeurons = 0; 115 | for (let i = 0; i < this.layers.length; i++) { 116 | nbNeurons += this.layers[i].getNbNeurons(); 117 | } 118 | return nbNeurons; 119 | } 120 | 121 | // Override 122 | public getNbLayers(): number { 123 | return this.layers.length; 124 | } 125 | 126 | // Override 127 | public isContracted(): boolean { 128 | for (let i = 0; i < this.layers.length; i++) { 129 | if (this.layers[i].contracted) { 130 | return true; 131 | } 132 | } 133 | return false; 134 | } 135 | 136 | // Override 137 | public getError(): string { 138 | return this.error; 139 | } 140 | 141 | } -------------------------------------------------------------------------------- /src/rnn/rnn_layer.ts: -------------------------------------------------------------------------------- 1 | import { Point } from "../point"; 2 | import { Neuron } from "../neuron"; 3 | import { Connector } from "../connector/connector"; 4 | import { ConnectorArrow } from "../connector/connectorArrow"; 5 | import { ConnectorArrowDash } from "../connector/connectorArrowDash"; 6 | import { RNN } from "./rnn"; 7 | import { Orientation } from "../orientation"; 8 | 9 | export class RNN_Layer { 10 | public size: number; 11 | public parentLayer: RNN_Layer; 12 | public neurons: Neuron[]; 13 | public y: number; 14 | public connectors: Connector[]; 15 | constructor(size: number) { 16 | this.size = size; 17 | this.parentLayer = null; 18 | this.neurons = new Array(); 19 | this.y = 150; 20 | this.connectors = new Array(); 21 | } 22 | 23 | public getRadius(): number { 24 | return this.neurons[0].radius; 25 | } 26 | 27 | public setRadius(newRadius: number) { 28 | for (let i = 0; i < this.neurons.length; i++) { 29 | this.neurons[i].radius = newRadius; 30 | } 31 | } 32 | 33 | public getX(): number { 34 | return this.neurons[0].x; 35 | } 36 | 37 | public getY(): number { 38 | return this.neurons[0].y; 39 | } 40 | 41 | public getNbNeurons(): number { 42 | return this.size; 43 | } 44 | 45 | public display(canvas: HTMLCanvasElement, neuralNetwork: RNN): void { 46 | for (let i = 0; i < this.size; i++) { 47 | this.neurons[i].display(canvas); 48 | } 49 | } 50 | 51 | public createConnectors(indexStep: number, indexLayer: number, neuralNetwork: RNN): void { 52 | if (this.connectors.length === 0) { 53 | if(indexLayer > 0) { 54 | switch(neuralNetwork.orientation) { 55 | case Orientation.HORIZONTAL: 56 | this.connectors.push( 57 | new ConnectorArrow( 58 | new Point(this.parentLayer.neurons[this.parentLayer.neurons.length-1].x, 59 | this.parentLayer.neurons[this.parentLayer.neurons.length-1].y + this.parentLayer.getRadius()), 60 | new Point(this.neurons[0].x, 61 | this.getY() - this.getRadius()) 62 | ) 63 | ); 64 | if(indexLayer < neuralNetwork.nbLayers-1 && indexStep < neuralNetwork.nbSteps-1) { 65 | const next_nn = neuralNetwork.steps[indexStep+1][indexLayer]; 66 | this.connectors.push( 67 | new ConnectorArrow( 68 | new Point(this.neurons[this.neurons.length-1].x + this.getRadius(), 69 | this.neurons[this.neurons.length-1].y), 70 | new Point(next_nn.neurons[next_nn.neurons.length-1].x - this.getRadius(), 71 | next_nn.neurons[next_nn.neurons.length-1].y) 72 | ) 73 | ); 74 | } 75 | break; 76 | case Orientation.VERTICAL: 77 | this.connectors.push( 78 | new ConnectorArrow( 79 | new Point(this.parentLayer.neurons[this.parentLayer.neurons.length-1].x + this.parentLayer.getRadius(), 80 | this.parentLayer.neurons[this.parentLayer.neurons.length-1].y), 81 | new Point(this.neurons[this.neurons.length-1].x - this.getRadius(), 82 | this.neurons[this.neurons.length-1].y) 83 | ) 84 | ); 85 | if(indexStep < neuralNetwork.nbSteps-1 && indexLayer < neuralNetwork.nbLayers-1) { 86 | const next_nn = neuralNetwork.steps[indexStep+1][indexLayer]; 87 | this.connectors.push( 88 | new ConnectorArrow( 89 | new Point(this.neurons[0].x, 90 | this.neurons[0].y + this.getRadius()), 91 | new Point(next_nn.neurons[0].x, 92 | next_nn.neurons[0].y - next_nn.getRadius()) 93 | ) 94 | ); 95 | } 96 | break; 97 | } 98 | } 99 | if(indexLayer === neuralNetwork.nbLayers-1 && indexStep < neuralNetwork.nbSteps-1) { 100 | const cur_nn = neuralNetwork.steps[indexStep][indexLayer]; 101 | const next_nn = neuralNetwork.steps[indexStep+1][0]; 102 | switch(neuralNetwork.orientation) { 103 | case Orientation.HORIZONTAL: 104 | this.connectors.push( 105 | new ConnectorArrowDash( 106 | new Point(cur_nn.neurons[0].x + cur_nn.getRadius()/3, 107 | cur_nn.getY() - cur_nn.getRadius()), 108 | new Point(next_nn.neurons[next_nn.neurons.length-1].x - next_nn.getRadius()/3, 109 | next_nn.neurons[next_nn.neurons.length-1].y + next_nn.getRadius()) 110 | ) 111 | ); 112 | break; 113 | case Orientation.VERTICAL: 114 | this.connectors.push( 115 | new ConnectorArrowDash( 116 | new Point(cur_nn.neurons[0].x - cur_nn.getRadius(), 117 | cur_nn.getY() + cur_nn.getRadius()), 118 | new Point(next_nn.neurons[next_nn.neurons.length-1].x + next_nn.getRadius(), 119 | next_nn.neurons[next_nn.neurons.length-1].y - next_nn.getRadius()) 120 | ) 121 | ); 122 | break; 123 | } 124 | } 125 | } 126 | } 127 | 128 | public activateNeuron(index: number) { 129 | index = index % this.neurons.length; 130 | for (let i = 0; i < this.neurons.length; i++) { 131 | this.neurons[i].disable(); 132 | } 133 | this.neurons[index].activate(); 134 | } 135 | 136 | public disable(): void { 137 | for (let i = 0; i < this.neurons.length; i++) { 138 | this.neurons[i].disable(); 139 | } 140 | } 141 | } -------------------------------------------------------------------------------- /src/mlp/mlp.ts: -------------------------------------------------------------------------------- 1 | import { Neuron } from "../neuron"; 2 | import { MLP_Layer } from "./mlp_layer"; 3 | import { NeuralNetwork } from "../neuralNetwork"; 4 | 5 | export class MLP extends NeuralNetwork { 6 | 7 | public layers: MLP_Layer[]; 8 | constructor(canvas: HTMLCanvasElement) { 9 | super(); 10 | this.canvas = canvas; 11 | this.layers = new Array(); 12 | this.error = ""; 13 | } 14 | 15 | // Override 16 | public init(): void { 17 | this.initLayers(this.canvas); 18 | this.balanceRadius(); 19 | this.createConnectors(); 20 | } 21 | 22 | // Override 23 | public addLayer(nbNeurons: number): void { 24 | try { 25 | const layer = new MLP_Layer(nbNeurons); 26 | this.layers.push(layer); 27 | this.init(); 28 | } 29 | catch { 30 | this.error = "Error: can't add an empty layer"; 31 | } 32 | } 33 | 34 | // Override 35 | public define(nbNeurons: Array) :void { 36 | for(let i = 0; i < nbNeurons.length; i++) { 37 | this.addLayer(nbNeurons[i]); 38 | } 39 | } 40 | 41 | // Override 42 | public draw(): void { 43 | const context = this.canvas.getContext("2d"); 44 | context.save(); 45 | context.clearRect(0, 0, this.canvas.width, this.canvas.height); 46 | this.display(); 47 | } 48 | 49 | public initLayers(canvas: HTMLCanvasElement): void { 50 | for (let j = 0; j < this.layers.length; j++) { 51 | if (this.layers[j].neurons.length === 0) { 52 | if (j > 0) { 53 | this.layers[j].parentLayer = this.layers[j - 1]; 54 | this.layers[j].y = this.layers[j].parentLayer.y + 150; 55 | } 56 | const max_radius = 30; 57 | const min_radius = 1; 58 | const displaySize = this.layers[j].contracted ? max_radius : this.layers[j].size; 59 | const canvas_width = canvas.width; 60 | let gap = 4; 61 | let neuron_radius = canvas_width / ((displaySize * 2)) - (gap / 2) - 1; 62 | neuron_radius = neuron_radius > max_radius ? max_radius : neuron_radius; 63 | neuron_radius = neuron_radius < min_radius ? min_radius : neuron_radius; 64 | const free_space = canvas_width - displaySize * (neuron_radius * 2 + gap); 65 | if (!this.layers[j].contracted) { 66 | for (let i = 0; i < displaySize; i++) { 67 | this.layers[j].neurons.push(new Neuron(free_space / 2 + neuron_radius + (i * neuron_radius * 2) + gap, 68 | this.layers[j].y, neuron_radius, false, "")); 69 | gap += 4; 70 | } 71 | } 72 | else { 73 | for (let i = 0; i < 4; i++) { 74 | this.layers[j].neurons.push(new Neuron(free_space / 2 + neuron_radius + (i * neuron_radius * 2) + gap, 75 | this.layers[j].y, neuron_radius, false, "")); 76 | gap += 8; 77 | } 78 | for (let i = 0; i < 4; i++) { 79 | this.layers[j].neurons.push(new Neuron(canvas_width - free_space / 2 - neuron_radius - (i * neuron_radius * 2) - gap + 40, 80 | this.layers[j].y, neuron_radius, false, "")); 81 | gap += 8; 82 | } 83 | } 84 | } 85 | } 86 | } 87 | 88 | public balanceRadius(): void { 89 | let min_radius = this.layers[0].getRadius(); 90 | for (let i = 1; i < this.layers.length; i++) { 91 | if (min_radius > this.layers[i].getRadius()) { 92 | min_radius = this.layers[i].getRadius(); 93 | } 94 | } 95 | for (let i = 0; i < this.layers.length; i++) { 96 | this.layers[i].setRadius(min_radius); 97 | } 98 | } 99 | 100 | public createConnectors(): void { 101 | for (let i = 1; i < this.layers.length; i++) { 102 | this.layers[i].createConnectors(); 103 | } 104 | } 105 | 106 | // Override 107 | public display(): void { 108 | for (let i = 1; i < this.layers.length; i++) { 109 | for (let j = 0; j < this.layers[i].connectors.length; j++) { 110 | this.layers[i].connectors[j].display(this.canvas); 111 | } 112 | } 113 | for (let i = 0; i < this.layers.length; i++) { 114 | this.layers[i].display(this.canvas); 115 | } 116 | } 117 | 118 | // Override 119 | public getNbNeurons(): number { 120 | let nbNeurons = 0; 121 | for (let i = 0; i < this.layers.length; i++) { 122 | nbNeurons += this.layers[i].getNbNeurons(); 123 | } 124 | return nbNeurons; 125 | } 126 | 127 | public activateLayerNextNeuron(layerIndex: number): boolean { 128 | layerIndex = layerIndex % this.layers.length; 129 | return this.layers[layerIndex].activateNextNeuron(); 130 | } 131 | 132 | public activateLayerNeuron(layerIndex: number, neuronIndex: number): void { 133 | layerIndex = layerIndex % this.layers.length; 134 | this.layers[layerIndex].activateNeuron(neuronIndex); 135 | } 136 | 137 | public activateOutputNeuron(neuronIndex: number): void { 138 | this.layers[this.layers.length - 1].activateNeuron(neuronIndex); 139 | } 140 | 141 | public disableLayer(layerIndex: number) { 142 | layerIndex = layerIndex % this.layers.length; 143 | this.layers[layerIndex].disable(); 144 | } 145 | 146 | // Override 147 | public getNbLayers(): number { 148 | return this.layers.length; 149 | } 150 | 151 | // Override 152 | public isContracted(): boolean { 153 | for (let i = 0; i < this.layers.length; i++) { 154 | if (this.layers[i].contracted) { 155 | return true; 156 | } 157 | } 158 | return false; 159 | } 160 | 161 | // Override 162 | public getError(): string { 163 | return this.error; 164 | } 165 | 166 | } -------------------------------------------------------------------------------- /src/rnn/rnn.ts: -------------------------------------------------------------------------------- 1 | import { Neuron } from "../neuron"; 2 | import { RNN_Layer } from "./rnn_layer"; 3 | import { NeuralNetwork } from "../neuralNetwork"; 4 | import { Orientation } from "../orientation"; 5 | 6 | export class RNN extends NeuralNetwork { 7 | public steps: RNN_Layer[][]; 8 | public layers: RNN_Layer[]; 9 | public nbOutputs: number; 10 | public cellSize: number; 11 | public nbLayers: number; 12 | public seqLen: number; 13 | public nbSteps: number; 14 | public serie: Array; 15 | public contracted: boolean; 16 | public orientation: Orientation; 17 | constructor(canvas: HTMLCanvasElement) { 18 | super(); 19 | this.canvas = canvas; 20 | this.steps = new Array>(); 21 | this.layers = new Array(); 22 | this.orientation = Orientation.HORIZONTAL; 23 | this.error = ""; 24 | } 25 | 26 | // Override 27 | public init(): void { 28 | this.initLayers(this.canvas); 29 | this.createConnectors(); 30 | } 31 | 32 | // Override 33 | public addLayer(nbNeurons: number): void { 34 | try { 35 | const layer = new RNN_Layer(nbNeurons); 36 | this.layers.push(layer); 37 | } 38 | catch { 39 | this.error = "Error: can't add an empty layer"; 40 | } 41 | } 42 | 43 | // Override 44 | public define(nbSteps: number, nbLayers: number, serie?: Array, orientation?: string) :void { 45 | this.nbLayers = nbLayers+2; 46 | this.contracted = nbSteps > 15; 47 | this.nbSteps = this.isContracted() ? 15 : nbSteps; 48 | for(let i = 0; i < this.nbLayers; i++) { 49 | this.addLayer(3); 50 | } 51 | switch(orientation.toLowerCase()) { 52 | case "horizontal": 53 | this.orientation = Orientation.HORIZONTAL; 54 | break; 55 | case "vertical": 56 | this.orientation = Orientation.VERTICAL; 57 | break; 58 | } 59 | this.init(); 60 | this.serie = serie; 61 | } 62 | 63 | // Override 64 | public draw(): void { 65 | const context = this.canvas.getContext("2d"); 66 | context.save(); 67 | context.clearRect(0, 0, this.canvas.width, this.canvas.height); 68 | this.display(); 69 | } 70 | 71 | public initLayers(canvas: HTMLCanvasElement): void { 72 | const honrizontalConnectorSize = 50; 73 | let gap_step = 4+honrizontalConnectorSize; 74 | const max_radius = 30; 75 | const min_radius = 1; 76 | const displaySize = this.nbSteps; 77 | const canvas_width = canvas.width; 78 | let neuron_radius = canvas_width / ((displaySize * 2)) - ((gap_step) / 2) - 1; 79 | neuron_radius = neuron_radius > max_radius ? max_radius : neuron_radius; 80 | neuron_radius = neuron_radius < min_radius ? min_radius : neuron_radius; 81 | const free_space = canvas_width - displaySize * (neuron_radius * 2 + gap_step); 82 | for (let i = 0; i < this.nbSteps; i++) { 83 | for (let j = 0; j < this.layers.length; j++) { 84 | if (this.layers[j].neurons.length === 0) { 85 | if (j > 0) { 86 | this.layers[j].parentLayer = this.layers[j - 1]; 87 | this.layers[j].y = this.layers[j].parentLayer.y + 120; 88 | } 89 | let gap_layer = 0; 90 | for(let k = 0; k < this.layers[j].size; k++) { 91 | switch(this.orientation) { 92 | case Orientation.HORIZONTAL: 93 | this.layers[j].neurons.push(new Neuron(free_space / 2 + neuron_radius + (i * neuron_radius * 2) + gap_step - 30, 94 | this.layers[j].y + gap_layer, neuron_radius, false, "")); 95 | break; 96 | case Orientation.VERTICAL: 97 | this.layers[j].neurons.push(new Neuron(this.layers[j].y, 98 | free_space / 2 + neuron_radius + (i * neuron_radius * 2) + gap_step + gap_layer - 30, neuron_radius, false, "")); 99 | break; 100 | } 101 | gap_layer += neuron_radius/3; 102 | } 103 | } 104 | } 105 | gap_step += 4+honrizontalConnectorSize; 106 | this.steps.push(this.layers); 107 | this.layers = new Array(); 108 | for(let i = 0; i < this.nbLayers; i++) { 109 | this.addLayer(3); 110 | } 111 | } 112 | } 113 | 114 | public createConnectors(): void { 115 | for(let i = 0; i < this.nbSteps; i++) { 116 | for (let j = 0; j < this.layers.length; j++) { 117 | this.steps[i][j].createConnectors(i, j, this); 118 | } 119 | } 120 | } 121 | 122 | public displaySteps(): void { 123 | for(let i = 0; i < this.nbSteps; i++) { 124 | for (let j = 0; j < this.layers.length; j++) { 125 | this.steps[i][j].display(this.canvas, this); 126 | } 127 | } 128 | } 129 | 130 | // Override 131 | public display(): void { 132 | const context = this.canvas.getContext("2d"); 133 | for(let i = 0; i < this.nbSteps; i++) { 134 | for (let j = 0; j < this.steps[i].length; j++) { 135 | for (let k = 0; k < this.steps[i][j].connectors.length; k++) { 136 | this.steps[i][j].connectors[k].display(this.canvas); 137 | } 138 | } 139 | } 140 | this.displaySteps(); 141 | 142 | if(this.serie != null) { 143 | if(this.nbSteps+1 === this.serie.length) { 144 | switch(this.orientation) { 145 | case Orientation.HORIZONTAL: 146 | for(let i = 0; i < this.nbSteps; i++) { 147 | context.font = "30px Arial"; 148 | context.fillText(this.serie[i], this.steps[i][0].neurons[0].x-10, this.steps[i][0].neurons[0].y-40); 149 | context.fillText("t="+i, this.steps[i][0].neurons[0].x-20, this.steps[i][0].neurons[0].y-90); 150 | } 151 | for(let i = 1; i <= this.nbSteps; i++) { 152 | context.font = "30px Arial"; 153 | context.fillText(this.serie[i], this.steps[i-1][0].neurons[0].x-10, this.steps[i-1][this.nbLayers-1].neurons[0].y+80); 154 | } 155 | break; 156 | case Orientation.VERTICAL: 157 | for(let i = 0; i < this.nbSteps; i++) { 158 | context.font = "30px Arial"; 159 | const lastNeuron = this.steps[i][0].neurons[this.steps[i][0].neurons.length-1]; 160 | context.fillText(this.serie[i], lastNeuron.x-60, lastNeuron.y); 161 | context.fillText("t="+i, lastNeuron.x-120, lastNeuron.y); 162 | } 163 | for(let i = 1; i <= this.nbSteps; i++) { 164 | context.font = "30px Arial"; 165 | const lastNeuron = this.steps[i-1][this.nbLayers-1].neurons[this.steps[i-1][this.nbLayers-1].neurons.length-1]; 166 | context.fillText(this.serie[i], lastNeuron.x+60, lastNeuron.y); 167 | } 168 | break; 169 | } 170 | } 171 | else { 172 | if(this.isContracted()) { 173 | console.error("Can't display serie data in a contracted view (serie length > 15)"); 174 | } 175 | else { 176 | console.error("The (nb steps+1) and the serie length must be equal"); 177 | } 178 | } 179 | } 180 | } 181 | 182 | // Override 183 | public getNbNeurons(): number { 184 | let nbNeurons = 0; 185 | for (let i = 0; i < this.layers.length; i++) { 186 | nbNeurons += this.layers[i].getNbNeurons(); 187 | } 188 | return nbNeurons; 189 | } 190 | 191 | public activateLayerNeuron(layerIndex: number, neuronIndex: number): void { 192 | layerIndex = layerIndex % this.layers.length; 193 | this.layers[layerIndex].activateNeuron(neuronIndex); 194 | } 195 | 196 | public activateOutputNeuron(neuronIndex: number): void { 197 | this.layers[this.layers.length - 1].activateNeuron(neuronIndex); 198 | } 199 | 200 | public disableLayer(layerIndex: number) { 201 | layerIndex = layerIndex % this.layers.length; 202 | this.layers[layerIndex].disable(); 203 | } 204 | 205 | // Override 206 | public getNbLayers(): number { 207 | return this.layers.length; 208 | } 209 | 210 | // Override 211 | public isContracted(): boolean { 212 | return this.contracted; 213 | } 214 | 215 | // Override 216 | public getError(): string { 217 | return this.error; 218 | } 219 | 220 | } --------------------------------------------------------------------------------