构建GLM-OCR的Web版演示接口：轻量级Flask应用开发-Seo优化-合肥市网站建设公司

构建GLM-OCR的Web版演示接口：轻量级Flask应用开发

你是不是也遇到过这样的场景？手头有一个很棒的本地OCR模型，比如GLM-OCR，识别效果不错，但每次想用都得打开命令行，输入一堆指令，或者想分享给同事朋友试试，还得让他们也配一遍环境，特别麻烦。

要是能把它变成一个网页服务就好了。打开浏览器，上传一张图片，点一下按钮，结果就出来了，还能直接复制文字或者看到高亮标注的图片。这听起来是不是方便多了？

今天，我就带你从零开始，用Python的Flask框架，亲手搭建一个轻量级的Web演示接口，把GLM-OCR“搬”到网上。整个过程就像搭积木，一步步来，你会发现其实很简单。即使你之前没怎么接触过Web开发，跟着这篇教程走，也能轻松搞定。

我们的目标是：创建一个干净、易用的网页，核心功能就是上传图片，调用GLM-OCR模型识别，然后把文字结果和可视化结果漂亮地展示出来。准备好了吗？我们开始吧。

1. 动手之前：理清思路与准备环境

在写第一行代码之前，我们先花几分钟把整个事情想清楚。这能帮你避免后面走弯路。

这个Web应用要做什么？简单说，就三件事：

接收图片：提供一个网页，让用户能选择并上传图片文件。
调用模型：在服务器后台，用我们准备好的GLM-OCR模型处理这张图片。
返回结果：把模型识别出的文字，以及可能的高亮标注图，一起返回给用户看。

技术栈选择为了实现这个目标，我们需要几个核心工具：

Flask：一个非常轻量、灵活的Python Web框架。它足够简单，让我们能快速搭建起Web服务的骨架，处理网页请求和响应。
GLM-OCR：这是我们今天的主角，负责核心的图片文字识别功能。你需要确保它已经在你的开发环境里能正常运行。
Pillow (PIL)：一个强大的Python图像处理库。我们会用它来打开用户上传的图片，处理格式，以及后续可能需要的图像操作（比如画框、高亮文字区域）。
一个现代浏览器：用来测试我们的网页。

检查你的工具箱确保你的电脑（建议使用Linux或macOS，Windows下部分步骤可能略有不同）已经安装了Python（建议3.8及以上版本）。然后，打开你的终端或命令行，我们来安装必要的“零件”：

# 安装Flask和Pillow pip install flask pillow # 确保你的GLM-OCR环境已经配置好 # 这里假设你已经按照GLM-OCR官方文档完成了安装和模型下载 # 例如，你可能已经通过 `pip install glm-ocr` 或克隆源码的方式准备好了

如果上面的pip install命令执行顺利，没有报错，那么基础环境就准备好了。接下来，我们正式开始“盖房子”。

2. 搭建项目骨架：创建Flask应用

一个好的项目结构能让代码清晰易懂，也方便以后维护。我们先来创建项目的文件夹和核心文件。

在你的工作目录下，新建一个文件夹，比如叫做glm_ocr_web_demo。然后在这个文件夹里，创建下面这些文件和子文件夹：

glm_ocr_web_demo/ ├── app.py # Flask应用的主入口文件 ├── templates/ # 存放HTML网页模板 │ └── index.html # 主页面 ├── static/ # 存放静态文件，如CSS、JS、上传的图片 │ ├── css/ │ │ └── style.css # 网页样式 │ └── uploads/ # 临时存放用户上传的图片 └── requirements.txt # 项目依赖包列表（可选，但推荐）

现在，我们先来编写最核心的app.py。这个文件就像是整个应用的大脑。

# app.py from flask import Flask, render_template, request, jsonify, send_from_directory import os from werkzeug.utils import secure_filename # 初始化Flask应用 app = Flask(__name__) # 配置 app.config['UPLOAD_FOLDER'] = 'static/uploads' # 上传文件保存的目录 app.config['MAX_CONTENT_LENGTH'] = 2 * 1024 * 1024 # 限制上传文件大小为2MB ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'bmp', 'gif'} # 允许的图片格式 # 检查文件扩展名是否合法 def allowed_file(filename): return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS # 创建上传目录（如果不存在的话） os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True) # 定义主页路由 @app.route('/') def index(): """渲染主页面""" return render_template('index.html') # 这里稍后会添加处理图片上传和OCR识别的API接口 if __name__ == '__main__': # 启动Flask开发服务器，host='0.0.0.0'允许局域网访问，debug=True便于调试 app.run(host='0.0.0.0', port=5000, debug=True)

