基于paddle的识别项目（跟着B站UP主做的）

我是菜鸡别骂我~~~

Spring Boot框架+vue+paddle

utils.java

文字识别

这段 Java 代码实现了一个名为 picToWords 的函数，该函数使用百度 AI 开放平台的 OCR（Optical Character Recognition，光学字符识别）服务来将图片中的文字转换成可读的字符串。以下是代码的功能解释：

函数定义

 public static String picToWords(MultipartFile file) throws IOException

• static：这意味着这个方法属于类本身，而不是类的某个实例。

• picToWords：这是方法的名称。

• (MultipartFile file)：这是方法的参数列表，它接受一个类型为MultipartFile的参数file。MultipartFile是Spring框架中用于处理上传文件的接口。

这是一个公共的静态方法，名为 picToWords，它接受一个 MultipartFile 类型的参数（通常用于处理上传的文件），并返回一个字符串。该方法可能会抛出 IOException。

创建 OCR 客户端

 AipOcr client = new AipOcr(APP_ID, API_KEY, SECRET_KEY);

这里创建了一个 AipOcr 对象，它是百度 OCR 的 Java SDK 的一个类。需要使用 APP_ID、API_KEY 和 SECRET_KEY 这三个参数来初始化它，这些参数通常在你的百度 AI 开放平台账户中可以找到。

设置 OCR 选项

 HashMap<String, String> options = new HashMap<String, String>();  

• HashMap<String, String> options：声明一个键和值都是 String 类型的 HashMap 变量 options 。

• new HashMap<String, String>()：创建一个新的 HashMap 实例。

 options.put("detect_direction", "true");  
 options.put("probability", "true");

• 这两行代码向options这个HashMap中添加了两个键值对。

• 第一个键值对的键是"detect_direction"，值是字符串"true"，表示开启文本方向检测。

  1、是否检测图像朝向，默认不检测，即：false。朝向是指输入图像是正常方向、逆时针旋转90/180/270度。可选值包括:

  true：检测朝向；

  false：不检测朝向。

  2、probability：是否返回识别结果中每一行的置信度。

  置信度通常以百分比的形式表示，例如95%或99%。这意味着，如果我们重复这个过程很多次（即多次从总体中随机抽取样本并计算估计值），那么大约95%（或99%）的估计值将包含总体参数的真实值。换句话说，我们有95%（或99%）的信心认为我们的估计值是接近真实的。置信度越高，我们的估计范围通常也会越宽。

• 第二个键值对的键是"probability"，值也是"true"，表示返回识别结果的概率。

这里设置了一些 OCR 选项。detect_direction 设置为 true 表示 OCR 会尝试检测文本的方向。probability 设置为 true 表示 OCR 会返回每个字符的识别概率。

调用 OCR 服务并获取结果

 JSONObject res = client.basicGeneral(file.getBytes(), options);

• JSONObject res：声明一个 JSONObject 类型的变量 res ，用于存储OCR服务的响应结果。

• client.basicGeneral(file.getBytes(), options)：

  • client 是AipOcr类的一个实例，它代表与百度OCR服务的连接。

  • basicGeneral 是AipOcr类中的一个方法，用于执行基本的通用OCR识别。

  • file.getBytes() 将上传的文件转换为字节数组，因为网络传输通常处理字节数据。

  • options 是一个HashMap，其中包含发送给OCR服务的配置选项，比如是否检测文本方向或返回识别概率等。

  调用 client 对象的 basicGeneral 方法，将文件转换为字节数组， file.getBytes() 和之前设置的选项 options 作为参数传递。这个方法会返回一个 JSONObject ，其中包含OCR服务的结果。

使用前面创建的 client 对象和设置的选项，调用 basicGeneral 方法来识别图片中的文字。该方法接受图片的字节数据和选项作为参数，并返回一个 JSONObject 类型的结果。

处理识别结果

 JSONArray words_result = res.getJSONArray("words_result");  

• JSONArray words_result：声明一个 JSONArray 类型的变量 words_result。

