We Keep Coding

Electron store my app datas in 'userData' path

I'm building and trying do deploying a packaged electron app. FOr the packaging i used
electron-packager
electron-installer-debian
electron-installer-dmg
electron-winstaller
and I'm facing a little issue where I have to store tha appa datas somewhere in my user computer.
I saw that the good practice is to use the the folder in the path that is returned by the electron method app.getPath('userData').
from the docs
It is The directory for storing the app's configuration files, which by default it is the appData directory appended with the app name.
%APPDATA% on Windows
$XDG_CONFIG_HOME or ~/.config on Linux
~/Library/Application Support on macOS
By my tests sometimes this folder is not created automatically when the app is installed and other times yes and I'm wondering if i should create it or not.
Right now i'm quitting the app if this folder isn't present in the pc with the following code
var DatasPath = app.getPath('userData')
if (!fs.existsSync(DatasPath)){
process.exit()
}
So the question is
should i create the DatasPath folder with fs.mkdirSync(DatasPath); when it is not present or it is 'bad practice to do so', and if I can create the folder i have to warning the user the i have just added that folder?

(Expanding my reply from a "comment" to an "answer")
i don't know if i'm supposed to create it or not so i automatically
make the app quit if there is not that folder
It seems you are taking "userData" too literally? It is not an actual "folder" named "userData – it is a path to where the operating system stores data for that application. Electron currently runs on 3 operating systems and each one does things differently. For our convenience, Electron hides those differences by creating the wrapper method app.getPath(name) so the same code will work on each OS.
Try this: put the line below in your main.js script:
console.log(app.getPath('userData'));
/Users/*********/Library/Application Support/MyCoolApp
(the "*********" will be your user account name.)
UPDATED:
Run the code below in main.js and then look in the folder specified by the "userData" path
const fs = require("fs");
const path = require('path');
var datasPath = app.getPath('userData')
var data = "I am the cheese"
var filePath = path.join(datasPath, "savedData.txt")
fs.writeFileSync(filePath, data)

At pathConfig.js
function getAppDataPath() {
switch (process.platform) {
case "darwin": {
return path.join(process.env.HOME, "Library", "Application Support", "myApp");
}
case "win32": {
return path.join(process.env.APPDATA, "myApp");
}
case "linux": {
return path.join(process.env.HOME, ".myApp");
}
default: {
console.log("Unsupported platform!");
process.exit(1);
}
}
}
const appPath = __dirname;
const appDataPath =
!process.env.NODE_ENV || process.env.NODE_ENV === "production"
? getAppDataPath() // Live Mode
: path.join(appPath, "AppData"); // Dev Mode
if (!fs.existsSync(appDataPath)) {
// If the AppData dir doesn't exist at expected Path. Then Create
// Maybe the case when the user runs the app first.
fs.mkdirSync(appDataPath);
}

In each operating system the appData folder has a different path and the perfect way of getting this path is by calling app.getPath('userData') in the main process.
But there is a package that can handle this for you, it stores data in a JSON file and update it in every change.
In my opinion this package is much better than handling everything by your self.
Read more :
https://www.npmjs.com/package/electron-data-holder

Load Tensorflow js model from local file system in javascript

I have converted a keras model to tensorflow json format and saved it locally in my computer. I am trying to load that json model in a javascript code using the below command
model = await tf.loadModel('web_model')
But the model is not getting loaded.
Is there a way to load tensorflow json model from local file system?

I know you're trying to load your model in a browser but if anybody lands here that's trying to do it in Node, here's how:
const tf = require("#tensorflow/tfjs");
const tfn = require("#tensorflow/tfjs-node");
const handler = tfn.io.fileSystem("./path/to/your/model.json");
const model = await tf.loadLayersModel(handler);

LoadModel uses fetch under the hood. And fetch cannot access the local files directly. It is meant to be used to get files served by a server. More on this here.
To load a local file with the browser, there is two approaches, asking the user to upload the file with
<input type="file"/>
Or serving the file by a server.
In these two scenarios, tf.js provides way to load the model.
Load the model by asking the user to upload the file
html
<input type="file" id="upload-json"/>
<input type="file" id="upload-weights"/>
js
const uploadJSONInput = document.getElementById('upload-json');
const uploadWeightsInput = document.getElementById('upload-weights');
const model = await tfl.loadModel(tf.io.browserFiles(
[uploadJSONInput.files[0], uploadWeightsInput.files[0]]));
Serving the local files using a server
To do so, one can use the following npm module http-server to serve the directory containing both the weight and the model. It can be installed with the following command:
npm install http-server -g
Inside the directory, one can run the following command to launch the server:
http-server -c1 --cors .
Now the model can be loaded:
// load model in js script
(async () => {
...
const model = await tf.loadFrozenModel('http://localhost:8080/model.pb', 'http://localhost:8080/weights.json')
})()

