Added Progress for loading the model

src/actions/index.js

@@ -91,7 +91,17 @@ export const showNavigation = () => async (dispatch, getState) => {
 }
 
 export const downloadModel = () => async (dispatch, getState) => {
-  const model = await tf.loadLayersModel('/bai_model/model.json'); // Load Model
+  let options = {
+    onProgress: (p)=>{
+
+      dispatch({
+        type: 'SET_PROGRESS',
+        payload: p.toFixed(2)*100
+      });
+    }
+  }
+
+  const model = await tf.loadLayersModel('/bai_model/model.json', options); // Load Model
 
   dispatch({
     type: 'SET_MODEL',

src/components/Bai.js

@@ -50,8 +50,9 @@ class Bai extends React.Component {
         <div className="content">
             <h1>Would you like to download the model?</h1>
             <p>By clicking Accept below, you will download the model which may be between 100 mb in size to 1 gb.</p>
-            <button onClick={()=>{this.props.loadingModel();this.props.downloadModel()}}>Accept</button>
+            <button className={this.props.loading?"hide":""} onClick={()=>{this.props.loadingModel();this.props.downloadModel()}}>Accept</button>
             <h2>{this.props.loading}</h2>
+            <h2>{this.props.loading?this.props.downloadProgress+"%":""}</h2>
         </div>
         )
         :(
@@ -81,7 +82,7 @@ class Bai extends React.Component {
   }
 }
 const mapStateToProps = (state) => {
-  return {model: state.model.model, loading: state.model.loading, last_prediction: state.model.last_prediction};
+  return {model: state.model.model, loading: state.model.loading, last_prediction: state.model.last_prediction, downloadProgress: state.model.progress};
 }
 
 export default connect(mapStateToProps, {downloadModel, loadingModel, predict})(Bai);

src/components/css/Bai.css

@@ -65,4 +65,8 @@
 .Bai .content {
     display: flex;
     flex-direction: column;
+}
+
+.Bai .hide {
+    display: none;
 }

src/reducers/modelReducer.js

@@ -1,12 +1,15 @@
 //SET_MODEL
-let modelReducer = (state={model: null, loading: ""}, action) => {
+let modelReducer = (state={model: null, loading: "", progress: 0}, action) => {
     switch(action.type) {
       case 'SET_MODEL':
         return { ...state, model: action.payload };
       case 'SET_LOADING':
         return { ...state, loading: action.payload };
       case 'SET_LAST_PRED':
-          return { ...state, last_prediction: action.payload };
+        return { ...state, last_prediction: action.payload };
+      case 'SET_PROGRESS':
+        return { ...state, progress: action.payload };
+
       default:
         return state;
     }