transmit uploaded file from js to python done

app.py

@@ -1,5 +1,7 @@
 import json
-from flask import Flask, render_template, request, jsonify
+from flask import Flask, render_template, request
+import onnx
+import onnxruntime as rt
 app = Flask(__name__)
 
 @app.route('/')
@@ -12,5 +14,24 @@ def downloadModel():
     print(modelNodeStates)
     return 'OK', 200
 
+@app.route('/return_file', methods=['POST'])
+def return_file():
+    # https://blog.miguelgrinberg.com/post/handling-file-uploads-with-flask
+    onnx_file = request.files['file']
+    # print(onnx_file.filename)
+    # print(onnx_file.stream)
+    # onnx_file.save(onnx_file.filename)
+    
+    onnx_file_stream = onnx_file.stream
+
+    # https://leimao.github.io/blog/ONNX-IO-Stream/
+    onnx_file_stream.seek(0)
+    model_proto_from_stream = onnx.load_model(onnx_file_stream, onnx.ModelProto)
+    model_proto_bytes = onnx._serialize(model_proto_from_stream)
+    inference_session = rt.InferenceSession(model_proto_bytes)
+    # onnx.save_model(model_proto_from_binary_stream, onnx_file.filename)
+    
+    return 'OK', 200
+
 if __name__ == '__main__':
    app.run()

static/index.js

@@ -233,10 +233,30 @@ host.BrowserHost = class {
                 openFileDialog.click();
             });
             openFileDialog.addEventListener('change', (e) => {
+                console.log(e)
+                console.log(e.target.value)
                 if (e.target && e.target.files && e.target.files.length > 0) {
                     const files = Array.from(e.target.files);
                     const file = files.find((file) => this._view.accept(file.name));
-                    // console.log(files);
+                    var form = new FormData();
+                    // console.log(file)
+                    form.append('file', file);
+                    // console.log(form)
+                    // console.log(form.get('file'))
+                    
+                    // https://stackoverflow.com/questions/66039996/javascript-fetch-upload-files-to-python-flask-restful
+                    fetch('/return_file', {
+                        method: 'POST',
+                        body: form
+                    }).then(function (response) {
+                        return response.text();
+                    }).then(function (text) {
+                        console.log('POST response: ');
+                        // Should be 'OK' if everything was successful
+                        console.log(text);
+                    });
+
+
                     if (file) {
                         this._open(file, files);
                     }
@@ -335,6 +355,7 @@ host.BrowserHost = class {
 
     request(file, encoding, base) {
         const url = base ? (base + '/' + file) : this._url(file);
+        // console.log(url)
         return this._request(url, null, encoding);
     }
 
@@ -811,6 +832,7 @@ host.BrowserHost.BrowserFileContext = class {
     }
 
     open() {
+
         return this.request(this._file.name, null).then((stream) => {
             this._stream = stream;
             // console.log(this)

static/view-grapher.js

@@ -43,7 +43,7 @@ grapher.Graph = class {
         this._modelNodeName2ViewNode.set(modelNodeName, node);
         this._modelNodeName2State.set(modelNodeName, 'Exist');
 
-        console.log(modelNodeName)
+        // console.log(modelNodeName)
     }
 
     setEdge(edge) {

static/view-sidebar.js

@@ -319,9 +319,13 @@ sidebar.NodeSidebar = class {
                     // Specify the method
                     method: 'POST',
                     // https://blog.csdn.net/Crazy_SunShine/article/details/80624366
-                    body:  this._mapToJson(
-                        this._host._view._graph._modelNodeName2State
-                    )
+                    // body:  this._mapToJson(
+                    //     this._host._view._graph._modelNodeName2State
+                    // )
+                    body: JSON.stringify({
+                        "onnx_file_path" : null,
+                        "node_states": this._mapToJson(this._host._view._graph._modelNodeName2State),
+                    })
                 }).then(function (response) {
                     return response.text();
                 }).then(function (text) {

static/view.js

@@ -422,8 +422,8 @@ view.View = class {
     }
 
     open(context) {
-        console.log("view open()");
-        console.log(context);
+        // console.log("view open()");
+        // console.log(context);
         this._host.event('Model', 'Open', 'Size', context.stream ? context.stream.length : 0);
         this._sidebar.close();
         return this._timeout(2).then(() => {
@@ -468,7 +468,7 @@ view.View = class {
     }
 
     _updateGraph(model, graphs) {
-        console.log('view._updateGraph() is called')
+        // console.log('view._updateGraph() is called')
         // console.log(model);
         // console.log(graphs);
         const lastModel = this._model;
@@ -582,8 +582,8 @@ view.View = class {
                 const viewGraph = new view.Graph(this, model, groups, options);
                 // console.log(viewGraph)
                 if (this.lastViewGraph) {
-                    console.log(this.lastViewGraph._modelNodeName2ViewNode)
-                    console.log('node state of lastViewGraph is loaded')
+                    // console.log(this.lastViewGraph._modelNodeName2ViewNode)
+                    // console.log('node state of lastViewGraph is loaded')
                     viewGraph._modelNodeName2State = this.lastViewGraph._modelNodeName2State;
                 }
                 // console.log(viewGraph._modelNodeName2State)
@@ -940,7 +940,7 @@ view.Graph = class extends grapher.Graph {
             // console.log(node)
             // My code
             if (this._modelNodeName2State.get(node.name) == 'Deleted') {
-                console.log(this._modelNodeName2State.get(node.name))
+                // console.log(this._modelNodeName2State.get(node.name))
                 continue;
             }
 
@@ -1924,7 +1924,7 @@ view.ModelFactoryService = class {
     }
 
     _openContext(context) {
-        console.log(context)
+        // console.log(context)
         const modules = this._filter(context).filter((module) => module && module.length > 0);
         // console.log(modules)  // ['./onnx', './tensorrt', './rknn', './om']
 
@@ -1937,7 +1937,7 @@ view.ModelFactoryService = class {
                 const id = modules.shift();
                 // console.log(id)
                 return this._host.require(id).then((module) => {
-                    console.log(module)
+                    // console.log(module)
                     const updateErrorContext = (error, context) => {
                         const content = " in '" + context.identifier + "'.";
                         if (error && typeof error.message === 'string' && !error.message.endsWith(content) && (error.context === undefined || error.context === true)) {