Как конвертировать Файл в Тензор в JavaScript

Question

Я пытаюсь создать простой пример классификации изображений с помощью MobileNet. Я пытаюсь заставить его работать с реагировать-dropzone , где я оказался в ситуации, когда мне нужно конвертировать изображение типа File в Tensor, чтобы иметь возможность передать его вmodel.classify.

Я также пытался использовать fromPixels, но для этого я должен преобразовать свое изображение в 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>
  );
}

Любая помощь с этим будет высоко ценится.

Answer 1

Файл должен быть прочитан, а его результат назначен тегу изображения. Как только изображение загружено, оно может быть преобразовано в тензор.

    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)
    }