このツールについて
一枚ごとに出てくるもの
まず短い代替テキストが一文出ます。文か単語の区切りで 125 文字以内に収めてあるので、そのまま alt 属性に使えます。残りの二つは必要なときだけオンにしてください。モデルをもう一度回すぶん時間がかかるからです。一つは <figure> のキャプションや詳細説明ページ向けの長い説明、もう一つは画像に写っている文字(Florence-2 の OCR タスクで、改行は残りません)。どの欄も書き換えられ、ワンクリックで alt="…" をコピー、一括ならファイル名・代替テキスト・説明の CSV で保存できます。ブログ記事の十数枚なら、ドラッグ一回とダウンロード一回で済みます。
ブラウザの中で動くから、モデルは一度取るだけ
画像説明文の自動生成には Microsoft の Florence-2-base-ft(MIT ライセンス)を Transformers.js で動かしています。初回は huggingface.co からモデルを取得します——WebGPU が使えれば約 218 MB、使えなければ約 277 MB——が、ブラウザのキャッシュに残るので二回目からはモデルのダウンロードなしで始まります。実行に使う ONNX Runtime のスクリプトは cdn.jsdelivr.net から読み込みます。画像はタブの外に出ません。アップロードもアカウントも不要で、サーバー側に記録が残ることもありません。代わりに差が出るのは速さです。WebGPU なら短い説明は一枚あたり 1 秒ほど、画像内の文字は 4 秒ほど。使える GPU がないと CPU で動くことになり、同じ一枚に短い説明で 18 秒ほど、画像内の文字で 25 秒ほどかかります。だからページには実際に使っているデバイスを表示し、50 枚を並べる前に分かるようにしてあります。
説明文はどれくらい当たるのか
写真 20 枚で短い代替テキストを生成し、人ではなく別の AI モデルに採点させました。CPU 版(GPU のない環境で動くのはこちらです)ではそのまま使えるものが 16、手直しが必要なものが 4、写っているものを取り違えたものは 0。WebGPU 版ではそのまま使えるものが 16、手直しが必要なものが 3、取り違えたものが 1 でした。使える下書きではありますが、完成品ではありません。Florence-2 は物の名前を間違えたり人数を数え違えたりしますし、その写真が記事の中で何を伝えたいのかは知りません。「青い棒グラフ」と呼んだ図が、実は売上の落ち込みを示すために置かれているかもしれないのです。写っている人が誰かも分からず、推測もしません。名詞はおおむね合っている出発点として受け取り、文脈に合う言い方に書き直してください。
出力は英語、翻訳は別の一手
モデルが書くのは英語だけです。日本語と繁体字中国語のページでは、Chrome にブラウザ内蔵の Translator があれば、ボタン一つで各下書きを翻訳できます。翻訳は英語の横に並べて表示し、英語を置き換えることはしません。機械の説明文をもう一段機械で訳すわけで、そこで新たに誤りが入りうるからです。Translator が使えない環境ではその旨を表示し、英語だけを残します。それでも手で書き直す下書きとしては十分使えます。中国語や日本語のスクリーンショットから文字を読み取りたいなら、それらの文字向けに作られた OCR ツールのほうが向いています。
モデルには書けない代替テキスト
代替テキストは「何が写っているか」ではなく「その画像が何を伝えているか」を書くものです。飾りの画像は alt="" と空にしてスクリーンリーダーに読み飛ばさせる。グラフなら色ではなく読み取れる結論を書く。商品写真なら「〜の画像」ではなく商品そのものを書く。125 文字という慣例があるのは、長い代替テキストを途中で区切ったり止めたりするスクリーンリーダーがあるからで、それ以上の詳細はキャプションや本文に書くべきものです。詳しい説明の出力はそのためにあります。生成ツールは空欄を埋めるところまで。ページに合う一文を決めるのはあなたです。