OCR to Photoshop JSX

一个基于 OCR 技术的 Photoshop 自动化工具，可以自动识别图片中的文字并生成 Photoshop JSX 脚本，支持在 Photoshop 中自动创建文字图层。

📸 应用预览

桌面应用界面

简洁直观的桌面应用界面，支持文件选择和拖拽上传

处理流程

上传图片后自动进行 OCR 识别，生成 JSX 脚本并预览

效果对比

原始图片	Photoshop 执行效果

精准的文字识别和图层重建，保持与原图一致的位置、大小和样式

📦 样例文件

项目提供了完整的样例文件，方便快速体验功能：

样例图片: samples/pic.png - 测试用的原始图片
样例脚本: samples/pic_ps_script.jsx - 基于样例图片生成的 JSX 脚本

可以直接在 Photoshop 中打开 pic_ps_script.jsx 查看效果。

功能特性

核心功能

图片 OCR 识别：基于 PaddleOCR 和 PaddleX，支持高精度文字识别
JSX 脚本生成：自动生成可在 Photoshop 中运行的 JSX 脚本
智能文字定位：精确识别文字在图片中的位置和大小
翻译功能：可选的中文到英文翻译功能（Electron 版本）

应用形态

Web 应用：基于 React + Vite 的现代化 Web 界面
桌面应用：基于 Electron 的跨平台桌面应用（支持 macOS 和 Windows）

技术亮点

前后端分离架构
FastAPI 后端，提供高性能 API 服务
React + TypeScript 前端，提供流畅的用户体验
PyInstaller 打包后端为独立可执行文件
Electron Builder 打包桌面应用

项目结构

ocr_cook/
├── backend/              # 后端服务
│   ├── app/             # 应用主代码
│   │   ├── api/         # API 路由
│   │   ├── services/    # 业务服务（OCR、JSX生成、翻译）
│   │   ├── models/      # 数据模型
│   │   └── utils/       # 工具函数
│   ├── requirements.txt # Python 依赖
│   └── build_backend.py # 后端打包脚本
├── frontend/            # 前端应用
│   ├── src/            # React 源代码
│   │   ├── components/ # React 组件
│   │   ├── services/   # API 服务
│   │   └── types/      # TypeScript 类型定义
│   └── package.json    # 前端依赖
├── electron/            # Electron 桌面应用
│   └── main/           # Electron 主进程
├── samples/             # 样例文件
│   ├── pic.png         # 样例图片
│   └── pic_ps_script.jsx  # 样例 JSX 脚本
├── doc_pic/             # 文档图片
│   ├── 桌面端应用.png
│   ├── 桌面端应用-处理完成.png
│   ├── 待处理原图.png
│   └── ps脚本运行效果.png
├── README.md            # 项目文档
└── package.json         # 项目根配置

环境要求

开发环境

Node.js: >= 16.0.0
Python: >= 3.8
npm: >= 8.0.0

运行环境（打包后）

macOS: 10.15+ (支持 Intel 和 Apple Silicon)
Windows: 10/11

项目启动说明

1. 克隆项目

git clone <repository-url>
cd ocr_cook

2. 安装依赖

安装前端依赖

# 安装根目录依赖
npm install

# 安装前端依赖
cd frontend
npm install
cd ..

安装后端依赖

cd backend

# 创建 Python 虚拟环境
python3 -m venv venv

# 激活虚拟环境
# macOS/Linux:
source venv/bin/activate
# Windows:
venv\Scripts\activate

# 安装 Python 依赖
pip install -r requirements.txt

cd ..

3. 启动开发服务

方式一：使用 npm scripts（推荐）

# 同时启动前端、后端和 Electron（开发模式）
npm run dev

这会启动三个服务：

前端开发服务器（http://localhost:5173）
后端 API 服务（http://localhost:8000）
Electron 桌面应用

方式二：分别启动

# 终端 1: 启动前端
cd frontend
npm run dev

# 终端 2: 启动后端
cd backend
source venv/bin/activate  # Windows: venv\Scripts\activate
uvicorn app.main:app --reload --port 8000

# 终端 3: 启动 Electron（可选）
npm run dev:electron

4. 访问应用

Web 版: 打开浏览器访问 http://localhost:5173
桌面版: Electron 启动后会自动打开应用窗口

项目打包说明

完整打包流程

打包会生成可分发的桌面应用程序（.dmg 或 .exe 安装包）。

# 1. 构建前端
npm run build:frontend

# 2. 打包后端（macOS ARM64）
npm run build:backend

# 3. 打包 Electron 应用
npm run build:electron

# 或一步完成全部构建
npm run build:all

各部分详细说明

1. 前端打包

cd frontend
npm run build

打包产物：frontend/dist/ 目录

