# OCR Tiny

**Repository Path**: 9658065/ocr-tiny

## Basic Information

- **Project Name**: OCR Tiny
- **Description**: orc小工具
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2026-06-18
- **Last Updated**: 2026-07-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OCR Tiny

基于浏览器的离线 OCR 文字识别工具，使用 [ONNX Runtime Web](https://onnxruntime.ai/docs/get-started/with-javascript/web.html) 在本地运行 [PaddleOCR PP-OCRv6_tiny](https://www.modelscope.cn/models/PaddlePaddle/PP-OCRv6_tiny_rec) 模型，无需后端服务。支持 `http://` 和 `file://` 两种协议访问。

## Features

- **纯前端 OCR** - 基于 ONNX Runtime Web (WASM)，所有计算在浏览器本地完成，不上传图片到服务器
- **双协议访问** - 同时支持通过 HTTP 服务器访问和直接双击打开 HTML 文件 (`file://` 协议)
- **模型预加载** - 页面打开后自动后台加载模型，识别时无需等待
- **区域选择识别** - 在图片上拖拽画框，只识别选中的区域
- **图片预处理** - 支持缩放、旋转、裁剪，以及框选定位
- **结果导出** - 识别结果支持一键复制和下载为文本文件
- **离线运行** - 所有资源（模型、WASM、字典）内联打包，无网络依赖

## Tech Stack

- [Nuxt 4](https://nuxt.com/) - 应用框架，纯客户端渲染 (SSR: false)
- [Vue 3](https://vuejs.org/) + TypeScript - `<script setup>` 语法
- [Element Plus](https://element-plus.org/) - UI 组件库
- [ONNX Runtime Web](https://onnxruntime.ai/) - 浏览器端运行 ONNX 模型
- [paddleocr](https://github.com/1f616neko/paddleocrjs) - PaddleOCR JS 封装
- [UnoCSS](https://unocss.dev/) - 原子 CSS 引擎
- [VueUse](https://vueuse.org/) - 组合式工具集

## File Protocol Support

本项目针对 `file://` 协议访问做了专门处理，详见 [doc/file-protocol-support.md](doc/file-protocol-support.md)。核心措施包括：

- **Hash 路由** + **相对路径**，避免刷新 404 和绝对路径依赖
- **资源内联** - 模型、WASM、字典文件在构建阶段转为 base64 TypeScript 模块
- **Blob URL 加载** - 动态创建 Blob URL 加载 WASM 加载器，绕过 ES Module 限制
- **IIFE 打包** - 使用 esbuild 将 JS 打包为单文件 IIFE 格式，消除 CORS 限制
- **CSS 内联** - 构建脚本将所有 CSS 内联到 HTML，避免外部样式表 CORS 拦截
- **禁用 PWA / Service Worker** - 避免 `file://` 协议下的注册失败

## Development

```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本（支持 file:// 协议）
pnpm generate

# 构建后通过 file:// 打开
# .output/public/index.html
```

## Usage

1. 打开应用后等待模型加载完成（状态栏显示"就绪"）
2. 点击上传或拖拽图片到左侧区域
3. 可对图片进行缩放、旋转、裁剪、框选等预处理操作
4. 点击「识别」按钮，右侧显示识别结果
5. 支持复制结果文本或下载为 `.txt` 文件

## Build Scripts

| 脚本                        | 说明                                       |
| --------------------------- | ------------------------------------------ |
| `scripts/inline-assets.mjs` | 将 WASM/模型/字典文件内联为 base64 TS 模块 |
| `scripts/fix-paths.mjs`     | 修复生成 HTML 中的资源路径和 CORS 属性     |
| `scripts/inline-bundle.mjs` | 将 JS/CSS 打包为 IIFE 并内联到 HTML 单文件 |

## License

MIT