Merge pull request #5 from RaspberryProgramming/npm-updates

Updated NPM Packages

package.json

@@ -3,23 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@reduxjs/toolkit": "^1.9.3",
-    "@tensorflow/tfjs": "^4.2.0",
-    "@tensorflow/tfjs-converter": "^4.0.0",
-    "axios": "^1.3.4",
+    "@reduxjs/toolkit": "^2.2.3",
+    "@tensorflow/tfjs": "^4.18.0",
+    "@tensorflow/tfjs-converter": "^4.18.0",
+    "axios": "^1.6.8",
     "history": "^5.3.0",
-    "memoize": "^0.1.1",
+    "memoize": "^10.0.0",
     "react": "^18.2.0",
-    "react-bootstrap-icons": "^1.10.2",
+    "react-bootstrap-icons": "^1.11.4",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.0.5",
-    "react-router": "^6.4.3",
-    "react-router-dom": "^6.8.2",
+    "react-redux": "^9.1.1",
+    "react-router": "^6.22.3",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "^5.0.1",
-    "redux": "^4.2.1",
-    "redux-thunk": "^2.4.2",
+    "redux": "^5.0.1",
+    "redux-thunk": "^3.1.0",
     "tfjs": "^0.6.0",
-    "web-vitals": "^3.1.1"
+    "web-vitals": "^3.5.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/actions/index.js

@@ -103,22 +103,10 @@ export const showNavigation = () => async (dispatch, getState) => {
   });
 }
 
-export const downloadModel = () => async (dispatch, getState) => {
-  let options = {
-    onProgress: (p)=>{
-
-      dispatch({
-        type: 'SET_PROGRESS',
-        payload: _.round(p*100)
-      });
-    }
-  }
-
-  const model = await tf.loadLayersModel('/bai_model/model.json', options); // Load Model
-
+export const setProgress = (prog) => async (dispatch, getState) => {
   dispatch({
-    type: 'SET_MODEL',
-    payload: model
+    type: 'SET_PROGRESS',
+    payload: _.round(prog)
   });
 }
 
@@ -130,8 +118,7 @@ export const loadingModel = () => async (dispatch, getState) => {
   });
 };
 
-export const predict = (image) => async (dispatch, getState) => {
-  let model = await getState().model.model;
+export const predict = (image, model) => async (dispatch, getState) => {
 
   let imdata = await tf.browser.fromPixels(image).resizeNearestNeighbor([550, 425]).toFloat().expandDims();
 

src/components/Bai.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import {downloadModel, loadingModel, predict, error_msg} from '../actions'
+import {setProgress, loadingModel, predict, error_msg} from '../actions'
 import ProgressBar from "./subcomponents/ProgressBar";
-//import { Link } from 'react-router-dom';
+import * as tf from '@tensorflow/tfjs';
 import './css/Bai.css';
 
-
 class Bai extends React.Component {
   /**
    * Blank AI - Artificial Intelligence designed to distinguish photos of blank vs. non-blank paper scans
    */
 
   classes = {0: "Blank", 1: "Not Blank"}
+  model = null;
 
   componentDidMount () {
     document.title = "Blank AI";
@@ -23,6 +23,20 @@ class Bai extends React.Component {
     return ext
   }
 
+  async startModelDownload() {
+    this.props.loadingModel();
+    
+    let options = {
+      onProgress: (p)=>{
+        this.props.setProgress(p*100)
+      }
+    }
+
+    this.model = await tf.loadLayersModel('/bai_model/model.json', options); // Load Model
+
+    await this.props.setProgress(0);
+  }
+
   async fileUpload (target, predict) {
 
     const [file] = target.files;
@@ -36,8 +50,7 @@ class Bai extends React.Component {
     if (file && image_ext.includes(file_ext)) {
 
         let imageBM = await createImageBitmap(file);
-        
-        let prediction = await predict(imageBM);
+        let prediction = await predict(imageBM, this.model);
         
         console.log(this.declassify(prediction[0]));
 
@@ -58,12 +71,12 @@ class Bai extends React.Component {
 
   render() {
 
-    let content = (this.props.model === null)?
+    let content = (this.model === null)?
         (
         <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 className={`btn ${this.props.loading?"hide":""}`} onClick={()=>{this.props.loadingModel();this.props.downloadModel()}}>Accept Download</button>
+            <button className={`btn ${this.props.loading?"hide":""}`} onClick={()=>this.startModelDownload()}>Accept Download</button>
             <h2>{this.props.loading}</h2>
             <ProgressBar progress={this.props.downloadProgress}/>
             <h2>{this.props.loading?this.props.downloadProgress+"%":""}</h2>
@@ -106,4 +119,4 @@ const mapStateToProps = (state) => {
   return {model: state.model.model, loading: state.model.loading, last_prediction: state.model.last_prediction, downloadProgress: state.model.progress, error: state.model.error};
 }
 
-export default connect(mapStateToProps, {downloadModel, loadingModel, predict, error_msg})(Bai);
+export default connect(mapStateToProps, {setProgress, loadingModel, predict, error_msg})(Bai);

src/index.js

@@ -3,13 +3,13 @@ import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { applyMiddleware, compose } from 'redux';
 import { configureStore } from '@reduxjs/toolkit'
-import reduxThunk from 'redux-thunk';
+import { thunk } from 'redux-thunk';
 
 import App from './components/App';
 import reducers from './reducers';
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-const store = configureStore({reducer: reducers}, composeEnhancers(applyMiddleware(reduxThunk)));
+const store = configureStore({reducer: reducers}, composeEnhancers(applyMiddleware(thunk)));
 const container = document.getElementById('root');
 
 createRoot(container).render(