使用Google Vision API将纸质笔记转换为HTML内容

我们总是注意到我们几年前读到的几篇新闻文章，关于我们花在电脑前的时间有多长，以及没有良好的文化是多么糟糕。根据尼尔森公司2018年2月的受众报告，美国人平均每天在屏幕前花费大约10小时39分钟，包括每天使用智能手机、电脑、视频游戏、平板电脑和电视。与此同时，技术的更新足以帮助我们解决这个问题，至少是循序渐进的。我在想如何将这个问题与这个祝福结合起来，于是我想出了这个实验：在纸上写一篇博客文章(在外面可以很容易做的事情)，拍一张照片，运行一个脚本将其转换为HTML。其想法是使用符号和字母组合(例如“#T#”)来检测应该是标题、副标题、图像或段落的内容。

我们将构建一个程序，该程序在给定图像的情况下生成HTML文件。该图像将是我们拍摄的照片，带有一些标记来解析带有一些HTML标记的文本。具体来说，我们将使用这种格式(您可以随意撰写论文来测试您的手写书法，但您绝对可以使用下图跟进教程)：

因此，正如我们所看到的，我们将使用#X#符号来标识标题(#T#)、副标题(#S#)、图像(#I#)和段落(#P#)。对于图像，我们将写入将使用的图像的名称，而不指定格式-jpg、bmp、png-。在普通用户的用例中，当在纸上书写时，他们可能还没有准备好要填充的图像，所以我们将使用占位符名称。

我们将结合使用Node.js和Google Cloud Vision库来生成最终的HTML代码(跳到底部查看教程)。

说实话，谷歌的Vision API并不是我的首选。我不是在寻找一种简单的工具来识别图像中的文本，而是一种识别手写单词的工具。我想先试一下Tesseract，因为它已经存在很长一段时间了，但我一直没有机会使用它。与Google相反，我只需要导入Javascript库并使用它，没有创建云帐户、设置凭据等繁琐的任务。但我们都知道这篇文章是关于Google Vision，而不是Tesseract，所以…。发生了什么？

首先，我尝试了这个图像(左)，使用Node.js的Tesseract OCR。老实说，我是超级乐观的，所以我写了几行来测试它的进展情况。根据Tesseract网页上的启动和运行教程，我构建了一个快速Node.js应用程序来读取本地图像(本文下面的教程)，将照片传输到我的计算机，并对其进行测试。

在这一点上，我认为我的笔迹不够资格尝试这一点，所以我写下了一系列新的行，在字体上多花了一点心思，然后再试了一次。我对一个错误感到惊讶(部分是因为内存阵列)，可能是因为照片的大小(MB)，但我无法运行它。然后我开始在谷歌上搜索…。我带来了Google Cloud Visions API。我用这张新照片(左)在他们的网站上建立了他们提供的启动和运行教程(同样，下面我将写一个教程)。

太棒了！我不确定问题出在我的电脑上(因为据我所知，谷歌分析器是基于云的，而不是Tesseract)，还是出在框架上，但在对不同类型的书写、符号、数字以及大写和非大写字母的混合进行了几次测试后，我可以说它足够可靠，可以使用。

为了开始使用Google服务，我们需要在Google Cloud上拥有一个帐户。让我们打开https://cloud.google.com/站点，然后点击“免费入门”：

然后我们将被要求使用我们的谷歌(Gmail)帐户登录，选择我们的国家并接受服务条款。下一步是设置我们的客户信息，即帐户类型(企业或个人)、姓名和地址以及支付方式(信用卡或借记卡)。在写这篇文章的时候，Google正在为在Google Cloud平台上注册的新用户免费提供300美元的积分，为期12个月。请注意，谷歌使用信用卡来确保我们不是机器人，但它规定，除非我们手动升级到付费账户，否则我们不会被收费，所以好消息是，我们不会因为谷歌的意外账单而醒来。

创建项目后，我们需要为我们的项目激活Google Vision API。为了近距离了解Google Cloud提供的服务，让我们点击位于屏幕左上角的汉堡菜单，将显示一个菜单，其中列出了Google Cloud提供的所有服务和工具。向下滚动时，我们不仅会找到计算(例如Cloud Functions、Kubernetes、VMWare)、存储(例如FiRestore、SQL、Bigtable、Memorystore)、网络(例如vPC网络、网络安全)、操作(例如日志和监控)、云构建、部署管理器或云任务等工具、大数据(例如发布/订阅、数据流、物联网核心)、人工智能(例如AI平台、自然语言、建议AI、Vision、视频智能)等服务，还会找到各种服务，例如计算(例如云函数、Kubernetes、VMWare)、存储(例如FiRestore、SQL、Bigtable、Memory Store)、网络(例如vPC网络、网络安全)、操作(例如日志和监控)、云构建、部署管理器或云任务等工具。以及合作伙伴解决方案，包括Redis、Apache Kafka、DataSTax Astra、Elasticsearch、MongoDB Atlas等。要启用Google Vision的API，让我们进入此处：https://console.cloud.google.com/apis/api/vision.googleapis.com/overview。

在我们点击Enable API启用服务之后，我们需要再做一步才能在我们的计算机上使用Google Cloud服务，这就是身份验证。为此，我们将创建一个服务帐户，该帐户是与我们正在设置的Google Cloud Project相关联的Google帐户，而不是特定的用户。我们将转到左上角菜单，并在IAM&Admin中搜索‘Service Accounts’(服务帐户)选项：

然后单击“创建服务帐户”，将显示以下表单。唯一的必填字段是“服务帐户名”，它可以很容易地成为项目的名称：

创建服务帐户后，我们返回服务帐户列表(回到IAM&；Admin&>服务帐户)，并为凭据创建密钥：

下一步是将私钥添加到Path，这样Google Cloud SDK就可以将其与我们的帐户相关联。在我的示例中，我将该文件保存在我的Software/Credentials文件夹中，因此为了引用它，我们将添加到~/.bashrc文件的顶部：

在我的例子中，我将继续学习Google Cloud SDK for Linux的安装教程，因为我使用的是运行ChromeOS+Linux的Google Pixelbook机器。对于其他用户，可在https://cloud.google.com/sdk/docs/quickstarts.上获得说明

我们将打开终端，从gcloud Debian QuickStart运行以下命令来安装SDK：

#添加云软件开发工具包分发URI作为包源ECHO"；deb[signed-by=/usr/share/keyrings/cloud.google.gpg]http://packages.cloud.google.com/apt CLOUD-SDK Main"；|sudo tee-a/etc/apt/Soures.list.d/google-cloud-sdk.list#导入Google Cloud平台公钥curl https://packages.cloud.google.com/apt/doc/apt-key.gpg|sudo apt--key--keyring/usr/share/keyring/cloud.google.gpg add-#更新包列表，安装Cloud SDK sudo apt-get update&；&；sudo apt-get install google-cloud-sdk sed-i&39；1iexport path="；/usr/lib/google-cloud-sdk/bin：$path"；'；~/.bashrc。

现在我们可以初始化SDK，运行命令gcloud init；该命令对于执行几个常见的SDK设置任务很有用。这些任务包括使用您的用户帐户凭据授权SDK工具访问Google Cloud Platform，以及设置默认的SDK配置。

我们将被要求使用您的Google用户帐户登录，这将打开我们的浏览器，允许我们授予访问Google云平台资源的权限。

授权GCP后，回到终端，我们会被要求选择要使用的云项目，除非您只有一个项目：

选择要使用的云项目：[1][my-project-1][2][my-project-2]...。请输入您的数字选择：

现在我们准备好编写实际的代码了！首先，需要安装Node.js：

在同一文件夹中，添加您为代码拍摄的照片(或下载以下照片)。我的文件名为pic2.jpg

为了确保我们走的是正确的道路，我们将尝试获取此图像的纯文本。为此，让我们在googlevision.js中添加以下代码：

Const vision=Required(‘@google-cloud/vision’)；异步函数app(){const client=new vision.ImageAnnotatorClient()；const filename=‘pic2.jpg’；const[result]=await client.document TextDetection(Filename)；const fullTextAnnotation=result t.fullTextAnnotation；console.log(`Result：${fullTextAnnotation.text}`)。

现在我们可以开始生成HTML了。为此，我们将创建一个helper函数(ConvertToHtml)。

现在我们想澄清几件事。在生成HTML之前，我们需要清理Google Vision API生成的代码。例如，我(故意)添加了一行。

这样做的目的是能够在真正的纸上添加多行文字，以便节省下来，而不是在一篇帖子文章上浪费几页纸。在这种情况下，我们需要检测一行中出现多个符号的每种情况。由于我们将逐行迭代生成的文本，因此我们将使用换行符(‘\n\)来分隔文本的各个部分。

然后，我们将需要迭代行通过行，并替换相应的HTML代码的符号。我们将替换H1的#T#、H2的#S#、图像的#I#和段落的#P#。您可以添加类、ID、样式标签、JavaScript调用，以生成更好的自定义和个性化结果。

然后我们将执行后期清理，这意味着删除开始和结束标记前后不需要的空格(例如：“<；/p>；”到“<；p>；”)。

一张名为“test”的图片，因为这是我在#i#图片标签旁边写在纸上的图片。我在Google上找了一张随机的照片来寻找这个例子，你可以使用任何你想要的照片，只需将它重命名为test.tension即可。

我们需要安装fs模块才能创建文件。为此，我们将安装它：

Function ConvertToHtml(Text){//prelean var cleantext=Text；[“#t#”，“#s#”，“#i#”，“#p#”].forEach((Item，i)=>；{cleantext=cleanText.split(item).join(“\n”+item.toUpperCase())；cleantext=cleanText.split(item.toUpperCase()).join(“\n”+item.toUpperCase())；})；Cleantext=leanText.plit(“\n\n”).join(“\n”)；var lines=leanText.plit(“\n”)；var result tHTML=“<；html>；<；body>；”var imageFormat=“.jpg”lines.forEach((line，i)=>；{var temp=line.substring(3)；if(line.toUpperC。/H1>；“}Else If(line.toUpperCase().Includes(‘#S#’)){ResultHTML=ResultHTML+”<；H2>；“+Temp+”<；/H2>；“}Else If(line.toUpperCase().Includes(‘#I#’)){ResultHTML=ResultHTML+”<；IMG src=‘“+Temp+image。“+temp+”<；/p>；“}})；result tHTML=result tHTML+”<；/body&>；<；/html>；“//postlean var tag=[”<；h1>；“，”<；h2>；“”，“<；p>；”]；tags.forEach((tag，i)=>；{result tHTML=result。“).join(”<；/“)；result tHTML=result tHTML.Split(”“+closingTag).join(ClosingTag)；})；result tHTML=ResultHTML.Split(”src=‘“).join(”src=’“)；fs.writeFile(”test.html“，result HTML，function(Err){if(Err){return console.log(Err)；}console.log(”the“)；fs.writeFile(”test.html“，result HTML，function(Err){if(Err){return console.log(Err)；}console.log(”the。

的确，结合使用OCR库(光学字符识别)和创造力可以得到令人惊叹的结果。如果我们修改转换方法，我们不仅可以生成静态数据，而且可以在所有平台上自动发布数据，这不仅限于设计，而且还限于想象。当然，我很快就会做一个关于这方面的教程。同时，用你自己的书法自己测试一下，看看这是不是你可以用到的东西。有了它，你坐在屏幕前的时间肯定会减少。