load model.json for tensorflowjs in reactjs

Question

我正在尝试从我的react应用程序中的根目录中加载一个带有权重.bin的model.json文件。

当我调用我从 storage.googleapis.com 在线找到的示例时，它有效，但从我的根加载不起作用。

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 方案仅用于加载模型服务器端。要在浏览器中加载模型，可以提示用户选择模型拓扑（model.json）和权重文件。该文档包含一个示例，说明如何通过使用文件输入元素提示用户来加载模型。file://url如果不要求用户选择模型文件，则需要由服务器提供模型。例如，model.json 和权重可以位于所部署应用程序的资产文件夹中。然后，url只需要指向没有，如下所示：model.jsonfile://const&nbsp;myModel&nbsp;=&nbsp;await&nbsp;tf.loadLayersModel("assets/my-model.json");如果在加载模型时出现一些错误，请查看开发人员控制台中的“网络”选项卡将有助于查看是否找到该文件