Transformers.js v4 入門ガイド

# npm
npm install @huggingface/transformers

# yarn
yarn add @huggingface/transformers

# pnpm
pnpm add @huggingface/transformers

import { pipeline } from "@huggingface/transformers";

// パイプラインを作成（タスクとモデルを指定）
const classifier = await pipeline(
  "image-classification",           // タスク名
  "Xenova/mobilenetv2_1.0_224",     // モデルID
  { device: "webgpu" }              // v4: WebGPUを使用
);

// 推論実行
const result = await classifier("https://example.com/photo.jpg");
console.log(result);
// => [{ label: "tabby cat", score: 0.92 }, ...]

import { pipeline } from "@huggingface/transformers";

// MobileNetV2で画像分類（軽量・高速）
const classifier = await pipeline(
  "image-classification",
  "Xenova/mobilenetv2_1.0_224",
  { device: "webgpu" }
);

// ファイルまたはURLから分類
const result = await classifier(imageElement);
console.log(result);
// => [
//   { label: "golden retriever", score: 0.89 },
//   { label: "Labrador retriever", score: 0.05 },
//   { label: "cocker spaniel", score: 0.02 }
// ]

// Top-5結果を取得
const top5 = await classifier(imageElement, { topk: 5 });

import { pipeline } from "@huggingface/transformers";

// YOLOv10で物体検出（高速・高精度）
const detector = await pipeline(
  "object-detection",
  "onnx-community/yolov10n",
  { device: "webgpu" }
);

const result = await detector(imageElement, {
  threshold: 0.5,  // 信頼度50%以上のみ
});
console.log(result);
// => [
//   { label: "person", score: 0.95,
//     box: { xmin: 10, ymin: 20, xmax: 200, ymax: 400 } },
//   { label: "dog", score: 0.88,
//     box: { xmin: 300, ymin: 150, xmax: 500, ymax: 350 } }
// ]

// Canvasにバウンディングボックスを描画
result.forEach(({ label, score, box }) => {
  ctx.strokeRect(box.xmin, box.ymin,
    box.xmax - box.xmin, box.ymax - box.ymin);
  ctx.fillText(
    `${label} ${(score * 100).toFixed(0)}%`,
    box.xmin, box.ymin - 5
  );
});

import { pipeline } from "@huggingface/transformers";

// Qwen3 0.6B（ブラウザで動く軽量LLM）
const generator = await pipeline(
  "text-generation",
  "onnx-community/Qwen3-0.6B-ONNX",
  { device: "webgpu" }
);

// テキスト生成
const result = await generator(
  "エッジAIの利点を3つ教えてください。",
  {
    max_new_tokens: 256,
    temperature: 0.7,
    do_sample: true,
  }
);
console.log(result[0].generated_text);

// ストリーミング生成（1トークンずつ出力）
const streamer = await pipeline(
  "text-generation",
  "onnx-community/SmolLM2-360M-Instruct-ONNX",
  { device: "webgpu" }
);

for await (const token of streamer.stream("こんにちは！")) {
  process.stdout.write(token);
}

import { pipeline } from "@huggingface/transformers";

// Whisper small（日本語対応の音声認識）
const transcriber = await pipeline(
  "automatic-speech-recognition",
  "onnx-community/whisper-small",
  {
    device: "webgpu",
    dtype: "fp16",  // 半精度でメモリ削減
  }
);

// 音声ファイルから文字起こし
const result = await transcriber(audioBlob, {
  language: "japanese",
  task: "transcribe",
  chunk_length_s: 30,      // 30秒ずつ処理
  stride_length_s: 5,      // 5秒のオーバーラップ
  return_timestamps: true,  // タイムスタンプ付き
});
console.log(result.text);
// => "エッジAIとは、クラウドではなく..."
console.log(result.chunks);
// => [
//   { text: "エッジAIとは、", timestamp: [0.0, 1.5] },
//   { text: "クラウドではなく...", timestamp: [1.5, 3.2] }
// ]

import {
  SamModel, AutoProcessor, RawImage
} from "@huggingface/transformers";

// SAMモデルとプロセッサをロード
const model = await SamModel.from_pretrained(
  "Xenova/sam-vit-base",
  { device: "webgpu" }
);
const processor = await AutoProcessor.from_pretrained(
  "Xenova/sam-vit-base"
);

// 画像を読み込み
const image = await RawImage.read("photo.jpg");

// クリック座標を指定してセグメンテーション
const inputs = await processor(image, {
  input_points: [[[450, 600]]],  // クリック位置
  input_labels: [[1]],            // 1=前景, 0=背景
});

// 推論実行
const outputs = await model(inputs);
const masks = await processor.post_process_masks(
  outputs.pred_masks,
  inputs.original_sizes,
  inputs.reshaped_input_sizes,
);
// masks[0] にセグメンテーションマスクが格納

// バックエンドの切り替え方法

// WebGPU（推奨 - 最速）
const pipe = await pipeline("task", "model", {
  device: "webgpu"
});

// WASM（フォールバック - 全ブラウザ対応）
const pipe = await pipeline("task", "model", {
  device: "wasm"
});

// 自動選択（WebGPU対応ならWebGPU、非対応ならWASM）
const device = navigator.gpu ? "webgpu" : "wasm";
const pipe = await pipeline("task", "model", { device });

# Optimumをインストール
pip install optimum[exporters]

# PyTorchモデルをONNXに変換
optimum-cli export onnx \
  --model your-model-name \
  --task image-classification \
  ./onnx_model/

# 量子化（モデルサイズを1/4に圧縮）
optimum-cli export onnx \
  --model your-model-name \
  --task image-classification \
  --optimize O3 \
  ./onnx_model_quantized/

# Hugging Face Hubにアップロード
huggingface-cli upload your-username/your-model-onnx \
  ./onnx_model/

# Transformers.jsから使用
import { pipeline } from "@huggingface/transformers";
const pipe = await pipeline(
  "image-classification",
  "your-username/your-model-onnx",
  { device: "webgpu" }
);