Upload of .h5 files now possible.

Author: Alex

backend/server.py

@@ -22,7 +22,11 @@ def translate_keras(filename):
     general_reader = open('translate/keras_loader.txt', 'rb')
     general_code = general_reader.read()
     if keras_ext in filename:
-        return graph_from_model_file(filename)
+        try:
+            return graph_from_model_file(filename)
+        except Exception as err:
+            return {'error_class': '', 'line_number': 1,
+                    'detail': "Model could not be loaded correctly. Error: " + str(err)}
     else:
         with open(filename, 'rb') as myfile:
             keras_code = myfile.read()
@@ -66,9 +70,10 @@ def graph_from_external_file(keras_code, general_code):
     graph.resolve_input_names()
     return graph
 
+
 def graph_from_model_file(keras_model_file):
     model_keras = keras.models.load_model(keras_model_file)
-    model_json = model_keras.to_json()
+    model_json = json.loads(model_keras.to_json())
     layers_extracted = model_json['config']['layers']
     graph = Graph()
     previous_node = ''
@@ -81,6 +86,7 @@ def graph_from_model_file(keras_model_file):
     graph.resolve_input_names()
     return graph
 
+
 def add_layer_type(layer_json, model_layer, graph, previous_node):
     """Add a Layer. Layers are identified by name and equipped using the spec.
 

backend/translate/translate_keras.py

@@ -3,28 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.4",
+    "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "ace-builds": "^1.4.12",
     "dagre": "^0.8.5",
     "file-saver": "^2.0.5",
-    "http-proxy-middleware": "^2.0.0",
+    "http-proxy-middleware": "^2.0.1",
     "jquery": "^3.6.0",
-    "jszip": "^3.6.0",
+    "jszip": "^3.7.1",
     "node-sass-chokidar": "^1.5.0",
-    "npm": "^7.17.0",
+    "npm": "^7.21.0",
     "npm-run-all": "^4.1.5",
     "prop-types": "^15.7.2",
     "randomstring": "^1.2.1",
     "react": "^17.0.2",
-    "react-ace": "^9.4.1",
+    "react-ace": "^9.4.3",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.2",
+    "react-dropzone": "^11.3.4",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
     "react-svg-tooltip": "0.0.11",
-    "redux": "^4.1.0",
+    "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
     "tinycolor2": "^1.4.2"
   },

net2vis/package-lock.json

@@ -4,6 +4,7 @@ import LayerTypesApi from "../api/LayerTypesApi";
 import PreferencesApi from "../api/PreferencesApi";
 import LegendPreferencesApi from "../api/LegendPreferencesApi";
 import GroupsApi from "../api/GroupsApi";
+import ModelApi from "../api/ModelApi";
 import * as types from "./types";
 import * as sort from "../groups/Sort";
 import * as splitting from "../layers/Splitting";
@@ -54,6 +55,11 @@ export function toggleAlert() {
   return { type: types.TOGGLE_ALERT };
 }
 
+// Toggle the Upload Alert View
+export function toggleUpload() {
+  return { type: types.TOGGLE_UPLOAD };
+}
+
 // Loading LayerTypes was Successful
 function loadLayerTypesSuccess(layerTypes, network, generationMode) {
   return {
@@ -273,6 +279,19 @@ export function loadCode(id) {
   };
 }
 
+// Called to delte the model file
+export function deleteModel(id) {
+  return function (dispatch) {
+    return ModelApi.deleteModel(id)
+      .then((code) => {
+        dispatch(loadCodeSuccess(code));
+      })
+      .catch((error) => {
+        throw error;
+      });
+  };
+}
+
 // Updating Code was Succesful
 function updateCodeSuccess(code) {
   return { type: types.UPDATE_CODE_SUCESS, code };
@@ -334,6 +353,58 @@ export function updateCodeBackend(
   };
 }
 
+export function updateModelBackend(
+  file,
+  id,
+  groups,
+  generationMode,
+  preferences
+) {
+  const loader = document.getElementById("loader");
+  loader.style.display = "flex";
+  return function (dispatch) {
+    dispatch(toggleUpload());
+    return ModelApi.updateModel(file, id)
+      .then((code) => {
+        dispatch(updateCodeSuccess(code));
+        return NetworkApi.getNetwork(id)
+          .then((network) => {
+            loader.style.display = "none";
+            if (network.success === true) {
+              var net = network.data;
+              if (preferences.add_splitting.value) {
+                net = splitting.addSplitLayers(net);
+              }
+              return LayerTypesApi.getLayerTypes(id).then((layerTypes) => {
+                networkLoaded(net, groups, JSON.parse(layerTypes), dispatch);
+                dispatch(
+                  loadLayerTypesSuccess(
+                    JSON.parse(layerTypes),
+                    net,
+                    generationMode
+                  )
+                );
+              });
+            } else {
+              dispatch(
+                updateAlertSnack({
+                  open: true,
+                  message: "Code not executeable.",
+                })
+              );
+              dispatch(addError(network.data));
+            }
+          })
+          .catch((error) => {
+            throw error;
+          });
+      })
+      .catch((error) => {
+        console.warn("Current Network not executable.", error);
+      });
+  };
+}
+
 // Select Layer
 export function selectLayer(id) {
   return { type: types.SELECT_LAYER, id };

net2vis/package.json

@@ -12,6 +12,7 @@ export const TOGGLE_CODE = "TOGGLE_CODE";
 export const TOGGLE_PREFERENCES = "TOGGLE_PREFERENCES";
 export const TOGGLE_LEGEND = "TOGGLE_LEGEND";
 export const TOGGLE_ALERT = "TOGGLE_ALERT";
+export const TOGGLE_UPLOAD = "TOGGLE_UPLOAD";
 export const LOAD_LAYER_TYPES_SUCCESS = "LOAD_LAYER_TYPES_SUCCESS";
 export const LOAD_PREFERENCES_SUCCESS = "LOAD_PREFERENCES_SUCCESS";
 export const UPDATE_PREFERENCES_SUCCESS = "UPDATE_PREFERENCES_SUCCESS";

net2vis/src/actions/index.js

@@ -0,0 +1,42 @@
+// Class for calling Backend functions related to Code
+class ModelApi {
+  // Update the Model file on the Backend
+  static updateModel(file, id) {
+    let formData = new FormData();
+    formData.append("model", file);
+
+    const request = new Request("/api/upload_model/" + id, {
+      // Prepare the Request
+      method: "POST",
+      body: formData,
+    });
+
+    return fetch(request)
+      .then((response) => {
+        // Return the Result of the Request
+        return response.text();
+      })
+      .catch((error) => {
+        return error;
+      });
+  }
+
+  // Delete the model from the Backend
+  static deleteModel(id) {
+    const request = new Request("/api/delete_model/" + id, {
+      // Prepare the Request
+      method: "GET",
+    });
+
+    return fetch(request)
+      .then((response) => {
+        // Return the result of the Request
+        return response.text();
+      })
+      .catch((error) => {
+        return error;
+      });
+  }
+}
+
+export default ModelApi;

net2vis/src/actions/types.js

@@ -4,6 +4,12 @@ import PropTypes from "prop-types";
 import { bindActionCreators } from "redux";
 import AceEditor from "react-ace";
 import InputField from "../input/InputField";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import Button from "@material-ui/core/Button";
+import Dropzone from "react-dropzone";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/snippets/python";
 import "ace-builds/src-min-noconflict/ext-language_tools";
@@ -28,10 +34,29 @@ class Code extends React.Component {
     );
   };
 
+  updateStoredModel = () => {
+    this.props.actions.uploadModel(
+      this.props.id,
+      this.props.groups,
+      this.props.color_mode.generation,
+      this.props.preferences
+    );
+  };
+
   componentDidUpdate() {
     this.refs.aceEditor.editor.resize(); // Triggering a resize of the editor, which is needed to be displayed correctly
   }
 
+  uploadFile(file) {
+    this.props.actions.updateModelBackend(
+      file,
+      this.props.id,
+      this.props.groups,
+      this.props.color_mode.generation,
+      this.props.preferences
+    );
+  }
+
   // Render the Code into the Code View if Toggled
   render() {
     const code = this.props.code;
@@ -46,6 +71,7 @@ class Code extends React.Component {
         },
       ];
     }
+    const display = this.props.display;
     return (
       // Editor with Syntax highlighting
       <div className="preferencesWrapper">
@@ -68,15 +94,67 @@ class Code extends React.Component {
             scrollMargin={[10, 0, 0, 0]}
           />
         </div>
-        <div>
+        {this.props.code === "No code loaded since model file is present." ? (
           <InputField
-            value={"Update"}
+            value={"Delete Model"}
             type={"codeButton"}
-            description={"Update"}
-            action={this.updateStoredCode}
+            description={"Delete Model"}
+            options={"secondary"}
+            action={() => this.props.actions.deleteModel(this.props.id)}
             active={true}
           />
-        </div>
+        ) : (
+          <div className="updateButtonContainer">
+            <InputField
+              value={"Upload Model"}
+              type={"codeButton"}
+              description={"Upload Model"}
+              action={this.props.actions.toggleUpload}
+              active={true}
+            />
+            <InputField
+              value={"Update"}
+              type={"codeButton"}
+              description={"Update"}
+              action={this.updateStoredCode}
+              active={true}
+            />
+          </div>
+        )}
+        <Dialog
+          open={display.upload_toggle}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogTitle id="alert-dialog-title">Upload h5 Model</DialogTitle>
+          <DialogContent>
+            <div className="dropzoneContainer">
+              <Dropzone
+                onDrop={(acceptedFiles) => this.uploadFile(acceptedFiles[0])}
+                acceptedFiles=".h5"
+                maxFiles={1}
+              >
+                {({ getRootProps, getInputProps }) => (
+                  <section>
+                    <div {...getRootProps()}>
+                      <input {...getInputProps()} />
+                      <p>Drag a model file here, or click to select a file.</p>
+                    </div>
+                  </section>
+                )}
+              </Dropzone>
+            </div>
+          </DialogContent>
+          <DialogActions>
+            <Button
+              onClick={this.props.actions.toggleUpload}
+              color="secondary"
+              autoFocus
+            >
+              Cancel
+            </Button>
+          </DialogActions>
+        </Dialog>
       </div>
     );
   }
@@ -90,6 +168,7 @@ Code.propTypes = {
   groups: PropTypes.array.isRequired,
   color_mode: PropTypes.object.isRequired,
   preferences: PropTypes.object.isRequired,
+  display: PropTypes.object.isRequired,
 };
 
 // Map the State to the Properties of this Component
@@ -103,6 +182,7 @@ function mapStateToProps(state, ownProps) {
       groups: state.groups,
       color_mode: state.color_mode,
       preferences: state.preferences,
+      display: state.display,
     };
   } else {
     return {
@@ -112,6 +192,7 @@ function mapStateToProps(state, ownProps) {
       groups: state.groups,
       color_mode: state.color_mode,
       preferences: state.preferences,
+      display: state.display,
     };
   }
 }