ml5-data-and-models-server icon indicating copy to clipboard operation
ml5-data-and-models-server copied to clipboard

How to port the serve model to sketch.js/index.html vis ml5 library

Open khangeqkai opened this issue 4 years ago • 3 comments

I have read over here where offline support is added https://github.com/ml5js/ml5-library/pull/553

Just wonder once i start run the server at localhost:5000 how would i be able to port it into my sketch.js

From the link above you mentioned something along the line options:{modelURL} can you help explain this bit Currently i have tried var posenetoptions = { modelurl:"https://google.com", architecture: 'ResNet50', imageScaleFactor: 0.3, outputStride: 32, flipHorizontal: false, minConfidence: 0.2, maxPoseDetections: 5, scoreThreshold: 0.5, nmsRadius: 30, detectionType: 'multi', inputResolution: 513, multiplier: 1, quantBytes: 2, };

and pass the options into ml5.poseNet see if it throw any errors, but nothing :(

khangeqkai avatar Jun 09 '20 08:06 khangeqkai

@khangeqkai - I'll refer you to the docs here: https://github.com/ml5js/ml5-data-and-models-server#setup-

The steps are as follows:

In your ml5-data-and-models-server repo

  1. you need to install the dependencies
  2. download the model files
  3. start the local server to serve up your model files

Step 2 above is crucial.

In your ml5 project

  1. for the model of interest, you'll point your modelUrl to the URL to your localhost (e.g. for posenet 2.0, it might be like: http://localhost:5000/posenet2

e.g notice that the path to the model must match the parameters fed into the options

var posenetoptions = { 
  modelurl:"http://localhost:5000/posenet2/MOBILENETV1_050_quant1_stride8/model-stride8.json", 
  architecture: 'MobileNetV1',
  outputStride: 8,
  inputResolution: { width: 640, height: 480 },
  multiplier: 0.75,
 quantBytes:1
}}

Hope this helps to clarify.

joeyklee avatar Jun 09 '20 11:06 joeyklee

Hi Joey thanks for the reply, i did exactly as you explained download the model for posenet2 insside the folder models and run npm run serve

Here is my pose options:

var posenetoptions = {
    modelurl:"http://localhost:5000/posenet2/MOBILENETV1_100_quant1_stride8/model-stride8.json",
    architecture: 'MobileNetV1',
    imageScaleFactor: 0.3,
    outputStride: 8,
    flipHorizontal: false,
    minConfidence: 0.2,
    maxPoseDetections: 5,
    scoreThreshold: 0.5,
    nmsRadius: 30,
    detectionType: 'multi',
    inputResolution: 257,
    multiplier: 1,
    quantBytes: 1,
  };

And when I run the index.html like i normally do it throw this error as if the attribute modelurl have no effects on how ml5 retrieving the model since it shows an ERR_INTERNET_DISCONNECTED and point it back to the google link which is storage.googleapis.com/tfjs-models/savedmodel/posenet/mobilenet/quant1/100/model-stride8.json:1 Failed to load resource

storage.googleapis.com/tfjs-models/savedmodel/posenet/mobilenet/quant1/100/model-stride8.json:1 Failed to load resource: net::ERR_INTERNET_DISCONNECTED
sketch.js:67 model ready
ml5.js:168760 Uncaught (in promise) TypeError: Cannot read property 'estimateMultiplePoses' of undefined
    at PoseNet._callee3$ (ml5.js:168760)
    at tryCatch (ml5.js:89124)
    at Generator.invoke [as _invoke] (ml5.js:89358)
    at Generator.prototype.<computed> [as next] (ml5.js:89176)
    at step (ml5.js:7069)
    at ml5.js:7087
    at new Promise (<anonymous>)
    at new F (ml5.js:13875)
    at PoseNet.<anonymous> (ml5.js:7066)
    at PoseNet.multiPose (ml5.js:168804)

FYI: i used ml5-librrary-0.5.0

khangeqkai avatar Jun 10 '20 01:06 khangeqkai

Just solved it,

I just reinstall ml5, p5 and it works, exactly the same code ( i make a copy of index/sketch before delete the entire ml5-library-0.5.0 folder that contain p5.

Reinstall ml5 via npm install and it work like a charm

Thank you for the support and the library Joey

khangeqkai avatar Jun 10 '20 04:06 khangeqkai