live2d-web ドキュメント

モデル検査

URL とローカルのモデル ZIP を読み込み前に検査します。

描画前に検査

live2d-web/inspect は React、Core、Framework、MediaPipe、JSZip を読み込まずに model3 の参照先を検査します。見つかった問題は一度にまとめて返されます。

import {
  inspectModelCapabilities,
  inspectModelSource,
} from 'live2d-web/inspect'
 
const report = await inspectModelSource({
  src: 'https://example.com/model.model3.json',
})
 
if (report.status === 'compatible') {
  console.log(report.motions, report.expressions)
}

URL を指定した検査では、モデルに記載された HTTP(S) の参照先を実際に取得します。ブラウザでは CORS が適用されますが、Node サーバーにはブラウザと同じ制限や、プライベートネットワークへのアクセスを防ぐ仕組みがありません。信頼できないモデル URL をサーバーで受け付ける場合は、検査前に許可するホストとネットワーク範囲を制限してください。ライブラリがサーバーから到達できるプライベート IP の範囲を自動判定することはありません。ローカル用のリゾルバーは、圧縮ファイル内に記載された外部 URL を取得しません。

ブラウザで ZIP を検査

/inspect は現在のタブ内だけで ZIP を開き、ファイルサイズ、ファイル数、パス、モデルの参照先を検査します。アップロード、保存、利用状況の送信は行いません。互換性のない圧縮ファイルは描画しません。

レポートの見方

compatible は参照先を読み取れて、現在の Backend で扱える構成であることを示します。warning は外部 URL や推奨値を超えるファイルなど、配信前に確認したい項目がある状態です。incompatible は model3 の解析失敗や必須ファイルの欠落など、そのままでは描画できない問題を含みます。

inspection.ts

const report = await inspectModelSource({ src: modelUrl })
 
for (const finding of report.findings) {
  console.log(finding.severity, finding.code, finding.path)
}
 
if (report.status !== 'incompatible') {
  const capabilities = inspectModelCapabilities(modelInfo)
  console.log(capabilities.recommendedMapping)
}

検出結果はモデルの安全性を保証するものではありません。公開前にはライセンス、配信元、CORS、実機での描画も別に確認してください。

上限と中断を設定する

外部からモデルを受け付ける画面では、ファイルと参照数の上限をアプリの用途に合わせて指定します。画面を閉じるときは AbortController で進行中の検査を止めます。

const controller = new AbortController()
 
const pending = inspectModelSource({
  src: modelUrl,
  signal: controller.signal,
  limits: {
    maxAssetBytes: 32 * 1024 * 1024,
    maxTotalBytes: 128 * 1024 * 1024,
    maxReferences: 512,
  },
})
 
addEventListener('pagehide', () => controller.abort(), { once: true })
await pending