Tensorflow automl model 在反应

Question

我正在尝试将 tensorflow model 从其原始 html 移动到反应应用程序（使用 create-react-app 构建）。

我的 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;

我的 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>

我收到以下错误，这似乎是从loadImageClassification方法中的某个地方发出的：

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

编辑：

显然 loadImageClassification 在后台使用了一个获取请求，因此需要一个远程文件（这很奇怪，因为它在 static 索引中似乎工作正常。html 同一项目的原始版本）。

所以我现在正在尝试使用 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");
});

当我导航到 localhost5000 时，我可以看到正确的数据，但是当我更改时

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

至

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

我收到这些错误：

编辑2：

我的 server.js 文件现在看起来像这样：

这会产生与上一个屏幕截图相同的错误。 （我在评论中留下了试图在此 server.js 文件屏幕截图中包含所有分片文件的混乱，因为它可能说明我不明白如何在获取时将那些辅助 model 文件传递给loadImageClassification要求。）

所以现在的问题可能与loadImageClassification假设...shard__of6.bin和dict文件与model.json文件位于同一目录中的事实有关。

所以问题可能（？）是：如何模拟它（即loadImageClassification ）在远程节点服务器中所期望的文件结构。

基本混乱：

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

model 在您的本地设备上的位置是什么？

尝试改变

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

至

const modelUrl = 'model/model.json'

如果 model 在 build/model/ 或任何位置。

Tensorflow automl model 在反应

问题描述

编辑：

编辑2：

基本混乱：

1 个解决方案

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

Tensorflow automl model 在反应

问题描述

编辑：

编辑2：

基本混乱：

1 个解决方案

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

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