Vitpose Base Simple

🚀 Transformers.js

Transformers.jsは、ONNXウェイトを使用してnielsr/vitpose-base-simpleモデルをサポートし、キーポイント検出を行うことができるJavaScriptライブラリです。

🚀 クイックスタート

このリポジトリは、nielsr/vitpose-base-simple のONNXウェイトを使用して、Transformers.jsと互換性を持たせています。

📦 インストール

まだインストールしていない場合は、NPM から Transformers.js JavaScriptライブラリをインストールできます。

npm i @huggingface/transformers

💻 使用例

基本的な使用法

import { AutoModel, AutoImageProcessor, RawImage } from '@huggingface/transformers';

// モデルとプロセッサをロード
const model_id = 'onnx-community/vitpose-base-simple';
const model = await AutoModel.from_pretrained(model_id);
const processor = await AutoImageProcessor.from_pretrained(model_id);

// 画像をロードして入力を準備
const url = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/ryan-gosling.jpg';
const image = await RawImage.read(url);
const inputs = await processor(image);

// ヒートマップを予測
const { heatmaps } = await model(inputs);

// ヒートマップを後処理してキーポイントとスコアを取得
const boxes = [[[0, 0, image.width, image.height]]];
const results = processor.post_process_pose_estimation(heatmaps, boxes)[0][0];
console.log(results);

高度な使用法

必要に応じて、出力を視覚化できます（ここではNode.jsでの使用例を示し、canvas ライブラリを使用しています）。

import { createCanvas, createImageData } from 'canvas';

// キャンバスを作成して画像を描画
const canvas = createCanvas(image.width, image.height);
const ctx = canvas.getContext('2d');
const imageData = createImageData(image.rgba().data, image.width, image.height);
ctx.putImageData(imageData, 0, 0);

// キーポイント間のエッジを描画
const points = results.keypoints;
ctx.lineWidth = 4;
ctx.strokeStyle = 'blue';
for (const [i, j] of model.config.edges) {
    const [x1, y1] = points[i];
    const [x2, y2] = points[j];
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
}

// 各キーポイントに円を描画
ctx.fillStyle = 'red';
for (const [x, y] of points) {
    ctx.beginPath();
    ctx.arc(x, y, 8, 0, 2 * Math.PI);
    ctx.fill();
}

// 画像をファイルに保存
import fs from 'fs';
const out = fs.createWriteStream('pose.png');
const stream = canvas.createPNGStream();
stream.pipe(out)
out.on('finish', () =>  console.log('The PNG file was created.'));

入力画像	出力画像

⚠️ 重要提示

ONNXウェイト用に別のリポジトリを用意するのは、WebMLが普及するまでの一時的な解決策です。モデルをWeb対応にする場合は、🤗 Optimum を使用してONNXに変換し、このリポジトリのように構成することをおすすめします（ONNXウェイトは onnx というサブフォルダに配置）。