AI Page Redesign - Basic framework for dadjokes added

Modified Bai page functionality to be reusable in other pages.
Added a DadJokesAI page
Model is currently missing for DadJokes page, thus left in prerelease branch for now

src/actions/index.js

@@ -103,7 +103,7 @@ export const showNavigation = () => async (dispatch, getState) => {
   });
 }
 
-export const downloadModel = () => async (dispatch, getState) => {
+export const downloadModel = (modelUrl, modelType) => async (dispatch, getState) => {
   let options = {
     onProgress: (p)=>{
 
@@ -114,7 +114,15 @@ export const downloadModel = () => async (dispatch, getState) => {
     }
   }
 
-  const model = await tf.loadLayersModel('/bai_model/model.json', options); // Load Model
+  let model;
+
+  if (modelType === "graph") {
+    model = await tf.loadGraphModel('run_tensorflowOutput_web_model/model.json');
+  } else if (modelType === "layers") {
+    model = await tf.loadLayersModel(modelUrl, options); // Load Model
+  } else {
+    model = null;
+  }
 
   dispatch({
     type: 'SET_MODEL',
@@ -130,7 +138,7 @@ export const loadingModel = () => async (dispatch, getState) => {
   });
 };
 
-export const predict = (image) => async (dispatch, getState) => {
+export const baiPredict = (image) => async (dispatch, getState) => {
   let model = await getState().model.model;
 
   let imdata = await tf.browser.fromPixels(image).resizeNearestNeighbor([550, 425]).toFloat().expandDims();
@@ -146,6 +154,19 @@ export const predict = (image) => async (dispatch, getState) => {
   return prediction;
 };
 
+export const dadJokesPredict = () => async (dispatch, getState) => {
+  let model = await getState().model.model;
+
+  let prediction = "";
+
+  dispatch({
+    type: 'SET_LAST_PRED',
+    payload: prediction
+  });
+
+  return prediction;
+};
+
 export const error_msg = (message) => async (dispatch, getState) => {
   
   console.log(message);

src/components/App.js

@@ -9,6 +9,7 @@ import ArticleEditor from './ArticleEditor';
 import About from './About';
 import Intro from './Intro';
 import Bai from './Bai';
+import DadjokesAI from './DadjokesAI';
 
 const App = (props) => {
   return (
@@ -23,6 +24,7 @@ const App = (props) => {
             <Route path="/articles" element={<Articles />} />
             <Route path="/articles/:id" element={<Articles />} />
             <Route path="/bai" element={<Bai />} />
+            <Route path="/dadjokes" element={<DadjokesAI />} />
             <Route path="/articleEditor" element={<ArticleEditor />} />
           </Routes>
         </div>

src/components/Bai.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import {downloadModel, loadingModel, predict, error_msg} from '../actions'
+import {downloadModel, loadingModel, baiPredict, error_msg} from '../actions'
 import ProgressBar from "./subcomponents/ProgressBar";
 //import { Link } from 'react-router-dom';
-import './css/Bai.css';
+import './css/AIPages.css';
 
 
 class Bai extends React.Component {
@@ -63,7 +63,7 @@ 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 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.props.loadingModel();this.props.downloadModel('/bai_model/model.json', 'layers')}}>Accept Download</button>
             <h2>{this.props.loading}</h2>
             <ProgressBar progress={this.props.downloadProgress}/>
             <h2>{this.props.loading?this.props.downloadProgress+"%":""}</h2>
@@ -106,4 +106,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, {downloadModel, loadingModel, baiPredict, error_msg})(Bai);

src/components/DadjokesAI.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import {downloadModel, loadingModel, dadJokesPredict, error_msg} from '../actions'
+import ProgressBar from "./subcomponents/ProgressBar";
+//import { Link } from 'react-router-dom';
+import './css/AIPages.css';
+
+
+class Bai extends React.Component {
+  /**
+   * Blank AI - Artificial Intelligence designed to distinguish photos of blank vs. non-blank paper scans
+   */
+
+
+  componentDidMount () {
+    document.title = "Dad Jokes AI";
+  }
+
+  extExtractor (filename) {
+    let name = filename.split('.');
+    let ext = name[name.length-1];
+    return ext
+  }
+
+  async fileUpload (target, predict) {
+
+    const [file] = target.files;
+
+    let image = document.getElementById("preview")  
+
+    let image_ext = ['jpg', 'png'];
+
+    let file_ext = await this.extExtractor(file.name);
+
+    if (file && image_ext.includes(file_ext)) {
+
+        let imageBM = await createImageBitmap(file);
+        
+        let prediction = await predict(imageBM);
+        
+        console.log(this.declassify(prediction[0]));
+
+        image.src = await URL.createObjectURL(file);
+        image.classList.add('show');
+    } else {
+      this.props.error_msg('Please pass JPG or PNG file Only');
+    }
+  }
+
+  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>
+            <p>You also accept that the model is generated based off of unfiltered data which may have been trained with any words available to the human language.</p>
+            <button className={`btn ${this.props.loading?"hide":""}`} onClick={()=>{this.props.loadingModel();this.props.downloadModel('/dadjokes_model/model.json', 'graph')}}>Accept Download</button>
+            <h2>{this.props.loading}</h2>
+            <ProgressBar progress={this.props.downloadProgress}/>
+            <h2>{this.props.loading?this.props.downloadProgress+"%":""}</h2>
+        </div>
+        )
+        :(
+        <div className="content">
+            <h1>BAI Model Prediction</h1>
+
+            <p className="prediction">{this.props.last_prediction ? this.props.last_prediction[0]:"Waiting for Joke"}</p>
+            
+            <div className={"error " + (this.props.error?'enable':'')}>
+              {this.props.error}
+            </div>
+
+            <button className='btn' onClick={()=>{this.props.dadJokesPredict()}}>Generate New Dad Joke</button>
+            
+        </div>
+        );
+
+    return (
+        <div className="Bai">
+            {content}
+            <div className="about">
+                <h1>About</h1>
+                <p>Note: This is a model with a small dataset, additional data is currently being collected, and will be used to retrain sometime soon. The current model will likely produce random babbling.</p>
+                <p>
+                    The model used in this page was based on the pretrained model GPT-2. You can find more information on openAI's site at <a href="https://openai.com/blog/tags/gpt-2/">https://openai.com/blog/tags/gpt-2/</a>
+                </p>
+                <p>
+                    The dataset that was used to retrain the model can be found at the following link
+                    <a href="https://www.kaggle.com/datasets/camerinfigueroa/rdadjokes">https://www.kaggle.com/datasets/camerinfigueroa/rdadjokes</a>
+                </p>
+                <p>
+                    The following Google Colab link will bring you to the notebook used to retrain GPT-2 with out dataset
+                    <a href="https://colab.research.google.com/drive/1VLG8e7YSEwypxU-noRNhsv5dW4NfTGce">Google Colab</a>
+                </p>
+            </div>
+        </div>
+    );
+  }
+}
+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, dadJokesPredict, error_msg})(Bai);