const tf = require('#tensorflow/tfjs');
const tfnode = require('#tensorflow/tfjs-node');
async function loadModel(){
const handler = tfnode.io.fileSystem('tfjs_model/model.json');
const model = await tf.loadLayersModel(handler);
console.log("Model loaded")
}
loadModel();
This worked for me in node. Thanks to jafaircl.

If you're using React with create-react-app, you can keep your saved model files in your public folder.
For example, say you want to use the blazeface model. You would
Download the .tar.gz model from that web page.
Unpack the model into your app's public directory. So now you have the files from the .tar.gz file in a public subdir:
%YOUR_APP%/public/blazeface_1_default_1/model.json
%YOUR_APP%/public/blazeface_1_default_1/group1-shard1of1.bin
Load the model in your React app using
tf.loadGraphModel(process.env.PUBLIC_URL + 'blazeface_1_default_1/model.json'

You could try:
const model = await tf.models.modelFromJSON(myModelJSON)
Here it is in the tensorflow.org docs

Check out our documentation for loading models: https://js.tensorflow.org/api/latest/#Models-Loading
You can use tf.loadModel takes a string which is a URL to your model definition which needs to get served over HTTP. This means you need to start an http-server to serve those files (it will not allow you to make a request to your filesystem because of CORS).
This package can do that for you: npmjs.com/package/http-server

You could use insecure chrome instance:
C:\Program Files (x86)\Google\Chrome\Application>chrome.exe --disable-web-security --disable-gpu --user-data-dir=C:/Temp
Than you could add this script to redefine fetch function
async function fetch(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest
xhr.onload = function() {
resolve(new Response(xhr.responseText, {status: 200}))
}
xhr.onerror = function() {
reject(new TypeError('Local request failed'))
}
xhr.open('GET', url)
xhr.send(null)
})
}
After that be shure that you use the right model loader
my comment about loader issue
BUT your weights will be incorrect - as I understand there are some encoding problems.

If you are trying to load it in server side, use #tensorflow/tfjs-node instead of #tensorflow/tfjs and update to 0.2.1 or higher version to resolve this issue.

