使用 AI 為 Web 網頁增加無障礙功能

lsvih發表於2017-08-29

原文地址：Making the Web More Accessible With AI

原文作者：Abhinav Suri

譯文出自：掘金翻譯計劃

本文永久連結：github.com/xitu/gold-m…

譯者：lsvih

校對者：Tina92,Cherry

使用 AI 為 Web 網頁增加無障礙功能

圖為一位盲人正在閱讀盲文（圖片連結）

根據世界健康組織的統計，全球約有 2.85 億位視力障礙人士，僅美國就有 810 萬網民患視力障礙。

在我們視力正常的人看來，網際網路是一個充滿了文字、圖片、視訊等事物的地方，然而對於視力障礙人士來說卻並不是這樣的。有一種可以讀出網頁中文字和後設資料的工具叫做螢幕閱讀器，然而這種工具的作用十分有限，僅能讓人看到網頁的一部分文字。雖然一些開發人員花時間去改進他們的網站，為視障人士新增圖片的描述性文字，但是絕大多數程式設計師都不會花時間去做這件公認冗長乏味的事情。

所以，我決定做這麼一個工具，來幫助視障人士通過 AI 的力量來“看”網際網路。我給它起名為“Auto Alt Text”（自動 Alt 文字新增器），是一個 Chrome 擴充外掛，可以讓使用者在圖片上點選右鍵後得到場景描述 —— 最開始是要這麼做的。

您可以觀看這個視訊，瞭解它是如何運作的，然後下載它並親自試一試吧！！

為什麼我想做 Auto Alt Text：

我曾經是不想花時間為圖片新增描述的開發者中的一員。對那時的我來說，無障礙永遠是“考慮考慮”的事，直到有一天我收到了來自我的一個專案的使用者的郵件。

郵件內容如下：“你好，Abhinav，我看了你的 flask-base 專案，我覺得它非常適合我的下個工程。感謝你開發了它。不過我想讓你知道，你應該為你 README 中的圖片加上 alt 描述。我是盲人，用了很長一段時間才弄清楚它們的內容 :/來自某人”

在收到郵件的時候，無障礙功能的開發是放在我開發佇列的最後面的，基本上它就是個“事後有空再新增”的想法而已。但是，這封郵件喚醒了我。在網際網路中，有許多的人需要無障礙閱讀功能來理解網站、應用、專案等事物的用途。

“現在 Web 中充滿了缺失、錯誤或者沒有替代文字的圖片” —— WebAIM（猶他州立大學殘疾人中心）

用 AI（人工智慧）來挽救：

現在其實有一些方法來給影象加描述文字；但是，大多數方法都有一些缺點：

它們反應很慢，要很長時間才能返回描述文字。
它們是半自動化的（即需要人類手動按需標記描述文字）。
製作、維護它們需要高昂的代價。

現在，通過建立神經網路，這些問題都能得到解決。最近我接觸、學習了 Tensorflow —— 一個用於機器學習開發的開源庫，開始深入研究機器學習與 AI。Tensorflow 使開發人員能夠構建可用於完成從物件檢測到影象識別的各種任務的高魯棒模型。

在做了一些研究之後，我找到了一篇 Vinyals 寫的論文《Show and Tell: Lessons learned from the 2015 MSCOCO Image Captioning Challenge》。這些研究者們建立了一個深度神經網路，可以以語義化方式描述圖片的內容。

im2txt 的例項來自 im2txt Github Repository

im2txt 的技術細節：

這個模型的機制相當的精緻，但是它基本上是一個“編碼器 - 解碼器”的方案。首先圖片會傳入一個名為 Inception v3 的卷積神經網路進行圖片分類，接著編碼好的圖片送入 LSTM 網路中。LSTM 是一種專門用於序列模型/時間敏感資訊的神經網路層。最後 LSTM 通過組合設定好的單詞，形成一句描述圖片內容的句子。LSTM 通過求單詞集中每個單詞在句子中出現的似然性，分別計算第一個詞出現的概率分佈、第二個詞出現的概率分佈……直到出現概率最大的字元為“.”，為句子加上最後的句號。

圖為此神經網路的概況（圖片來自 im2txt Github repository）

根據 Github 庫中的說明，這個模型在 Tesla k20m GPU 上的訓練時間大約為 1-2 周（在我筆記本的標準 CPU 上計算需要更多的時間）。不過值得慶幸的是，Tensorflow 社群提供了一個已經訓練好的模型。

使用 box + Lamdba 解決問題：