• res.getJSONArray("words_result")：从 res 这个 JSONObject 中提取键为 words_result 的值，该值应该是一个JSONArray，包含了OCR识别出的单词或文本行。

   for (int i =0;i<words_result.length();i++){
             JSONObject jsonObject =words_result.getJSONObject(i);
             Object words=jsonObject.get("words");
             String s= (String) words;
             result +=s+"";
   }

• 这是一个for循环，用于遍历words_result数组中的每个元素。

• JSONObject jsonObject =words_result.getJSONObject(i)：从words_result数组中获取索引为i的元素，并将其转换为一个JSONObject，识别所获得的结果是JSON数据类型的文件。

• Object words=jsonObject.get("words")：从当前的jsonObject中提取键为"words"的值，并将其存储在一个Object类型的变量words中。

• String s= (String) words：将words从Object类型强制转换为String类型，并存储在变量s中。

• result +=s+""：将转换后的字符串s添加到result字符串的末尾。这里有一个问题，通常OCR服务返回的words可能是一个数组，所以这里可能需要进一步处理。

这部分代码首先从返回的 JSON 对象中获取 words_result 数组，然后遍历这个数组。对于数组中的每个元素（一个 JSON 对象），它提取出 words 属性（这应该是一个字符串），然后将其添加到 result 字符串中。注意这里有一个可能的问题：words 属性的值可能不是一个简单的字符串，而是一个数组或其他复杂类型，这取决于实际的 OCR 服务返回的结果结构。

输出和返回结果

 System.out.println(result);  
 return result;

最后，方法将识别的文字输出到控制台，并作为字符串返回。

总体来说，这个函数的目标是将上传的图片中的文字识别出来，并以字符串的形式返回。但是，请注意，代码中的某些部分（特别是处理 words 属性的部分）可能需要根据你的实际 OCR 服务返回的结果结构进行调整。

身份证识别

  //MultipartFile是Spring框架中用于处理上传文件的接口。
  public static String sFZ(MultipartFile file) throws IOException{
        AipOcr client = new AipOcr(APP_ID, API_KEY, SECRET_KEY);
      //options：配置识别过程中的一些参数 例如是否识别身份证复印件、是否开启反向识别之类的
        HashMap<String, String> options = new HashMap<String, String>();
        options.put("detect_direction", "true");
      //是否开启身份证风险类型(身份证复印件、临时身份证)检测功能，默认不开启，即：false。
        options.put("detect_risk", "false");
      //识别的方向默认为 身份证带国徽的一面，但是系统会自动检测身份证正反面，
      //如果传参指定方向与图片相反，支持正常识别，返回参数image_status字段为"reversed_side"
        String idCardSide = "back";
      //让client代表的与百度OCR服务的连接执行识别，并将识别结果放在 res 中
        JSONObject res = client.idcard(file.getBytes(), idCardSide, options);
        String result=res.toString(2);
        System.out.println(result);
        return result;
    }

图像识别

在这段代码中，imgRecognition 方法是用来执行图像识别的。它接收一个字节数组 file 作为参数，这个字节数组应该包含要识别的图像数据。下面是对这段代码的逐行解释：

public static String imgRecognition(byte[] file){  
    // 创建一个AipImageClassify的实例，用于与百度图像分类服务进行交互  
    AipImageClassify client = new AipImageClassify(APP_ID_img, API_KEY_img, SECRET_KEY_img);  
  
    // 调用AipImageClassify的advancedGeneral方法进行图像识别  
    // 这里传入了两个参数：  
    // 1. file - 字节数组形式的图像数据  
    // 2. new HashMap<String, String>() - 一个空的HashMap，用于传递可选参数给图像识别服务  
    // 这个方法返回一个JSONObject，包含了图像识别的结果  
    JSONObject res = client.advancedGeneral(file, new HashMap<String, String>());  
  
    // 将JSONObject转换为字符串并返回，这里使用了缩进为2的格式化方式，使得返回的JSON字符串更易读  
    return res.toString(2);  
}

在这段代码中，AipImageClassify 应该是百度AI平台提供的用于图像分类的SDK类。APP_ID_img等是预先定义的常量，用于身份验证和授权访问百度AI服务。

client.advancedGeneral(file, new HashMap<String, String>()) 调用是执行图像识别的关键步骤。这里使用了 advancedGeneral 方法，这个方法可能是用于执行更高级或更复杂的图像分类任务。

