Next, we’ll load a pre-trained model (e.g., MobileNet) when the component mounts. We can use the useEffect
hook for this purpose:
import React, { useState, useEffect } from 'react';
import * as tf from '@tensorflow/tfjs';
import '@tensorflow/tfjs-backend-cpu';
import '@tensorflow/tfjs-backend-webgl';
function ImageClassifier() {
const [image, setImage] = useState(null);
const [model, setModel] = useState(null);
useEffect(() => {
const loadModel = async () => {
const loadedModel = await tf.loadGraphModel('https://path-to-model/model.json');
setModel(loadedModel);
};
loadModel();
}, []);
const handleImageUpload = (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = () => {
setImage(reader.result);
};
if (file) {
reader.readAsDataURL(file);
}
};
return (
<div>
<input type="file" accept="image/*" onChange={handleImageUpload} />
{image && <img src={image} alt="Uploaded" />}
</div>
);
}
export default ImageClassifier;