【ocr识别003】flask+paddleocr+bootstrap搭建OCR文本推理WEB服务 ...

立聪堂德州十三局店 · 2024-8-14 01:00:04

1.欢迎点赞、关注、批评、指正，互三走起来，小手动起来！
2.了解、学习OCR相关技术知识范畴，联合一样平常的场景举行测试、总结。如本文总结的flask+paddleocr+bootstrap搭建OCR文本推理WEB服务应用示例场景。

1.代码布局

如下图所示：

2.效果演示

详情如下：

3.接口返回

接口测试效果图
返回结果详情部分示例
1. {
2. "error_code": "000000",
3. "error_msg": "识别成功",
4. "filename": "cstp2.png",
5. "recognize_time": "5890",
6. "result": [
7. {
8. "points": [
9. [
10. 14.0,
11. 11.0
12. ],
13. [
14. 108.0,
15. 11.0
16. ],
17. [
18. 108.0,
19. 40.0
20. ],
21. [
22. 14.0,
23. 40.0
24. ]
25. ],
26. "score": 0.979973316192627,
27. "text": "性别：男"
28. },
29. {
30. "points": [
31. [
32. 289.0,
33. 11.0
34. ],
35. [
36. 400.0,
37. 9.0
38. ],
39. [
40. 401.0,
41. 37.0
42. ],
43. [
44. 290.0,
45. 39.0
46. ]
47. ],
48. "score": 0.8993546962738037,
49. "text": "住院号："
50. },
51. {
52. "points": [
53. [
54. 677.0,
55. 2.0
56. ],
57. [
58. 713.0,
59. 12.0
60. ],
61. [
62. 707.0,
63. 31.0
64. ],
65. [
66. 672.0,
67. 21.0
68. ]
69. ],
70. "score": 0.6370271444320679,
71. "text": "贝别："
72. }
73. ]
74. }
复制代码

4.代码详情

4.1 HTML代码详情

