Tensorflow automl model 在反应

Question

I'm trying to move a tensorflow model from its original html into a react app (built with create-react-app).我正在尝试将 tensorflow model 从其原始 html 移动到反应应用程序（使用 create-react-app 构建）。

My App.js looks like this:我的 App.js 看起来像这样：

import logo from './logo.svg';
import * as tf from "@tensorflow/tfjs";
// import { loadImageclassification } from "@tensorflow/tfjs";
import './App.css';
import * as automl from "@tensorflow/tfjs-automl";
import * as modelJSON from './model.json';

function App() {

var loadFile = function(event) {
    var image = document.getElementById('output');
    image.src = URL.createObjectURL(event.target.files[0]);
  run();
};

async function run() {
  console.log(modelJSON);
        // const model = await tf.loadImageclassification('model.json');
        const model = await automl.loadImageClassification(modelJSON);
        const image = document.getElementById('output');
        const predictions = await model.classify(image);
        console.log(predictions);

        const pre = document.getElementById('result');
        pre.textContent = JSON.stringify(predictions, null, 2);
}

  return (
  <div className="App">
    <div className="hero-text">
      <h1>classifier</h1>
      <h3>Upload a picture to see what type it is! </h3>
      <p>
        <input type="file"  accept="image/*" name="image" id="file"  onChange={loadFile} />
      </p>
      <div id="demobox">
        <p>
          <label htmlFor="file">Upload your image</label>
        </p>
      </div> 
      <p><img id="output" width="200" alt="output" /></p>
      <div className="result" id="result">
      </div>
    </div>
  </div>
  );
}

export default App;

My index.html looks like this:我的 index.html 看起来像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

I am getting the following error, which seems to be issuing from somewhere in the loadImageClassification method:我收到以下错误，这似乎是从loadImageClassification方法中的某个地方发出的：

Unhandled Rejection (TypeError): modelUrl.lastIndexOf is not a function

Edit:编辑：

Apparently loadImageClassification uses a fetch request under the hood and so requires a remote file (which is strange, because it seemed to work fine in the static index.html original version of this same project).显然 loadImageClassification 在后台使用了一个获取请求，因此需要一个远程文件（这很奇怪，因为它在 static 索引中似乎工作正常。html 同一项目的原始版本）。

So I am now trying it just with a localhost express server, which at present looks like this:所以我现在正在尝试使用 localhost express 服务器，目前看起来像这样：

const modelJSON = require('./model.json');

const express = require("express");
const bodyParser = require("body-parser");
const CORS = require("cors");

const app = express();

app.use(bodyParser.json());
app.use(CORS());

let modelObj = modelJSON;

app.get("/", (req, res) => {
  // console.log(modelObj);
  res.send(modelObj);
});

app.listen(5000, () => {
  console.log("Server listening on port 5000");
});

I can see the correct data when I navigate to localhost5000, but when I change当我导航到 localhost5000 时，我可以看到正确的数据，但是当我更改时

async function run() {
  const model = await automl.loadImageClassification(modelJSON);

to至

async function run() {
  const modelUrl = "http://localhost:5000/";
  const model = await automl.loadImageClassification(modelUrl);

I get these errors:我收到这些错误：

Edit 2:编辑2：

My server.js file now looks like this:我的 server.js 文件现在看起来像这样：

This produces the same errors as in the previous screenshot.这会产生与上一个屏幕截图相同的错误。 (I am leaving in the comments that mess of an attempt to include all the shard files in this server.js file screenshot just because it may illustrate that I don't understand how to pass those ancillary model files to loadImageClassification when it makes its fetch request.) （我在评论中留下了试图在此 server.js 文件屏幕截图中包含所有分片文件的混乱，因为它可能说明我不明白如何在获取时将那些辅助 model 文件传递给loadImageClassification要求。）

So presumably the problem now has to do with the fact that loadImageClassification assumes that the ...shard__of6.bin and dict files are in the same directory as the model.json file.所以现在的问题可能与loadImageClassification假设...shard__of6.bin和dict文件与model.json文件位于同一目录中的事实有关。

So the question may (?) be: how to simulate the file structure that it (ie, loadImageClassification ) is expecting within a remote node server.所以问题可能（？）是：如何模拟它（即loadImageClassification ）在远程节点服务器中所期望的文件结构。

Fundamental confusion:基本混乱：

I'm don't understand why, when loadImageClassification is in the original static html, it does not seem to require a remote url from which to fetch model.json — but then when I put it in my react app, it suddenly gives me this error: "Fetch API cannot load file:///Users///client/src/model.json. URL scheme must be 'http' or 'https' for CORS request." I'm don't understand why, when loadImageClassification is in the original static html, it does not seem to require a remote url from which to fetch model.json — but then when I put it in my react app, it suddenly gives me this error: "Fetch API cannot load file:///Users///client/src/model.json. URL scheme must be 'http' or 'https' for CORS request."

Answer 1

What's the location of the model on your local device? model 在您的本地设备上的位置是什么？

Try changing尝试改变

const modelUrl = "http://localhost:5000/"

to至

const modelUrl = 'model/model.json'

if the model is in build/model/, or to whatever the location is.如果 model 在 build/model/ 或任何位置。

Tensorflow automl model 在反应

问题描述

Edit:编辑：

Edit 2:编辑2：

Fundamental confusion:基本混乱：

1 个解决方案

解决方案1
1 已采纳 2020-12-22 21:03:24

Tensorflow automl model 在反应

问题描述

Edit:编辑：

Edit 2:编辑2：

Fundamental confusion:基本混乱：

1 个解决方案

解决方案1 1 已采纳 2020-12-22 21:03:24

解决方案1
1 已采纳 2020-12-22 21:03:24