阿里云 AI Vision Notes 4

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

  • 前言
  • 前端页面
  • 后端实现
    • 主要代码更改
    • MainController.java
    • OcrService.java
  • 测试
  • 写在结尾

前言

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

前端页面

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



<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>VIAPItitle>
    <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 RecognizeLicensePlateh2>
            <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>

阿里云 AI Vision Notes 4_第1张图片

后端实现

  • 代码结构
    阿里云 AI Vision Notes 4_第2张图片

主要代码更改

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;
    }

测试

阿里云 AI Vision Notes 4_第3张图片
阿里云 AI Vision Notes 4_第4张图片

写在结尾

阿里云 Vision API 识别效果还是十分优秀的,多次测试都能正确识别车牌号与车辆类型。

你可能感兴趣的:(训练营)