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);
const [predictions, setPredictions] = 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 = async () => {
const img = new Image();
img.src = reader.result;
img.onload = async () => {
const tensor = tf.browser.fromPixels(img)
.resizeNearestNeighbor([224, 224])
.toFloat()
.expandDims();
const predictions = await model.predict(tensor).data();
setPredictions(predictions);
};
};
if (file) {
reader.readAsDataURL(file);
}
};
return (
<div>
<input type="file" accept="image/*" onChange={handleImageUpload} />
{image && <img src={image} alt="Uploaded" />}
{predictions && (
<ul>
{predictions.map((pred, index) => (
<li key={index}>{pred}</li>
))}
</ul>
)}
</div>
);
}
export default ImageClassifier;
You can enhance the user experience by displaying the predictions in a user-friendly format, such as showing the top 3 predictions with confidence scores.