# Alt Text Generator

> 選圖片就自動產生 alt 用的短描述、詳細描述和圖中文字，可編輯、複製或匯出 CSV。模型只寫英文，Chrome 內建翻譯可翻成中文。圖片不上傳，模型下載一次就留著。

- URL: https://bytescope.dev/zh-Hant/alt-text-generator/
- Locale: zh-Hant · Also: [en](https://bytescope.dev/en/alt-text-generator.md) · [ja](https://bytescope.dev/ja/alt-text-generator.md)
- Runs: 全程在你的瀏覽器裡跑，圖片不會上傳。模型檔只會從 huggingface.co 下載一次，ONNX Runtime 的腳本則從 cdn.jsdelivr.net 載入。
- Requires: Any modern browser. Uses WebGPU where the browser has it and falls back to WebAssembly on the CPU, which is much slower (about 18 seconds per image for a short description and about 25 seconds for text in the image). The model file is downloaded once from huggingface.co and the ONNX Runtime script is loaded from cdn.jsdelivr.net; the images themselves are never uploaded.
- Updated: 2026-09-08

## What it does

### 每張圖會拿到什麼

第一個出來的是短版替代文字：一句話，在句尾或字詞邊界截到 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 個字元的慣例是因為有些螢幕閱讀器會把太長的替代文字截斷或拆開唸，更多細節應該放進圖說或旁邊的段落——詳細描述那個輸出就是為此而設。產生器幫你跨過空白欄位那一關；真正合你頁面的那句話，還是得你來定。

## Limits

Does not check that its descriptions are right: the model can name the wrong object or miscount people, does not know what your article is trying to say, and does not recognise who people are. It writes English only, and the translation buttons need Chrome's built-in Translator API.

## FAQ

### 產生的替代文字準嗎？

通常很接近，但不保證。我們測了 20 張照片，由另一個 AI 模型而不是人來評分：CPU 版是 16 份直接可用、4 份要改、0 份描述錯對象；WebGPU 版是 16 份直接可用、3 份要改、1 份描述錯對象。模型還是會認錯東西或數錯人數，也不知道這張圖在你的頁面裡扮演什麼角色。每一份草稿都要讀過。

### 我的圖片會被上傳到哪裡嗎？

不會。Florence-2 透過 Transformers.js 在你的瀏覽器裡跑。網路流量只有第一次從 huggingface.co 下載模型（之後瀏覽器會存進快取），以及執行時用的 ONNX Runtime 腳本，這個從 cdn.jsdelivr.net 載入。圖片一直留在分頁裡，關掉分頁什麼都不剩。

### 為什麼只有英文輸出？

Florence-2-base-ft 是用英文圖說訓練的，其他語言寫不穩。在日文和中文頁面上，Chrome 內建的 Translator 可用時可以把每份草稿翻過來；翻譯會顯示在英文旁邊讓你對照，因為翻譯一段機器寫的描述，等於多了一個可能出錯的地方。

### 替代文字應該多長？

`alt` 屬性控制在大約 125 個字元以內——這是很普遍的慣例，因為有些螢幕閱讀器會把更長的文字截掉或拆開——更細的內容放進圖說或正文。這頁的短版輸出會在句尾或字詞邊界截到 125 個字元。純裝飾的圖請改用空的 `alt=""`。

### 它認得出照片裡的人是誰嗎？

認不出來。它只會用泛稱描述人——「一位拿著麥克風的女性」——不會指名道姓。如果這個人是誰對這張圖很重要，請自己加上去。

### 在我的電腦上為什麼這麼慢？

如果瀏覽器沒有能透過 WebGPU 使用的顯示卡，模型會以 WebAssembly 在 CPU 上跑，短描述一張圖大約 18 秒、圖中文字大約 25 秒，有 GPU 的話分別大約 1 秒和 4 秒。頁面會顯示目前用的是哪個裝置。勾選詳細描述或圖中文字會讓模型各再跑一輪，大批處理時先不要勾。

### 匯出的 CSV 裡有什麼？

每張完成的圖一列，三個欄位：檔名、替代文字、詳細描述，照加入的順序排；取消或還沒跑的圖不會出現。是標準的逗號分隔檔，前面帶 UTF-8 BOM，所以 Excel 開中文檔名不會變亂碼，而且會反映你在頁面上改過的內容。值如果以 =、+、-、@ 開頭，前面會加一個 '，避免試算表把它當成公式執行。

## Related tools

- [Image to Text](https://bytescope.dev/zh-Hant/image-to-text.md) — 從照片讀出印刷文字，中文和日文表現比較好。
- [Compress Image](https://bytescope.dev/zh-Hant/image-compress.md) — 上傳前先把照片縮到指定的檔案大小。