如何上传图像并传递到tensorflowjs模型，以便使用reactjs进行预测？

编辑 使用图形模型格式和更新的代码示例，我成功地让它返回预测。现在的问题是，无论我输入哪个图像，它总是返回1，所以想知道我是否输入了正确的图像数据？

第二次编辑：更改了我传入img对象的方式，但仍然为我提供的每个图像获得1。

我刚刚开始研究tensorflowjs，我使用的是一个预先构建的keras模型。该模型是一个二元分类器。该模型已保存为

.h5

文件，我被要求使用tensorflowjs和react在浏览器中运行它。基本上，我想从本地存储器或sd卡中选择一个图像，并将其输入模型，以获得

yes

或

no

分类

我遵循tensorflowjs将keras模型转换为TF.js层格式，但无法加载模型。我得到一个关于

未知层的错误：RandomFlip

。因此，我尝试将模型转换为图形模型，因为我无法找到错误的解决方案，因此我想尝试一下。这会加载模型，但在向其提供图像时会出现更多问题

model.execute（dict）中提供的dict['image\u tensor']的形状必须为[-1380380,1]，但为[380380]

。然后我搜索了一下，把它的大小调整到

[-1380380,1]

，但后来它抱怨大小不是预期的，所以我想我可能把前面的一些步骤搞砸了

为了转换为图形模型，我使用了以下命令：

tensorflowjs\u converter--input\u format keras--output\u format tfjs\u layers\u model/Users/myUser/Documents/save\u at_45.h5/Users/myUser/Documents/convert keras model

，并在我的代码中使用

loadGraphModel

方法加载它。遵循此路径至少允许我加载模型

我还尝试将其转换为层格式，方法是：

tensorflowjs\u converter--input\u format keras--output\u format tfjs\u Layers\u model/Users/myUser/Documents/save\u，位于45.h5/myUser/mariomendes/Documents/convert keras model

，并在代码中使用

loadLayersModel

加载它。这将返回错误

未知层：RandomFlip

。我已经试着寻找解决这个问题的方法，但一直没有找到

知道它是

.h5

文件是否意味着我应该知道它是否需要转换为tf图形格式或图层格式，或者是否有其他东西决定它应该转换为哪种格式

我已经将转换后的模型以两种格式存储在S3中，并从S3中获取它的权重

对于我的react代码，我执行了以下操作：

import React, { useState, useEffect } from "react";
import "./index.css";
import * as tf from "@tensorflow/tfjs";

function ImgImporter() {
  const [file, setFile] = useState(null);
  const [model, setModel] = useState(null);
  const [processing, setProcessing] = useState(false);
  const [prediction, setPrediction] = useState(null);
  const [imageLoaded, setImageLoaded] = useState(false);

  function readImage(file) {
    return new Promise((rs, rj) => {
      const fileReader = new FileReader();
      fileReader.onload = () => rs(fileReader.result);
      fileReader.onerror = () => rj(fileReader.error);
      fileReader.readAsDataURL(file);
    });
  }

  async function handleImgUpload(event) {
    const {
      target: { files },
    } = event;

    const _file = files[0];
    const fileData = await readImage(_file);
    setFile(fileData);
    setProcessing(true);
  }

  useEffect(() => {
    async function loadModel() {
      if (!model) {
        const _model = await tf.loadGraphModel("/model.json");
        setModel(_model);
      }
    }

    loadModel();
  });

  useEffect(() => {
    async function predict() {
      if (imageLoaded && file) {
        const imageElement = document.createElement("img");
        imageElement.src = file;

        imageElement.onload = async () => {
          const tensor = tf.browser
            .fromPixels(imageElement, 1)
            .resizeNearestNeighbor([380, 380])
            .expandDims()
            .toFloat();

          const prediction = await model.predict(tensor).data();

          setPrediction(parseInt(prediction, 10));
          setProcessing(false);
          setImageLoaded(false);
        };
      }
    }

    predict();
  }, [imageLoaded, model, file]);

  return (
    <div className="File-input-container">
      <form className="Form">
        <label htmlFor="upload-image">Upload image</label>
        <input
          id="image-selector"
          type="file"
          name="upload-image"
          accept="image/*"
          className="File-selector"
          onChange={handleImgUpload}
          disabled={!model || processing}
        />
      </form>
      <div className="Img-display-container">
        <img
          onLoad={() => {
            setImageLoaded(true);
          }}
          alt=""
          src={file}
        />
      </div>
      <div className="Img-processing-container">
        {processing ? (
          <p>Loading ...</p>
        ) : prediction !== null ? (
          <div>
            <p>{prediction === 1 ? "Yes" : "No"}</p>
          </div>
        ) : null}
      </div>
    </div>
  );
}

export default ImgImporter;

---

如果有人能解释一下或者帮我找到正确的方向，那就太好了。

如果你想得到值，你可以使用

prediction.dataSync（）

或者它的promise对应物

wait prediction.data（）

如果你想得到值，你可以使用

prediction.dataSync（）

或其承诺对应方

等待预测。关于第二次编辑的数据（）。您正在将图像转换为浮点数，但是模型是否期望标准化的浮点数？您可能需要附加.div（255）或任何需要的规范化。请为您的模型张贴规格

另外，正如Edkeveke所说，您可以使用
dataSync（）
获取数据，但值得注意的是，您也可以使用
arraySync
，这将保持返回的张量深度

还有，我注意到你没有做任何清理工作。因此，您的张量将在GPU内存中建立。别忘了处理

我希望这些东西能对你有所帮助。
关于你的第二次编辑。您正在将图像转换为浮点数，但是模型是否期望标准化的浮点数？您可能需要附加.div（255）或任何需要的规范化。请为您的模型张贴规格

另外，正如Edkeveke所说，您可以使用
dataSync（）
获取数据，但值得注意的是，您也可以使用
arraySync
，这将保持返回的张量深度

还有，我注意到你没有做任何清理工作。因此，您的张量将在GPU内存中建立。别忘了处理

我希望这些东西有用。
谢谢。我做到了。它仍然没有解释我应该将模型转换为哪种格式，或者它背后的原因。然而，考虑到图形格式似乎是唯一有效的格式，我想可以安全地假设它应该转换为哪种格式？如果你有一个图形模型，那么你需要使用图形格式进行转换。同样，如果您有一个分层模型，那么您需要使用层格式来转换它。我做到了。它仍然没有解释我应该将模型转换为哪种格式，或者它背后的原因。然而，考虑到图形格式似乎是唯一有效的格式，我想可以安全地假设它应该转换为哪种格式？如果你有一个图形模型，那么你需要使用图形格式进行转换。同样，如果您有一个分层模型，那么您需要使用层格式来转换它
dataId: {id: 195}
dtype: "float32"
id: 94
isDisposedInternal: false
kept: false
rankType: "2"
scopeId: 6
shape: (2) [1, 1]
size: 1
strides: [1]