49383

load model.json for tensorflowjs in reactjs not working

<h3>Question</h3>

I'm trying to load a model.json file with it's weights.bin from the root directory in my react app.

When I call an example I found online from storage.googleapis.com it works but loading from my root doesn't.

The contents of App.js in my react app...

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>

<button onClick={predictAlt} style={{ fontSize: "20px" }}> my model </button> </div> ); }

<h3>Answer1:</h3>

The file URI scheme file://url is only for loading model server side. To load the model in the browser, the user can be prompted to select the model topology(model.json) and weight files. The doc contains an exemple of how to load a model by prompting the user using file input elements.

If the user is not to be requested to select the model files, then the model needs to be served by a server. The model.json and the weights can for instance be in the assets folder of the application deployed. Then the url would just need to be pointing to the model.json without file:// as follows:

const myModel = await tf.loadLayersModel("assets/my-model.json");

If there are some errors in loading the model, looking at the network tab in the developer console would help to see if the file is found or not

来源:https://stackoverflow.com/questions/61825870/load-model-json-for-tensorflowjs-in-reactjs-not-working

Recommend

  • load model.json for tensorflowjs in reactjs not working
  • Trying to extract frames to memory using fluent-ffmpeg
  • Dismiss keyboard through return key with swift
  • Should I unsubscribe from Cold Observable?
  • How do I sendBroadcast(intent) from myDialog and receive in myActivity?
  • How can I tear down a SparkSession and create a new one within one application?
  • response time is higher, when I call procedure in oracle through simple Jdbc call compared to the lo
  • Jquery change image on hover when image and menu item 'title' equal eachother
  • Retain Url Fragment within ReturnUrl in Forms Authentation under MVC
  • How to create an BytesIO img and pass to template
  • Drupal field_settings_form
  • Chaining Requests using BlueBird/ Request-Promise
  • Problems with kontakt.io Beacons
  • Jquery ajax complete not getting custom reponse header?
  • Can I return and include file in a function for creating shortcode?
  • How to get data from activation link with Java Servlet
  • wordpress posts_orderby filter with custom table in plugin
  • Add missing rows within combinations of factors
  • Scala and SBT install on Debian with Java 8
  • Android MediaCodec appears to buffer H264 frames
  • Symfony 1.4 compatible I18N translation system?
  • Appending spaces with str_pad
  • How to get Attachment value from “$File” Item? using C# (Lotus Notes)
  • Advertising Identifier for devices lower than iOS 6.0
  • How can I detect mongodb reconnect failed event
  • Running iPhone crash Logs from testers on XCode
  • Get spring boot pagination number starts from 1 instead of 0
  • Use awk to convert GPS Position to Latitude & Longitude
  • UIScrollView does not restore properly
  • Adding native code to an existing Worklight hybrid app
  • Boolean filter using a timestamp value on a dataframe in Python
  • css: column-count 3, image floating spanning 2, chrome not playing. why?
  • Why do you need 2 Javascript files for cross-platform Cordova plugin?
  • Unable to create Access token grant type in wso2 API manager store to test API
  • Google App Engine Datastore: Dealing with eventual consistency
  • How to call different template for different category archive page in woocommerce
  • WPF custom control and direct content support
  • Create/delete users from text file using Bash script
  • Time Complexity of Fibonacci Algorithm [duplicate]
  • How to check if object is null in Java?