1. <!DOCTYPE html>
2. <html>
3. <meta charset="utf-8">
4. <head>
5. <title>OCR文字检测识别试运行系统</title>
6. 
7. <link rel="stylesheet" href={{ url_for('static',filename='bootstrap-3.4.1/css/bootstrap.min.css') }}></link>
8. <link rel="stylesheet" href={{ url_for('static',filename='css/upload.css') }}></link>
9. <link rel="stylesheet" href={{ url_for('static',filename='css/36buttons.css') }}></link>
10. </head>
11. <body>
12. <div class="header">
13. <div class="title">【OCR】PP-OCRv3 文字检测识别试运行系统v0.3.0</div>
14. </div>
16. <ul class="menu">
17. <li><a href="/upload/">通用文本检测识别处理</a></li>
18. </ul>
20. <div class="content">
21. 
22. <div id="upload_file">
23. <form id="fileForm" action="/upload/" method="POST" enctype="multipart/form-data">
24. <div class="form-group">
25. <input type="file" class="form-control" id="_upload_file" name="upload_file">
26. 
27. </br>
28. <button id="resetButton" name="resetButton" type="reset" class="button green">重置推理结果</button>
29. </div>
30. </form>
31. </div>
32. </div>
33. </div>
35. <div id="show" style="display: none;">
36. 
37. <div class="col-md-6" style="border: 2px solid #ddd;">
38. </br>
39. <span class="label label-info" style="font-size: 24px;"><<<<<< 原始图片展示 >>>>>> </br></span>
40. 
41. </br>
42. <img id="src_pic_show" src="" alt="Image preview area..." title="preview-img" class="img-responsive">
43. </div>
44. <div class="col-md-6" style="border: 2px solid #ddd;">
45. 
46. </br>
47. <span class="label label-info" style="font-size: 24px;"><<<<<< 推理结果详情 >>>>>> </br></span>
48. </br>
49. 
50. <div id="result_show" style="font-size: 28px;">客官，您提交的任务加急推理中......</div>
51. </div>
52. </div>
53. </body>
54. </html>
55. <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
56. <script src="http://malsup.github.io/jquery.form.js"></script>
58. <script type="text/javascript">
59. var fileInput = document.querySelector('input[type=file]');
60. var previewImg = document.querySelector('img');
62. {#上传图片事件#}
63. fileInput.addEventListener('change', function () {
64. var file = this.files;
65. var reader = new FileReader();
67. //显示预览界面
68. $("#show").css("display", "block");
70. // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
71. reader.addEventListener("load", function () {
72. previewImg.src = reader.result;
73. }, false);
75. // 调用reader.readAsDataURL()方法，把图片转成base64
76. reader.readAsDataURL(file);
78. //初始化输出结果信息
79. $("#result_show").html("</br>客官，您提交的任务加急推理中......");
81. {#上传图片识别表单事件，并显示识别结果信息#}
82. {# ajaxSubmit 请求异步响应#}
84. $("#fileForm").ajaxSubmit(function (data) {
85. var inner = '<table border="1"> <thead> <tr> <th>序号</th> <th>文本目标</th> <th>置信度分数</th> </tr> </thead> <tbody>';
86. //循环输出返回结果，响应识别结果为每行列表
87. var inc = 1;
88. for (var i in data['result']) {
89. var text = data['result'][i]['text'];
90. var score = data['result'][i]['score'];
91. inner += "<tr><td>" + inc + "</td>" + "<td>" + text + "</td>" + "<td>" + score + "</td></tr>";
92. inc += 1;
93. }
94. inner += '</tbody></table>'
95. //清空输出结果信息
96. $("#result_show").html("");
98. //添加识别结果信息
99. $("#show").append( inner );
100. });
101. }, false);
103. document.getElementById('resetButton').addEventListener('click', function() {
104. document.getElementById('src_pic_show').src = '';
105. $('#result_show').empty();
106. });
107. </script>
复制代码

4.2Python代码详情

源代码
1. import json
2. import os
3. import time
4. import numpy as np
5. import pandas as pd
6. from pyautogui import *
7. from paddleocr import PaddleOCR
8. from PIL import Image, ImageDraw
9. from flask import Flask, render_template, request, jsonify
10. # 应用名称，当前py名称，视图函数
11. app = Flask(__name__)
12. # 相对路径
13. BASE_DIR = os.path.dirname(os.path.basename(__name__))
15. # 上传文件路径
16. UPLOAD_DIR = os.path.join(os.path.join(BASE_DIR, 'static'), 'upload')
18. def ocr_img2text( image ):
19. result_dict = {'result': []}
20. paddleocr = PaddleOCR(det_model_dir='./inference/ch_PP-OCRv3_det_infer/',
21. rec_model_dir='./inference/ch_PP-OCRv3_rec_infer/',
22. cls_model_dir='./inference/ch_ppocr_mobile_v2.0_cls_infer/',
23. use_angle_cls=True, lang="ch", use_gpu=True)
24. if image == "":
25. image = screenshot() # 使用pyautogui进行截图操作
26. image = np.array(image)
27. else:
28. # 不为空就打开
29. image = Image.open(image).convert('RGB')
30. image = np.array(image) # 经提醒，需要添加array
32. print( image, type(image) )
33. # 识别图片文件
34. result0 = paddleocr.ocr( image, cls=True )
35. result = result0[0]
37. # for line in result0:
38. # for word in line:
39. # print( word )
41. for index in range(len(result)):
42. line = result[index]
43. p_dict = {}
44. points = line[1]
45. text = line[1][0]
46. score = line[1][1]
47. p_dict['points'] = points
48. p_dict['text'] = text
49. p_dict['score'] = score
50. result_dict['result'].append( p_dict )
51. return result_dict
53. @app.route('/')
54. def upload_file():
55. return render_template('upload.html')
57. @app.route('/upload/', methods=['GET', 'POST'])
58. def upload():
59. if request.method == 'POST':
60. # 每个上传的文件首先会保存在服务器上的临时位置，然后将其实际保存到它的最终位置。
61. filedata = request.files['upload_file']
62. upload_filename = filedata.filename
63. print(upload_filename)
64. # 保存文件到指定路径
65. # 目标文件的名称可以是硬编码的，也可以从 request.files[file] 对象的 filename 属性中获取。
66. # 但是，建议使用 secure_filename() 函数获取它的安全版本
67. if not os.path.exists(UPLOAD_DIR):
68. os.makedirs(UPLOAD_DIR)
69. img_path = os.path.join(UPLOAD_DIR, upload_filename)
70. filedata.save(img_path)
71. start = time.time()
72. # 打开图片
73. img1 = Image.open(img_path)
74. # 识别图片
75. result_dict = ocr_img2text(img_path)
77. # 识别时间
78. end = time.time()
79. recognize_time = int((end - start) * 1000)
81. result_dict["filename"] = upload_filename
82. result_dict["recognize_time"] = str(recognize_time)
83. result_dict["error_code"] = "000000"
84. result_dict["error_msg"] = "识别成功"
85. return jsonify(result_dict)
86. else:
87. return render_template('upload.html')
复制代码

5.后续展望

持续改进优化该部分代码，并完善文档。欢迎交换。。。
https://www.cnblogs.com/xh2023/p/17642994.html

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

【ocr识别003】flask+paddleocr+bootstrap搭建OCR文本推理WEB服务 ...

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云