Real-Time Predictions Development Tutorials, Guides & Insights

Now that we have the model loaded and an image selected, we can run predictions on the uploaded image. TensorFlow.js allows us to process the image and get predictions using the loaded model.

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;