使用 AI 爲 Web 網頁增長無障礙功能

• 原文地址：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（人工智能）來挽救：

如今其實有一些方法來給圖像加描述文字；可是，大多數方法都有一些缺點：

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

如今，經過建立神經網絡，這些問題都能獲得解決。最近我接觸、學習了 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 模型，並將我所學知識應用於現實世界。我但願這個工具能成爲幫助視障人士」看「更好的互聯網的第一步。

相關連接：

• 關注文章做者：我會在 Medium 上首發我寫的文章。若是你喜歡這篇文章，歡迎關注我:)。接下來一個月，我將會在下個月發佈一系列「如何使用 AI/tensorflow 解決現實世界問題」的文章。最近我還會發一些 JS 方面的教程。
• 本文工具 Chrome 插件：下載地址
• Auto Alt Text Lambda API：Github repository 地址

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。