I don't understand how to load the "models" so that the client side of my React web app can start analyzing images. I don't even really understand what a "model" is.
I started by doing npm i face-api.js.
Then, I imported it into my SignUp component by typing import * as faceapi from 'face-api.js' at the top.
In my componentDidMount() function, I put the following code:
faceapi.nets.ssdMobilenetv1.loadFromUri('/models').then(result => {
console.log(result);
}).catch(error => {
console.log(error)
})
That gives me the following error:
SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"
So I tried looking for a "models" directory in the face-api.js directory, but couldn't find anything. Then I went back to the Github and found a "weights" folder (which I read are related to models). I downloaded it, and put it's contents in a "models" folder near my SignUp component (see attached pic). Still the same error.
Ultimately, all I want to do is know whether a user uploads a pictures containing a face. Any face. I don't need anything more than that. What am I doing wrong?
For my example using VueJs i added the models in the public / dist directory and i followed the directions for the github examples.
Promise.all([
faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
faceapi.nets.ssdMobilenetv1.loadFromUri('/models'), faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
])
.then(async () => {//some code goes here})
Sample I used
When you run this :
faceapi.nets.ssdMobilenetv1.loadFromUri('/models')
It looks for models in the the public/models directory but it will only load the json file.(Verify this by checking the Network Tab in the browser). It might run on your local machine but will fail when you deploy.
In our case it failed in production because it needed the data from *_shard1 file but our server was unable to fetch those file without any extension.
To solve this issue we suffixed all those file with ".shard" extension and changed the path in the respective json file :
From :
...,"paths": ["file_name_shard1"]}]
To:
...,"paths": ["file_name_shard1.shard"]
Found this solution here: https://github.com/justadudewhohacks/face-api.js/issues/131
Smarann Educations's reply above is very useful, except that I made the following changes to get mine to work on the production server:
Instead of ".shard" extension, as advised by Smarann Educations, I input a ".bin" extension to the shard files. And, similarly, in the corresponding json files, I updated the paths to ".bin" instead of ".shard", as suggested by Smarann Educations. This ".bin" suggestion is in one of the comments at the link that Smarann Educations provided in his reply
I modified all the loadFromUri('/models') statements to loadFromUri('./models') - So, replaced '/models' with './models' (Notice the dot before the slash)
You can use loadFromDisk instead of loadFromUri.
or
You can change the model's filename extension to .dir instead of .json.
I had the same issue in react, but in development and productions servers. So, to fix it locally (on localhost), just put the models folder in the public folder.
To fix in on server, you should put the models folder into build/static.
So I added in package.json script:
"replace_models":
"node -e \"const fs = require('fs-extra');
fs.copy('./build/models', './build/static/models').then(
() => {fs.removeSync('./build/models');
return console.log('success!')}
).catch(err => console.error(err))\"
"
And then:
"build": "react-scripts build && npm run replace_models"
Related
I keep getting this error when I try to publish a site to GitHub pages.
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/style.scss':
19
No such file or directory # dir_chdir - /github/workspace/docs
When I try to change the folder to root, it publishes the readme.md file. When I change it to doc, I get this error.
The file runs fine locally. I don't know what the problem is. I searched online but did not find a solution that helps. Any help works.
The error is on my main branch when I try to publish it.
Links to the repo and the error on GitHub:
https://github.com/Rsmdo/dadport2
https://github.com/Rsmdo/dadport2/tree/main
I tried making a new repo but this did not solve the issue, also I went through the code to see if there were any parsing errors but there were none.
https://talk.jekyllrb.com/t/cannot-deploy-site-via-github/6883/11 says that "Jekyll can’t find the files the theme uses". The page also suggests using root instead of docs or any folder.
There are options to set the directory where Jekyll writes files to and reads file from, for example: bundle exec jekyll s -s /docs, which leads to errors in my case due to the non-existing path based on the root path (the path can also be relative I guess).
See Source: /docs, the other path do not show the docs path though.
PS C:\Users\User\usr.github.io> bundle exec jekyll s -s /docs
Configuration file: none
Source: /docs
Destination: C:/Users/User/usr.github.io/_site
Incremental build: disabled. Enable with --incremental
Generating...
Error reading file C:/Users/User/usr.github.io/_layouts/archive.html: No such file or directory # rb_sysopen - C:/docs/Users/User/usr.github.io/_layouts/archive.html
This may help:
https://jekyll.one/pages/public/manuals/jekyll/user_guide/configuration/
https://github.com/burtlo/jekyll-core/blob/master/site/docs/configuration.md
So I created a post previous day and deleted it because it's unproper and also unclear, so right now, I'll try to write it properly.
So I created a MERN app using render.com, but the problem is every time I refresh the the webpage, I get an error / not found. Example. I went to a specific user id , I can view his the profile but once I refresh/reload, it gets an error. So I created a two separate folder and two different GitHub repo.
I uploaded the front end as a static website in render.com
Github: Front Site
Website Front Website
So for the backend, I follow this thread and Why deployed create-react-app returns 404 error upon reload?. But I don't know how can I properly use res.sendFile because I'm using a different root directory as well as different github repo.
Github : https://github.com/cruz-emman/back
Website: https://mern-tua-ebenta.onrender.com/
I tried to use this, and I admit that I'm doing it wrong because I don't know how can I do it.
app.use(express.static(path.join(__dirname,'../client/build')));
app.get('*', (req,res) => res.sendFile(path.resolve(__dirname,'../', 'client','build','index.html'))
EDIT: TYPO
After trial and error, I finally solved the answer, so what I did here is merge the two folders.
After putting it in a single directory, I run npm run build for client folder. After that, I put this code inside index.js
const __dirname = path.resolve()
app.use(express.static(path.join(__dirname, '/client/build')));
app.get("*",(req,res) => {
res.sendFile(path.join(__dirname, '/client/build/index.html'));
})
After that, I push it to a new git repository, and run web service for render.com
this is my first time im trying to handle " Web api ", so i took this project to get many call but after it running well, when i try to click to "search" it dosent work,
I guess the problem arises from api call because chrome inspector show me that :
I was able to understand on the different forums, for handling apis call with Node.js that must be encapsulated API calls behind "Environment variable".
That the config.js file
When i try to put on the terminal export env.API_KEY='000000000000000' it made me :
export: not valid in this context: env.API_KEY
I hope you can point me in the right direction, I very tried everything, to run it that.
I personally like to use a npm package called dotenv:
You can install it by running npm i dotenv within your api directory.
Have a file called .env within your api directory which contains all of your environment variables:
APP_ID="000000000000000"
API_KEY="000000000000000"
Then change config.js to load all environment variable files when it is executed by including require('dotenv').config():
require('dotenv').config()
module.exports = {
APP_ID: process.env.APP_ID,
API_KEY: process.env.API_KEY,
BASE_URL: 'https://api.adzuna.com/v1/api/jobs',
BASE_PARAMS: 'search/1?&results_per_page=20&content-type=application/json',
};
Note: you will also want to add .env to your .gitingore so that your sensitive API keys aren't included in your git repository
I have looked at so many different resources (some not linked, and this one being the closest to my problem). None of them seem to solve my issue.
I'm brand new to both React and Webpack. I found this tutorial and followed it to create a basic website.
However, I'm having issues displaying images. Instead of displaying the image, I get a "broken file" image and the console says GET http://127.0.0.1:5000/public/images/smiley.png 404 (NOT FOUND)
I have installed the Webpack image loader and I am using require in my React code. It looks like webpack is finding the image because if I change the name of the image I get an error like Uncaught Error: Cannot find module '../images/smiley.png' which crashes the whole website instead of the 404 error.
This is my folder structure:
When I run the project with npm run watch and python server.py (from static folder and server folders respectively), a public folder with smiley.png inside of it appears inside of the dist folder.
I have a hunch that the issue is that my Flask is configured in such a way that it does not respond the request because it thinks the public folder is off limits. But that's just a hunch, and I don't know how to fix it if that's the case.
My code can be found here. Any help would be appreciated.
EDIT:
Following my hunch, I added the following to my server.py:
#app.route("/public/<path:path>")
def get_public_file(path):
print("getting something from public: {}".format(path))
return send_from_directory("public", path)
But that also did not work - I am still getting a 404.
EDIT 2:
Thanks to #Joost, we found out that using app = Flask(__name__, static_folder="../static", template_folder="../static") puts the image correctly at http://127.0.0.1:5000/static/images/smiley.png.
However, this then causes Flask to not be able to figure out where bundle.js is, since it's located inside the dist folder.
Adding in
#app.route("/dist/<path:path>")
def get_dist_file(path):
print("getting something from dist: {}".format(path)) # this ran
return send_from_directory("dist", path)
to server.py did not help - I still get GET http://127.0.0.1:5000/dist/bundle.js net::ERR_ABORTED 404 (NOT FOUND) in the inspector.
So now the trick is to figure out how to keep the smiley face served, and have flask serve the bundle.js file as well.
EDIT 3:
I just discovered a really sketchy way of getting it to work, so sketchy that I'm not even going to post it as an answer because I want something that's less sketchy.
Using #Joost's app = Flask(__name__, static_folder="../static", template_folder="../static") and adding the following to server.py worked.
#app.route('/<path:path>')
def static_file(path):
print("getting static file {}".format(path))
if path.startswith("public/"):
path = "dist/" + path
print("in public folder; path changed to: {}".format(path))
return app.send_static_file(path)
The issue with this solution is that I really shouldn't be using send_static_file since it's extremely insecure, and that including an if statement like that seems prone to many errors. A different solution would be appreciated.
I kept overlooking where the app was running from, sorry about that.
By far the easiest solution is to set you static folder to a different folder:
app = Flask(__name__, static_folder='../static')
I just tried it, and this should work without a problem.
You can find your file here:
http://127.0.0.1:5000/static/images/smiley.png
Your bundle file will be here:
http://127.0.0.1:5000/static/dist/bundle.js
You're getting a template error because you don't have a template folder, which is normally called tempates. So make a subfolder called templates in your server folder. Then, don't specify the template_folder argument in the app = Flask(..) line, but keep it app = Flask(__name__, static_folder='../static').
If, for some reason, you want to seperate your static from your public files and have a /public route as well, you might want to try the following approach:
#app.route("/public/<path:path>")
def get_public_file(path):
full_path = os.path.join('../static/dist/public/', path)
head, tail = os.path.split(full_path)
return send_from_directory(head, tail)
You can then access the smiley in the fullstack_template/static/dist/public/images/smiley.png by going to http://127.0.0.1:5000/public/images/smiley.png.
I have a programm where I need to have long multi line strings. It's a pain to store them in the .js document, because js doesn't have multi line strings and I end up having a twice as long as the screen width line looking as ugly as "This is an example.\n"
Is there a way to have a txt file, from where I can import strings with new lines (or at least just import strings)?
There is a Meteor Assets object that allows you to read files in the private directory of your app, in the following way for example for text files.
Assets.getText("foo.txt", function (err, res) { ... });
See full documentation: http://docs.meteor.com/#assets
Previous answer works only for public files. If you want to access file data that is visible only on the server you should probably use 'fs' npm module. It's described in details here: http://www.eventedmind.com/posts/meteor-file-uploader-part-2-server-side-save
The meteor-yaml package makes this easy - it automatically loads any .yaml files in your project, parses them into JavaScript objects, and makes them available in YAML.data.
In my application I have some code outside of the meteor app that needs the same settings, so I prefer to have the config file outside of the meteor project directory. Then I load the file like this:
var fs = Npm.require('fs');
fs.readFile('<path to file>.yaml', 'utf8', function(err, data) {
if(err) {
//Throw exception if the file is missing
throw new Error("Missing config file")
}
else {
//Read the file into a JavaScript object
config = YAML.parse(data);
}
});
Unfortunately, the meteor-yaml package is a little out of date with how the meteor team wants node packages to be loaded now, so if you're using a recent version of meteor the package won't work out of the box.
I filed a bug about this, but in the meantime to get around it I installed it as a private package, as opposed to installing it from atmosphere, and fixed the bug. To do this:
Clone the repo under your projects packages/ directory
Comment out the Npm.require lines.
Add a call to depends:
Npm.depends({yamljs: "0.1.4"});
Run meteor. Meteor will detect the meteor-yaml private package and install the dependencies.