这段代码做了几件事：

创建了一个Flask应用实例app。
设置了一些配置，比如文件上传的路径和大小限制。
定义了一个函数allowed_file来检查用户上传的是不是图片。
创建了上传所需的文件夹。
定义了一个路由/，当用户访问网站根目录时，会返回index.html这个页面。
最后，如果直接运行这个脚本，就会启动一个本地测试服务器。

你可以先在终端运行一下试试：python app.py。如果看到输出提示运行在http://127.0.0.1:5000，就说明Flask应用成功启动了。不过现在访问这个地址会报错，因为我们还没有创建index.html页面。

3. 设计前端界面：一个简洁的上传页面

用户需要一个界面来操作。我们来创建一个简单但功能清晰的网页。在templates/index.html文件中写入以下内容：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GLM-OCR 在线演示</title> <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> </head> <body> <div class="container"> <header> <h1><i class="fas fa-eye"></i> GLM-OCR 文字识别演示</h1> <p class="subtitle">上传图片，体验轻量级OCR模型的识别能力</p> </header> <main> <div class="upload-area" id="uploadArea"> <i class="fas fa-cloud-upload-alt fa-3x"></i> <h3>点击或拖拽图片到此区域</h3> <p>支持 PNG, JPG, JPEG, BMP, GIF 格式，最大 2MB</p> <input type="file" id="fileInput" accept="image/*" hidden> <button class="btn" onclick="document.getElementById('fileInput').click()"> <i class="fas fa-folder-open"></i> 选择图片 </button> <div class="file-name" id="fileName">未选择文件</div> </div> <div class="action-area"> <button class="btn btn-primary" id="processBtn" onclick="processImage()" disabled> <i class="fas fa-play"></i> 开始识别 </button> <button class="btn btn-secondary" onclick="resetPage()"> <i class="fas fa-redo"></i> 重置 </button> </div> <div class="result-container"> <div class="result-box"> <h3><i class="fas fa-image"></i> 原图 / 识别结果图</h3> <div class="image-placeholder" id="imagePreview"> <p>预览将在此处显示</p> </div> </div> <div class="result-box"> <h3><i class="fas fa-font"></i> 识别出的文字</h3> <div class="text-result" id="textResult"> <p>识别结果将在此处显示</p> </div> <button class="btn btn-small" onclick="copyText()" id="copyBtn" disabled> <i class="far fa-copy"></i> 复制文字 </button> </div> </div> <div class="status" id="statusMessage"> <i class="fas fa-info-circle"></i> 等待上传图片... </div> </main> </div> <script src="{{ url_for('static', filename='js/main.js') }}"></script> </body> </html>

为了让页面好看一点，我们再添加一点简单的样式。在static/css/style.css中写入：