I am using React js for loading model (for image classification and more machine learning stuff)
Tensorflow.js do not support an Api to read a previously model trained
const file= new Blob()
file.src=modelJSON
const files= new Blob()
files.src=modelWeights
console.log(files)
const model= await tf.loadLayersModel(tf.io.browserFiles([file, files]));
[![enter image description here][1]][1]
You be able to create an APi in Express.js for servering your model (model.json and weigths.bin) if you use a web app (for a tensorflow.lite you could use a opencv.readTensorflowmodel(model.pb, weight.pbtxt)
References: How to load tensorflow-js weights from express using tf.loadLayersModel()?
const classifierModel = await tf.loadLayersModel(
"https://rp5u7.sse.codesandbox.io/api/pokeml/classify"
);
const im = new Image()
im.src =imagenSample//'../../../../../Models/ShapesClassification/Samples/images (2).png';
const abc= this.preprocessImage(im);
const preds = await classifierModel.predict(abc)//.argMax(-1);
console.log('<Response>',preds,'Principal',preds.shape[0],'DATA',preds.dataSync())
const responde=[...preds.dataSync()]
console.log('Maxmimo Valor',Math.max.apply(Math, responde.map(function(o) { return o; })))
let indiceMax = this.indexOfMax(responde)
console.log(indiceMax)
console.log('<<<LABEL>>>',this.labelsReturn(indiceMax))

If you are using Django, you should:
create a directory static in your app and put your model there.
load that static directory to the template where you want to use your model:
var modelPath = "{% static 'sampleModel.json' %}">
Don't forget to also load tensorflow.js library:
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs"></script>
Now you can load your model:
<script>model = await tf.loadGraphModel(modelPath)</script>

i found a solution that it works. You can replace the url with a localhost url on xampp, for example (directory = model) http://localhost/model/model.json and after that you have to disable your browser CORS policy. For me i found a chrome extention and removed cors for my specific tab and it worked.
Thank me later!!

Pass the local files to sauce lab VM to protractor test works

I'm trying to run an upload file test in protractor on a sauce lab VM, I did some search and I found that exist a fileDetector, but when I tried to use it I get driver.execute is not a function.
I think that I'm not passing the driver correctly.
Here is the code that I'm using
const remote = require('selenium-webdriver/remote');
browser.setFileDetector(new remote.FileDetector());
var absolutePath = path.resolve(__dirname, "filePath");
$('input[type="file"]').sendKeys(absolutePath);
Also tried this
const fileDetector = require('selenium-webdriver/remote').FileDetector();
const remotePath = fileDetector.handleFile(browser.driver, PATH_STRING);
browser.driver.setFileDetector(fileDetector);
pageObject.sendKeys(remotePath);
And I get the same the same issue driver.execute is not a function.
Any idea of what can I do to solver this, or other way that I can send the file path to be recognize to sauce lab VM?

How to probe if a file was download using Selenium/WebdriverIO

I want to know how I can verify if a file was downloaded using Selenium Webdriver after I click the download button.

Your question doesn't say whether you want to confirm it locally or remotely(like browserstack) . If it is remotely then my answer will be "NO" as you can see that the file is getting downloaded but you can not access the folder. So you wont be able to assert that the file has been downloaded.
If you want to achieve this locally(in Chrome) then the answer is "YES", you can do it something like this:
In wdio.conf.js(To know where it is getting downloaded)
var path = require('path');
const pathToDownload = path.resolve('chromeDownloads');
// chromeDownloads above is the name of the folder in the root directory
exports.config = {
capabilities: [{
maxInstances: 1,
browserName: 'chrome',
os: 'Windows',
chromeOptions: {
args: [
'user-data-dir=./chrome/user-data',
],
prefs: {
"download.default_directory": pathToDownload,
}
}
}],
And your spec file(To check if the file is downloaded or not ?)
const fsExtra = require('fs-extra');
const pathToChromeDownloads = './chromeDownloads';
describe('User can download and verify a file', () =>{
before(() => {
// Clean up the chromeDownloads folder and create a fresh one
fsExtra.removeSync(pathToChromeDownloads);
fsExtra.mkdirsSync(pathToChromeDownloads);
});
it('Download the file', () =>{
// Code to download
});
it('Verify the file is downloaded', () =>{
// Code to verify
// Get the name of file and assert it with the expected name
});
});
more about fs-extra : https://www.npmjs.com/package/fs-extra
Hope this helps.

TL;DR: Unless your web-app has some kind of visual/GUI trigger once the download finishes (some text, an image/icon-font, push-notification, etc.), then the answer is a resounding NO.
Webdriver can't go outside the scope of your browser, but your underlying framework can. Especially if you're using NodeJS. :)
Off the top of my head I can think of a few ways I've been able to do this in the past. Choose as applicable:
1. Verify if the file has been downloaded using Node's File System (aka fs)
Since you're running WebdriverIO, under a NodeJS environment, then you can make use its powerful lib tool-suite. I would use fs.exists, or fs.existsSync to verify if the file is in the expected folder.
If you want to be diligent, then also use fs.statSync in conjunction with fs.exists & poll the file until it has the expected size (e.g.: > 2560 bytes)
There are multiple examples online that can help you put together such a script. Use the fs documentation, but other resources as well. Lastly, you can add said script inside your it/describe statement (I remember your were using Mocha).
2. Use child_process's exec command to launch third-party scripts
Though this method requires more work to setup, I find it more relevant on the long run.
!!! Caution: Apart from launching the script, you need to write a script in a third-party framework.
Using an AutoIT script;
Using a Sikuli script;
Using a TestComplete (not linking it, I don't like it that much), or [insert GUI verification script here] script;
Note: All the above frameworks can generate an .exe file that you can trigger from your WebdriverIO test-cases in order to check if your file has been downloaded, or not.
Steps to take:
create one of the stand-alone scripts like mentioned above;
place the script's .exe file inside your project in a known folder;
use child_process.exec to launch the script and assert its result after it finishes its execution;
Example:
exec = require('child_process').exec;
// Make sure you also remove the .exe from scriptName
var yourScript = pathToScript + scriptName;
var child = exec(yourScript);
child.on('close', function (code, signal) {
if (code!==0) {
callback.fail(online.online[module][code]);
} else {
callback();
}
});
Finally: I'm sure there are other ways to do it. But, your main take-away from such a vague question should be: YES, you can verify if the file has been downloaded if you absolutely must, expecially if this test-case is CRITICAL to your regression-run.

How to change URLs inside a client-side JS at build?

I have a JS file that gets served by a Node.Js server to a web browser.
When running in Dev I want the client-side JS to send data to the localhost so can I log the payload to my local node.js server.
But when we deploy to production I of course want the client-side JS file to send data from the browser to my Production URL.
Right now I've been manually modifying the URL in the JS file that gets served, toggling between localhost and the public URL before I do my Gulp build but I know that is not the right way, and prone to the "whoops I forgot" issue.
What is the correct approach? Or best practice? Is there some gulp package I should be using?

In case you haven't solved this by now you can use gulp-replace. For example, say you have a build task that reads from /src, minifies your JavaScript and outputs it to /dist. You can pipe your JavaScript source to replace() (first argument is the development URL, second argument is your production URL):
var gulp = require('gulp');
var path = require('path');
var jsmin = require('gulp-jsmin');
var replace = require('gulp-replace');
var SOURCE = 'src';
var BUILD = 'dist';
var URL = 'http://www.whatever.com/api';
gulp.task('build', function () {
return gulp.src(path.join(SOURCE, '**/*.js'))
.pipe(jsmin())
.pipe(replace('http://localhost:3000/api', URL))
.pipe(gulp.dest(BUILD))
});
If you have a file ./src/script.js that does a simple jQuery AJAX request, see the before and after effect below.
Before
$.get('http://localhost:3000/api', function (data) {
console.log(data);
});
After (ignoring minification)
$.get('http://www.whatever.com/api', function (data) {
console.log(data);
});