Added example for multiple WASM net instances

DanRuta · Mar 28, 2018 · bf5ddbd · bf5ddbd
1 parent 96accc7
commit bf5ddbd
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@
 
 #### Examples
 - Added example project for loading jsNet through Webpack
+- Added example for using multiple WASM network instances
 
 #### Bug fixes
 - WASM misassigned learning rate defaults

diff --git a/README.md b/README.md
@@ -50,6 +50,7 @@ https://ai.danruta.co.uk/webassembly - Performance comparison between JS and Web
 
 <img width="100%" src="./examples/mnist/readmeimg.png">
 
+There are examples also for loading through Webpack, and an XOR example, for using multiple separate WASM net instances.
 
 ##  Loading
 ---

diff --git a/examples/index.html b/examples/index.html
@@ -5,5 +5,7 @@
 </head>
 <body>
 <a href="/examples/mnist/mnist.html">MNIST example</a><br>
+<a href="/examples/webpack loading/dist/index.html">Example Webpack loading</a><br>
+<a href="/examples/multiInstance/multiple.html">Example WASM multiple network instances</a><br>
 </body>
 </html>
diff --git a/examples/multiInstance/multiple.html b/examples/multiInstance/multiple.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>jsNet - MMultiple WASM instances example</title>
+    <script src="../../dist/jsNetWebAssembly.min.js"></script>
+    <script src="../../dist/NetWASM.js"></script>
+</head>
+<style>
+    #inputs, #newInstanceBtn {
+        margin: 10px;
+    }
+    #netList {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        margin: auto;
+        width: 1000px;
+        max-width: 90vw;
+    }
+    #netList > div {
+        display: flex;
+        width: 100%;
+        height: 100px;
+        border: 1px solid black;
+        margin-bottom: 3px;
+    }
+    #netList > div > button {
+        width: 25%;
+    }
+    #netList > div > div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 200px;
+    }
+</style>
+<script>
+"use strict"
+window.addEventListener("jsNetWASMLoaded", () => {
+
+    const instances = []
+
+    const xorData = [
+        {input: [0, 0], expected: [0]},
+        {input: [0, 1], expected: [1]},
+        {input: [1, 0], expected: [1]},
+        {input: [1, 1], expected: [0]}
+    ]
+
+    const addInstance = () => {
+
+        const net = new Network({Module: window.Module, layers: [2, 3, 1]})
+        instances.push(net)
+
+        const containerRow = document.createElement("div")
+        const label = document.createElement("div")
+
+        const trainButton = document.createElement("button")
+        trainButton.innerHTML = "Train"
+        trainButton.addEventListener("click", () => {
+            net.train(xorData, {epochs: 2000, log: false}).then(() => label.innerHTML = "Training done")
+        })
+
+        const runButton = document.createElement("button")
+        runButton.innerHTML = "Run"
+        runButton.addEventListener("click", () => {
+            const vals = net.forward([parseInt(inputA.value), parseInt(inputB.value)])
+            label.innerHTML = vals[0]
+        })
+
+        containerRow.appendChild(trainButton)
+        containerRow.appendChild(runButton)
+        containerRow.appendChild(label)
+
+        netList.appendChild(containerRow)
+    }
+
+    addInstance()
+
+    newInstanceBtn.addEventListener("click", addInstance)
+})
+</script>
+<body>
+
+<span>Click the Create new net instance button to add new net instances. Click their Train buttons to train them on the XOR data set, and click Run to run the values in the below input fields through the network. </span>
+
+<div id="inputs">
+    <input id="inputA" type="number" min="0" max="1" value="0">
+    <input id="inputB" type="number" min="0" max="1" value="0">
+</div>
+
+<button id="newInstanceBtn">Create new net instance</button>
+
+<div id="netList"></div>
+
+
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jsnet",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "description": "Javascript based deep learning framework for basic and convolutional neural networks.",
   "scripts": {
     "test": "npm run js-tests && npm run wa-tests",

diff --git a/server.js b/server.js
@@ -10,7 +10,7 @@ http.createServer((request, response) => {
     let path = url.parse(request.url).pathname
     let data
 
-    path = (path=="/"?"/examples/index.html":path)
+    path = (path=="/"?"/examples/index.html":path).replace(/%20/g, " ")
 
     console.log(path)