I have trained my model locally using the python libraries and got the 3 files:
ckpt.index
ckpt.meta
ckpt.data
After that, I have followed the steps on this page, under "Dumping Your Weights" and now I also have:
weights_manifest.json
group1-shard1of2
group1-shard2of2
I have also this config.json file
But when I try to import it using the js library it crashes.
error log
values right before it crashes
The issue apparently originated from the config file. As soon as I replaced the file with the one used in the default model (config.json), it worked.
Related
I'm upgrading a React application and have found that I need to modify the import statements to get them to work.
For example, in the old version, the following import works without errors:
import { User } from '../System'
Note that System is a directory on my file system that contains User, a js file that ends with export default User.
In my upgraded version of the app, the System directory still exists, but the above import gives me Can't resolve '../System' in 'C:\my app\.
It turns out that to get the import working properly now, I need to change it to the following:
import User from '../System/User';
If I understand correctly, this relates to js module system changes made with ES6.
My question, though, is regarding the specification of a directory in the import statement (System above). Why would it be that I was previously able to name a file directory in the import statement instead of the actual js script/module itself? Is that approach of using a directory in the import statement still possible? And if so, is it ever advisable?
Update: based on AKX's comment, I noticed the System directory does indeed contain an index.js, which apparently is what makes the import from the directory itself possible.
When an import points to a directory, and only a file, Webpack (which most React setups use) follows Node's's conventions and will attempt to import index.js from that directory if it exists. That's the only condition under which importing from a path that points to a directory works - your previous build probably had /System/index.js (which would allow importing with from '../System'). If you rename the file you're importing to anything else - such as to User.js - importing using only the directory path will fail.
And if so, is it ever advisable?
Sure, if you want. It's a style choice but is commonly done.
Good Afternoon all,
I built a React.js web music-player application a while ago, and now I am transforming my old react application into a downloadable desktop app using Electron-react-boilerplate . I figured since I am transfomring my application from web-desktop using Electron-react-boilerplate , then any of the old components from my old applciation, can reusable in this new application. I am not quite familiar on how to use Electron-react-boilerplate yet , and thats why I am having some rendering issues in my code.
I wanted ya’ll to see my code, so I tried to push my entire electron-boilerplate file into my own git repository, but it wasn’t working so I decided that I should at least provide a reproudcible example of my code, so that my issue is still understandable. I ended up using theelectron-quick-start template as a temporary subsitiute, and I just imported some of the boilerplate folders as well as some of my own, so that problem is more clear.(link to my repo below)
What I Have So Far:
As previously stated, I am trying to import some React components from another application of mine, into my new Electron-react-boilerplate app. The app is supposed to function as a downloadable music-player application. It contains 4 playlists Turkish.js , House.js, Rock.js, and Persian.js, and the user can listen to music from any of these 4 genres.
I imported these following folders from my old react.js application:
the public folder (contains images for the playlists)
the src folder which includes:
components folder .
In the components folder are the folllowing:
Navbar folder( named as: “NavbarA”, contains some routing as well).
Music folder(where the .mp3 files are loaded to my application via drag-drop.
firebase.js folder (included firebase web-authentication).
As well as my playlist components (Turkish.js , House.js, Rock.js, and Persian.js) , and their child components that are designated for styling purposes like the “..Card.js” and “…Button.js” components.
And I also added the __tests__,main,and renderer folders into my src folder as well.
After I imported all of this, I changed some aspects of App.tsx, so that I can reference the NavbarA component, wrapped in a react-router.
The Problem:
I received two visible errors:
Error 1: (Music/.mp3 module parse fail)
(Same Error for all .mp3 files), for example I am also getting these errors as well:
ERROR in ./src/components/music/turk1.mp3 1:0
ERROR in ./src/components/music/house1.mp3 1:0
ERROR in ./src/components/music/persian1.mp3 1:0
ERROR in ./src/components/music/rock1.mp3 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
# ./src/components/Rock.js 34:36-64
# ./src/components/NavbarA.js 40:31-48
# ./src/renderer/App.tsx 11:34-63
# ./src/renderer/index.tsx 10:30-46
To clarify, this error does not only pertain to rock1.mp3, I received this error for all .mp3 music files. Any idea on how to import audio in my application? How did I do it incorrectly? What is the correct import method to process this file?
Error 2: (blank screen logs string “Cannot GET /index.html”
I am currently getting back a blank screen with that error , and am not sure why.It could be possible that I am not rendering my components correctly, (possibly in the wrong folder). It can also be a routing issue, but I am not certain.
this is the error I recieved after doing npm start
(Picture of Screen Attached Below)
My Code Is Here:
You can look at it here:
link to git repository -
https://github.com/ZpoDavay/electronboilerplate-simple
Let me know what you think!
Best,
Zpo.
What I Have So Far:
As previously stated, I am trying to import some React components from another application of mine, into my new Electron-react-boilerplate app. The app is supposed to function as a downloadable music-player application. It contains 4 playlists Turkish.js , House.js, Rock.js, and Persian.js, and the user can listen to music from any of these 4 genres.
I imported these following folders from my old react.js application:
the public folder (contains images for the playlists)
the src folder which includes:
components folder .
In the components folder are the folllowing:
Navbar folder( named as: “NavbarA”, contains some routing as well).
Music folder(where the .mp3 files are loaded to my application via drag-drop.
firebase.js folder (included firebase web-authentication).
As well as my playlist components (Turkish.js , House.js, Rock.js, and Persian.js) , and their child components that are designated for styling purposes like the “..Card.js” and “…Button.js” components.
And I also added the __tests__,main,and renderer folders into my src folder as well.
After I imported all of this, I changed some aspects of App.tsx, so that I can reference the NavbarA component, wrapped in a react-router.
The Problem:
I received two visible errors:
Error 1: (Music/.mp3 module parse fail)
(Same Error for all .mp3 files), for example I am also getting these errors as well:
ERROR in ./src/components/music/turk1.mp3 1:0
ERROR in ./src/components/music/house1.mp3 1:0
ERROR in ./src/components/music/persian1.mp3 1:0
ERROR in ./src/components/music/rock1.mp3 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
# ./src/components/Rock.js 34:36-64
# ./src/components/NavbarA.js 40:31-48
# ./src/renderer/App.tsx 11:34-63
# ./src/renderer/index.tsx 10:30-46
To clarify, this error does not only pertain to rock1.mp3, I received this error for all .mp3 music files. Any idea on how to import audio in my application? How did I do it incorrectly? What is the correct import method to process this file?
Error 2: (blank screen logs string “Cannot GET /index.html”
I am currently getting back a blank screen with that error , and am not sure why.It could be possible that I am not rendering my components correctly, (possibly in the wrong folder). It can also be a routing issue, but I am not certain.
this is the error I recieved after doing npm start
(Picture of Screen Attached Below)
My Code Is Here:
You can look at it here:
link to git repository -
https://github.com/ZpoDavay/electronboilerplate-simple
Let me know what you think!
Best,
Zpo.
I found a weird behaviour on importing files in React and can't figure out why the two different environments behave differently. Has someone an explanation on where I should start digging here?
Basically I want to load a test.yaml file in my React app (just React, no node.js) which works with an import statement in CodeSandbox:
import test from "./test.yaml";
Content of test is the text of the yaml file, which is what I want.
Here is the sandbox: https://codesandbox.io/s/goofy-clarke-6f16w?file=/src/index.js
When I copy all the files locally onto my computer and use npm install and npm start the behaviour changes and the content of test after the import is the file name with a hash but not the content. I can easily fetch the content of the file later with get-command. I just can't explain why on all the local envs that I tried i have this behaviour.
test.yaml as String: /static/media/test.438607f4.yaml
test.yaml as Object /static/media/test.438607f4.yaml
Any ideas?
I am trying to call a function in a python file from a js file, I got this to work through my console, but I am now trying to implement it in a mobile app using expo.
The way I had set this up is, I have the JS file for a certain screen in my app, this then calls a function in a separate JS file, which then calls the function in the python file.
I am using the child_process module to talk to python from JS.
And as I said, this was working before I tried to export the JS function to my screen file.
index.js
export function foo(process, sentence){
const spawn = require("child_process").spawn;
const process = spawn("python3", ["./python.py", sentence]);
...
}
screen.js
*other imports
import { foo } from "./filepath..."
...
But when I run npm start I get the following error:
Failed building JavaScript bundle.
While trying to resolve module `child_process` from file `/Users/mee/Documents/GitHub/project/app/screens/screen.js`, the package `/Users/mee/Documents/GitHub/project/node_modules/child_process/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/me/Documents/GitHub/project/node_modules/child_process/app/screens/screen.js`. Indeed, none of these files exist:
How can I fix this?
It won't work for few reasons
child_process is part of the node standard library, it's not available in other environments like react-native or browser
even if above was not true, there is no python3 executable on your phone
python.py file from your local directory wouldn't be even uploaded to the phone because bundler is only uploading one big js file with entire js code combined + assets, python.py is neither of those.
Only solution that make sense it to rewrite that code to javascript.
Technically it's not impossible, there might be a way to do that, by compiling python interpreter for mobile platform, or using some tool that translates python code into js, but it's not something that you should consider.
How to store a file on React Native, that once the system store that particular file, you won't need to rely on localhost to provide the access to the file itself.
I have a react native directory with files as shown:
...
|-android
|-ios
|-node_modules
...
|-App.js
|-tensorflow_inception_graph.pb
|-labels.txt
|-result.js
|
...
I'm importing the "tensorflow_inception_graph.pb" using the following line of code:
import model from 'MyTensorFlow/tensorflow_inception_graph.pb';
import model from 'MyTensorFlow/tensorflow_inception_graph.pb';
Likewise, I have also tried using the following line of code:
import model from './tensorflow_inception_graph.pb';
import model from './tensorflow_inception_graph.pb';
Result that I hoping to get:
I could run the application and access the files stated above without ever getting the error message like Debugging on physical phone. This indirectly also means that I could run the application without attach the cable to my physical phone.
I wonder am I doing wrongly in the first place, I find the documentation provided by the 'react-native-tensorflow' is inadequate for a beginner to react native like me.
I hope someone can shed some light on this for me. Thank you.