2. 后端打包

后端使用 PyInstaller 打包为独立可执行文件。

cd backend
python build_backend.py

打包过程：

自动创建虚拟环境（如果不存在）
安装所有依赖（包括 PyInstaller）
检测 PaddleX 依赖并复制元数据
使用 PyInstaller 打包
生成 backend/dist/server/ 目录

注意：

首次打包需要下载 PaddlePaddle 和相关依赖，可能需要较长时间
打包产物较大（约 500MB-1GB），这是正常的
macOS ARM64 版本需要 --arch arm64 参数（已在 package.json 中配置）

3. Electron 打包

# 在项目根目录执行
npm run build:electron

配置文件：package.json 中的 build 字段

macOS:

生成文件：dist/OCR Photoshop Automation-1.0.0-arm64.dmg
架构：ARM64（Apple Silicon）
类别：图形设计

Windows:

生成文件：dist/OCR Photoshop Automation Setup 1.0.0.exe
架构：x64
安装程序：NSIS

清理构建产物

# 清理所有构建产物
npm run clean

# 清理并重新构建
npm run build:clean

应用使用说明

Web 版使用

启动应用
- 运行 npm run dev 启动开发服务器
- 浏览器访问 http://localhost:5173
上传图片
- 点击上传区域或拖拽图片到上传框
- 支持格式：JPG、PNG、GIF、BMP、WEBP、TIFF
查看结果
- 系统自动进行 OCR 识别
- 显示识别的文字数量
- 展示生成的 JSX 脚本代码
导出脚本
- 点击"下载 JSX"按钮下载脚本文件
- 或点击"复制到剪贴板"复制代码

桌面版使用

启动应用
- 打开打包好的 .dmg（macOS）或 .exe（Windows）
- 将应用拖拽到应用程序文件夹（macOS）
选择图片
- 方式一：点击"选择图片文件"按钮，从文件系统选择
- 方式二：使用拖拽上传区域
翻译功能（可选）
- 开启"翻译"开关，将识别的中文自动翻译为英文
- 翻译功能仅在有中文文字时生效
生成和使用脚本
- 等待 OCR 识别完成
- 下载或复制生成的 JSX 脚本
- 在 Photoshop 中执行脚本

在 Photoshop 中使用 JSX 脚本

打开 Photoshop
执行脚本
- macOS: 文件 → 脚本 → 浏览 → 选择下载的 .jsx 文件
- Windows: File → Scripts → Browse → 选择下载的 .jsx 文件
查看效果
- Photoshop 会自动创建文字图层
- 文字内容、位置、大小与原图片一致

快速体验样例

项目提供了现成的样例文件，可直接体验：

打开 samples/pic.png 查看原始图片
在 Photoshop 中执行 samples/pic_ps_script.jsx
查看自动生成的文字图层效果

API 文档

启动后端服务后，访问 http://localhost:8000/docs 查看完整 API 文档。

主要接口

POST /api/v1/image-to-jsx

通过图片路径识别文字并生成 JSX 脚本

请求体:

{
  "image_path": "/path/to/image.png",
  "enable_translation": false
}

响应:

{
  "success": true,
  "jsx": "// JSX script content...",
  "text_count": 10,
  "texts": ["文本1", "文本2"]
}

常见问题

Q: 后端打包失败？

A:

确保虚拟环境已正确创建和激活
检查 Python 版本是否 >= 3.8
尝试删除 venv 文件夹后重新打包

Q: OCR 识别效果不理想？

A:

确保图片清晰度足够
文字与背景对比度要高
避免图片过大的旋转或倾斜

Q: Electron 应用无法启动？

A:

检查后端服务是否已打包到 backend/dist/server/
查看 Electron 开发者工具的控制台错误信息
确保 API 地址配置正确

Q: 打包后的应用体积很大？

A: 这是正常的，因为包含了：

PaddleOCR 和 PaddleX 的模型文件
Python 运行时
所有依赖库

技术栈

前端

框架: React 18 + TypeScript
构建工具: Vite
桌面框架: Electron
打包工具: Electron Builder

后端

框架: FastAPI
OCR 引擎: PaddleOCR + PaddleX
图片处理: Pillow + OpenCV
翻译服务: deep-translator
打包工具: PyInstaller

开发路线

贡献指南

欢迎提交 Issue 和 Pull Request！

许可证

MIT License

联系方式

如有问题或建议，欢迎提交 Issue。

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
.claude		.claude
backend		backend
doc_pic		doc_pic
electron/main		electron/main
frontend		frontend
samples		samples
.gitignore		.gitignore
README.md		README.md
package.json		package.json

trykuku/ocr_cook

Folders and files

Latest commit

History

Repository files navigation