Added Error Messaging to BAI Page

public/index.html

@@ -44,6 +44,7 @@
   
   <!-- Hotjar Tracking Code for https://www.camscode.com -->
   <script>
+    /*
     (function(h,o,t,j,a,r){
         h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
         h._hjSettings={hjid:2739788,hjsv:6};
@@ -51,6 +52,6 @@
         r=o.createElement('script');r.async=1;
         r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
         a.appendChild(r);
-    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');*/
   </script>
 </html>

src/actions/index.js

@@ -137,6 +137,16 @@ export const predict = (image) => async (dispatch, getState) => {
   return prediction;
 };
 
+export const error_msg = (message) => async (dispatch, getState) => {
+  
+  console.log(message);
+
+  dispatch({
+    type: 'SET_ERROR',
+    payload: message
+  });
+};
+
 export const nextPage = () => async (dispatch, getState) => {
   let page = getState().github.page;
   page++;

src/components/Bai.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import {downloadModel, loadingModel, predict} from '../actions'
+import {downloadModel, loadingModel, predict, error_msg} from '../actions'
 import ProgressBar from "./subcomponents/ProgressBar";
 //import { Link } from 'react-router-dom';
 import './css/Bai.css';
@@ -17,13 +17,23 @@ class Bai extends React.Component {
     document.title = "Blank 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")  
 
-    if (file) {
+    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);
         
@@ -33,6 +43,8 @@ class Bai extends React.Component {
 
         image.src = await URL.createObjectURL(file);
         image.classList.add('show');
+    } else {
+      this.props.error_msg('Please pass JPG or PNG file Only');
     }
   }
 
@@ -62,7 +74,11 @@ class Bai extends React.Component {
             <h1>BAI Model Prediction</h1>
 
             <p className="prediction">{this.props.last_prediction ? this.declassify(this.props.last_prediction[0]):"Waiting for Prediction"}</p>
-        
+            
+            <div className={"error " + (this.props.error?'enable':'')}>
+              {this.props.error}
+            </div>
+
             <img id="preview" alt="preview of predicted file"/>
 
             <input type='file' id="fileSubmit" onChange={({target}) => this.fileUpload(target, this.props.predict)} />
@@ -84,7 +100,7 @@ class Bai extends React.Component {
   }
 }
 const mapStateToProps = (state) => {
-  return {model: state.model.model, loading: state.model.loading, last_prediction: state.model.last_prediction, downloadProgress: state.model.progress};
+  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})(Bai);
+export default connect(mapStateToProps, {downloadModel, loadingModel, predict, error_msg})(Bai);

src/components/css/Bai.css

@@ -69,4 +69,17 @@
 
 .Bai .hide {
     display: none;
+}
+
+.Bai .error {
+    display:none;
+}
+
+.Bai .error.enable{
+    justify-content: center;
+    display:flex;
+    color: white;
+    background-color: #CB2323;
+    padding: 8px;
+    border-radius: 5px;
 }

src/reducers/modelReducer.js

@@ -7,6 +7,8 @@ let modelReducer = (state={model: null, loading: "", progress: 0}, action) => {
         return { ...state, loading: action.payload };
       case 'SET_LAST_PRED':
         return { ...state, last_prediction: action.payload };
+      case 'SET_ERROR':
+        return { ...state, error: action.payload };
       case 'SET_PROGRESS':
         return { ...state, progress: action.payload };