KesiKeshiはブラウザだけで写真の背景を切り抜いて透明PNGを生成する、PWA対応のミニマルなツールです。ファイル選択またはドラッグ＆ドロップで画像を読み込み、Hugging Face Transformers.jsのセマンティックセグメンテーションを使ってピクセル単位のマスクを生成し、ダウンロード可能な結果を表示します。
- プログレッシブなUI: ドラッグ可能なドロップゾーン、進捗バー、ステータス表示で処理状況を逐次フィードバック。
- 複数モデルサポート: RMBG-1.4、MODNet、ISNet、テスト用モデル（BEN2-ONNX）から選択でき、必要に応じて近似精度・サイズを使い分け可能。
- サービスワーカー＋マニフェスト:
manifest.webmanifestでスタンドアロン表示・テーマカラーを定義し、pwa-sw.jsが静的リソースとセグメンテーション結果をキャッシュしてオフライン化。 - Web Worker処理:
worker.js上のHugging Faceパイプライン（Transformers.js）で画像をRGBA→RGBへ変換し、セグメンテーション実行後にマスクを合成して透過PNGを返却。
| 名前 | 説明 | 由来／ライセンス |
|---|---|---|
| RMBG-1.4 | BRIA AI提供の高品質背景除去モデル | briaai/RMBG-1.4（CC BY-NC 4.0） |
| MODNet | ZHKUNのMODNet、細部の切り抜きを強化 | Xenova/modnet（GitHub） |
| ISNet | RMBGの補完で急上昇しているセグメンテーション | imgly/isnet-general-onnx |
| test | ベンチマーク用のBEN2-ONNXで挙動確認 |
onnx-community/BEN2-ONNX |
- ローカルで起動: 静的ホスティングで
index.htmlを公開（例：python -m http.server 4173またはnpx http-server .）。 - 画像を読み込む: ドラッグ＆ドロップまたはファイル入力から複数枚の画像を追加。
- モデルを選択: プルダウンから希望のモデルを選び、処理を自動開始。
- ダウンロード: 処理済みカードの「Download PNG」ボタンをクリックして透過PNGを取得。名前は
kesikeshi_YYYYMMDD_HHMM_<元画像>.png形式で保存されます。
worker.jsはHugging Face Transformers.jsをESモジュールとして読み込み、pipeline('image-segmentation', ...)でモデルを初期化。postMessage/onmessageで進捗イベントと結果をやり取り。- ピクセル変換中に進捗を更新し、必要なら
masksで任意のセグメントを合成できる（現在未公開だが構造あり）。 style.cssはモダンなカードレイアウト、レスポンシブ対応、アクセシブルな状態表現を定義。pwa-sw.jsはキャッシュリストを手動で定義し、manifest.webmanifestに記した192/512サイズのアイコンやカラーを利用してPWAランチャーを構成。オフライン時でも最後に読んだアセットを再利用できる。
- このプロジェクトにビルドステップは不要。静的ファイルなので任意のHTTPサーバーで配信するだけです。
- モデルやライブラリを更新したい場合は
worker.jsのpipeline呼び出し先を変更し、modellist定義をindex.html内で調整してください。
LICENSEに従います。