/* style.css */ * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .container { background-color: white; border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); width: 100%; max-width: 1200px; padding: 40px; margin: 20px auto; } header { text-align: center; margin-bottom: 40px; border-bottom: 2px solid #eaeaea; padding-bottom: 20px; } header h1 { color: #2c3e50; margin-bottom: 10px; } .subtitle { color: #7f8c8d; font-size: 1.1em; } .upload-area { border: 3px dashed #3498db; border-radius: 15px; padding: 60px 20px; text-align: center; margin-bottom: 30px; cursor: pointer; transition: all 0.3s ease; background-color: #f8fafc; } .upload-area:hover { background-color: #e3f2fd; border-color: #2980b9; } .upload-area i { color: #3498db; margin-bottom: 20px; } .file-name { margin-top: 15px; padding: 10px; background-color: #ecf0f1; border-radius: 5px; display: inline-block; color: #2c3e50; } .action-area { display: flex; justify-content: center; gap: 20px; margin-bottom: 40px; } .btn { padding: 15px 30px; border: none; border-radius: 10px; font-size: 1.1em; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .btn-primary { background-color: #2ecc71; color: white; } .btn-primary:hover:not(:disabled) { background-color: #27ae60; transform: translateY(-2px); } .btn-primary:disabled { background-color: #95a5a6; cursor: not-allowed; } .btn-secondary { background-color: #e74c3c; color: white; } .btn-secondary:hover { background-color: #c0392b; } .result-container { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; } .result-box { border: 1px solid #ddd; border-radius: 10px; padding: 25px; background-color: #f9f9f9; } .result-box h3 { color: #34495e; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .image-placeholder, .text-result { min-height: 300px; border: 2px dashed #bdc3c7; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #7f8c8d; padding: 20px; overflow: auto; } .text-result { text-align: left; white-space: pre-wrap; font-family: 'Courier New', monospace; background-color: #2c3e50; color: #ecf0f1; } .btn-small { padding: 8px 16px; font-size: 0.9em; margin-top: 15px; } .status { padding: 15px; border-radius: 8px; background-color: #d5dbdb; color: #2c3e50; display: flex; align-items: center; gap: 10px; } /* 响应式设计 */ @media (max-width: 768px) { .result-container { grid-template-columns: 1fr; } .container { padding: 20px; } }

现在，再运行python app.py并访问http://127.0.0.1:5000，你应该能看到一个像模像样的网页了！页面上有上传区域和按钮，虽然点了还没反应，但架子已经搭好了。

4. 连接前后端：实现图片上传与OCR接口

这是最核心的一步，我们要让网页能和后台的Python代码“对话”。首先，在app.py中，我们添加一个处理文件上传和OCR识别的API接口。

注意：下面的代码假设你已经有一个可以调用的GLM-OCR识别函数，比如叫做glm_ocr_predict(image_path)。这个函数接收图片路径，返回识别出的文字列表和对应的坐标信息。你需要根据GLM-OCR的实际API进行调整。

# app.py (在 index() 路由函数后面添加) from your_glm_ocr_module import glm_ocr_predict # 请替换为你的实际导入方式 import json import cv2 # 如果需要画框，需要安装 opencv-python-headless import numpy as np from PIL import Image, ImageDraw, ImageFont import io import base64 @app.route('/upload', methods=['POST']) def upload_and_ocr(): """处理图片上传并进行OCR识别""" # 检查请求中是否有文件部分 if 'file' not in request.files: return jsonify({'error': '没有选择文件'}), 400 file = request.files['file'] # 如果用户没有选择文件，浏览器可能会提交一个空文件 if file.filename == '': return jsonify({'error': '没有选择文件'}), 400 # 检查文件类型 if file and allowed_file(file.filename): # 安全化文件名并保存 filename = secure_filename(file.filename) filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename) file.save(filepath) try: # 调用GLM-OCR进行识别 # 这里需要你根据GLM-OCR的实际调用方式修改 # 假设 glm_ocr_predict 返回两个值：texts（文本列表）和 boxes（坐标列表） texts, boxes = glm_ocr_predict(filepath) # 将识别结果整理成结构化的数据 ocr_results = [] for i, (text, box) in enumerate(zip(texts, boxes)): ocr_results.append({ 'id': i, 'text': text, 'box': box.tolist() if hasattr(box, 'tolist') else box # 确保坐标可序列化为JSON }) # 可选：生成带有文字区域高亮框的结果图 visualized_img_path = None try: visualized_img_path = draw_boxes_on_image(filepath, boxes, texts) except Exception as draw_e: print(f"绘制识别框时出错: {draw_e}") # 即使绘图失败，也不影响文字结果返回 # 构建返回给前端的数据 response_data = { 'success': True, 'filename': filename, 'texts': texts, # 纯文本列表 'results': ocr_results, # 结构化结果 'image_url': f"/static/uploads/{filename}" # 原图访问路径 } # 如果有高亮结果图，也加入返回数据 if visualized_img_path: # 可以将图片转换为base64编码直接返回，也可以返回路径让前端加载 # 这里选择返回路径 viz_filename = os.path.basename(visualized_img_path) response_data['viz_image_url'] = f"/static/uploads/{viz_filename}" return jsonify(response_data) except Exception as e: # 记录错误日志 print(f"OCR处理过程中发生错误: {e}") return jsonify({'error': f'OCR处理失败: {str(e)}'}), 500 else: return jsonify({'error': '不支持的文件类型'}), 400 def draw_boxes_on_image(image_path, boxes, texts): """在图片上绘制识别框和文字""" # 使用PIL打开图片 image = Image.open(image_path).convert('RGB') draw = ImageDraw.Draw(image) # 尝试加载字体，如果失败则使用默认字体 try: font = ImageFont.truetype("arial.ttf", 20) except IOError: font = ImageFont.load_default() # 为每个识别框画矩形和文字 for box, text in zip(boxes, texts): # box 格式可能是 [x1, y1, x2, y2] 或 [[x1,y1],[x2,y2],[x3,y3],[x4,y4]] # 这里假设是四边形，取外接矩形 if isinstance(box, list) and len(box) == 4: # 如果是四个点的列表 points = [(int(p[0]), int(p[1])) for p in box] draw.polygon(points, outline='red', width=3) # 在框的上方写文字 if points: text_position = (points[0][0], points[0][1] - 25) draw.text(text_position, text, fill='blue', font=font) else: # 其他格式，简单处理或跳过 continue # 保存绘制后的图片 base_name = os.path.splitext(os.path.basename(image_path))[0] viz_filename = f"{base_name}_viz.png" viz_path = os.path.join(app.config['UPLOAD_FOLDER'], viz_filename) image.save(viz_path) return viz_path

现在，后端接口准备好了。我们需要让前端网页知道如何调用这个接口。在static文件夹下创建js子文件夹，然后新建main.js文件：

// static/js/main.js let selectedFile = null; const uploadArea = document.getElementById('uploadArea'); const fileInput = document.getElementById('fileInput'); const fileNameDisplay = document.getElementById('fileName'); const processBtn = document.getElementById('processBtn'); const imagePreview = document.getElementById('imagePreview'); const textResult = document.getElementById('textResult'); const copyBtn = document.getElementById('copyBtn'); const statusMessage = document.getElementById('statusMessage'); // 处理文件选择 fileInput.addEventListener('change', function(e) { if (this.files && this.files[0]) { selectedFile = this.files[0]; fileNameDisplay.textContent = `已选择: ${selectedFile.name}`; processBtn.disabled = false; updateStatus('已选择图片，点击“开始识别”按钮进行处理。', 'info'); // 预览图片 const reader = new FileReader(); reader.onload = function(event) { imagePreview.innerHTML = `<img src="${event.target.result}" alt="预览" style="max-width:100%; border-radius:5px;">`; }; reader.readAsDataURL(selectedFile); } }); // 拖拽上传功能 uploadArea.addEventListener('dragover', function(e) { e.preventDefault(); this.style.borderColor = '#2980b9'; this.style.backgroundColor = '#e3f2fd'; }); uploadArea.addEventListener('dragleave', function(e) { e.preventDefault(); this.style.borderColor = '#3498db'; this.style.backgroundColor = '#f8fafc'; }); uploadArea.addEventListener('drop', function(e) { e.preventDefault(); this.style.borderColor = '#3498db'; this.style.backgroundColor = '#f8fafc'; if (e.dataTransfer.files.length) { fileInput.files = e.dataTransfer.files; fileInput.dispatchEvent(new Event('change')); } }); // 点击上传区域触发文件选择 uploadArea.addEventListener('click', function() { fileInput.click(); }); // 处理识别按钮点击 async function processImage() { if (!selectedFile) { updateStatus('请先选择一张图片。', 'error'); return; } const formData = new FormData(); formData.append('file', selectedFile); updateStatus('正在上传并识别图片，请稍候...', 'loading'); processBtn.disabled = true; processBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 处理中...'; try { const response = await fetch('/upload', { method: 'POST', body: formData }); const result = await response.json(); if (response.ok && result.success) { updateStatus('识别成功！', 'success'); // 显示高亮结果图（如果有的话） if (result.viz_image_url) { imagePreview.innerHTML = `<img src="${result.viz_image_url}?t=${new Date().getTime()}" alt="识别结果" style="max-width:100%; border-radius:5px;">`; } else { // 只显示原图 imagePreview.innerHTML = `<img src="${result.image_url}?t=${new Date().getTime()}" alt="原图" style="max-width:100%; border-radius:5px;">`; } // 显示识别出的文字 let formattedText = ''; if (result.results && result.results.length > 0) { result.results.forEach(item => { formattedText += `[${item.id}] ${item.text}\n`; }); } else if (result.texts && result.texts.length > 0) { // 兼容旧格式 result.texts.forEach((text, idx) => { formattedText += `[${idx}] ${text}\n`; }); } else { formattedText = '未识别到文字。'; } textResult.textContent = formattedText; // 启用复制按钮 copyBtn.disabled = false; } else { updateStatus(`识别失败: ${result.error || '未知错误'}`, 'error'); textResult.textContent = '识别失败，请重试或检查图片。'; } } catch (error) { console.error('请求出错:', error); updateStatus('网络请求失败，请检查服务器状态。', 'error'); textResult.textContent = '请求出错。'; } finally { processBtn.disabled = false; processBtn.innerHTML = '<i class="fas fa-play"></i> 开始识别'; } } // 复制文字功能 function copyText() { const textToCopy = textResult.textContent; navigator.clipboard.writeText(textToCopy).then(() => { alert('文字已复制到剪贴板！'); }).catch(err => { console.error('复制失败:', err); alert('复制失败，请手动选择文字复制。'); }); } // 重置页面 function resetPage() { selectedFile = null; fileInput.value = ''; fileNameDisplay.textContent = '未选择文件'; imagePreview.innerHTML = '<p>预览将在此处显示</p>'; textResult.textContent = '识别结果将在此处显示'; copyBtn.disabled = true; processBtn.disabled = true; updateStatus('等待上传图片...', 'info'); } // 更新状态信息 function updateStatus(message, type = 'info') { statusMessage.textContent = message; statusMessage.style.backgroundColor = type === 'error' ? '#f8d7da' : type === 'success' ? '#d4edda' : type === 'loading' ? '#fff3cd' : '#d5dbdb'; statusMessage.style.color = type === 'error' ? '#721c24' : type === 'success' ? '#155724' : type === 'loading' ? '#856404' : '#2c3e50'; }

5. 运行与测试：看看成果如何

所有代码都写好了！现在让我们来完整地跑一遍。

确保所有文件就位：检查你的项目文件夹结构是否和之前说的一样。
安装额外依赖：如果你在draw_boxes_on_image函数中使用了cv2，记得安装：pip install opencv-python-headless。
准备GLM-OCR：最关键的一步，你需要确保from your_glm_ocr_module import glm_ocr_predict这一行能正确工作。这意味着你要么将GLM-OCR的代码放在项目里，要么把它安装成包，然后修改这里的导入语句。这是本教程唯一需要你根据实际情况调整的地方。
启动服务器：在终端，进入项目目录，运行：
```
python app.py
```
你应该会看到类似这样的输出：
```
* Serving Flask app 'app' * Debug mode: on * Running on http://0.0.0.0:5000
```
打开浏览器测试：访问http://127.0.0.1:5000。
- 点击上传区域，选择一张包含文字的图片（比如截图、文档照片）。
- 点击“开始识别”按钮。
- 观察状态提示，如果一切顺利，下方会显示出原图（或带框的结果图）以及识别出的文字列表。
- 你可以点击“复制文字”按钮来复制结果。

如果遇到错误，别慌。仔细查看终端里Flask服务器打印的错误信息，它能帮你快速定位问题，比如是图片路径不对、GLM-OCR模型没加载成功，还是其他什么原因。

6. 让应用更完善：一些实用建议

到这一步，一个可用的演示接口已经完成了。但如果你想让它更健壮、更像一个真正的产品，还可以考虑下面这些方向：

错误处理更友好：在前端JS里，可以针对不同的HTTP状态码或错误信息，给出更具体的提示，比如“图片太大”、“服务器忙，请重试”。
限制与安全：我们已经在后端限制了文件大小和类型。你还可以考虑：
- 限制上传频率（防止恶意请求）。
- 使用更安全的文件名处理。
- 在生产环境关闭Flask的调试模式 (debug=False)。
结果展示增强：
- 除了画框，还可以尝试用不同颜色高亮不同置信度的文字。
- 将识别结果以表格形式展示，包含文字、坐标、置信度。
- 添加一个“下载结果”按钮，让用户能把文字保存为.txt文件。
部署上线：现在只是在本地运行。如果你想让其他人也能访问，可以考虑：
- 使用gunicorn或waitress这样的WSGI服务器来替代Flask自带的开发服务器，性能更好。
- 购买一个云服务器（如阿里云、腾讯云ECS），将代码部署上去。
- 使用Docker将你的应用和所有依赖打包成一个镜像，部署和迁移会非常方便。

7. 回顾与展望

跟着走完这一趟，你应该已经成功地把一个本地运行的OCR模型，包装成了一个有网页界面的在线服务。我们用了Flask搭建后端，用HTML/CSS/JS做了前端，并通过一个/upload接口把它们连接起来。

整个过程的核心思路其实很通用：定义API接口处理核心逻辑，然后做一个简单的界面去调用它。这个模式不仅可以用于OCR，稍加修改，就能用来部署图像分类、文本摘要、语音识别等各种AI模型。

自己动手搭这么一个东西，最大的好处就是完全可控。你可以随意修改界面样式，增加新的功能（比如批量上传、历史记录），或者集成更复杂的模型。希望这个简单的例子，能成为你探索AI应用开发的一个起点。下次当你有一个不错的本地模型想分享给别人时，不妨试试给它做个Web界面吧。

获取更多AI镜像
想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。

构建GLM-OCR的Web版演示接口：轻量级Flask应用开发