TensorFlow.js version
tensorflow/tfjs-core#0.15.2
Browser version
chrome 72.0.3626.109 for mac
Describe the problem or feature request
I tried the demo tfjs-examples-webcam-transfer-learning in tensorflow/tfjs-examples. In the file index.js, tensorflow tried to load the model like below:
const mobilenet = await tf.loadModel(
'https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json'
);
But every time I run this demo, it will run this sentence and download the model. I want to make it load from local server. So I download the model.json and put it in the assets folder. Then I deploy the assets in the local server at port 1234. load it like this:
const mobilenet = await tf.loadModel(
'http://localhost:1234/json/model.json'
);
But it didn't work and the consoled out
io_utils.ts:116 Uncaught (in promise) RangeError: byte length of Float32Array should be a multiple of 4
at new Float32Array (<anonymous>)
at o (io_utils.ts:116)
at Object.decodeWeights (io_utils.ts:79)
at models.ts:318
at common.ts:14
at Object.next (common.ts:14)
at o (common.ts:14)
I'm really sure that the model.json is the same as in https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json, but why id didn't work?
Thanks for helping me.
You have to serve the file on a local server for the browser cannot directly access the filesystem. The same question has been asked here and there
This should really not be a concern, because your browser will cache the downloaded model together with all of its weights. So you can just use the public URL. Any access after the first time will be served out of the browser cache, not really downloading again.
If you really want to serve locally anyway, or at least to understand why it didn't work before:
The model.json file is not the whole story-- it contains a weightsManifest section with relative paths to the weights files. When you load the model.json from the original URL, it resolves and downloads all of the neighboring weights files. So, to serve the model locally, you would need to serve all of those files as well.
It's unfortunately not entirely straightforward to get a list of the weight files, since Google Cloud Storage doesn't provide directory listings in an easily accessible way. You can of course fish the filenames out of the model.json (look for things like "paths": ["group47-shard1of1"]. A second option is to use gsutil from the command line, which should let you just download the whole folder. A third option is to use the REST API to list the directory contents: https://www.googleapis.com/storage/v1/b/tfjs-models/o?prefix=tfjs/mobilenet_v1_0.25_224, and look for the "name" entries there.
The fourth and easiest option is to construct the URLs from scratch: in this case there are 55 weight groups, so the URLs range from https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/group1-shard1of1 to https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/group55-shard1of1. None of the groups have more than one shard.
Related
Situation:
React code generates a base UI
It has to use data from a JSON file (generated by another script that I can manage) to load different UI elements like text boxes and dropdowns dynamically
Options I've considered:
Place it in src/ folder and import it (e.g., import data from '../data.json';)
Place it in public/ folder
I've seen Using the Public folder (CRA Docs) and couldn't find this scenario in the use cases mentioned
Load it dynamically via an XHR request (from backend API)
Right now, the UI functions independently. I'll have to create a backend API server exclusively for serving this JSON file.
Is there any other option that is useful here?
Other points that may be relevant:
Although it's static, there may be changes to the JSON file from time to time (say, every week or month)
The size may increase gradually in the future, but not by a huge margin (say, to 100 MB or so - it'll still be around 10-20 MB)
I'm using CRA and npm run build to create the build. I have never configured webpack manually before. I don't know much about it.
The size is actually 7 MB now. Minified size is 1.9 MB.
Hello guys i need to download files from my database or my Onedrive and save them into react, this files is for my 3d models and the types is obj and mtl. For can i load dinamyc objects from database i need this feature, how can i do this ? I'm using three.js in this project.
Today the project is loading the files stored in project but i like to find a away to pick this from a database or a storage provider.
I tried to do using fetch or something like else but i can't find a away to do this correctly. I don't now if three.js supports url files i try to find but i don't see anything can help me.
Unless three.js provides a feature to take input from memory (in which case you can simply download the file into memory and pass it to three.js), doing this solely from a react app isn't possible. You will need to host your website on a server to have dynamic access to the public directory serving the react website.
Standalone react builds have static assets and can't be updated without creating another build
So I have a React app with this structure
-MyApp
-public
--images
---Adam.png
---Jane.png
-src
--components
For one of my components I want to show all the images. Is there a way I can get array of the filenames in my public/images folder? I know how to map the array to a list of images but not sure how to get that array of file names in the first place.
This is natural question when doing this (because alternative is always importing those one by one which seems wrong) but react is in the end builded into some optimized static code. So whole issue is "what would happen if you added another image to that folder and refreshed page?". And answer is that it cannot react to it because that loop you are doing (one generating img tags or something else) is ran during build. What you need is server that "reads" those folders and lets you know what is there (to your already built app) and you can update state and that renders more elements during runtime in response to server.
In Webpack there is this other option (as mentioned by #UbeytDemir) that can understand what will be public folder and iterate those contents during build, but that still means you have to rebuild the app after each new image, because it simply cant do this during run time without server. It only unifies those imports into one line but imho it's important to understand why this is impossible to do in client's app.
Using react-app and webpack, I was wondering if it's possible to bundle a config.json file such that you can access it after the site builds and be able to change values within it and have that be reflected on the website. This is mainly so that I can have values in my config.json file like "header__1" or "about__description" in my config.json file and hand them over to my clients so that they may change values themselves w/o having to consult me.
Welcome to stackoverflow Shaun,
since you're writing a web application with react and it is all about Javascript, you can't work with files like you can with desktop clients. Neither should you (read more here).
If you want your web clients to be modifiable by the customer you should add something like a config page to your app. The values that change should then be stored in the localStorage of the browser or something similar.
EDIT: Of cause a config file could be loaded from an external source. But then you have to differ between users and their individual configurations (which might be not what you want). Files bundled with webpack can't be edited (permanently) on the users side.
I'm using a properties file in project. I want to read the properties file both java and angularjs. suggest me a best location to place the properties file which can accessible by java and also by angularjs.
By design it should be src/resources folder.
Well by opportunity, it can be placed in webapp too.
From what I know angularjs is meant to execute on browser. I do not recommend downloading properties into browser as web assets similar to css/js. So I would recommend keeping properties in src/main/resources/. If you need, host a small rest end point giving these properties as a json map in response. This can be used by angularjs on client side(browser)
Ideally properties which have confidential information shoild never be sent to browser.
Any one can get access to those information by debugging in tools like chrome,etc.
Sending such information should not create problems for your system. In those cases you shld hv 2 properties in src/ resources folder. One contains db passwords etc. Other with open information.