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

1.欢迎点赞、关注、批评、指正,互三走起来,小手动起来!

2.了解、学习OCR相关技术知识领域,结合日常的场景进行测试、总结。如本文总结的flask+paddleocr+bootstrap搭建OCR文本推理WEB服务应用示例场景。

文章目录

1.代码结构

  • 如下图所示:

2.效果演示

  • 详情如下:

3.接口返回

  • 接口测试效果图

  • 返回结果详情部分示例

    bash 复制代码
    {
        "error_code": "000000",
        "error_msg": "识别成功",
        "filename": "cstp2.png",
        "recognize_time": "5890",
        "result": [
            {
                "points": [
                    [
                        14.0,
                        11.0
                    ],
                    [
                        108.0,
                        11.0
                    ],
                    [
                        108.0,
                        40.0
                    ],
                    [
                        14.0,
                        40.0
                    ]
                ],
                "score": 0.979973316192627,
                "text": "性别:男"
            },
            {
                "points": [
                    [
                        289.0,
                        11.0
                    ],
                    [
                        400.0,
                        9.0
                    ],
                    [
                        401.0,
                        37.0
                    ],
                    [
                        290.0,
                        39.0
                    ]
                ],
                "score": 0.8993546962738037,
                "text": "住院号:"
            },
            {
                "points": [
                    [
                        677.0,
                        2.0
                    ],
                    [
                        713.0,
                        12.0
                    ],
                    [
                        707.0,
                        31.0
                    ],
                    [
                        672.0,
                        21.0
                    ]
                ],
                "score": 0.6370271444320679,
                "text": "贝别:"
            }
        ]
    }

4.代码详情

4.1 HTML代码详情

html 复制代码
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>OCR文字检测识别试运行系统</title>
    <!--静态加载 样式-->
    <link rel="stylesheet" href={{ url_for('static',filename='bootstrap-3.4.1/css/bootstrap.min.css') }}></link>
    <link rel="stylesheet" href={{ url_for('static',filename='css/upload.css') }}></link>
    <link rel="stylesheet" href={{ url_for('static',filename='css/36buttons.css') }}></link>
</head>
<body>
<div class="header">
    <div class="title">【OCR】PP-OCRv3 文字检测识别试运行系统v0.3.0</div>
</div>

<ul class="menu">
    <li><a href="/upload/">通用文本检测识别处理</a></li>
</ul>

<div class="content">
    <!--上传图片文件-->
    <div id="upload_file">
        <form id="fileForm" action="/upload/" method="POST" enctype="multipart/form-data">
            <div class="form-group">
                <input type="file" class="form-control" id="_upload_file" name="upload_file">
<!--                <label class="sr-only" for="upload_file">上传图片</label>-->
                </br>
                <button id="resetButton" name="resetButton" type="reset" class="button green">重置推理结果</button>
            </div>
        </form>
    </div>
</div>
</div>

<div id="show" style="display: none;">
    <!--显示上传的图片-->
    <div class="col-md-6" style="border: 2px solid #ddd;">
        </br>
        <span class="label label-info" style="font-size: 24px;"><<<<<< 原始图片展示 >>>>>> </br></span>
        <!--静态加载 图片, url_for() 动态生成路径 -->
        </br>
        <img id="src_pic_show" src="" alt="Image preview area..." title="preview-img" class="img-responsive">
    </div>
    <div class="col-md-6" style="border: 2px solid #ddd;">
        <!--显示识别结果JSON报文列表-->
        </br>
        <span class="label label-info" style="font-size: 24px;"><<<<<< 推理结果详情 >>>>>> </br></span>
        </br>
        <!-- 结果显示区 -->
        <div id="result_show" style="font-size: 28px;">客官,您提交的任务加急推理中......</div>
    </div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>

