I'm trying to create a simple example of Image classification using MobileNet.
I'm trying to make it works with react-dropzone where I ended up in a situation that I need to convert image which is the type of File
to Tensor
to be able to pass it to model.classify
.
I have also tried to use fromPixels
but for that, I have to convert my image to ImageData
.
export default function ImageClassification() {
const [isModelLoaded, setModelLoaded] = useState(false);
const [uploadedFile, setUploadedFile] = useState();
const [classifier, setClassifier] = useState();
useEffect(() => {
async function modelReady() {
console.log("Not loaded:" + isModelLoaded);
setClassifier(
await MobileNet.load().then(model => {
setModelLoaded(true);
return model;
})
);
}
modelReady();
}, []);
function onDrop(acceptedFiles: File[]) {
console.log(acceptedFiles);
setUploadedFile(acceptedFiles);
console.log("After setting");
}
function prepareImage(inputFile: File) {
// How to convert inputFile to Tensor???
return image;
}
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
return (
<React.Fragment>
{!isModelLoaded ? (
<CircularProgress />
) : (
<div {...getRootProps()}>
<input {...getInputProps()} />
{isDragActive ? (
<p>Drop the files here.. </p>
) : (
<p>Drag 'n' drop some files here, or click to select files</p>
)}
{uploadedFile &&
uploadedFile.map((item: File) => {
const input = prepareImage(item);
classifier.classify(input);
return <h1>{item.name}</h1>;
})}
</div>
)}
</React.Fragment>
);
}
Any help with these will be much appreciated.
The file need to be read and its result assigned to an image tag. Once the image is loaded, it can be converted to a tensor.
const im = new Image()
var fr = new FileReader();
fr.onload = function () {
im.src = fr.result;
}
fr.readAsDataURL(inputFile);
im.onload = () => {
const a = tf.browser.fromPixels(im)
}