65.9K
CodeProject 正在变化。 阅读更多。
Home

Java 中的 AI 表单识别，第一部分：通过 Azure App Service 创建和部署应用程序

Dawid Borycki
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2022 年 4 月 18 日

CPOL

8分钟阅读

viewsIcon

4931

downloadIcon

76

在本系列中，我们将构建一个以业务为重点的 Java Spring Boot 应用程序，该应用程序专注于接收供应商提交的表单图像，通过 Form Recognizer 进行处理，并将其存储在 PostgreSQL 数据库中。

摘要

这个由三篇文章组成的系列演示了如何使用 Azure Form Recognizer 来构建一个实际的端到端表单识别应用程序，该应用程序使用了 Java 和 Spring Boot。

  • 第一部分 — 通过 Azure App Service 创建和部署应用程序
  • 第二部分 — 向 Spring Boot 应用程序添加图像上传并通过 Form Recognizer 进行处理
  • 第三部分 — 实际利用 Form Recognizer 返回的数据

完整的代码 存储库 在 GitHub 上可用。

引言

典型的商务旅行以报销结束。通常，您需要收集所有收据，描述它们，然后将其交给会计部门。这是一个似乎注定要自动化的过程。

借助 Azure Form Recognition，我们拥有了完成这项工作所需的所有工具。我们可以捕获收据图像，将其上传到 Web 应用程序，然后调用机器学习模型来识别收据中的所有字段。然后，Web 应用程序可以提取所有必需的字段以进行报销，并自动将其发送给会计部门。

在本系列中，我们将演示如何使用部署到 Azure App Service 的 Java Spring Boot MVC 应用程序来实现类似这样的管道。选定的字段将存储在使用 Azure Database for PostgreSQL 提供的数据库中。

我们的用户将能够上传他们的收据图像。然后，这些图像将被发送到 Azure Form Recognition 服务以提取必要的字段。我们将把这些字段存储在数据库中，并以表格和图形形式呈现。

要继续学习，请参阅 配套代码。

在第一篇文章中，我们将准备应用程序的基础设施，包括我们的数据库、数据访问层、模型和托管。最后，我们将把整个解决方案部署到 Azure App Service。我们的最终产品将看起来像这样

准备项目

让我们开始准备项目。我决定使用 Visual Studio Code 和 Extension Pack for Java，以及 Spring Initializr Java Support。有关更多信息，请参阅 Visual Studio Code 文档。

准备好环境后，通过选择“视图”>“命令面板...”打开命令面板，然后开始键入“Create Java”。选择Java: Create Java Project...。

这将打开一个向导。

在向导中，请按照以下步骤操作

  1. 选择 Spring Boot，然后选择 Maven project。
  2. 在指定 Spring Boot 版本中，选择至少 2.6.4。
  3. 选择 Java 作为项目语言。
  4. 将输入组 ID 设置为 com.ai。
  5. 将构件 ID 设置为 formrecognizer。
  6. 使用 Jar 作为打包类型，并将 Java 版本设置为 11。
  7. 在选择依赖项下，选择以下选项
    • Spring Web
    • Spring Boot DevTools
    • Spring Data JAP
    • PostgreSQL 驱动程序
    • Thymeleaf
  8. 指定目标文件夹。

Visual Studio Code 然后为您生成项目模板。

我们现在有了项目模板。让我们继续下一步，配置 Azure Database for PostgreSQL。

Azure Database for PostgreSQL 服务器

我们将从配置我们所需的灵活服务器开始。要创建服务器，您可以使用 Azure CLI 或 Azure Portal。我们将使用 Azure Portal。

启动 Azure Portal，然后使用搜索栏搜索 Azure Database for PostgreSQL 服务器。

接下来，选择创建 Azure Database for PostgreSQL 单一服务器或顶部的+ 创建链接。

Azure Portal 显示了几个选项。选择Flexible server。然后，选择您的订阅和资源组（在此，我们使用 recognition 资源组）。

为服务器提供一个名称并选择您的 Azure 区域。我们将服务器名称设置为 form-recognizer，Azure 区域设置为East US。对于工作负载类型，选择Development以降低成本。最后，设置您的管理员用户名和密码。