<script type="text/javascript">
    var fileInput = document.querySelector('input[type=file]');
    var previewImg = document.querySelector('img');

    {#上传图片事件#}
    fileInput.addEventListener('change', function () {
        var file = this.files;
        var reader = new FileReader();

        //显示预览界面
        $("#show").css("display", "block");

        // 监听reader对象的的onload事件,当图片加载完成时,把base64编码賦值给预览图片
        reader.addEventListener("load", function () {
            previewImg.src = reader.result;
        }, false);

        // 调用reader.readAsDataURL()方法,把图片转成base64
        reader.readAsDataURL(file);

        //初始化输出结果信息
        $("#result_show").html("</br>客官,您提交的任务加急推理中......");

        {#上传图片识别表单事件,并显示识别结果信息#}
        {# ajaxSubmit 请求异步响应#}

        $("#fileForm").ajaxSubmit(function (data) {
            var inner = '<table border="1"> <thead> <tr> <th>序号</th> <th>文本目标</th> <th>置信度分数</th> </tr> </thead> <tbody>';
            //循环输出返回结果,响应识别结果为每行列表
            var inc = 1;
            for (var i in data['result']) {
                var text = data['result'][i]['text'];
                var score = data['result'][i]['score'];
                inner += "<tr><td>" + inc + "</td>" + "<td>" + text + "</td>" + "<td>" + score + "</td></tr>";
                inc += 1;
            }
            inner += '</tbody></table>'
            //清空输出结果信息
            $("#result_show").html("");

            //添加识别结果信息
            $("#show").append( inner );
        });
    }, false);

    document.getElementById('resetButton').addEventListener('click', function() {
        document.getElementById('src_pic_show').src = '';
        $('#result_show').empty();
    });
</script>

4.2Python代码详情

  • 源代码

    python 复制代码
    import json
    import os
    import time
    import numpy as np
    import pandas as pd
    from pyautogui import *
    from paddleocr import PaddleOCR
    from PIL import Image, ImageDraw
    from flask import Flask, render_template, request, jsonify
    # 应用名称,当前py名称,视图函数
    app = Flask(__name__)
    # 相对路径
    BASE_DIR = os.path.dirname(os.path.basename(__name__))
    
    # 上传文件路径
    UPLOAD_DIR = os.path.join(os.path.join(BASE_DIR, 'static'), 'upload')
    
    def ocr_img2text( image ):
        result_dict = {'result': []}
        paddleocr = PaddleOCR(det_model_dir='./inference/ch_PP-OCRv3_det_infer/',
                        rec_model_dir='./inference/ch_PP-OCRv3_rec_infer/',
                        cls_model_dir='./inference/ch_ppocr_mobile_v2.0_cls_infer/',
                        use_angle_cls=True, lang="ch", use_gpu=True)
        if image == "":
            image = screenshot()  # 使用pyautogui进行截图操作
            image = np.array(image)
        else:
            # 不为空就打开
            image = Image.open(image).convert('RGB')
            image = np.array(image)  # 经提醒,需要添加array
    
        print( image, type(image) )
        # 识别图片文件
        result0 = paddleocr.ocr( image, cls=True )
        result = result0[0]
    
        # for line in result0:
        #     for word in line:
        #         print( word )
    
        for index in range(len(result)):
            line = result[index]
            p_dict = {}
            points = line[1]
            text = line[1][0]
            score = line[1][1]
            p_dict['points'] = points
            p_dict['text'] = text
            p_dict['score'] = score
            result_dict['result'].append( p_dict )
        return result_dict
    
    @app.route('/')
    def upload_file():
        return render_template('upload.html')
    
    @app.route('/upload/', methods=['GET', 'POST'])
    def upload():
        if request.method == 'POST':
            # 每个上传的文件首先会保存在服务器上的临时位置,然后将其实际保存到它的最终位置。
            filedata = request.files['upload_file']
            upload_filename = filedata.filename
            print(upload_filename)
            # 保存文件到指定路径
            # 目标文件的名称可以是硬编码的,也可以从 ​request.files[file] ​对象的​ filename ​属性中获取。
            # 但是,建议使用 ​secure_filename()​ 函数获取它的安全版本
            if not os.path.exists(UPLOAD_DIR):
                os.makedirs(UPLOAD_DIR)
            img_path = os.path.join(UPLOAD_DIR, upload_filename)
            filedata.save(img_path)
            start = time.time()
            # 打开图片
            img1 = Image.open(img_path)
            # 识别图片
            result_dict = ocr_img2text(img_path)
    
            # 识别时间
            end = time.time()
            recognize_time = int((end - start) * 1000)
    
            result_dict["filename"] = upload_filename
            result_dict["recognize_time"] = str(recognize_time)
            result_dict["error_code"] = "000000"
            result_dict["error_msg"] = "识别成功"
            return jsonify(result_dict)
        else:
            return render_template('upload.html')

5.后续展望

相关推荐
并不会32 分钟前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
神仙别闹11 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
DogEgg_00112 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
霍格沃兹测试开发学社测试人社区14 小时前
软件测试学习笔记丨Flask操作数据库-数据库和表的管理
软件测试·笔记·测试开发·学习·flask
Ocean☾17 小时前
前端基础-html-注册界面
前端·算法·html
OCR_wintone42118 小时前
易泊车牌识别相机,助力智慧工地建设
人工智能·数码相机·ocr
工业互联网专业1 天前
Python毕业设计选题:基于Hadoop的租房数据分析系统的设计与实现
vue.js·hadoop·python·flask·毕业设计·源码·课程设计
顾菁寒1 天前
WEB第二次作业
前端·css·html
Qhumaing1 天前
html第一个网页
网络·html·html5
前端Hardy2 天前
HTML&CSS:爱上班的猫咪
前端·javascript·css·vue.js·html