Added new BAI Page

src/actions/index.js

@@ -1,5 +1,6 @@
 import github from '../apis/github';
 import api from '../apis/api';
+import * as tf from '@tensorflow/tfjs';
 
 
 export const getUser = (username) => async (dispatch, getState) => {
@@ -88,3 +89,36 @@ export const showNavigation = () => async (dispatch, getState) => {
     payload: true,
   });
 }
+
+export const downloadModel = () => async (dispatch, getState) => {
+  const model = await tf.loadLayersModel('/bai_model/model.json'); // Load Model
+
+  dispatch({
+    type: 'SET_MODEL',
+    payload: model
+  });
+}
+
+export const loadingModel = () => async (dispatch, getState) => {
+
+  dispatch({
+    type: 'SET_LOADING',
+    payload: "Loading Model. Please be Patient"
+  });
+};
+
+export const predict = (image) => async (dispatch, getState) => {
+  let model = await getState().model.model;
+
+  let imdata = await tf.browser.fromPixels(image).resizeNearestNeighbor([550, 425]).toFloat().expandDims();
+
+  let prediction = await model.predict(imdata).data();
+  console.log(prediction);
+
+  dispatch({
+    type: 'SET_LAST_PRED',
+    payload: prediction
+  });
+
+  return prediction;
+};

src/components/App.js

@@ -6,6 +6,7 @@ import Github from './Github';
 import Articles from './Articles';
 import About from './About';
 import Intro from './Intro';
+import Bai from './Bai';
 
 const App = (props) => {
   return (
@@ -18,6 +19,7 @@ const App = (props) => {
             <Route path="/github" render={(props) => <Github {...props} />} />
             <Route path="/about" component={About} />
             <Route path="/articles" component={Articles} />
+            <Route path="/bai" component={Bai} />
           </Switch>
         </div>
       </div>

src/components/Bai.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import {downloadModel, loadingModel, predict} from '../actions'
+//import { Link } from 'react-router-dom';
+import './css/Bai.css';
+
+
+class Bai extends React.Component {
+  /**
+   * 
+   */
+
+  classes = {0: "Blank", 1: "Not Blank"}
+
+  componentDidMount () {
+    document.title = "Blank AI";
+  }
+
+  async fileUpload ({target}) {
+    console.log(target);
+    const [file] = target.files;
+    let image = document.getElementById("preview")  
+
+    if (file) {
+        image.src = await URL.createObjectURL(file);        
+    }
+  }
+
+  async imagePredict (model) {
+    let image = document.getElementById("preview");
+    console.log(image.src);
+    if (image.src !== "") {
+        let prediction = await this.props.predict(image);
+        console.log(prediction[0]);
+        console.log(this.declassify(prediction[0]));
+    }
+  }
+
+  declassify(prediction) {
+      if (prediction > 0.5) {
+          return this.classes[1];
+      } else {
+          return this.classes[0];
+      }
+  }
+
+  render() {
+    
+    let content = (this.props.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 onClick={()=>{this.props.loadingModel();this.props.downloadModel()}}>Accept</button>
+            <h2>{this.props.loading}</h2>
+        </div>
+        )
+        :(
+        <div className="content">
+            <h1>BAI Model Prediction</h1>
+        
+            <img id="preview" src="" alt="preview of predicted file" onLoad={()=>{this.imagePredict(this.props.model)}}/>
+
+            <input type='file' id="fileSubmit" onChange={this.fileUpload} />
+
+            <button onClick={()=>{document.getElementById('fileSubmit').click();}}>Upload Image</button>
+            
+            <p className="prediction">{this.props.last_prediction ? this.declassify(this.props.last_prediction[0]):"Waiting for Prediction"}</p>
+        </div>
+        );
+
+    return (
+        <div className="Bai">
+            {content}
+            <h1>About</h1>
+            <p> You can find the source, dataset and model created for BAI on github at 
+                <a href="https://www.github.com/RaspberryProgramming/BAI"> https://www.github.com/RaspberryProgramming/BAI</a>
+            </p>
+        </div>
+    );
+  }
+}
+const mapStateToProps = (state) => {
+  return {model: state.model.model, loading: state.model.loading, last_prediction: state.model.last_prediction};
+}
+
+export default connect(mapStateToProps, {downloadModel, loadingModel, predict})(Bai);

src/components/css/Bai.css

@@ -0,0 +1,52 @@
+.Bai {
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10%;
+}
+
+.Bai * {
+    margin-top: 5px;
+}
+
+.Bai h1 {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.Bai p {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+
+.Bai img {
+    margin-left: auto;
+    margin-right: auto;
+    width: 50vw;
+}
+
+.Bai button {
+    font-size: 24px;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #4f5f49;
+    border-style: none;
+    border-radius: 5px;
+    padding: 15px;
+    color: white;
+
+}
+
+.Bai input {
+    width:0;
+    height:0;
+}
+
+.Bai .prediction {
+    background-color: #373747;
+    border-radius: 10px;
+    padding: 8px;
+    font-size: 16px;
+}

src/reducers/index.js

@@ -5,6 +5,7 @@ import contactModalReducer from "./contactModalReducer";
 import introReducer from "./introReducer";
 import navigationReducer from "./navigationReducer";
 import articlesReducer from "./articlesReducer";
+import modelReducer from "./modelReducer";
 
 export default combineReducers({
     github: githubReducer,
@@ -12,4 +13,5 @@ export default combineReducers({
     intro: introReducer,
     navigation: navigationReducer,
     articles: articlesReducer,
+    model: modelReducer,
 });

src/reducers/modelReducer.js

@@ -0,0 +1,16 @@
+//SET_MODEL
+let modelReducer = (state={model: null, loading: ""}, 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 };
+      default:
+        return state;
+    }
+  };
+  
+
+export default modelReducer;