Tensorflow.js Model Prediction Output Never Changes - reactjs

Question

I have a custom trained tensorflow.js graph model (link can be found in the getModel method) to recognize images of fly agarics. However, the prediction output (result from model.executeAsync()) never changes - this is evident in the console.log in the renderPredictions method.
Greatly appreciate any help.
webcamView.tsx
import { useEffect, useRef, useState } from "react";
import * as tf from '#tensorflow/tfjs-core';
import { loadGraphModel } from "#tensorflow/tfjs-converter";
import '#tensorflow/tfjs-backend-cpu';
export default function WebcamView() {
const videoWidth = 640;
const videoHeight = 500;
const videoRef = useRef<HTMLVideoElement>(null);
const [loading, setLoading] = useState<Boolean>(true);
let model: any = undefined;
const getModel = async () => {
model = await loadGraphModel('https://raw.githubusercontent.com/AlanChen4/FungEye/main/data/web_model_old/model.json');
return model;
};
const startVideo = async () => {
navigator.mediaDevices.getUserMedia({
video: {
facingMode: 'environment',
}
}).then(stream => {
if (videoRef.current !== null) {
const video = videoRef.current;
video.srcObject = stream;
video.onloadedmetadata = () => {
video.play();
video.addEventListener('loadeddata', processVideoInput);
}
}
})
};
const renderPredictions = (predictions: any) => {
const predictionBoxes = predictions[6].dataSync();
const predictionClasses = predictions[2].dataSync();
const predictionScores = predictions[4].dataSync();
// this always prints the same scores
console.log(predictionScores);
};
const processVideoInput = () => {
// classify the frame in the video stream and then repeat to process the next frame
if (videoRef.current !== null) {
classifyVideoInput(videoRef.current).then(() => {
window.requestAnimationFrame(processVideoInput);
})
}
}
const classifyVideoInput = async (videoImage: HTMLVideoElement) => {
// get next video frame
await tf.nextFrame();
// convert tensor to image
const tfImage = tf.browser.fromPixels(videoImage);
// convert image to smaller image in order to match detection size
const smallerImage = tf.image.resizeBilinear(tfImage, [videoHeight, videoWidth]);
// convert smaller image to format usable by model
const resizedImage = tf.cast(smallerImage, 'int32');
let tf4d_ = tf.tensor4d(Array.from(resizedImage.dataSync()), [1, videoHeight, videoWidth, 3]);
const tf4d = tf.cast(tf4d_, 'int32');
// generate predictions from model
let predictions = await model.executeAsync(tf4d);
renderPredictions(predictions);
tfImage.dispose();
smallerImage.dispose();
resizedImage.dispose();
tf4d.dispose();
};
useEffect(() => {
const start = async () => {
await getModel();
await startVideo();
setLoading(false);
};
start();
}, []);
return (
<div className="p-8">
<div className="flex justify-center p-5">
<div id="videoView" style={{ cursor: 'pointer' }}>
{loading
? <p className="text-center text-semibold p-5">Loading Model...</p>
: <video ref={videoRef} playsInline autoPlay muted width={videoWidth} height={videoHeight}></video>
}
</div>
</div>
</div>
);
};
I have checked to make sure that video processing only occurs after the video has loaded. I've checked numerous threads and posts but can not seem to find the cause of this issue. I am using tensorflow.js 3.1.0.