How to prevent loading of models at startup

[djthegr8]

I have edited the demo, and commented the below lines ~

/*if (ui.modelsPreload) {
    status("loading");
    await human.load(human.config);
  }*/
  if (ui.modelsWarmup) {
    status("initializing");
    const warmup = new ImageData(50, 50);
    await human.detect(warmup,human.config);
  }
  status("human: ready");
  document.getElementById("loader").style.display = "none";
  document.getElementById("play").style.display = "block"

It still shows the below screenshot~

[vladmandic]

you just disabled call to human.load(), but human.detect() will load all models that are enabled and not already loaded - that's in docs.

did you disable them in config (changing default config or providing your own as override)?

[djthegr8]

Could you check this demo and inspect the code?

[vladmandic]

it's using human.load() and human.detect(image) meaning there is no user configuration and will rely on defaults.
and defaults are all models enabled - you can see that in config.js.

you need to set your configuration. something like

const myConfig = { body: { enabled: false }, hand: { enabled: false } };

and then pass it to human library, either during instance creation, during load or during detect - all 3 work.

const human = new Human(myConfig);
await human.load(myConfig);
await human.detect(image, myConfig);

[djthegr8]

Actually, I have changed the defaults on setup...

async function setupMenu() {
  menu2 = new menu_default(document.body, "...", {top: "1rem", right: "1rem"});
  const btn = menu2.addButton("start video", "pause video", () => detectVideo());
  menu2.addButton("process images", "process images", () => detectSampleImages());
  document.getElementById("play").addEventListener("click", () => btn.click());
  menu2.addHTML('<hr style="min-width: 200px; border-style: inset; border-color: dimgray">');
  //menu2.addList("backend", ["cpu", "webgl", "wasm", "webgpu"], human.config.backend, (val) => human.config.backend = val);
  menu2.addBool("async operations", human.config, "async", (val) => human.config.async = val);
  menu2.addBool("enable profiler", human.config, "profile", (val) => human.config.profile = val);
  menu2.addBool("memory shield", human.config, "deallocate", (val) => human.config.deallocate = val);
  menu2.addBool("use web worker", ui, "useWorker");
  menu2.addHTML('<hr style="min-width: 200px; border-style: inset; border-color: dimgray">');
  menu2.addLabel("model parameters");
  human.config.hand.enabled = true;
      human.config.hand.landmarks = false;
      human.config.hand.maxHands = 1;
      human.config.hand.minConfidence = 0.99;
      human.config.hand.scoreThreshold = 0.95;
      human.config.face.enabled = false;
      human.config.body.enabled = false;
      human.config.gesture.enabled = false;
      human.config.face.mesh.enabled = false;
      human.config.face.iris.enabled = false;
      human.config.face.age.enabled = false;
      human.config.face.gender.enabled = false;
      human.config.face.emotion.enabled = false;
      var x = await human.tf.env().getAsync('WASM_HAS_SIMD_SUPPORT');
      var y = await human.tf.env().getAsync('WEBGL_RENDER_FLOAT32_CAPABLE');
      if (x){
          human.config.backend = "wasm";
          console.info("WASM enabled.");
      } else if (y) {
          alert("Your computer hasn't enabled WASM with SIMD!\nGo to chrome://flags and enable it to get a seamless experience!");
          console.warn("WASM disabled, backtracking to WebGL");
          human.config.backend = "webgl";
      } else {
          alert("Your computer doesn't support WebGL, and WASM is disabled.\nTo prevent a lagged experience, go to chrome://flags and enable it!");
          console.error("WASM Disabled, WebGL not supported.\n Reverting to CPU, but may be slow.");
          human.config.backend = 'cpu';
      }
      human.config.hand.detector.modelPath = "https://tfhub.dev/mediapipe/tfjs-model/handdetector/1/default/1";
  menu2.addRange("skip frames", human.config.face.detector, "skipFrames", 0, 50, 1, (val) => {
    human.config.face.detector.skipFrames = parseInt(val);
    human.config.face.emotion.skipFrames = parseInt(val);
    human.config.face.age.skipFrames = parseInt(val);
    human.config.hand.skipFrames = parseInt(val);
  });
  menu2.addRange("overlap", human.config.face.detector, "iouThreshold", 0.1, 1, 0.05, (val) => {
    human.config.face.detector.iouThreshold = parseFloat(val);
    human.config.hand.iouThreshold = parseFloat(val);
  });
  menu2.addHTML('<hr style="min-width: 200px; border-style: inset; border-color: dimgray">');
  menu2.addChart("FPS", "FPS");
  menuFX = new menu_default(document.body, "...", {top: "1rem", right: "18rem"});
  menuFX.addLabel("ui options");
  menuFX.addBool("crop & scale", ui, "crop", () => setupCamera());
  menuFX.addBool("camera front/back", ui, "facing", () => setupCamera());
  menuFX.addBool("use 3D depth", ui, "useDepth");
  menuFX.addBool("draw boxes", ui, "drawBoxes");
  menuFX.addBool("draw polygons", ui, "drawPolygons");
  menuFX.addBool("Fill Polygons", ui, "fillPolygons");
  menuFX.addBool("draw points", ui, "drawPoints");
  menuFX.addHTML('<hr style="min-width: 200px; border-style: inset; border-color: dimgray">');
  menuFX.addLabel("image processing");
  menuFX.addBool("enabled", human.config.filter, "enabled");
  ui.menuWidth = menuFX.addRange("image width", human.config.filter, "width", 0, 3840, 10, (val) => human.config.filter.width = parseInt(val));
  ui.menuHeight = menuFX.addRange("image height", human.config.filter, "height", 0, 2160, 10, (val) => human.config.filter.height = parseInt(val));
  menuFX.addRange("brightness", human.config.filter, "brightness", -1, 1, 0.05, (val) => human.config.filter.brightness = parseFloat(val));
  menuFX.addRange("contrast", human.config.filter, "contrast", -1, 1, 0.05, (val) => human.config.filter.contrast = parseFloat(val));
  menuFX.addRange("sharpness", human.config.filter, "sharpness", 0, 1, 0.05, (val) => human.config.filter.sharpness = parseFloat(val));
  menuFX.addRange("blur", human.config.filter, "blur", 0, 20, 1, (val) => human.config.filter.blur = parseInt(val));
  menuFX.addRange("saturation", human.config.filter, "saturation", -1, 1, 0.05, (val) => human.config.filter.saturation = parseFloat(val));
  menuFX.addRange("hue", human.config.filter, "hue", 0, 360, 5, (val) => human.config.filter.hue = parseInt(val));
  menuFX.addRange("pixelate", human.config.filter, "pixelate", 0, 32, 1, (val) => human.config.filter.pixelate = parseInt(val));
  menuFX.addBool("negative", human.config.filter, "negative");
  menuFX.addBool("sepia", human.config.filter, "sepia");
  menuFX.addBool("vintage", human.config.filter, "vintage");
  menuFX.addBool("kodachrome", human.config.filter, "kodachrome");
  menuFX.addBool("technicolor", human.config.filter, "technicolor");
  menuFX.addBool("polaroid", human.config.filter, "polaroid");
}
async function main() {
  log("Human: demo starting ...");
  await setupMenu();
  document.getElementById("log").innerText = `Human: version ${human.version} TensorFlow/JS: version ${human.tf.version_core}`;
  /*if (ui.modelsPreload) {
    status("loading");
    await human.load(human.config);
  }*/
  if (ui.modelsWarmup) {
    status("initializing");
    const warmup = new ImageData(50, 50);
    await human.detect(warmup,human.config);
  }
  status("human: ready");
  document.getElementById("loader").style.display = "none";
  document.getElementById("play").style.display = "block";
}
window.onload = main;
window.onresize = setupCamera;

[vladmandic]

why don't you use documented and recommended way?
define your configuration and pass it to Human during initialization.

await human.detect(warmup,human.config);

this means deep-merge-json-with-yourself, i have no idea what happens here.

[djthegr8]

If face is disabled, all its submodules shouldn't be loaded, could you please ensure this is done?

[vladmandic]

done & pushed update

const userConfig = {
  face: { enabled: false },
};

Human: flags: {IS_BROWSER: true, IS_NODE: false, DEBUG: false, WEBGL_FORCE_F16_TEXTURES: true, WEBGL_VERSION: 2, …}
Human: load model: models/posenet
Human: load model: models/handdetect
Human: load model: models/handskeleton
Human: warmed up