ImageEmbedderで猫と人物の画像を比較する
猫の画像と人物の画像を、数値の特徴量に変えて比較します。ImageEmbedderは画像の名前や場所を返すタスクではありません。コサイン類似度を表示し、同じ写真の切り抜きとの比較も試して、数値の意味を学びましょう。
この記事でできるようになること
画像から埋め込みを取得し、同じモデルの特徴量同士でコサイン類似度を計算できる。類似度を一致率や個体識別と混同しない。
HTMLとJavaScriptの変数・関数・イベントの基本が分かる方を対象に、MediaPipeの学習済みモデルを使うところから進めます。自分でモデルを学習させる準備は不要です。
1. 何をしたいときに使うか・モデルを選ぶ
埋め込み（embedding）は、画像の特徴を数値の並びへ変換したものです。1つの数字が「猫度」を表すような分かりやすい一覧ではなく、たくさんの数字をまとめて扱います。似た画像を探したい、写真の候補を並べたいといった場面で、画像同士を比較する材料になります。
画像分類は決まったカテゴリ名を返し、物体検出はカテゴリと位置を返します。画像埋め込みは、比較用のベクトルを返します。ベクトルは数値の配列だと理解すれば、最初のサンプルを動かせます。どの数値が耳や目を表すかを1つずつ読む用途ではありません。分類が「名前を付ける」処理なら、埋め込みは「比較に使う特徴を取り出す」処理です。
本サンプルはMobileNet V3 Small float32モデルです。モデルを選ぶ際は、目的に合う特徴を学習したモデルか、出力次元が何か、対応するタスクかを確認します。顔の個体識別専用モデルや、猫の個体識別専用モデルとして用意したものではありません。どれほど似て見えるかと、同じ個体かを別の問題として扱います。
比較する画像は、同じモデル・同じ出力ヘッドから作った特徴量にそろえます。異なるモデルの配列を、長さが同じだから比較可能だと考えてはいけません。モデルを更新したら、保存済みの特徴量との互換性を確認し、必要なら画像から作り直します。基礎仕様は公式の画像埋め込みガイドで確認できます。
2. まず完成したサンプルを動かす
次のデモを開き、サンプル画像を選んで「AIを読み込んで実行する」を押します。画像を選ぶだけではAIを実行しません。最初のボタン操作でSDK・WASM・モデルを取得し、次からは初期化済みのタスクを再利用します。
今回の実行で観察したこと
愛猫の写真とAI人物の写真のコサイン類似度は0.0076でした。同じ愛猫の写真の中央80%を切り抜いた画像との比較では0.8615になりました。条件はPCのChrome、SDK 0.10.34、MobileNet V3 Small float32版1、quantize: falseです。同じモデル・同じ出力ヘッドで比較し、入力と比較画像を画面に残しています。この2組の結果は類似度の変化を観察するための例で、0.8615を「86.15%同じ猫」や個体識別の成功率と読むものではありません。
デモに同梱する人物はAI生成画像、猫は運営者の愛猫の写真です。任意のJPEG・PNG・WebPも読み込めますが、入力画像を推論用サーバーへ送信する処理はありません。SDKとモデルの取得は外部への通信を行います。時刻欄は初期化を除く推論・結果加工・描画の計測で、速度を保証する数字ではありません。
3. ZIPを展開して自分のPCで動かす
VS Codeでフォルダーを開く方法や、app.jsの編集・保存が初めてなら、導入記事のエディター準備と「保存 → ブラウザ更新 → 実行」の手順を先に確認してください。下では、このサンプルの起動に必要な操作を示します。
この教材はHTMLとJavaScriptだけで動く独立サンプルです。サイト全体のAstroプロジェクトをインストールする必要はありません。SDKをCDNから取得するため、起動時のインターネット接続は必要です。画像は推論用サーバーへ送信せず、ブラウザ内で処理します。
- 上のZIPをダウンロードします。WindowsではZIPを右クリックして「すべて展開」を選びます。
- 展開したフォルダーを開き、
index.htmlとapp.js、person.jpg、cat.jpg、README.txtが並んでいることを確認します。さらに同じ名前のフォルダーがある場合は、その中へ進みます。 - エクスプローラーのアドレス欄へ
powershellと入力してEnterを押します。このフォルダーを作業場所にした端末が開きます。 - 次のコマンドでNode.jsとnpmがあるか確認します。
node --version
npm.cmd --versionバージョンの数字が出れば準備できます。「認識されません」と出る場合はNode.js公式のダウンロードページからLTS版を導入し、端末を開き直します。Node.jsはこの例ではAIを実行するためではなく、HTTPサーバーを起動するために使います。
npx.cmd --yes http-server . -p 8080初回はHTTPサーバーのツールを取得することがあります。端末にアドレスが表示され、そのまま入力を待つ状態になればサーバーが動いています。ブラウザでhttp://localhost:8080を開きます。画像の選択画面が出たら成功です。端末は実行中のまま残します。
Mac・Linuxはnpm --version、npx --yes http-server . -p 8080に読み替えます。Windowsの.cmdは、PowerShellのスクリプト実行制限に当たりにくい呼び出し方です。HTMLをダブルクリックしてfile://で開くとモジュールの読み込みが制限されることがあるため、HTTPで開きます。
8080が使用中ならコマンドのポートを8081へ変え、開くURLもhttp://localhost:8081に変えます。終了するときは端末でCtrl+Cを押します。コードを修正したら保存し、ブラウザを再読み込みしてから実行します。古い結果が残る場合は、開発者ツールのNetworkでキャッシュを無効にして再読み込みします。
4. AIの出力を自分のJavaScriptへつなぐ
embed(inputCanvas)でembeddings配列を受け取ります。このサンプルは最初のヘッドのembeddings[0]を使います。内部の数値列はfloatEmbeddingに入り、JSONでも配列を確認できます。この記事ではquantize: falseなので、バイトへ量子化した結果ではなく浮動小数点の特徴量を扱います。
コサイン類似度は、数値列の向きがどれほど近いかを比べる指標です。SDKのImageEmbedder.cosineSimilarity(a, b)へ2つの埋め込みを渡します。一般的な範囲は−1〜1ですが、0.8を「80%同じ画像」と読み替えることはできません。値の使い方はモデルと、実際に比較した画像の分布に依存します。
このデモは2つの比較を用意しました。1つ目は愛猫の写真とAI人物の写真です。2つ目は愛猫の写真と、同じ写真の中央80%をCanvasで切り抜いた画像です。後者は別の日に撮影した愛猫の写真ではありません。同じ入力へ小さな加工を加えた場合の変化を確認する実験です。写真を切り抜くと背景や構図も変わるため、近い値になると決めつけず実際の結果を読みます。
比較先は、推論前に同じ大きさのCanvasへ描きます。人物写真の縦横比は比較Canvasへ合わせて描いているため、元の見た目とは異なる比率になる場合があります。モデルへ渡した比較画像を結果Canvasへ表示することで、何を比較したか確認できます。厳密な画像検索を作る段階では、縦横比の維持や中央切り抜きなど、前処理のルールをすべての画像で統一します。
結果には数値列が多くありますが、特徴量の各値を手動で解釈する必要はありません。最初は配列が返ったこと、同じモデルの2枚から計算したこと、実際の比較画像が画面へ出ることを確認します。その後に、複数の画像をあらかじめ埋め込みへ変換し、類似度の順で候補を並べる処理へ進めます。
次は処理の中心だけを抜き出した例です。inputCanvasやタスクの変数は、すでに初期化済みとします。この数行だけをHTMLへ貼ると動くという意味ではありません。実際に動かすコードは次の完全版を使い、中心となるAPIをこの短い例で確認します。
const first = embedder.embed(firstCanvas);
const second = embedder.embed(secondCanvas);
const similarity = ImageEmbedder.cosineSimilarity(
first.embeddings[0],
second.embeddings[0],
);
console.log(similarity);5. 完全なコードを確認する
index.htmlは操作画面とCanvasを用意し、app.jsは画像選択・モデル初期化・推論・描画を担当します。画像を読み込むawait image.decode()の後にCanvasへ描き、読み込み前の画像を推論へ渡さないようにしています。GPUの初期化が失敗した場合はCPUで再試行し、両方失敗した場合は理由を画面とConsoleへ表示します。
index.htmlの全文を開く
<!doctype html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><title>ImageEmbedderで猫と人物の画像を比較する | MediaPipe実行サンプル</title><style>
:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #253235; background: #f3f7f6; line-height: 1.8; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100% - 32px, 1080px); margin: 32px auto 56px; }
h1 { font-size: clamp(1.45rem, 4vw, 2.2rem); line-height: 1.5; margin: 8px 0 16px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
p { margin: 8px 0; }
a { color: #006453; text-underline-offset: 3px; }
.eyebrow { color: #006453; font-size: .85rem; font-weight: 700; letter-spacing: .07em; }
.intro { max-width: 780px; }
.panel { margin-top: 24px; padding: 24px; border: 1px solid #d2e1dc; border-radius: 16px; background: white; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; }
legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.choices { display: flex; flex-wrap: wrap; gap: 12px; }
.choice { display: flex; align-items: center; gap: 8px; border: 1px solid #bdcec7; border-radius: 8px; padding: 10px 16px; cursor: pointer; }
.choice:has(input:checked) { background: #e8f7ee; border-color: #00715b; }
input[type="radio"] { width: 18px; height: 18px; accent-color: #00715b; }
input[type="file"] { display: block; max-width: 100%; margin-top: 8px; font: inherit; font-size: .9rem; }
label[for="image-file"] { font-weight: 700; }
button { font: inherit; padding: 12px 22px; border-radius: 9px; border: 0; background: #006b55; color: white; font-weight: 700; cursor: pointer; min-height: 48px; }
button:disabled { opacity: .5; cursor: wait; }
:focus-visible { outline: 3px solid #e3aa28; outline-offset: 3px; }
.actions { margin-top: 20px; }
.note { font-size: .88rem; color: #566561; }
#status { min-height: 1.8em; margin-top: 16px; font-weight: 600; overflow-wrap: anywhere; }
#status[data-error="true"] { color: #a42b24; }
.images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
figure { margin: 0; min-width: 0; }
figcaption { font-weight: 700; margin-bottom: 8px; }
.canvas-wrap { display: grid; place-items: center; min-height: 180px; overflow: hidden; border: 1px solid #d2e1dc; border-radius: 10px; background: #f0f3f1; }
canvas { display: block; width: 100%; height: auto; }
dl { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 20px 0 0; }
dl > div { min-width: 130px; }
dt { font-size: .85rem; color: #566561; }
dd { margin: 0; font-weight: 700; }
pre { margin: 0; padding: 18px; background: #f0f4f2; border: 1px solid #d2e1dc; border-radius: 8px; max-height: 420px; overflow: auto; font-size: .85rem; line-height: 1.7; }
details summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
details pre { margin-top: 12px; }
footer { font-size: .85rem; color: #566561; margin-top: 24px; }
@media (max-width: 640px) { main { margin-top: 20px; } .panel { padding: 18px; } .images { grid-template-columns: 1fr; } button { width: 100%; } dl { gap: 12px 24px; } }
#summary{white-space:pre-line;overflow-wrap:anywhere}select{font:inherit;max-width:100%;padding:8px;margin:10px}input[type="range"]{display:block;width:100%;max-width:400px}#input-canvas{touch-action:manipulation}</style></head><body><main><header><p class="eyebrow">MEDIAPIPE · JAVASCRIPT · IMAGE</p><h1>ImageEmbedderで猫と人物の画像を比較する</h1><p>画像から特徴量を作り、猫と人物、猫と同じ写真の中央切り抜きを比較します。類似度は同一人物・同じ猫を保証する判定ではありません。</p><p class="note">人物はプロジェクト内のAI生成画像、猫は運営者の愛猫です。画像はブラウザ内で処理し、推論用サーバーへ送信しません。初回は外部CDNとGoogleからSDK・モデルを取得します。</p></header><section class="panel"><h2>1. 画像を選んで実行する</h2><fieldset><legend>サンプル画像</legend><div class="choices"><label class="choice"><input type="radio" name="sample" value="person" >AI作成の人物</label><label class="choice"><input type="radio" name="sample" value="cat" checked>愛猫の写真</label></div></fieldset><label for="image-file">自分の画像でも試す（任意）</label><input id="image-file" type="file" accept="image/jpeg,image/png,image/webp"><p class="note">JPEG・PNG・WebP、20 MBまで。長辺960 pxへ縮小します。</p><label for="comparison">比較先</label><select id="comparison"><option value="person">AI人物画像と比較</option><option value="crop">同梱の愛猫写真の中央80%切り抜きと比較</option></select><div class="actions"><button id="run-button" disabled>AIを読み込んで実行する</button></div><p id="status" role="status" aria-live="polite" aria-atomic="true">画像を読み込んでいます。</p><noscript>JavaScriptを有効にしてください。</noscript></section><section class="panel"><h2>2. 実行結果を確認する</h2><div class="images"><figure><figcaption>入力画像</figcaption><div class="canvas-wrap"><canvas id="input-canvas" width="480" height="320" role="img" aria-label="入力画像"></canvas></div></figure><figure><figcaption>比較画像とコサイン類似度</figcaption><div class="canvas-wrap"><canvas id="result-canvas" width="480" height="320" role="img" aria-label="未実行"></canvas></div></figure></div><dl><div><dt>コサイン類似度</dt><dd id="count">未実行</dd></div><div><dt>入力 → 推論サイズ</dt><dd id="dimensions">準備中</dd></div><div><dt>推論・結果処理の時間</dt><dd id="elapsed">未実行</dd></div><div><dt>実行先</dt><dd id="delegate">未初期化</dd></div></dl><p class="note">時間はモデル初期化を除き、推論と結果の加工・描画を含みます。端末によって変わり、性能保証ではありません。</p><p id="summary">まだ実行していません。</p></section><section class="panel"><h2>3. 出力JSONを読む</h2><details open><summary>結果のデータ（小数は表示用に丸めています）</summary><pre id="json-output">まだ実行していません。</pre></details></section><footer><p>SDK：@mediapipe/tasks-vision 0.10.34 ／ モデル：MobileNet V3 Small float32</p><p><a href="./README.txt">起動方法・画像出典</a></p></footer></main><script type="module" src="./app.js"></script></body></html>app.jsの全文を開く
// SDK・WASMは同じ固定版にそろえます。モデル版は別に管理します。
const CONFIG = {
"slug": "mediapipe-image-embedding",
"title": "ImageEmbedderで猫と人物の画像を比較する",
"task": "ImageEmbedder",
"version": "0.10.34",
"model": "https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite",
"modelName": "MobileNet V3 Small float32",
"type": "embedding",
"method": "embed",
"options": {
"runningMode": "IMAGE",
"quantize": false
},
"default": "cat",
"result": "比較画像とコサイン類似度",
"intro": "画像から特徴量を作り、猫と人物、猫と同じ写真の中央切り抜きを比較します。類似度は同一人物・同じ猫を保証する判定ではありません。"
};
const $ = selector => document.querySelector(selector);
const input = $('#input-canvas');
const output = $('#result-canvas');
const ctx = output.getContext('2d');
const inputCtx = input.getContext('2d');
const runButton = $('#run-button');
let task = null,
sdk = null,
delegate = '',
imageReady = false,
busy = false,
selection = 0;
const status = (message, error = false) => {
$('#status').textContent = message;
$('#status').dataset.error = String(error);
};
function controls() {
runButton.disabled = busy || !imageReady;
for (const element of document.querySelectorAll('input, select')) element.disabled = busy;
runButton.textContent = busy ? '処理しています…' : 'AIを読み込んで実行する';
}
async function loadImage(source, name) {
const request = ++selection;
imageReady = false;
controls();
$('#count').textContent = '未実行';
$('#elapsed').textContent = '未実行';
$('#summary').textContent = 'まだ実行していません。';
$('#json-output').textContent = 'まだ実行していません。';
const url = source instanceof File ? URL.createObjectURL(source) : null;
try {
const image = new Image();
image.src = url ?? source;
await image.decode();
if (request !== selection) return;
const scale = Math.min(1, 960 / Math.max(image.naturalWidth, image.naturalHeight));
input.width = output.width = Math.max(1, Math.round(image.naturalWidth * scale));
input.height = output.height = Math.max(1, Math.round(image.naturalHeight * scale));
inputCtx.drawImage(image, 0, 0, input.width, input.height);
ctx.drawImage(input, 0, 0);
$('#dimensions').textContent = image.naturalWidth + ' × ' + image.naturalHeight + ' → ' + input.width + ' × ' + input.height + ' px';
input.setAttribute('aria-label', name + 'の入力画像');
imageReady = true;
status(name + 'を選びました。実行ボタンを押してください。');
} catch (error) {
console.error(error);
status('画像を読み込めませんでした。JPEG・PNG・WebPを選び直してください。', true);
} finally {
if (url) URL.revokeObjectURL(url);
if (request === selection) controls();
}
}
async function initialize() {
if (task) return task;
status('初回の準備中：SDK・WASM・モデルをインターネットから取得しています。');
const base = 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@' + CONFIG.version;
sdk = await import(base + '/vision_bundle.mjs');
const vision = await sdk.FilesetResolver.forVisionTasks(base + '/wasm');
const create = hardware => sdk[CONFIG.task].createFromOptions(vision, {
...CONFIG.options,
baseOptions: {
modelAssetPath: CONFIG.model,
delegate: hardware
}
});
try {
task = await create('GPU');
delegate = 'GPU';
} catch (error) {
console.warn('GPUの初期化失敗。CPUで再試行します。', error);
status('GPUを初期化できませんでした。CPUで再試行しています。');
task = await create('CPU');
delegate = 'CPU';
}
$('#delegate').textContent = delegate;
return task;
}
function caption(text) {
const size = Math.max(14, Math.round(output.width / 36));
ctx.font = 'bold ' + size + 'px system-ui';
ctx.fillStyle = '#063b35';
const lines = text.split('\n');
ctx.fillRect(0, output.height - lines.length * (size + 12), output.width, lines.length * (size + 12));
ctx.fillStyle = '#fff';
lines.forEach((line, i) => ctx.fillText(line, 10, output.height - (lines.length - i - 1) * (size + 12) - 8));
}
async function processImage() {
const engine = await initialize();
ctx.drawImage(input, 0, 0);
let result, count, summary;
let started = performance.now();
const comparison = $('#comparison').value;
const image = new Image();
image.src = comparison === 'person' ? './person.jpg' : './cat.jpg';
await image.decode();
const other = document.createElement('canvas');
other.width = input.width;
other.height = input.height;
const otherCtx = other.getContext('2d');
if (comparison === 'crop') {
const w = image.naturalWidth * .8,
h = image.naturalHeight * .8;
otherCtx.drawImage(image, image.naturalWidth * .1, image.naturalHeight * .1, w, h, 0, 0, other.width, other.height);
} else otherCtx.drawImage(image, 0, 0, other.width, other.height);
// 比較画像の取得・decode・Canvas準備を計測から除き、推論から測る。
started = performance.now();
const a = engine.embed(input);
const b = engine.embed(other);
const similarity = sdk.ImageEmbedder.cosineSimilarity(a.embeddings[0], b.embeddings[0]);
result = {
comparison: comparison === 'crop' ? '選択画像と愛猫写真の中央80%切り抜き' : '選択画像とAI人物画像',
cosineSimilarity: similarity,
first: a,
second: b
};
count = similarity.toFixed(4);
summary = 'コサイン類似度：' + count + '。同じモデル・同じ出力ヘッドの特徴量同士を比較。';
ctx.drawImage(other, 0, 0);
caption('cosine similarity: ' + count);
$('#elapsed').textContent = (performance.now() - started).toFixed(1) + ' ms';
$('#count').textContent = String(count);
$('#summary').textContent = summary;
$('#json-output').textContent = JSON.stringify(result, (_key, value) => ArrayBuffer.isView(value) ? Array.from(value) : typeof value === 'number' ? Number(value.toFixed(5)) : value, 2);
output.setAttribute('aria-label', CONFIG.result + '。' + summary);
status('実行が完了しました。画像・数値・JSONを確認してください。');
}
runButton.addEventListener('click', async () => {
if (busy || !imageReady) return;
busy = true;
controls();
try {
await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
await processImage();
} catch (error) {
console.error(error);
status('実行に失敗しました：' + error.message + '。通信とConsoleを確認し、SDK・WASM・モデルの取得状況を調べてください。', true);
} finally {
busy = false;
controls();
}
});
for (const radio of document.querySelectorAll('input[name="sample"]')) radio.addEventListener('change', () => {
$('#image-file').value = '';
void loadImage('./' + radio.value + '.jpg', radio.value === 'cat' ? '愛猫の写真' : 'AI作成の人物');
});
$('#image-file').addEventListener('change', () => {
const file = $('#image-file').files[0];
if (!file) return;
if (file.size > 20 * 1024 * 1024 || !['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) {
status('JPEG・PNG・WebP、20 MB以下を選んでください。', true);
return;
}
for (const radio of document.querySelectorAll('input[name="sample"]')) radio.checked = false;
void loadImage(file, file.name);
});
$('#comparison').addEventListener('change', () => status('比較先を変更しました。実行ボタンを押してください。'));
addEventListener('pagehide', () => {
task?.close();
task = null;
});
void loadImage('./' + CONFIG.default + '.jpg', CONFIG.default === 'cat' ? '愛猫の写真' : 'AI作成の人物');
最初は全文を暗記せず、CONFIGでモデルと設定を確認し、initialize()でタスクを作り、processImage()で結果を読む順番で追います。UIの状態管理は、AIの推論と別の役割です。実行中に画像が変わらないようにする処理も、公開するアプリには必要になります。
6. 1つずつ条件を変えて理解する
- 入力を愛猫の写真、比較先をAI人物にして実行します。表示されたコサイン類似度と、実際の2枚を見ます。
- 比較先を「同じ愛猫写真の中央80%切り抜き」へ変更し、ボタンを押してもう一度実行します。
- 2回の数値がどれほど変わったか比べます。高低の予想を先に書いておくと、画像の見た目とモデルの特徴の違いを考えやすくなります。
- コードの切り抜き割合0.8・開始位置0.1を一緒に変更し、切り抜きの中心がずれないようにして再比較します。
同じ写真同士をそのまま比較する基準も確認したい場合は、切り抜き処理を通常のdrawImageへ変更します。入力と前処理が完全に同じときの値を基準に、変更した写真の値を比較します。しきい値を決めるには、似ている例と似ていない例を複数集める必要があり、この2つの例だけで一般的な境界を決めることはできません。
7. このサイトのツールへどうつながるか
画像埋め込みは今回のシリーズで追加した独立した学習デモです。現在の顔モザイクや背景透過が、この特徴量比較を利用しているという意味ではありません。写真から似た構図の候補を案内する、といった新しい用途の基礎になります。
愛猫写真を探すアプリを考えるなら、類似度の高い順に候補を並べ、最後は利用者が画像を見て確認する流れが分かりやすくなります。「この猫は同じ個体」と自動確定するより、候補検索に限定するとモデルの出力と画面の説明をそろえられます。特徴量を保存する場合も、使用モデルと前処理の情報を一緒に残します。
出力を使う前に確認する限界
類似度は一致率、個体名、著作権上の同一性などの判定ではありません。背景や構図が似ている別の対象で高い値になる場合があります。違うモデルや前処理で作った特徴量を混ぜず、実際の画像と数値を確認します。
8. 動かない・結果が違うときの調べ方
| 状態 | 先に確認すること |
|---|---|
| cosineSimilarityでエラー | embeddings[0]のオブジェクトを渡し、同じモデル・同じ出力ヘッド・同じ要素数の結果を比べます。 |
| 別の写真なのに高い値になる | 類似度は個体の一致判定ではありません。背景や構図の影響を、実際に比較した画像と一緒に確認します。 |
| 比較画像の形が変わる | 教材は入力と同寸の比較Canvasへ描きます。厳密な用途では縦横比や切り抜きなどの前処理を統一します。 |
| 任意の画像を選んでも比較先が猫の切り抜き | 比較先は同梱の愛猫写真です。入力画像を自動で切り抜く選択ではなく、画面に表示する比較画像を確認します。 |
| 画面・入力画像を開けない | HTTPサーバーのフォルダーとURLを確認し、Networkで同梱画像が404になっていないか見ます。 |
| SDK・モデルを読み込めない | SDK・WASM・モデルの固定URLをNetworkで確認します。GPU初期化失敗時はCPUで再試行し、両方失敗した場合はConsoleを読みます。 |
ChromeやEdgeではF12で開発者ツールを開けます。Consoleに出た最初のエラーと、Networkの失敗したURLを確認します。モデルの読み込み失敗なのにスコアの閾値を変更しても直りません。画像読み込み、モデル初期化、推論、描画の順に分けて調べます。
サンプルでは実行中のボタンと画像変更を無効にし、同時に処理が走らないようにしています。画像ファイルのObject URLは読み込み後に解放し、ページから離れるときはタスクのclose()を呼びます。スマホの画面幅では結果を縦に並べます。PCの表示幅を狭める確認は実機検証の代わりにはならないので、端末・OS・ブラウザを変える際は別途試します。
9. サイトの採用版と最新のMediaPipe事情
現在の猫の手ツールのTasks Visionは0.10.34です。SDKは推論のAPIと実行環境、モデルは学習済みのデータなので、バージョンを別々に管理します。この記事のモデルは固定版1で、コードに/latest/は使っていません。公式の例にlatestがあっても、教材を再現する場合は確認したURLを固定します。
このサンプルは、サイトの採用版に合わせて0.10.34を固定しています。2026年10月12日に確認した最新安定版は1.1.0です。最新版を試す場合も、SDKとWASMを同じ版にし、サンプルを再実行して結果と互換性を確認します。
SDKのファイルとWASMだけを別の版にすると、APIが読み込めても実行時に問題が出る場合があります。また、旧MediaPipe SolutionsとTasksでは使うパッケージ・クラス・設定が異なります。検索で見つけたコードをコピーする前に、記事がどの版のどのタスクを扱うか確認します。
参考資料
確認日：2026年10月12日。本文は公式API・プロジェクトの実装と、本教材のデモに基づいて説明しています。モデルの推定結果を人の判断の代わりに確定した情報として扱わず、画像とJSONを見比べて検証します。