Автоматическая модель Tensorflow в реакции
Я пытаюсь переместить модель тензорного потока из исходного html в приложение для реагирования (построенное с помощью приложения create-реагировать).
Мой 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.info(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.info(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 того же проекта).
Итак, теперь я пробую это только с экспресс-сервером localhost, который в настоящее время выглядит так:
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.info(modelObj);
res.send(modelObj);
});
app.listen(5000, () => {
console.info("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, похоже, не требуется удаленный URL-адрес для извлечения model.json, но затем, когда я помещаю его в свое приложение для реагирования, он внезапно дает мне эта ошибка: «Fetch API не может загрузить файл:///Users///client/src/model.json. Схема URL-адреса должна быть «http» или «https» для запроса CORS».
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Каково расположение модели на вашем локальном устройстве?
Попробуйте изменить
const modelUrl = "http://localhost:5000/"
к
const modelUrl = 'model/model.json'
если модель находится в build/model/ или в любом другом месте.
Первоначально я делал это так, как вы предлагаете (хотя я сделал import * as modelJSON from "./model.json";, а затем `const model = await automl.loadImageClassification(modelJSON);` —— Но я получил вышеупомянутую ошибку modelUrl.lastIndexOf is not a function. Я только начал пытаться ее получить в качестве URL-адреса из-за этого поста, который, похоже, решает аналогичную проблему: stackoverflow.com/questions/61804137/…
Смущающий. Ваше предложение сработало, Ярик. const model = await automl.loadImageClassification('model.json'); был тем, чем он должен был быть всегда. Проблема заключалась в том, что, когда я впервые попробовал это, мой файл model.json находился в моем каталоге src, а не в общедоступном. Вот что вывело меня из догматического сна: stackoverflow.com/questions/50007055/… . Сиддхант Варма: «Во-первых, как было предложено в некоторых ответах выше, убедитесь, что ваш файл json находится в общей папке». Позорно. Я иду спать.
Я дам награду, когда это позволит мне сделать это через ~ 20 часов.
Не беспокойтесь, рад, что смог вам помочь ;) Счастливого Рождества!
На данный момент модель находится в той же
srcпапке, что и файл React App.js. Поэтому я предположил, что это будет что-то вроде этогоconst modelUrl = '/model.json'илиconst modelUrl = './model.json', но я пробовал оба и получил что-то вроде:Error: Failed to parse model JSON of response from ./model.json. Please make sure the server is serving valid JSON for this request.(JSON определенно действителен.)