How to use @tensorflow-models/posenet - 10 common examples

async function bindPage() {
    const net = await posenet.load(); // posenetの呼び出し
    let video;
    try {
        video = await loadVideo(); // video属性をロード
    } catch(e) {
        console.error(e);
        return;
    }
    detectPoseInRealTime(video, net);
}

public static loadModel(callback?: () => any) {
        posenet
            .load({
                architecture: 'ResNet50',
                outputStride: 32,
                inputResolution: 257,
                quantBytes: 2
            })
            .then((model: PoseNet) => {
                PoseDetector.model = model;
                store.dispatch(updatePoseDetectorStatus(true));
                store.dispatch(updateActiveLabelType(LabelType.POINT));
                const activeLabelType: LabelType = LabelsSelector.getActiveLabelType();
                activeLabelType === LabelType.POINT && AIPoseDetectionActions.detectPoseForActiveImage();
                callback && callback();
            })
            .catch((error) => {
                // TODO

async initPoseDetection() {
    // this.net = await posenet.load(0.75); // Old version of posenet
    this.net = await posenet.load({
    architecture: 'MobileNetV1',
    outputStride: 16,
    inputResolution: 513,
    multiplier: 0.75});

  }

toggleLoadingUI(true);
      guiState.net = await posenet.load({
        architecture: guiState.changeToArchitecture,
        outputStride: guiState.outputStride,
        inputResolution: guiState.inputResolution,
        multiplier: guiState.multiplier,
      });
      toggleLoadingUI(false);
      guiState.architecture = guiState.changeToArchitecture;
      guiState.changeToArchitecture = null;
    }

    if (guiState.changeToMultiplier) {
      guiState.net.dispose();
      toggleLoadingUI(true);
      guiState.net = await posenet.load({
        architecture: guiState.architecture,
        outputStride: guiState.outputStride,
        inputResolution: guiState.inputResolution,
        multiplier: +guiState.changeToMultiplier,
        quantBytes: guiState.quantBytes
      });
      toggleLoadingUI(false);
      guiState.multiplier = +guiState.changeToMultiplier;
      guiState.changeToMultiplier = null;
    }

    if (guiState.changeToOutputStride) {
      // Important to purge variables and free up GPU memory
      guiState.net.dispose();
      toggleLoadingUI(true);
      guiState.net = await posenet.load({

async componentWillMount() {
    // Loads the pre-trained PoseNet model
    this.net = await posenet.load(this.props.mobileNetArchitecture);
  }

export function drawSkeleton(
    keypoints: any, minConfidence: number, ctx: wx.CanvasContext, scale = 1) {
  const adjacentKeyPoints =
      posenet.getAdjacentKeyPoints(keypoints, minConfidence);

  // tslint:disable-next-line:no-any
  adjacentKeyPoints.forEach((keypoints: any) => {
    drawSegment(
        toTuple(keypoints[0].position), toTuple(keypoints[1].position), color,
        scale, ctx);
  });
}

camera.onloadeddata = function(){
  messageDiv.innerHTML = "Camera loaded. Loading PoseNet..."
  var [w,h] = [camera.videoWidth, camera.videoHeight];

  console.log(w,h);

  inputCanvas.width = w;
  inputCanvas.height = h;

  debugCanvas.width = w;
  debugCanvas.height = h;

  ipcRenderer.send('resize', w, h);

  posenet.load(settings.poseNetConfig).then(function(_net){
    messageDiv.innerHTML = "All loaded."
    net = _net;
    setInterval(estimateFrame,5);
  });
}

export async function loadPoseNet(posenetConfig: Partial) {
	posenetConfig = fillConfig(posenetConfig);

	const posenetModel = await posenet.load({
		architecture: posenetConfig.architecture,
		outputStride: posenetConfig.outputStride,
		inputResolution: posenetConfig.inputResolution,
		multiplier: posenetConfig.multiplier
	});
	return posenetModel;
}

});
    const pose = poses && poses[0];

    if (pose && pose.keypoints) {
      for (const keypoint of pose.keypoints.filter(kp => kp.score >= 0.2)) {
        const x = keypoint.position.x * this.ratio;
        const y = keypoint.position.y * this.ratio;

        this.ctx.beginPath();
        this.ctx.arc(x, y, 5, 0, 2 * Math.PI, false);
        this.ctx.lineWidth = 3;
        this.ctx.strokeStyle = '#bada55';
        this.ctx.stroke();
      }

      const adjacentKeyPoints = posenet.getAdjacentKeyPoints(pose.keypoints, 0.2);
      adjacentKeyPoints.forEach(keypoints => this.drawSegment(keypoints[0].position, keypoints[1].position));
    }
  }

export function drawSkeleton(keypoints, minConfidence, ctx, scale = 1) {
  const adjacentKeyPoints =
      posenet.getAdjacentKeyPoints(keypoints, minConfidence);

  adjacentKeyPoints.forEach((keypoints) => {
    drawSegment(
        toTuple(keypoints[0].position), toTuple(keypoints[1].position), color,
        scale, ctx);
  });
}