This branch is to preserve the tm Model Branch

client/components/Home.js

@@ -15,28 +15,25 @@ export const Home = (props) => {
   const canvasRef = useRef(null);
   const [translation, setTranslation] = useState(null);
 
-  const URL = "https://teachablemachine.withgoogle.com/models/HBBfwFtF-/";
+  const URL = "https://teachablemachine.withgoogle.com/models/SdeOHBnL5/";
 
   let model, webcam, labelContainer, maxPredictions;
 
   const checkpointURL = URL + "model.json";
   const metadataURL = URL + "metadata.json";
   const loadModel = async () => {
     const model = await tmImage.load(checkpointURL, metadataURL);
-    console.log("model-----hi", model);
-    console.log("hi");
+    console.log("Model Loaded", model);
     const net = await handpose.load();
     console.log("net", net);
     setInterval(() => {
       detect(model, net);
-    }, 1000);
+    }, 500);
   };
 
   //Loop and detect hands
 
   async function detect(model, net) {
-    // predict can take in an image, video or canvas html element
-    // let prediction; what is this?
     if (
       typeof webcamRef.current !== "undefined" &&
       webcamRef.current !== null &&
@@ -61,7 +58,7 @@ export const Home = (props) => {
       //make detections for hands and finger gestures
       if (hand.length > 0) {
         const gestureEstimator = new fp.GestureEstimator([
-          // fp.Gestures.VictoryGesture,
+          //do we need this thumgs up gesture estimator?
           fp.Gestures.ThumbsUpGesture,
         ]);
 
@@ -73,70 +70,45 @@ export const Home = (props) => {
           const maxScore = score.indexOf(Math.max.apply(null, score));
 
           console.log("gestures name is -", gesture.gestures[maxScore].name);
-          // setEmoji(gesture.gestures[maxScore].name);
-
-          // console.log("EMOJI", emoji);
         }
       } else {
+        // Kaia just added the line below
+        setTranslation(null);
         return;
       }
-      // if (hand.length === 0) {
-      //   setTranslation[null];
-
       let prediction = await model.predict(video);
       console.log("PREDICTION-----", prediction);
 
-      //-------
       if (prediction && prediction.length > 0) {
         const probability = prediction.map(
           (prediction) => prediction.probability
         );
         console.log(probability);
         const maxPro = probability.indexOf(Math.max.apply(null, probability));
 
-        if (prediction[maxPro].probability > 0.9) {
+        // Kaia just added the line below (hand.length > 0)
+        if (prediction[maxPro].probability > 0.9 && hand.length > 0) {
           setTranslation(prediction[maxPro].className);
         } else {
           setTranslation(null);
         }
-        // console.log("gestures name is -", prediction[maxPro].name);
-
-        // console.log("TRANSLATION---", translation);
-        // setEmoji(gesture.gestures[maxScore].name);
-
-        // console.log("EMOJI", emoji);
       } else {
         return;
       }
-      /*
-
-
-
-      */
-
-      //-------
-      // for (let i = 0; i < maxPredictions; i++) {
-      //   const classPrediction =
-      //     prediction[i].className + ": " + prediction[i].probability.toFixed(2);
-      //   // labelContainer.childNodes[i].innerHTML = classPrediction;
-      // }
-      //draw mesh
+
       const ctx = canvasRef.current.getContext("2d");
       drawHand(hand, ctx);
     }
   }
-  useEffect(() => { loadModel() }, [])
-  //only happens when you load the model
-  //state/
-  //use effect will update everytime that state changes
-  // const { username } = props;
+  useEffect(() => {
+    loadModel();
+  }, []);
 
   return (
     <div>
       <Webcam
         ref={webcamRef}
         style={{
-          // marginTop: -240,
           marginRight: "auto",
           marginLeft: "auto",
           position: "absolute",
@@ -153,20 +125,17 @@ export const Home = (props) => {
           marginLeft: "auto",
           marginRight: "auto",
           position: "absolute",
-          // marginTop: -240,
           textAlign: "center",
           zIndex: 9,
           width: 540,
           height: 480,
-          // background: "red",
         }}
       />
       <div
         style={{
           backgroundColor: "red",
           color: "black",
           fontSize: 30,
-
           marginLeft: 600,
         }}
       >
@@ -175,9 +144,8 @@ export const Home = (props) => {
     </div>
   );
 };
-/**
- * CONTAINER
- */
+
+
 const mapState = (state) => {
   return {
     username: state.auth.username,