diff --git a/client/components/Home.js b/client/components/Home.js index f9137e9..1ea5be6 100644 --- a/client/components/Home.js +++ b/client/components/Home.js @@ -15,7 +15,7 @@ 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; @@ -23,20 +23,17 @@ export const Home = (props) => { 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,20 +70,15 @@ 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 @@ -94,49 +86,29 @@ export const Home = (props) => { 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 (