Develop Reference

Can't Load Models for face-api.js

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"

Nuxt JS env file

I'm using Nuxt JS 2.9.2, and am trying to use a .env file to load a unique encryption key, however, the following doesn't seem to pull the information from the env file, even after installing dotenv
env: {
encryption_key: process.env.ENCRYPTION_KEY || 'secret key 123'
}
The above code is inserted inside of my export default inside of the nuxt config js file, it always seems to load the secret key 123 rather than ENCRYPTION_KEY from the env file

Here are the steps to get this working:
First install dotenv with npm i -D dotenv
Next, make sure you have a .env file that looks something like:
ENCRYPTION_KEY="put your key here"
Finally, add the following to the top of your nuxt.config.js:
require('dotenv').config();
A word of caution
Please be aware that this will actually build your client code with ENCRYPTION_KEY in the source, so anyone could read it. If that isn't what you want, I'd recommend doing all of your encryption on the server.

Getting Facebook Messenger Page_Access_Token in .env

According to Facebook Guide line, I was told to create a .env file to store the Page_Access_Token
The content in .env is:
PAGE_ACCESS_TOKEN="XXXXXXXXXXXXXXXXX"
and we have an app.js that included:
const PAGE_ACCESS_TOKEN = process.env.PAGE_ACCESS_TOKEN;
However, when I console.log(process.env.PAGE_ACCESS_TOKEN); it returns me an undefined
Can advise how to fix this problem?
P.S. I am using windows and ngrok to test

.env without any configurations or tools does nothing, unless your told your app to, this is just a basic file.
However if you really want to use a .env to store your environment variables, you may need something like this dotenv

Node Js Environment Specific Variables Dev/Testing/UAT

I am new to Node js, started developing the Angular application using Angular 1.2 and Node js. As of now, I have hardcoded the REST API(Java) endpoints in the node services.js. Now I want to load the base endpoint URI specific to the environment. I have tried few ways by setting a new key value for the process.env, a env file and load it. Can anyone please help me.
I have tried below approach.
Created devEnv.env file under root folder.
Added 3 key-value pairs
hostname = xyz
apikey = 123
devUrl = xyz/xyz/xyz.com/
Then in terminal, I am trying to add it to the source.
$ source denEnv.env
I am getting source not found.
Another way I have added the script in package.json file
{
"start-dev": "source devEnv.env; node server.js"
}
In terminal I executed
$ npm start-dev
It's also failing. Can anyone please let me know what mistake I am doing and what is the correct approach.
Thanks in advance.

There are three methods known to me:
1) .env file
You need to install dotenv package using npm install/yarn add and on top of your main file (e.g. index.js) put require('dotenv').config(). That should load your variables to node.
2) passed on a start
If you want pass a small amount of environmental variables you can try something like this in your package.json:
{
"start-dev": "hostname=xyz apikey=123 devUrl=xyz/xyz/xyz.com node server.js"
}
Advice: environmental variables should look like HOSTNAME, API_KEY or DEV_URL.
3) system environmental variables
Solution: Set environment variables from file

Your variables are most likely not being exported to the shell. To be able to source your devEnv.env script, try to modify it as follows:
#!/bin/bash
export hostname=xyz
export apikey=123
export devUrl=xyz/xyz/xyz.com/
You most likely need to give it executable rights:
chmod +x devEnv.env
And then source it by running:
. devEnv.env
Another example can be found here: Set environment variables from file

Setting default environment variables in Heroku

I'm working on an app that connects to third-party APIs which require the use of an APP ID and SECRET KEY.
I am storing these values as environment variables in heroku, so that I don't need to expose them in my code.
If I deploy to heroku, it will use heroku's environment variables to resolve these API credentials.
If I'm working on it locally, I want to use my config.js module, and lookup the API credentials there. NOTE: This config.js file is included in my .gitignore so that these credentials never end up in the cloud.
The problematic code is this:
var api_secret = process.env.API_SECRET || require('../../config.js').secret;
When I run this locally, I've got no issues. Meaning, it is unable to resolve the environment variable, so instead it uses the secret from within config.js.
When I run it on heroku, it DOES throw an error telling me that module 'config.js' could not be found. This makes sense, because it was never pushed up with the rest of the repo, by virtue that it is in my .gitignore.
Because heroku is parsing through my code before it ever runs, the require('../../config.js') is problematic. It is trying to lookup a file that doesn't exist.
How can I solve the issue of using environment variables when deployed, and the config.js module when running locally?

On the Heroku dashboard for your application, you can set config variables. If you have the Heroku Toolbelt set up on your machine, you can also use:
heroku config:set API_SECRET=secret
See this article for more.
Edit: Think I may have misunderstood the question. I would suggest, if possible, using the dotenv npm package to set your config variables locally.
If not, another thing to check would be that the config.js package is in your package.json file, because Heroku will use this to build your dependencies.

If you do not want to push your config.js to heroky at all, you can just follow the following to determine whether the config file exists or not with a try catch and the file system module:
Check synchronously if file/directory exists in Node.js
In your case:
var fs = require('fs'),
api_secret,
config;
try {
// Check whether config.js exists
config = fs.lstatSync('../../config.js');
// If we reach this line then config.js exists, yay!
api_secret = process.env.API_SECRET || require('../../config.js').secret;
// or alternatively api_secret = require('../../config.js').secret;
// depending on your logic
}
catch (e) {
// else config.js does not exist
api_secret = process.env.API_SECRET
}
To run Heroku commands programmatically, you can set up a free Ruby app and make it do what you want through API calls. Use Heroku-api. See https://github.com/heroku/heroku.rb
If you want to set Heroku commands manually, you can set env variables on Heroku either with the command heroku config:set MYVAR=MYVALUE or through the Heroku dashboard (Click on your app > settings > reveal config vars > edit).