• 第一个参数 file 是包含图像数据的字节数组。

• 第二个参数是一个空的 HashMap，用于传递可选参数给API。在这个例子中，没有传递任何可选参数，所以 HashMap 是空的。

最后，res.toString(2) 将返回的 JSONObject 转换为一个格式化的JSON字符串，其中 2 表示每个级别的缩进空格数为2，这样做可以使返回的JSON字符串更加易读。

controller.java

@RestController  
public class AiController {

• @RestController: 这是一个Spring框架的注解，表示这个类是一个 RESTful 的Web控制器。所有这个类中的方法返回值都会直接作为HTTP响应体返回给客户端，而不是视图模板。

• public class AiController: 这是一个公共类的定义，名为 AiController 。

@RequestMapping(value = "/pic",method = RequestMethod.POST)  
public String PicToWord(@RequestParam("file") MultipartFile file) throws IOException {  
    String s = Aiutils.picToWords(file);  
    return s;  
}

• @RequestMapping(value = "/pic",method = RequestMethod.POST):

  这个注解表示当HTTP POST请求发送到/pic路径时，会调用下面的PicToWord方法。

• public String PicToWord(@RequestParam("file") MultipartFile file) throws IOException:

  这是一个公共方法，名为PicToWord。它接受一个MultipartFile类型的参数file，该参数是通过HTTP请求的file参数传递的。这个方法可能会抛出IOException。

• @RequestParam("file"):

  这个注解告诉Spring框架从HTTP请求的参数中查找名为file的参数，并将其值绑定到file参数上。

• String s = Aiutils.picToWords(file);:

  这行代码调用了Aiutils类的picToWords方法，并将上传的文件作为参数传递，然后将返回的结果存储在字符串s中。

• return s;: 这行代码将s的值作为HTTP响应体返回给客户端。

@RequestMapping(value = "/sfz",method =RequestMethod.POST )  
public String SFZ(@RequestParam("file") MultipartFile file) throws IOException{  
    String s = Aiutils.sFZ(file);  
    return s;  
}

• 这个部分与上面的PicToWord方法类似，但是它处理的是发送到/sfz路径的请求，并调用Aiutils类的sFZ方法。

@RequestMapping(value = "/imgRecognition",method =RequestMethod.POST )  
public String imgRecognition(@RequestParam("file") MultipartFile file) throws IOException{  
    //打印文件名
    System.out.println(file.getOriginalFilename());  
    String s = Aiutils.imgRecognition(file.getBytes());  
    return s;  
}

• 这个方法处理发送到/imgRecognition路径的POST请求。

• System.out.println(file.getOriginalFilename());: 这行代码在控制台上打印上传文件的原始文件名。

• String s = Aiutils.imgRecognition(file.getBytes());: 这行代码调用了Aiutils类的imgRecognition方法，并将文件的字节作为参数传递。

• return s;: 返回处理结果。

@RequestMapping(value = "/correction",method =RequestMethod.GET )  
public String imgToWord(@RequestParam("text") String text) { 
    //打印接收到的文本
    System.out.println(text);  
    //处理接收到的文本
    String s = Aiutils.correction(text);  
    System.out.println(s);  
    return s;  
}

• 这个方法处理发送到/correction路径的GET请求。

• @RequestParam("text") String text: 这表示从GET请求的查询参数中获取名为text的参数，并将其值绑定到text参数上。

• System.out.println(text);: 在控制台上打印接收到的文本。

• String s = Aiutils.correction(text);: 调用Aiutils类的correction方法，对文本进行处理。

• System.out.println(s);: 打印处理后的文本。

• return s;: 返回处理后的文本作为HTTP响应体。

整体上，这个AiController类提供了四个不同的API端点，分别用于图片转文字、身份证识别、图像识别和文本校正。这些端点都通过调用Aiutils类中的相应方法来实现功能。

具体实现步骤

这个项目是基于Paddle、SpringBoot和Vue实现的身份证识别、文字识别和图像识别的系统。下面是这个项目实现的具体步骤：

一、项目准备

1. 环境搭建

