javascript - 在 reactjs 中为 tensorflowjs 加载 model.json 不起作用

Question

我正在尝试从我的 React 应用程序的根目录加载一个 model.json 文件及其 weights.bin。

当我调用一个从 storage.googleapis.com 在线找到的示例时，它可以工作，但从我的根目录加载则不行。

我的 React 应用中 App.js 的内容...

import React from "react";
import "./styles.css";

const tf = require("@tensorflow/tfjs");

// example model - working
async function predict() {
  const model = await tf.loadGraphModel(
    "https://storage.googleapis.com/tfjs-models/savedmodel/mobilenet_v2_1.0_224/model.json"
  );
  console.log(typeof model);
}

// my model - not working
async function predictAlt() {
  const myModel = await tf.loadLayersModel("file://my-model.json");
  console.log(typeof model);
}

export default function App() {
  return (
    <div className="App">
      <button onClick={predict} style={{ fontSize: "20px" }}>
        example model
      </button>
      <br />
      <br />
      <button onClick={predictAlt} style={{ fontSize: "20px" }}>
        my model
      </button>
    </div>
  );
}

Answer 1

文件 URI 方案 file://url 仅用于加载模型服务器端。要在浏览器中加载模型，系统会提示用户选择模型拓扑 (model.json) 和权重文件。 doc包含如何通过使用文件输入元素提示用户来加载模型的示例。

如果不要求用户选择模型文件，则模型需要由服务器提供。例如，model.json 和权重可以位于部署的应用程序的 Assets 文件夹中。然后 url 只需要指向 model.json 而无需 file:// 如下:

const myModel = await tf.loadLayersModel("assets/my-model.json");

如果在加载模型时出现一些错误，查看开发者控制台中的网络选项卡将有助于查看是否找到了文件