關於這個工具
每張圖會拿到什麼
第一個出來的是短版替代文字:一句話,在句尾或字詞邊界截到 125 個字元以內,直接放進 alt 屬性就能用。另外兩個輸出要自己勾,因為每勾一個模型就得多跑一輪:一個是給 <figure> 說明或長描述頁用的詳細描述,一個是圖裡出現的文字——這是 Florence-2 的 OCR 任務,拿到的字不會保留換行。alt 文字的產生到這裡還沒完:每個欄位都能改,一鍵複製 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 秒。所以頁面會顯示實際用到的裝置,讓你在排五十張圖之前就知道。
描述到底準不準
我們拿 20 張照片跑短版替代文字,再請另一個 AI 模型(不是人)逐一評分:用 CPU 版(沒有 GPU 的人跑的就是這個)是 16 份直接可用、4 份要改、0 份把照片內容講錯;用 WebGPU 版是 16 份直接可用、3 份要改、1 份講錯。這是一份有用的初稿,不是成品。Florence-2 會叫錯東西、數錯人數,也完全不知道這張照片為什麼會出現在你的文章裡——它說「一張藍色長條的圖表」,但你放這張圖是因為營收掉下來了。它認不出照片裡的人是誰,也不會亂猜。把輸出當成名詞大致正確的起點,再改寫成能說明這張圖在上下文裡意義的句子。
只會寫英文,翻譯是另一個步驟
模型只寫英文。在日文和繁體中文頁面上,如果 Chrome 有提供內建的 Translator,可以按一個按鈕把每份草稿翻過來;翻譯會顯示在英文旁邊,不會取代英文,因為那是第二道機器步驟,可能再加進自己的錯。Translator 不可用時頁面會說明,並保留英文——拿來當手動改寫的底稿還是夠用。如果你要的是把中文或日文截圖裡的字讀出來,去用專門處理這些文字的 OCR 工具會比較好。
模型寫不出來的那部分替代文字
替代文字描述的是這張圖對頁面的貢獻,不是圖裡有什麼。純裝飾的圖應該給空的 alt="",讓螢幕閱讀器直接跳過;圖表要講結論,不是講顏色;商品照要說商品是什麼,不要寫「一張……的圖片」。125 個字元的慣例是因為有些螢幕閱讀器會把太長的替代文字截斷或拆開唸,更多細節應該放進圖說或旁邊的段落——詳細描述那個輸出就是為此而設。產生器幫你跨過空白欄位那一關;真正合你頁面的那句話,還是得你來定。