在執行模型時，我試圖使用 Bazel 來執行模型（Bazel 是一個用於將 tensorflow 模型解包成可執行指令碼的工具）。但是，當命令列執行時，它需要大約 15 秒鐘的時間才能從獲取一張圖片的結果！解決問題的唯一辦法就是讓 Tensorflow 的整個 Graph 都常駐記憶體，但是這樣需要這個程式全天候執行。我計劃將這個模型掛在 AWS Elasticbeanstalk 上，在這個平臺上是以小時為單位為計算時間計費的，而我們要維持應用程式常駐，因此並不合適（它完全匹配了前面章節所說的圖片描述軟體缺點的第三條缺點）。因此，我決定使用 AWS Lambda 來完成所有工作。

Lambda 是一種無伺服器計算服務，價格很低。此外，它會在計算服務啟用時按秒收費。Lambda 的工作原理很簡單，一旦應用收到了使用者的請求，Lambda 就會將應用程式的映象啟用，返回 response，然後再停止應用映象。如果收到多個併發請求，它會喚起多個例項以擴充負載。另外，如果某個小時內應用不斷收到請求，它將會保持應用程式的啟用狀態。因此，Lambda 服務非常符合我的這個用例。

圖為 AWS API Gateway + AWS = ❤️ (圖片連結)

使用 Lambda 的問題就在於，我必須要為 im2txt 模型建立一個 API。另外，Lambda 對於以功能形式載入的應用有空間限制。上傳整個應用程式的 zip 包時，最終檔案大小不能超過 250 MB。這個限制是一個麻煩事，因為 im2txt 的模型就已經超過 180 MB 了，再加上它執行需要的依賴檔案就已經超過 350 MB 了。我嘗試將程式的一部分傳到 S3 服務上，然後在 Lambda 例項執行再去下載相關檔案。然而，Lambda 上一個應用的總儲存限制為 512 MB，而我的應用程式已經超過限制了（總共約 530 MB）。

為了減小專案的大小，我重新配置了 im2txt，只下載精簡過的模型，去掉了沒用的一些後設資料。這樣做之後，我的模型大小減小到了 120 MB。接著，我找到了一個最小依賴的 lambda-packs，不過它僅有早期版本的 python 和 tensorflow。我將 python 3.6 語法和 tensorflow 1.2 的程式碼進行了降級，經過痛苦的降級過程後，我最終得到了一個總大小約為 480 MB 的包，小於 512 MB 的限制。

為了保持應用的快速響應，我建立了一個 CloudWatch 函式，讓 Lambda 例項保持”熱“狀態，使應用始終處於啟用態。接著，我新增了一些函式用於處理不是 JPG 格式的圖片，在最後，我做好了一個能提供服務的 API。這些精簡工作讓應用在大多數情況下能夠於 5 秒之內返回 response。

上圖為 API 提供的圖片可能內容的概率

此外，Lambda 的價格便宜的令人驚訝。以現在的情況，我可以每個月免費分析 60,952 張圖片，之後的圖片每張僅需 0.0001094 美元（這意味著接下來的 60,952 張影象約花費 6.67 美元）。

有關 API 的更多資訊，請參考 repo：github.com/abhisuri97/…

剩下的工作就是將其打包為 Chrome 擴充外掛，以方便使用者使用。這個工作沒啥挑戰性（僅需要向我的 API 端點發起一個簡單的 AJAX 請求即可）。

上圖為 Auto Alt Text Chrome 外掛執行示例

結論：

Im2txt 模型對於人物、風景以及其它存在於 COCO 資料集中的內容表現良好。

上圖為 COCO 資料集圖片分類

這個模型能夠標註的內容還是有所限制；不過，它能標註的內容已經涵蓋了 Facebook、Reddit 等社交媒體上的大多數圖片。

但是，對於 COCO 資料集中不存在的圖片內容，這個模型並不能完成標註。我曾嘗試著使用 Tesseract 來解決這個問題，但是它的結果並不是很準確，而且花費的時間也太長了（超過 10 秒）。現在我正在嘗試使用 Tensorflow 實現王韜等人的論文，將其加入這個專案中。

總結：

雖然現在幾乎每週都會湧現一些關於 AI 的新事物，但最重要的是退回一步，看看這些工具能在研究環境之外發揮出怎樣的作用，以及這些研究能怎樣幫助世界各地的人們。總而言之，我希望我能深入研究 Tensorflow 和 in2txt 模型，並將我所學知識應用於現實世界。我希望這個工具能成為幫助視障人士”看“更好的網際網路的第一步。

使用 AI 為 Web 網頁增加無障礙功能

使用 AI 為 Web 網頁增加無障礙功能

為什麼我想做 Auto Alt Text：

用 AI（人工智慧）來挽救：

im2txt 的技術細節：

使用 box + Lamdba 解決問題：

結論：

總結：

相關連結：

相關文章