SLEEVE

ジャケ写／YouTube サムネをブラウザ完結型テキスト合成ツールで作りたい。 被写体を SAM で切り抜いて、テキストを被写体の前後に回り込ませる。

モチベーション

被写体の後ろに回り込ませるには、Photoshop でマスクを手作業で切って…という作業が必要。

• SAM (Segment Anything) で被写体マスク取得
• 前後関係 をテキストごとに指定できる
• 全部ブラウザ内で完結 — サーバー不要、アップロードなし

YouTube サムネでよく見る「機材やバンドメンバーがタイトル文字の前に立ってる」表現を Web で作れたら面白そう。

使い方

1. ブラウザで開く（Chrome / Edge 推奨）
2. 画像をドロップ or 選択
3. 初回のみ SAM モデル（~80MB）がダウンロードされる。以後はブラウザキャッシュ
4. 画像をクリック → 選択範囲が赤いオーバーレイで表示、候補サムネが3つ出る（S/M/L）
5. Shift+クリック で範囲に追加、Alt+クリック で範囲から削る
6. 狙い通りになったら Confirm ✓
7. 右パネルで Add Text Layer → テキスト追加
8. テキストの Depth で「どのマスクの前／後ろ」を選択
9. テキストはキャンバス上でドラッグして位置調整
10. Export PNG で書き出し

技術スタック

• Segmentation: SlimSAM-77-uniform via Transformers.js v3
  • 元の SAM (632M params) を 5.5M まで蒸留した軽量版
  • WebGPU 対応ブラウザなら GPU で、それ以外は WASM で動く
• Rendering: Canvas 2D API
  • source-in composite で被写体マスクから前景切り抜きを作成
  • テキスト → 画像前景の順に重ねることで「後ろ回り込み」を実現
• Fonts: Google Fonts（Anton / Bebas Neue / Archivo Black / Syne / JetBrains Mono）

設計メモ

選択フロー

当初は「クリック→即確定」だったが、結果として何を選択してるかが見えないので 2段階フローに変更:

クリック → SAM 実行 → 候補3つプレビュー → 調整（Shift/Alt） → Confirm で確定

SAM は常に「細部 / 中サイズ / 全体」の3マスクを返すので、候補として全部キープしている。自動で「最高スコアのもの」を選ぶのは罠（ポートレートだと顔だけ選ばれがち）。

レイヤー合成

[背景画像] → [テキスト] → [被写体マスクで切り抜いた前景]

「テキストを被写体の後ろに回り込ませる」の正体は、被写体部分だけを画像から切り抜いてテキストの上に再配置するだけ。SAM のマスクはアルファチャンネルとして扱い、source-in で画像にマスキングして前景レイヤーを作る。

ブラウザ完結を選んだ理由

• SAM3 をサーバーでホストするとオンデマンドでも月数百円〜、常時起動だと数万円
• 自分用ツールにそのコストは見合わない
• SlimSAM は精度やや落ちるが、「被写体をざっくり抜く」用途には十分

制限

• SlimSAM の精度なので、髪の毛の産毛や細い棒状のもの等は苦手
• 初回モデルロードが重い（~80MB + WASM/WebGPU 初期化）
• Chrome / Edge 以外は WebGPU が効かず遅い（WASM フォールバックは動く）
• 書き出しは PNG のみ、サイズは元画像の解像度そのまま

ライセンス

個人利用向け。SlimSAM モデルは Meta の SAM License 準拠。