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

2020-07-25 22:30:49

我们总是注意到我们几年前读到的几篇新闻文章,关于我们花在电脑前的时间有多长,以及没有良好的文化是多么糟糕。根据尼尔森公司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库(光学字符识别)和创造力可以得到令人惊叹的结果。如果我们修改转换方法,我们不仅可以生成静态数据,而且可以在所有平台上自动发布数据,这不仅限于设计,而且还限于想象。当然,我很快就会做一个关于这方面的教程。同时,用你自己的书法自己测试一下,看看这是不是你可以用到的东西。有了它,你坐在屏幕前的时间肯定会减少。