From 890e54ae209665e4f76880fc9f711a0dba0e7dfb Mon Sep 17 00:00:00 2001 From: ZhangGe6 Date: Mon, 25 Apr 2022 13:41:37 +0800 Subject: [PATCH] transmit uploaded file from js to python done --- app.py | 23 ++++++++++++++++++++++- static/index.js | 24 +++++++++++++++++++++++- static/view-grapher.js | 2 +- static/view-sidebar.js | 10 +++++++--- static/view.js | 16 ++++++++-------- 5 files changed, 61 insertions(+), 14 deletions(-) diff --git a/app.py b/app.py index f916a09..2b9cb82 100644 --- a/app.py +++ b/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() \ No newline at end of file diff --git a/static/index.js b/static/index.js index 97c37c5..90db301 100644 --- a/static/index.js +++ b/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) diff --git a/static/view-grapher.js b/static/view-grapher.js index 03629eb..e216b12 100644 --- a/static/view-grapher.js +++ b/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) { diff --git a/static/view-sidebar.js b/static/view-sidebar.js index 36162cf..de6ec35 100644 --- a/static/view-sidebar.js +++ b/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) { diff --git a/static/view.js b/static/view.js index 0ab7b0f..cbc0bc0 100644 --- a/static/view.js +++ b/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)) {