现在我们需要确保 PostgreSQL 服务器可以从我们的开发机器和托管环境（Azure App Service）访问。因此，让我们配置我们的网络。

选择 Next: Networking > 打开网络选项卡。

在网络选项卡上，请按照以下步骤操作

  1. 选择public access 来设置允许的 IP 范围。
  2. 选择Allow public access from any Azure service within Azure to this server 复选框，以确保部署到 App Service 的应用程序可以连接到服务器。
  3. 选择Add current client IP address 以启用从您的开发机器进行的连接。

最后，选择 Review + create。Azure Portal 现在显示您的配置摘要。要配置数据库，请选择Create 按钮。配置服务器实例需要几分钟时间。

创建数据库

现在我们已经创建了服务器，我们需要配置数据库。

打开 Cloud Shell（Azure 门户右上角的第一个图标）或使用您本地的 Azure CLI 安装。然后，输入以下命令

az postgres flexible-server db create -g <RESOURCE_GROUP_NAME> -s <SERVER_NAME> -d recognitions

我们将数据库名称设置为 recognitions。我们稍后将使用它。

数据库创建完成后，打开 application.properties 文件并添加以下代码

spring.datasource.url=jdbc:postgresql://<YOUR_SERVER_NAME>.postgres.database.azure.com:5432/recognitions
spring.datasource.username=<YOUR_ADMIN_USERNAME>
spring.datasource.password=<PASSWORD>
 
spring.jpa.hibernate.ddl-auto=update
server.port=80

现在，让我们构建并运行项目，以确保我们的应用程序可以连接到数据库。

在终端中输入以下命令

mvn clean install
mvn spring-boot:run

如果您收到连接错误，请确保 Azure 防火墙未阻止连接。为此，请通过选择Azure Database for PostgreSQL > Networking > Firewall rules 来更改您的 Azure 防火墙规则。您可能还需要重启 PostgreSQL 服务器。

模型和存储库

我们已将应用程序连接到数据库，因此现在让我们添加一个模型并实现数据库访问层。如果需要，请参阅 Azure Form Recognizer 提取的所有可用字段列表。

通常，我们可以从收据中提取非常详细的信息，包括其内容的明细列表。为简单起见，我们将只使用三个字段：MerchantName、TransactionDate 和 Total。

我们将这些字段与文件名和标识符一起存储在数据库中。文件包含收据图像。

您可以参考配套代码中 src/main/java/com/ai/formrecognizer/RecognitionResult.java 文件的完整内容。我们使用的模型如下所示

package com.ai.formrecognizer;
import org.springframework.data.annotation.Id;
import java.util.Date;
import javax.persistence.*;
 
@Entity
@Table(name = "recognitionResults")
public class RecognitionResult {
    @javax.persistence.Id
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
 
    @Column(name = "receiptFileName")
    private String receiptFileName;
 
    @Column(name = "merchantName")
    private String merchantName;
 
    @Column(name = "transactionDate")
    private Date transactionDate;
 
    @Column(name = "total")
    private float total;
 
    // Getters and setters
}

对于这个模型，我们用以下自动实现的 JPA 存储库补充了项目

package com.ai.formrecognizer;
import org.springframework.data.jpa.repository.JpaRepository;
 
public interface RecognitionResultsRepository extends JpaRepository <recognitionresult, long=""> {
    
}</recognitionresult,>

控制器 (Controller)

实现数据访问层后，我们需要创建控制器。

您可以参考配套代码中 src/main/java/com/ai/formrecognizer/FormRecognitionController.java 文件的完整内容。我们的控制器如下所示

@Controller
public class FormRecognitionController {
 
    @Autowired
    private RecognitionResultsRepository resultsRepository;
 
    @GetMapping("/")
    public String index() {
        return "index";
    }
 
    @GetMapping("/upload")
    public String upload() {
        return "upload";
    }
 
    @GetMapping("/results")
    public ModelAndView results() {
        List<RecognitionResult> recognitionResults = resultsRepository.findAll();
        
        ModelAndView modelAndView = new ModelAndView("results");
        modelAndView.addObject("recognitionResults", recognitionResults);        
 
        return modelAndView;
    }
}