   • 安装Java开发环境（JDK）和Maven构建工具。

   • 安装Python环境，并安装PaddlePaddle深度学习框架。

   • 配置Vue的开发环境，包括Node.js和npm。

2. 模型准备

   • 使用PaddlePaddle训练或获取预训练的身份证识别、文字识别和图像分类模型。

   • 将模型转换为适合Java环境调用的格式（如ONNX或Paddle Lite）。

二、后端开发（SpringBoot）

1. 项目结构搭建

   • 使用Maven创建SpringBoot项目，并定义好项目的包结构和依赖。

2. 模型集成

   • 使用PaddlePaddle提供的Java接口或转换后的模型格式，集成模型到SpringBoot项目中。

   • 编写模型调用的服务类，封装模型的加载、预测等逻辑。

3. API接口开发

   • 开发RESTful API接口，用于接收前端发送的图片数据和识别请求。

   • 实现图片上传接口，将上传的图片保存到服务器指定位置。

   • 实现识别接口，调用模型服务类对图片进行识别，并返回识别结果。

4. 数据处理

   • 在识别接口中，对上传的图片进行预处理，如灰度化、二值化等，以提高识别准确率。

   • 将处理后的图片数据转换为模型可以接受的格式，并调用模型进行预测。

5. 异常处理与日志记录

   • 在API接口中添加异常处理逻辑，确保在发生错误时能够返回合理的错误信息。

   • 记录API调用的日志，方便后续的问题排查和性能分析。

三、前端开发（Vue）

1. 项目搭建

   • 使用Vue CLI创建Vue项目，并定义好项目的组件结构和路由。

2. 界面设计

   • 设计身份证识别、文字识别和图像识别的界面，包括图片上传、识别按钮和结果显示区域。

3. API调用

   • 在Vue组件中编写代码，调用后端提供的API接口进行图片上传和识别请求。

   • 处理API返回的数据，将识别结果显示在界面上。

4. 用户体验优化

   • 添加文件选择、上传进度显示等功能，提升用户体验。

   • 对识别结果进行格式化展示，使其更易于理解和使用。

四、测试与部署

1. 功能测试

   • 对每个识别功能进行详细的测试，确保功能的正确性和稳定性。

   • 测试不同场景下的识别效果，包括不同光线、角度、遮挡等情况。

2. 性能测试

   • 对系统进行压力测试，评估系统的响应时间、吞吐量和错误率等指标。

   • 根据测试结果进行性能优化，如调整模型参数、优化数据传输方式等。

3. 部署上线

   • 将后端和前端项目打包并部署到服务器上。

   • 配置服务器环境，确保项目的正常运行和安全性。

通过以上步骤，我们可以实现一个基于Paddle、SpringBoot和Vue的身份证识别、文字识别和图像识别的系统。在实际开发中，还需要根据项目的具体需求和资源情况进行适当的调整和优化。

vue的作用

在这个项目中，Vue主要用于构建前端用户界面，负责与用户进行交互，展示识别结果，并发送请求到后端服务器进行图片上传和识别。以下是Vue在这个项目中的具体使用：

1. 创建Vue项目

首先，使用Vue CLI（命令行工具）创建一个新的Vue项目。这将会生成一个基本的项目结构，包含入口文件、组件文件、路由文件等。

2. 设计组件和页面

根据项目的需求，设计并创建不同的Vue组件。这些组件可以包括：

• 图片上传组件：用于选择并上传图片到后端服务器。

• 识别结果展示组件：用于展示后端返回的识别结果。

• 其他UI组件：如按钮、输入框、提示信息等。

同时，设计好各个页面的布局和交互逻辑。

3. 实现数据绑定和交互

在Vue组件中，使用v-model、v-for、v-if等指令实现数据的绑定和条件渲染。通过事件监听（如@click）处理用户交互，如点击按钮触发图片上传或识别操作。

在Vue中，数据绑定和交互是实现动态和响应式界面的关键部分。下面将详细解释在Vue组件中如何使用v-model、v-for、v-if等指令实现数据绑定和条件渲染，并通过事件监听处理用户交互。

1. 数据绑定

Vue通过数据绑定将组件的数据和模板紧密地连接起来，使得当数据发生变化时，模板会自动更新。

使用v-model实现表单数据绑定

v-model指令用于在表单元素上创建双向数据绑定。它确保输入字段的值与Vue实例的数据保持同步。

<template>  
  <div>  
    <input v-model="imageName" type="text" placeholder="图片名称">  
    <p>图片名称：{{ imageName }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      imageName: ''  
    };  
  }  
};  
</script>

