OnlineOCR 在线文字识别平台
受众：集团内小学—初中—高中信息与人工智能教师
时长：30 分钟
示例项目：OnlineOCR（一个基于 Flask + EasyOCR 的在线文字识别平台）
🎯 本课目标
以真实项目 OnlineOCR 为例，完整走一遍：拉取代码 → 配环境 → 启动服务 → 在浏览器中使用
让老师理解一个“前后端一体的小型 AI 应用”是如何搭建起来的
为后续部署到 Docker / OnePanel、让全校学生共用打下基础
🧩 01 先认识一下 OnlineOCR 是什么
OnlineOCR 是你可以在校园里直接使用和演示的 在线文字识别（OCR）小平台：
后端使用 Python + Flask 提供网页和接口
OCR 引擎使用 EasyOCR，支持多行文本识别和置信度返回
前端页面放在
templates/和static/目录下，由 Flask 直接渲染用户只需通过浏览器访问一个地址，上传图片，就能看到识别结果和平均置信度
从课程体系角度看，它是一个非常典型的“全校共享 AI 服务”雏形：
后台只在一台机器上运行，所有学生用浏览器访问即可。
🧱 02 项目目录结构速览
当你把项目克隆到本地后，大致可以看到下面几个关键文件和文件夹：
app.py：项目入口，Flask 应用主体，负责路由、调用 EasyOCR、返回结果templates/：存放 HTML 模板（网页骨架）static/：存放 CSS、JavaScript、图片等静态资源（前端样式和交互）requirements.txt：列出了项目依赖的 Python 包（用来一键安装）.gitignore：Git 忽略规则（和运行无关，主要是开发协作用）
理解这一结构非常重要，因为后面你在自己的 AI 项目里，会反复看到相似的布局。
⚙️ 03 本地运行 OnlineOCR：一步步带你走
以下示例以命令行为主，建议在 Ubuntu 或 macOS / WSL 环境中跟练。
第 1 步：克隆项目代码
在你打算存放项目的目录中执行：
git clone https://github.com/nonese/OnlineOCR.git
cd OnlineOCR
此时你已经进入项目根目录。
第 2 步：创建并激活虚拟环境（推荐）
使用虚拟环境可以避免跟系统里其他 Python 库冲突：
python -m venv .venv
macOS / Linux 激活：
source .venv/bin/activate
Windows（PowerShell）激活：
.\.venv\Scriptsctivate
激活成功后，命令行前面通常会出现一个类似 (.venv) 的前缀。
第 3 步：安装依赖
在虚拟环境中执行：
pip install -r requirements.txt
这一步会自动安装 Flask、EasyOCR 等项目需要的库。
第 4 步：启动 Flask 应用
在项目根目录下执行（Linux / Windows 通用）：
flask --app app run
若你的环境中 flask 命令不在 PATH 中，可以改用：
python -m flask --app app run
默认情况下，Flask 会监听在：
http://127.0.0.1:5000
如果想让同一局域网内的其他设备（例如学生机）也能访问，可以改为：
flask --app app run --host 0.0.0.0 --port 5000
这一步与前面第 2 课讲的 IP 和端口知识是完全对应的：
IP：你的服务器 / 老师机地址
端口：此处为 5000
访问地址格式：
http://服务器IP:5000
第 5 步：在浏览器中体验
在老师自己的电脑上打开浏览器，访问：
http://localhost:5000
你应该会看到 OnlineOCR 的网页界面：
页面中央是上传区域（拖拽或点击选择图片）
右侧或下方区域展示识别出的文本
同时显示平均置信度，方便你讲解“AI 识别也会有不确定性”
在课堂演示时，你可以现场拍一张作业照片或纸质材料，直接上传识别，让老师或学生看到实时效果。
🔄 04 结合课程体系：让一台机器服务全校
为了让这个项目成为“全校共享”的 AI 服务，而不是只跑在你自己电脑上的玩具，需要结合前几课的内容做一些思考：
放在哪台机器上？
可以是机房的一台性能稍好的电脑
可以是办公室一台常开电脑
最好是学校的轻量级服务器或 NAS
如何让学生访问？
使用第 2 课中学的命令找到这台机器的 IP（例如
192.168.10.100）启动 Flask 时监听
0.0.0.0并使用固定端口（如 5000）学生机统一访问
http://192.168.10.100:5000
如何解释“前后端一体”？
前端页面由 Flask 渲染（
templates/+static/）学生访问网页就是在访问 Flask 提供的路由
后端在收到上传图片后，用 EasyOCR 完成识别，并把结果再“喂回”页面
这恰好体现了本课程的核心理念：
一台后端 + 浏览器访问 = 全校都能用的 AI 教学工具。
🧱 05 从“会用”到“敢改”：引导老师改一点点代码
如果时间允许，可以在本课后半段做一个小小的“改代码”挑战，让老师意识到自己不是只能用别人写好的系统，而是可以做微调：
打开
app.py，找一找：Flask 的路由（如
@app.route("/")）调用 EasyOCR 的部分
返回模板和识别结果的部分
引导老师尝试做一个简单改动，例如：
在前端页面增加一行“学校名称 / 课程标题”
在识别结果下方显示上传图片的分辨率
在结果区域增加一行提示：“识别有误时可以手动修改”
告诉大家：
你们已经不是只是“AI 工具用户”，而是“AI 应用的维护者和轻量级开发者”。
🧭 06 课堂建议与节奏控制
本课 30 分钟可以这样分配：
5 分钟：讲清 OnlineOCR 是什么、整体结构长什么样
15 分钟：跟着讲师动手完成克隆项目 + 创建虚拟环境 + 安装依赖 + 启动服务
5 分钟：在浏览器中实测识别效果，讲解“后端统一、前端共享”的理念
5 分钟：示范小改动（例如改页面标题），给老师增强“我能改”的信心
如果是线下集中培训，可在投屏上实时演示；
如果是线上或混合形式，建议提前准备好一台已经安装好 Python 环境的示范机。
📌 第 4 课课后任务
在你自己的电脑或一台校内设备上，完整跑通 OnlineOCR：
拉取代码
安装依赖
启动 Flask
用浏览器访问并完成一次识别
用第 2 课学到的网络命令，确认其它电脑是否能访问你的 OnlineOCR 服务（例如同办公室另一台电脑）。
尝试修改前端页面中的一处文案，例如在页面顶部加入“某某学校 · AI 文字识别实验平台”。
完成这些，你就真正拥有了“一个属于自己学校的小型 AI 应用”。