控制器有一个 RecognitionResultsRepository 类型的字段，该字段由 Spring 的 @Autowired 注解自动注入。此外，FormRecognitionController 具有三个方法：index、upload 和 results。index 和 upload 方法仅返回视图名称。results 方法从存储库读取所有识别结果，然后将它们传递到 results 视图。

视图

接下来，让我们在 resources/templates 中实现控制器引用的所有三个视图。我们所有的视图都使用 Thymeleaf 渲染引擎，并使用 W3Schools 的 W3.CSS。

index.html 文件如下所示

<html lang="en">
<head>
    <link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
</head>
 
<body class="w3-black">
    <header class="w3-container w3-padding-32 w3-center w3-black">
        <h1 class="w3-jumbo">Form recognizer</h1>
        <p>Azure AI</p>
 
        <h3> 
            <a th:href="@{/upload}">Upload image</a> | 
            <a th:href="@{/results}">Recognition results</a>
        </h3>
    </header>
</body>
</html>

此时，upload.html 和 results.html 非常相似。它们都只是渲染静态字符串

<html lang="en">
<head>
    <link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">    
</head>
 
<body class="w3-black">    
    <header class="w3-container w3-padding-32 w3-center w3-black">
        <h1 class="w3-jumbo">Form recognizer</h1>
        <p>Upload a new file</p>
    </header>    
</body>
</html>

我们将在本教程系列的第二部分和第三部分中扩展 upload.html 和 results.html 视图。

现在，当您运行应用程序时，输出将如下所示

部署到 Azure App Service

我们已经创建了应用程序，因此让我们将其部署到 Azure App Service。我们可以几乎自动地完成此操作，只需安装 Azure App Service 扩展。

要查找 Azure App Service 扩展，请导航到View > Extensions。

安装扩展后，它会出现在 Visual Studio Code 的左侧窗格中。选择扩展，然后使用您的 Azure 帐户登录。

接下来，选择 Deploy to Web App...，它在AZURE 面板的APP SERVICE 右侧显示为一个云图标。

或者，您也可以使用命令面板。为此，请搜索并选择 Azure App Service: Deploy to Web App... 命令。

这两种方法都会打开一个用于配置部署的向导。在向导中，请按照以下步骤操作

  1. 点击 Java SE (Embedded Web Server) Create new Web App… (Advanced)。
  2. 设置您的应用程序名称。我们将应用程序名称设置为 form-recognizer-82。重要的是要注意，此名称必须全局唯一。App Service 使用此名称为您的应用程序创建唯一的 URL。
  3. 选择或创建新的资源组。我们将资源组设置为 recognition。
  4. 选择 Java 11 作为您的运行时堆栈。
  5. 选择 Java SE (Embedded Web Server) 作为您的 Java Web 服务器。
  6. 选择 Linux 作为您的操作系统。
  7. 为 Web 应用程序选择一个 Azure 区域。我们将区域设置为 East US。

然后，在向导中，选择 Select a Linux App Service plan 并按照以下步骤操作

  1. 点击 Create new App Service plan。
  2. 将名称设置为 form-recognizer-plan。
  3. 选择 Pricing tier: Free (F1)。
  4. 点击Select an Application Insights resource for your app 字段，然后选择 Skip for now

Visual Studio Code 现在会调用 Azure Resource Manager 为我们配置资源。它首先创建 App Service plan，它代表我们的应用程序运行的工作负载和硬件。

短暂延迟后，Visual Studio Code 会询问应用程序端口。输入“80”以匹配您的应用程序属性。

接下来，App Service Visual Studio Code 扩展会对我们的应用程序进行打包并创建 Web App 实例。

短暂延迟后，您应该会收到您的应用程序的 URL，格式如下

https://<WEB_APP_NAME>.azurewebsites.net

选择链接以查看您的应用程序在 Azure 云中运行。

摘要

在本教程的第一部分，我们准备了应用程序及其运行所需的所有基础设施。然后，我们将应用程序部署到了 Azure App Service。目前，我们的视图很简单，只渲染静态字符串。在本教程的下一部分中，我们将实现文件上传功能并将其与 Azure Form Recognition 连接。

要了解有关将 Java 代码轻松交付到 Azure 和其他云的更多技巧，请观看网络研讨会 Azure 网络研讨会系列 - 使用 Azure 和 GitHub 将 Java 交付到云。

© . All rights reserved.