import React, { useState } from 'react';
function ImageClassifier() {
const [image, setImage] = useState(null);
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;
Next, we’ll load a pre-trained model (e.g., MobileNet) when the component mounts. We can use the useEffect
hook for this purpose: