阿里云 AI Vision Notes 4-CSDN博客

本文链接：https://blog.csdn.net/weixin_44523919/article/details/106610029

AI训练营第四课车辆信息识别

前言
前端页面
后端实现
测试
写在结尾

前言

经过前三天的划水笔记，今天终于需要写一个项目应用了。
项目：车辆信息识别
主要功能：车辆车牌号码识别，车型识别，以及一些无关紧要的信息输出。
项目采用：Java SpringBoot ，调用阿里云 Vision API。
项目结构以及部分内容参考：阿里云 Github Demo。

前端页面

CSS样式与JS脚本采用的是官方提供的快速好看且稳定。具体样式效果见后面的图片。

<!--index.html-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>VIAPI</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12 mx-auto">
            <h2 style="text-indent: 0.5em;">VIAPI RecognizeLicensePlate</h2>
            <div class="col-sm-12">
                <p th:text="${message}" th:if="${message ne null}" class="alert alert-primary"></p>
            </div>
            <br />
            <br />
            <form method="post" th:action="@{/upload}" enctype="multipart/form-data">
                <div class="col-sm-4">
                    <div class="input-group">
                        <input id='location' class="form-control" onclick="$('#i-face').click();">
                        <label class="input-group-btn">
                            <input type="button" id="i-check" value="上传车辆图片" class="btn btn-primary"
                                   onclick="$('#i-face').click();">
                        </label>
                    </div>
                </div>
                <input type="file" name="face" id='i-face' accept=".jpg, .png, .jpeg"
                       onchange="$('#location').val($('#i-face').val());" style="display: none">
                <div class="col-sm-4">
                    <button type="submit" class="btn btn-primary">开始识别</button>
                </div>
            </form>

        </div>
    </div>

    <div class="row" style="margin-top: 30px;">
        <div class="col-md-12 mx-auto">
            <div class="col-sm-4">
                <img style="width: 100%;" th:src="${Image}" th:if="${Image ne null}" class="img-fluid" alt=""/>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 30px;">
        <div class="col-md-12 mx-auto">
            <div class="col-sm-4">
                <p th:if="${Result ne null}"><span>车牌号：</span><span th:text="${Result.plateNumber}"></span></p>
                <p th:if="${Result ne null}"><span>类型：</span><span th:text="${Result.plateType}"></span></p>
                <p th:if="${Result ne null}"><span>可信度：</span><span th:text="${Result.confidence}"></span></p>
                <p th:if="${Result ne null}"><span>类型可信度：</span><span th:text="${Result.plateTypeConfidence}"></span></p>
            </div>
            <div class="col-sm-4">
                <p th:if="${Result ne null}"><span>H：</span><span th:text="${Result.roi.h}"></span></p>
                <p th:if="${Result ne null}"><span>W：</span><span th:text="${Result.roi.w}"></span></p>
                <p th:if="${Result ne null}"><span>X：</span><span th:text="${Result.roi.x}"></span></p>
                <p th:if="${Result ne null}"><span>Y：</span><span th:text="${Result.roi.y}"></span></p>

            </div>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

后端实现

代码结构

主要代码更改

MainController.java

@Controller
@RequestMapping("/")
public class MainController {
    @Autowired
    ServletContext context;

    private String uploadDirectory;
    private OcrService ocrService;
    private List<String> Images;
    private List<Map<String, String>> Results;

    public MainController(@Value("${file.upload.path}") String uploadDirectory, OcrService ocrService) {
        this.uploadDirectory = uploadDirectory;
        this.ocrService = ocrService;
        Results = new ArrayList<>();
        Images = new ArrayList<>();
    }
    // ...
@PostMapping("/upload")
    public String uploadFile(@RequestParam("face") MultipartFile face, RedirectAttributes attributes) {

        if (face.isEmpty()) {
            attributes.addFlashAttribute("message", "Please select a file to upload.");
            return "redirect:/";
        }
        uploadDirectory = context.getRealPath("images") + "/";
        System.out.println(uploadDirectory);
        String errorMessage = null;
        try {
            Path dir = Paths.get(uploadDirectory);
            if (!Files.exists(dir)) {
                Files.createDirectories(dir);
            }

                String filename = saveFile(face);
                Map<String, String> res = ocrService.RecognizeLicensePlate(uploadDirectory + filename);
                Images.add("/images/" + filename);
                Results.add(res);
        } catch (TeaException e) {
            e.printStackTrace();
            errorMessage = JSON.toJSONString(e.getData());
        } catch (Exception e) {
            e.printStackTrace();
            errorMessage = e.getMessage();
        }

        if (StringUtils.isNotBlank(errorMessage)) {
            attributes.addFlashAttribute("message", errorMessage);
        }
        return "redirect:/";
    }
}

OcrService.java

    public Map<String, String> RecognizeLicensePlate(String filePath) throws Exception {

        RecognizeLicensePlateAdvanceRequest request = new RecognizeLicensePlateAdvanceRequest();
        request.imageURLObject = Files.newInputStream(Paths.get(filePath));
        RecognizeLicensePlateResponse response = ocrClient.recognizeLicensePlateAdvance(request, runtime);
        System.out.println(JSON.toJSONString(response.data.plates));
        Map<String, String> map = JSON.parseObject(JSON.toJSONString(response.data.plates), new TypeReference<Map<String, String>>() {
        });
        return map;
    }