added loading page and improved onBoarding pages

Author: Ayaan Farooqui

public/favicon.ico

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Sign-it",
+  "name": "Sign-it ASL Translator App",
   "icons": [
     {
       "src": "favicon.ico",

public/logo192.png

@@ -1,14 +1,14 @@
 import Detector from "./detector/Detector";
 import { useState, useLayoutEffect } from 'react';
-import { getCookie } from "./helperFunctions";
+// import { getCookie } from "./helperFunctions";
 import OnBoardingScreen from "./onBoardingScreen/OnBoardingScreen";
 import { theme } from "./Theme";
 import { ThemeProvider } from '@mui/material/styles';
 import './onBoardingScreen/transitionStyles.css';
 
 const stepColors = {
   0: "#4abdac",
-  1: "#e8a87c",
+  1: "#7d94b5",
   2: "#eb6e80",
 }
 
@@ -22,7 +22,7 @@ function App() {
   const handleSkip = () => setShowOnboardingScreen(false)
 
   useLayoutEffect(() => {
-    let isUserOnboarded = getCookie("isUserOnboarded");
+    // let isUserOnboarded = getCookie("isUserOnboarded");
     // if (isUserOnboarded === "") {
     //   document.cookie = "isUserOnboarded=true";
     // }
@@ -35,20 +35,17 @@ function App() {
   return (
 
     <ThemeProvider theme={theme}>
-      <div className="App" style={{ display: "flex", justifyContent: "center", backgroundColor: showOnboardingScreen ? stepColors[activeStep] : "#dfdce3", height: "100vh", width: "100vw" }}>
-        <div style={{ width: "min(100%, 800px)" }}>
-          {
-            showOnboardingScreen ?
-              <OnBoardingScreen
-                handleNext={handleNext}
-                handleSkip={handleSkip}
-                activeStep={activeStep}
-              />
-              :
-              <></>
-          }
-          {/* <Detector /> */}
-        </div>
+      <div className="App" style={{ display: "flex", justifyContent: "center", backgroundColor: showOnboardingScreen ? stepColors[activeStep] : "#dfdce3", height: "100vh", width: "100%" }}>
+        {
+          showOnboardingScreen ?
+            <OnBoardingScreen
+              handleNext={handleNext}
+              handleSkip={handleSkip}
+              activeStep={activeStep}
+            />
+            :
+            <Detector />
+        }
       </div>
     </ThemeProvider>
   )

public/logo512.png

@@ -6,6 +6,15 @@ export const theme = createTheme({
         fontFamily: " 'Roboto', sans-serif",
         button: {
             textTransform: "none",
+        },
+        h1: {
+            fontSize: 40,
+        },
+        h2: {
+            fontSize: 32,
+        },
+        h3: {
+            fontSize: 25,
         }
     }
 });

public/manifest.json

@@ -1,17 +1,18 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import * as mpHolistic from "@mediapipe/holistic";
 import * as tf from '@tensorflow/tfjs';
-import { CircularProgress } from "@mui/material";
 import { Camera } from '@mediapipe/camera_utils';
 import { onResults } from "./helperFunctions";
+import { Typography } from "@mui/material";
+import LoadingComponent from './LoadingComponent';
 
 function Detector() {
 
-  const [showLoadingSpinner, setShowLoadingSpinner] = useState(true)
+  const [loadingStates, setLoadingStates] = useState(0)
   const videoElementRef = useRef();
   const [holisticModel, setHolisticModel] = useState(null);
 
-  useEffect(() => {
+  const initCamera = useCallback(() => {
     // Start the camera using mediapipe camera utility
     if (typeof videoElementRef.current !== "undefined" && videoElementRef.current !== null && holisticModel !== null) {
       const camera = new Camera(videoElementRef.current, {
@@ -26,12 +27,14 @@ function Detector() {
     // --------------------------------------------------
   }, [videoElementRef, holisticModel])
 
+  console.log(initCamera)
+
   useEffect(() => {
     // load our custom model and set it
     const speechSynthesisUtterance = new SpeechSynthesisUtterance();
     tf.loadLayersModel('jsonmodel/model.json')
       .then(fetched_model => {
-        console.log("fetched custom model")
+        setLoadingStates(1)
         // initialize the holistic model
         const holistic = new mpHolistic.Holistic({
           locateFile: (file) => {
@@ -43,8 +46,7 @@ function Detector() {
         holistic.onResults((results) => onResults(results, fetched_model, speechSynthesisUtterance));
         holistic.initialize()
           .then(res => {
-            console.log("Initialized Mp holistic model")
-            setShowLoadingSpinner(false)
+            setLoadingStates(2)
             setHolisticModel(holistic)
           })
         // -----------------------------
@@ -55,20 +57,15 @@ function Detector() {
     // ------------------------------------------
   }, [])
 
-  if (showLoadingSpinner)
+  if (loadingStates < 2)
     return (
-      <div className="loading">
-        <CircularProgress />
-      </div>
+      <LoadingComponent loadingStates={loadingStates} />
     )
   else
     return (
-      <div className="App">
-        <div className="container">
-          <p >Webcam Input</p>
-          <video ref={videoElementRef} ></video>
-        </div>
-
+      <div className="container">
+        <Typography >Webcam Input</Typography>
+        <video ref={videoElementRef} ></video>
       </div>
     )
 }

public/res/Sign-it.png

@@ -0,0 +1,41 @@
+import { LoadingDiv } from "./detectorStyles";
+import { Typography, Box, CircularProgress } from "@mui/material";
+
+export default function LoadingComponent(props) {
+    return (
+        <LoadingDiv >
+            <div>
+                <div className="dot1">
+                </div>
+                <div className="dot2">
+                </div>
+                <div className="dot3">
+                </div>
+            </div>
+            <div style={{ margin: "50px 50px 25px 50px" }}>
+                <Typography component="h3" textAlign="center">Please wait while we get a few things ready!</Typography>
+            </div>
+            <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+                <CircularProgress variant="determinate" value={props.loadingStates === 0 ? 0 : props.loadingStates === 1 ? 50 : 100} />
+                <Box
+                    sx={{
+                        top: 0,
+                        left: 0,
+                        bottom: 0,
+                        right: 0,
+                        position: 'absolute',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <Typography
+                        variant="caption"
+                        component="div"
+                        color="text.secondary"
+                    >{props.loadingStates}/2</Typography>
+                </Box>
+            </Box>
+        </LoadingDiv>
+    );
+};