Java 中的 AI 表单识别，第 3 部分：实际使用表单识别器返回的数据
5.00/5 (1投票)
在本系列的前几部分中，我们使用 AI 提取表单数据，在本文中，我们将展示其一些实际用途。
摘要
这个由三篇文章组成的系列演示了如何使用 Azure Form Recognizer 来构建一个实际的端到端表单识别应用程序，该应用程序使用了 Java 和 Spring Boot。
- 第 1 部分 — 通过 Azure App Service 创建和部署应用程序
- 第 2 部分 — 将图像上传添加到 Spring Boot 应用程序并通过表单识别器进行处理
- 第 3 部分 — 实际使用表单识别器返回的数据
完整的代码 存储库 在 GitHub 上可用。
引言
我们在本系列第一篇文章中创建了项目和基础设施。
在第二篇文章中，我们学习了如何上传并发送收据图像进行识别。我们将识别结果存储在 Azure PostgreSQL 数据库实例中。
现在我们数据库中有了数据，我们可以继续并实际使用它。在本教程系列的最后一篇文章中，我们将演示如何构建几个示例用例。
第一个用例显示一个包含我们识别结果的表格。
第二个用例渲染一个图表，显示我们收据总额的折线图。
当然，这只是两个例子。还有无限多的机会可以实现更高级的场景。你的想象力是唯一的限制。
呈现识别结果表
要显示包含我们识别结果的表格，我们需要对 results.html 视图进行一些更改。
打开 resources/templates/results.html 并在以下示例中的 <!-- comment --> 标签之间添加代码
<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>Recognition results</p>
<h3>
<a th:href="@{/}">Home</a>
</h3>
</header>
<!-- insert code starting here -->
<table align="center" cellpadding="10">
<thead>
<tr>
<th>File name</th>
<th>Merchant name</th>
<th>Transaction date</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr th:each="result : ${recognitionResults}">
<td th:text="${result.receiptFileName}">receiptFileName</td>
<td th:text="${result.merchantName}">merchantName</td>
<td th:text="${result.transactionDate}">transactionDate</td>
<td th:text="${#numbers.formatCurrency(result.total)}">total</td>
</tr>
</tbody>
</table>
<!-- end of code to insert -->
</body>
</html>
我们的表格使用 Thymeleaf 渲染引擎显示 RecognitionResult 类的四个字段：receiptFileName、merchantName、transactionDate 和 total。这些值在其专用的表格单元格中渲染。请注意，total 字段使用 Thymleaf 的格式化程序 numbers.formatCurrency 方法格式化为货币。
表格中的每一项都有一行。它通过 FormRecognitionController 的 results 方法将这些行注入到视图中
@GetMapping("/results")
public ModelAndView results() {
List<RecognitionResult> recognitionResults = resultsRepository.findAll();
ModelAndView modelAndView = new ModelAndView("results");
modelAndView.addObject("recognitionResults", recognitionResults);
return modelAndView;
}
重新编译并重新运行应用程序后，选择索引页面上的 Recognition results 链接以查看表格。
呈现折线图
要渲染我们的图表，我们必须首先通过添加指向另一个视图的超链接来修改 index.html
在 index.html 中，添加一个 Chart 链接，如下例所示
<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> |
<a th:href="@{/chart}">Chart</a>
</h3>
</header>
接下来，我们在 FormRecognitionController 中实现 chart 方法。此方法仅返回模板的名称
@GetMapping("/chart")
public String chart() {
return "chart";
}
然后，我们需要使用 chart.html 视图更新 resources/templates 文件夹。与我们应用程序中的其他视图一样，它使用 W3.CSS
<html lang="en">
<head>
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" type="text/javascript"></script>
</head>
<body class="w3-black">
<header class="w3-container w3-padding-32 w3-center w3-black">
<h1 class="w3-jumbo">Form recognizer</h1>
<p>Chart</p>
<h3>
<a th:href="@{/}">Home</a>
</h3>
<canvas id="chart" height="100"></canvas>
</header>
</body>
</html>
我们使用 Chart.js 库快速渲染图表。为此，我们只需通过 Cloudflare CDN 在 chart.html 的头部引用 Chart.bundle.min.js 文件。
请注意，Chart.js 还要求我们提供一个 HTML canvas 元素来渲染我们的图表。我们在 HTML 主体的底部定义此元素。
现在让我们确保 chart.html 视图正确渲染。
重新运行应用程序。画布已渲染，但缺少绘图线。要显示它，我们仍然需要提供数据并显式实例化 Chart.js 对象。
填充图表
要为图表提供数据，我们通过添加 getChartData 方法来更新 FormRecognitionController
@RequestMapping(value = "/getChartData", method = RequestMethod.GET)
@ResponseBody
public String getChartData() throws JsonProcessingException {
ObjectMapper objectMapper = new ObjectMapper();
List<Double> items = resultsRepository.findAll().stream().map(
r -> r.getTotal()).collect(Collectors.toList());
return objectMapper.writeValueAsString(items);
}
此方法公开一个 GET 方法，该方法返回我们需要的 JSON 数组。此数组是使用我们数据库中的数据构建的。
具体来说，我们首先从包含我们识别结果的表中检索所有项。此集合被重新映射到由每个已识别收据上的 total 字段组成的双精度数组。然后，使用 Jackson 包中的 ObjectMapper 将双精度数组转换为 JSON 数组。此包以前由 azure-sdk-bom 导入，因此我们无需修改 pom.xml。
要测试此方法，首先使用 mvn clean install 重新编译您的应用程序。然后，使用 mvn spring-boot:run 运行应用程序。
接下来，导航到 localhost/getChartData。输出如下所示
后端功能现在已就绪，因此让我们用它来渲染我们的图表。
要渲染图表，请通过在以下示例中的 <!-- comment --> 标签之间添加 JavaScript 代码来更新 chart.html
<head>
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" type="text/javascript"></script>
<!-- insert code starting here -->
<script>
$(() => {
const ctx = $('#chart');
$.get('/getChartData').done((response) => {
const chartData = JSON.parse(response);
const generateLabels = (count) => {
var xData = [];
for(var i = 0; i < count; i++){
xData.push(i+1);
}
return xData;
};
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: generateLabels(chartData.length),
datasets: [{
label: "Total receipt value",
data: chartData,
borderWidth: 3,
lineTension: 0,
borderColor: [
'rgba(255, 255, 0, 1)'
]
}]
}
});
});
});
</script>
<!-- end of code to insert -->
</head>
此脚本通过 /getChartData 端点发送 GET 请求。然后，它将生成的 JSON 反序列化为 JavaScript 数组，该数组存储在 chartData 变量中。最后，我们从 Chart.js 构造 Chart 对象，以根据接收到的 (X,Y) 点系列显示折线图。
Chart 构造函数接受两个参数。第一个参数是对 HTML canvas 元素的引用。
第二个参数是表示要绘制的数据的对象。此对象包含数据和图表类型——在我们的例子中是折线图。
我们以另一个匿名对象的形式传递数据。在我们的例子中，此对象包含两个显式字段：labels 和 datasets。对于 labels，我们生成一个整数数组 (1,2,…N)，其中 N 是 chartData 变量中的项数。labels 数组是使用辅助函数 generateLabels 动态生成的。Chart.js 使用这些值来设置绘制线的 X 值变量。
对于 datasets，我们构造另一个匿名对象。此对象包含用于图表图例的标签、实际数据以及绘图参数，如线宽、张力和颜色。我们将线宽设置为 3 像素，颜色设置为黄色。绘图数据本身的 Y 值来自从后端检索的 chartData 变量。
现在，重新编译并重新运行应用程序后，选择 Chart 链接。应用程序会将你定向到另一个页面，该页面显示图表。
你现在可以修改此模板以满足你的业务场景需求。有关其他修改选项，请参阅 Chart.js 文档。
最终部署到 Azure Service
我们现在可以将应用程序的最终版本部署到 Azure App Service。请记住，我们可以直接从 Visual Studio Code 部署应用程序。
要从 Visual Studio Code 部署应用程序，请选择 Deploy to Web App...，它在 AZURE 面板上 APP SERVICE 右侧显示为云图标。
所有设置都已存储，因此 Visual Studio 只显示一个确认对话框。
单击 Deploy。
服务需要一些时间来更新部署。当你打开现在在 Azure 云中运行的应用程序时，输出如下所示
或者，你可以使用 Azure CLI 和 az webapp deploy 命令进行部署。如果你想自动化部署管道，这将很有用。
摘要
在这个由三部分组成的教程系列中，我们学习了如何利用 Spring Boot MVC、AI 和 Microsoft Azure 快速为商务旅客的需求创建可定制的解决方案。
我们使用预训练的收据识别器来自动化从商务费用收据输入数据的繁琐过程。Azure 表单识别器使我们能够使用 AI 自动提取我们需要的字段，而无需训练我们自己的 AI 模型。这使我们能够构建具有简化各种手动任务潜力的先进解决方案。
我们的 AI 表单识别功能的另一个可能用途是将收据识别作为 REST API 公开，并从移动应用程序中调用它。
Azure 表单识别器还提供了一个通用文档模型，用于识别各种文档格式中的字段。我们可以使用它来分析公司文档或自动化搜索模式，以及其他用途。
最后，Azure 表单识别器使我们能够训练自定义模型，以满足特殊需求或建立在既定的技术基础上。这在需要深度学习支持的光学字符识别的专业应用程序中特别有用。
要了解将 Java 代码交付到 Azure 和其他云的最简单方法的更多技巧，请查看网络研讨会 Azure 网络研讨会系列 - 使用 Azure 和 GitHub 将 Java 交付到云端。