使用 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、前端、后端、产品、设计 等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。