▶ ライブデモ

実際に NezumiInpaint が動いています。画像を開き、消したい部分を赤くマスクして「実行」を押してください。初回はモデルのダウンロード（約 200 MB）があります。2 回目以降は IndexedDB キャッシュから即時読み込み。

概要

nezumi-inpaint.js は、LaMa Inpaint アプリのコードを NezumiInpaint クラスとして整理したライブラリです。

インストール

script タグ

<script src="nezumi-inpaint.js"></script>

モデルファイル

クイックスタート

const inpainter = new NezumiInpaint({
  container:  '#wrap',
  workerSrc:  workerSourceString,
  onStatus:   ({ state, text }) => updateUI(state, text),
  onResult:   ({ elapsedMs, ep }) => console.log(ep, elapsedMs),
});
await inpainter.loadImage(file);
await inpainter.run();
inpainter.download();

• COOP / COEP を設定SharedArrayBuffer を有効化
• コンテナを用意position:relative なボックスを置く
• インスタンス生成キャンバスが自動生成され、モデル取得が開始
• 画像をロードloadImage() に File / Blob / URL を渡す
• マスクを描いて実行ブラシで塗って run() を呼ぶだけ

コンストラクタ

基本オプション

dtype / imgSize

コールバック

メソッド

loadImage(source)

File / Blob / HTMLImageElement / URL を受け付けます。マスクとアンドゥスタックはリセットされます。

run()

現在のマスクでインペインティング実行。完了時にキャンバスへ反映。マスクが空なら即 reject。

ブラシ操作

書き出し

その他

Float16 モード

dtype:'float16' でテンソルを fp16 (2 bytes/値) で転送。512×512×3ch なら約 1.5 MB → 750 KB に削減。

const inpainter = new NezumiInpaint({
  container: '#wrap',
  dtype:     'float16',  // lama_fp16.onnx を自動選択
});
console.log(inpainter.getDtype());  // 'float16'

ヘッドレス利用

container を省略するとキャンバス DOM を生成しません。

const inpainter = new NezumiInpaint({ workerSrc: workerCode });
await inpainter.loadImage('https://example.com/photo.jpg');
const dataUrl = inpainter.toDataURL();

ワーカー接続

Worker が受け取るメッセージ

Worker が送るメッセージ

COOP / COEP ヘッダ設定

HTML meta タグ

<meta http-equiv="Cross-Origin-Opener-Policy"   content="same-origin">
<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">

Firebase Hosting

{ "hosting": { "headers": [{ "source": "**", "headers": [
  { "key": "Cross-Origin-Opener-Policy",   "value": "same-origin" },
  { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
]}]}}