Delay load protobuf and library scripts

Makefile

@@ -12,6 +12,7 @@ clean:
 
 build_python:
 	@[ -d node_modules ] || npm install
+	rm -rf ./build/python
 	python ./setup.py build
 
 build_electron:
@@ -25,6 +26,7 @@ start:
 
 publish_pip:
 	@[ -d node_modules ] || npm install
+	rm -rf ./build/python
 	python ./setup.py build bdist_wheel upload
 
 publish_github_electron:

netron

@@ -1,5 +1,6 @@
 #!/bin/bash
 # Build and start Netron as a Python web server from local directory
 [ -d node_modules ] || npm install
+rm -rf ./build/python
 python ./setup.py --quiet build
 PYTHONPATH=./build/python/lib python ./build/python/scripts-2.7/netron $@

src/keras-model.js

@@ -3,6 +3,19 @@
 class KerasModel {
 
     static open(buffer, identifier, host, callback) { 
+        host.import('/hdf5.js', (err) => {
+            if (err) {
+                callback(err, null);
+            }
+            else {
+                KerasModel.create(buffer, identifier, host, (err, model) => {
+                    callback(err, model);
+                });
+            }
+        });
+    }
+
+    static create(buffer, identifier, host, callback) {
         try {
             var version = null;
             var backend = null;

src/onnx-model.js

@@ -1,15 +1,27 @@
 /*jshint esversion: 6 */
 
-var onnx = protobuf.roots.onnx.onnx;
+var onnx = null;
 
 class OnnxModel {
 
     static open(buffer, identifier, host, callback) { 
+        host.import('/onnx.js', (err) => {
+            if (err) {
+                callback(err, null);
+            }
+            else {
+                onnx = protobuf.roots.onnx.onnx;
+                OnnxModel.create(buffer, host, (err, model) => {
+                    callback(err, model);
+                });
+            }
+        });
+    }
+
+    static create(buffer, host, callback) {
         try {
             var model = onnx.ModelProto.decode(buffer);
-
             model = new OnnxModel(model);
-
             OnnxOperatorMetadata.open(host, (err, metadata) => {
                 callback(null, model);
             });

src/tf-model.js

@@ -2,11 +2,25 @@
 
 // Experimental
 
-var tensorflow = protobuf.roots.tf.tensorflow;
+var tensorflow = null;
 
 class TensorFlowModel {
 
     static open(buffer, identifier, host, callback) { 
+        host.import('/tf.js', (err) => {
+            if (err) {
+                callback(err, null);
+            }
+            else {
+                tensorflow = protobuf.roots.tf.tensorflow;
+                var model = TensorFlowModel.create(buffer, identifier, host, (err, model) => {
+                    callback(err, model);
+                });
+            }
+        });
+    }
+
+    static create(buffer, identifier, host, callback) {
         try {
             var model = null;
             var format = null;
@@ -49,7 +63,7 @@ class TensorFlowModel {
         }
         catch (err) {
             callback(err, null);
-        }
+        }    
     }
 
     constructor(model, format) {

src/tflite-model.js

@@ -3,6 +3,19 @@
 class TensorFlowLiteModel {
     
     static open(buffer, identifier, host, callback) { 
+        host.import('/tflite.js', (err) => {
+            if (err) {
+                callback(err, null);
+            }
+            else {
+                TensorFlowLiteModel.create(buffer, identifier, host, (err, model) => {
+                    callback(err, model);
+                });
+            }
+        });
+    }
+
+    static create(buffer, identifier, host, callback) { 
         try {
             var byteBuffer = new flatbuffers.ByteBuffer(buffer);
             if (!tflite.Model.bufferHasIdentifier(byteBuffer))

src/view-browser.html

@@ -32,13 +32,9 @@
 <script type='text/javascript' src='flatbuffers.js'></script>
 <script type='text/javascript' src='handlebars.min.js'></script>
 <script type='text/javascript' src='marked.min.js'></script>
-<script type='text/javascript' src='onnx.js'></script>
 <script type='text/javascript' src='onnx-model.js'></script>
-<script type='text/javascript' src='tf.js'></script>
 <script type='text/javascript' src='tf-model.js'></script>
-<script type='text/javascript' src='tflite.js'></script>
 <script type='text/javascript' src='tflite-model.js'></script>
-<script type='text/javascript' src='hdf5.js'></script>
 <script type='text/javascript' src='keras-model.js'></script>
 <script type='text/javascript' src='view-template.js'></script>
 <script type='text/javascript' src='view-browser.js'></script>

src/view-browser.js

@@ -76,15 +76,22 @@ class BrowserHost {
         alert(message);
     }
     
+    import(file, callback) {
+        var url = this.url(file);
+        var script = document.createElement('script');
+        script.onload = () => {
+            callback(null);
+        };
+        script.onerror = (e) => {
+            callback(new Error('The script \'' + e.target.src + '\' failed to load.'));
+        };
+        script.setAttribute('type', 'text/javascript');
+        script.setAttribute('src', url);
+        document.head.appendChild(script);
+    }
+
     request(file, callback) {
-        var url = file;
-        if (window && window.location && window.location.href) {
-            var location = window.location.href;
-            if (location.endsWith('/')) {
-                location = location.slice(0, -1);
-            }
-            url = location + file;
-        }
+        var url = this.url(file);
         var request = new XMLHttpRequest();
         if (file.endsWith('.pb')) {
             request.responseType = 'arraybuffer';
@@ -110,6 +117,18 @@ class BrowserHost {
         request.send();
     }
 
+    url(file) {
+        var url = file;
+        if (window && window.location && window.location.href) {
+            var location = window.location.href;
+            if (location.endsWith('/')) {
+                location = location.slice(0, -1);
+            }
+            url = location + file;
+        }
+        return url;        
+    }
+
     openURL(url) {
         window.open(url, '_target');
     }

src/view-electron.html

@@ -29,13 +29,9 @@
 <script type='text/javascript' src='../node_modules/flatbuffers/js/flatbuffers.js'></script>
 <script type='text/javascript' src='../node_modules/handlebars/dist/handlebars.min.js'></script>
 <script type='text/javascript' src='../node_modules/marked/marked.min.js'></script>
-<script type='text/javascript' src='onnx.js'></script>
 <script type='text/javascript' src='onnx-model.js'></script>
-<script type='text/javascript' src='tf.js'></script>
 <script type='text/javascript' src='tf-model.js'></script>
-<script type='text/javascript' src='tflite.js'></script>
 <script type='text/javascript' src='tflite-model.js'></script>
-<script type='text/javascript' src='hdf5.js'></script>
 <script type='text/javascript' src='keras-model.js'></script>
 <script type='text/javascript' src='view-template.js'></script>
 <script type='text/javascript' src='view-electron.js'></script>

src/view-electron.js

@@ -75,6 +75,20 @@ class ElectronHost {
         electron.remote.dialog.showErrorBox(electron.remote.app.getName(), message);        
     }
 
+    import(file, callback) {
+        var pathname = path.join(__dirname, file);
+        var script = document.createElement('script');
+        script.onload = () => {
+            callback(null);
+        };
+        script.onerror = (e) => {
+            callback(new Error('The script \'' + e.target.src + '\' failed to load.'));
+        };
+        script.setAttribute('type', 'text/javascript');
+        script.setAttribute('src', pathname);
+        document.head.appendChild(script);
+    }
+
     request(file, callback) {
         var pathname = path.join(__dirname, file);
         fs.exists(pathname, (exists) => {