反应中的 Tensorflow automl 模型
Tensorflow automl model in react
我正在尝试将 tensorflow 模型从其原始 html 移动到 React 应用程序(使用 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 在后台使用获取请求,因此需要一个远程文件(这很奇怪,因为它似乎在同一个项目的静态 index.html 原始版本中工作正常)。
所以我现在正在尝试使用本地主机快速服务器,目前看起来像这样:
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 文件截图中的混乱,只是因为它可能说明我不明白如何将这些辅助模型文件传递给 loadImageClassification
当它发出获取请求时。)
所以现在问题可能与以下事实有关:loadImageClassification
假设 ...shard__of6.bin
和 dict
文件与 model.json
文件位于同一目录中.
所以问题可能(?)是:如何模拟它(即loadImageClassification
)在远程节点服务器中期望的文件结构。
根本的困惑:
我不明白为什么当 loadImageClassification 在原始静态 html 中时,它似乎不需要从中获取 model.json 的远程 url —但是当我把它放在我的 React 应用程序中时,它突然给我这个错误:“Fetch API cannot load file:///Users///client/src/model.json. URL 方案必须是 'http' 或 'https' 用于 CORS 请求。"
模型在您本地设备上的位置是什么?
尝试改变
const modelUrl = "http://localhost:5000/"
至
const modelUrl = 'model/model.json'
如果模型在 build/model/,或任何位置。
我正在尝试将 tensorflow 模型从其原始 html 移动到 React 应用程序(使用 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 在后台使用获取请求,因此需要一个远程文件(这很奇怪,因为它似乎在同一个项目的静态 index.html 原始版本中工作正常)。
所以我现在正在尝试使用本地主机快速服务器,目前看起来像这样:
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 文件截图中的混乱,只是因为它可能说明我不明白如何将这些辅助模型文件传递给 loadImageClassification
当它发出获取请求时。)
所以现在问题可能与以下事实有关:loadImageClassification
假设 ...shard__of6.bin
和 dict
文件与 model.json
文件位于同一目录中.
所以问题可能(?)是:如何模拟它(即loadImageClassification
)在远程节点服务器中期望的文件结构。
根本的困惑:
我不明白为什么当 loadImageClassification 在原始静态 html 中时,它似乎不需要从中获取 model.json 的远程 url —但是当我把它放在我的 React 应用程序中时,它突然给我这个错误:“Fetch API cannot load file:///Users///client/src/model.json. URL 方案必须是 'http' 或 'https' 用于 CORS 请求。"
模型在您本地设备上的位置是什么?
尝试改变
const modelUrl = "http://localhost:5000/"
至
const modelUrl = 'model/model.json'
如果模型在 build/model/,或任何位置。