在上面的例子中，imageName数据属性与<input>元素绑定，当用户在输入框中输入文本时，imageName的值会自动更新，反之亦然。

使用插值表达式显示数据

在模板中，可以使用双大括号{{ }}作为插值表达式来显示Vue实例中的数据。

<template>  
  <div>  
    <p>当前识别的图片数量：{{ imageCount }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      imageCount: 0  
    };  
  }  
};  
</script>

2. 条件渲染

Vue提供了v-if、v-else-if和v-else指令来实现条件渲染。这些指令根据表达式的值来决定是否渲染一个元素。

<template>  
  <div>  
    <div v-if="isUploading">正在上传图片...</div>  
    <div v-else>图片上传完成！</div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      isUploading: true  
    };  
  }  
};  
</script>

在上面的例子中，当isUploading为true时，显示“正在上传图片...”，否则显示“图片上传完成！”。

3. 列表渲染

v-for指令用于渲染一个列表，它基于源数据多次渲染一个元素或模板块。

<template>  
  <div>  
    <ul>  
      <li v-for="(image, index) in images" :key="index">  
        {{ image.name }}  
      </li>  
    </ul>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      images: [  
        { name: 'image1.jpg' },  
        { name: 'image2.jpg' },  
        // ...  
      ]  
    };  
  }  
};  
</script>

在上面的例子中，v-for指令遍历images数组，并为数组中的每个对象渲染一个<li>元素。

4. 处理用户交互

Vue通过事件监听来处理用户的交互操作。

使用@click监听点击事件

<template>  
  <div>  
    <button @click="uploadImage">上传图片</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    uploadImage() {  
      // 处理图片上传的逻辑  
    }  
  }  
};  
</script>

在上面的例子中，当按钮被点击时，uploadImage方法会被调用。在这个方法内部，你可以编写逻辑来处理图片上传。

使用其他事件监听器

Vue支持监听各种DOM事件，如@input（监听输入框的变化）、@submit（监听表单提交）等。只需将事件名以@前缀的形式添加到元素上，并指定一个处理函数即可。

通过结合使用数据绑定、条件渲染、列表渲染和事件监听，Vue能够创建出高度交互和动态的前端界面。这些功能使得Vue成为构建现代Web应用程序的强大工具。

4. 调用后端API

使用axios或fetch等HTTP客户端库，在Vue组件中编写代码调用后端提供的API接口。例如，当用户选择图片并点击上传按钮时，Vue组件会发送一个POST请求到后端的图片上传接口，并带上图片数据。同样地，当需要识别图片时，Vue组件会发送一个包含图片ID或路径的GET请求到后端的识别接口。

5. 处理后端响应

当后端返回响应时，Vue组件需要处理这些响应数据。例如，如果后端返回了识别结果，Vue组件可以将这些结果展示在界面上。如果后端返回了错误信息，Vue组件可以显示相应的错误提示。

6. 状态管理（可选）

如果项目比较复杂，涉及多个组件之间的数据共享和状态管理，可以考虑使用Vuex进行状态管理。Vuex提供了一个集中式的存储库来管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

7. 路由管理

使用Vue Router进行路由管理，定义不同页面的路由规则，并实现页面之间的导航和跳转。

8. 样式和布局

使用CSS或CSS预处理器（如Sass、Less）为Vue组件添加样式，实现美观的界面布局和交互效果。

9. 打包和部署

当开发完成后，使用Vue CLI进行项目打包，生成可用于部署的静态文件。然后将这些文件部署到Web服务器上，确保用户可以通过浏览器访问和使用应用。

通过以上步骤，Vue在项目中实现了前端界面的构建、用户交互的处理、后端API的调用以及识别结果的展示等功能，为用户提供了一个友好、高效的识别服务体验。