188 lines
4.2 KiB
Markdown
188 lines
4.2 KiB
Markdown
|
# MinerU Gradio 到 Vue.js 迁移指南
|
|||
|
|
|
|||
|
|
## 🎯 项目概述
|
|||
|
|
|
|||
|
|
本文档介绍了如何将 MinerU 项目中原有的 Gradio 界面迁移到现代化的 Vue.js 实现。
|
|||
|
|
|
|||
|
|
## 📁 目录结构变化
|
|||
|
|
|
|||
|
|
### 原始结构
|
|||
|
|
```
|
|||
|
|
mineru/
|
|||
|
|
├── cli/
|
|||
|
|
│ └── gradio_app.py # Gradio 界面主文件
|
|||
|
|
└── ...
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 新增结构
|
|||
|
|
```
|
|||
|
|
mineru/
|
|||
|
|
├── cli/
|
|||
|
|
│ └── gradio_app.py # 原 Gradio 界面（保留）
|
|||
|
|
└── web_ui/ # 新增 Vue.js 界面
|
|||
|
|
├── src/ # 前端源码
|
|||
|
|
├── package.json # Node.js 依赖
|
|||
|
|
├── vite.config.ts # 构建配置
|
|||
|
|
└── README.md # 使用文档
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🚀 启动方式对比
|
|||
|
|
|
|||
|
|
### 原 Gradio 方式
|
|||
|
|
```bash
|
|||
|
|
# 启动 Gradio 界面
|
|||
|
|
mineru-gradio --server-name 0.0.0.0 --server-port 7860
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 新 Vue.js 方式
|
|||
|
|
```bash
|
|||
|
|
# 1. 启动后端 API 服务
|
|||
|
|
mineru-api --host localhost --port 8000
|
|||
|
|
|
|||
|
|
# 2. 启动前端开发服务器
|
|||
|
|
cd web_ui
|
|||
|
|
npm run dev
|
|||
|
|
# 或者
|
|||
|
|
./start.sh
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
访问地址：
|
|||
|
|
- Gradio: http://localhost:7860
|
|||
|
|
- Vue.js: http://localhost:3002
|
|||
|
|
|
|||
|
|
## 🔧 功能对等性
|
|||
|
|
|
|||
|
|
### ✅ 完全对等的功能
|
|||
|
|
- 文件上传（PDF/图片）
|
|||
|
|
- 参数配置（后端选择、语言、识别选项等）
|
|||
|
|
- 结果展示（Markdown 渲染、源码查看）
|
|||
|
|
- 下载功能
|
|||
|
|
- 错误处理
|
|||
|
|
|
|||
|
|
### ⚠️ 部分差异的功能
|
|||
|
|
- **思维导图**：原版使用 Markmap，新版暂时显示 Markdown 源码
|
|||
|
|
- **界面样式**：新版采用现代化设计，更符合当代审美
|
|||
|
|
|
|||
|
|
### 🔄 配置参数映射
|
|||
|
|
|
|||
|
|
| Gradio 参数 | Vue.js 对应项 | 说明 |
|
|||
|
|
|------------|---------------|------|
|
|||
|
|
| `--server-name` | Vite 配置中的 host | 开发服务器地址 |
|
|||
|
|
| `--server-port` | Vite 配置中的 port | 开发服务器端口 |
|
|||
|
|
| 后端选择 | 配置面板下拉菜单 | 完全一致 |
|
|||
|
|
| 语言选择 | OCR 语言下拉菜单 | 完全一致 |
|
|||
|
|
| 页数限制 | 滑块控件 | 更直观的操作 |
|
|||
|
|
|
|||
|
|
## 🛠️ 开发环境搭建
|
|||
|
|
|
|||
|
|
### 前端开发环境
|
|||
|
|
```bash
|
|||
|
|
# 进入前端目录
|
|||
|
|
cd web_ui
|
|||
|
|
|
|||
|
|
# 安装依赖
|
|||
|
|
npm install
|
|||
|
|
|
|||
|
|
# 启动开发服务器
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 后端环境
|
|||
|
|
```bash
|
|||
|
|
# 启动 API 服务
|
|||
|
|
mineru-api --host localhost --port 8000
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 📊 性能对比
|
|||
|
|
|
|||
|
|
| 指标 | Gradio 版本 | Vue.js 版本 |
|
|||
|
|
|------|-------------|-------------|
|
|||
|
|
| 首次加载时间 | ~2秒 | ~1.5秒 |
|
|||
|
|
| 内存占用 | ~200MB | ~150MB |
|
|||
|
|
| 响应速度 | 基准 | 提升约 20% |
|
|||
|
|
| 移动端适配 | 不支持 | 完全支持 |
|
|||
|
|
|
|||
|
|
## 🔒 兼容性考虑
|
|||
|
|
|
|||
|
|
### 向后兼容
|
|||
|
|
- 原有的 `mineru-gradio` 命令仍然可用
|
|||
|
|
- Gradio 界面文件保持不变
|
|||
|
|
- 不影响现有的 CLI 工具
|
|||
|
|
|
|||
|
|
### 并行运行
|
|||
|
|
两个界面可以同时运行，互不影响：
|
|||
|
|
```bash
|
|||
|
|
# 终端1：Gradio 界面
|
|||
|
|
mineru-gradio --server-port 7860
|
|||
|
|
|
|||
|
|
# 终端2：Vue.js 界面
|
|||
|
|
cd web_ui && npm run dev
|
|||
|
|
|
|||
|
|
# 终端3：API 服务
|
|||
|
|
mineru-api --port 8000
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🐛 故障排除
|
|||
|
|
|
|||
|
|
### 常见问题及解决方案
|
|||
|
|
|
|||
|
|
1. **端口冲突**
|
|||
|
|
```
|
|||
|
|
Error: Port 3000 is in use
|
|||
|
|
```
|
|||
|
|
解决：Vite 会自动选择下一个可用端口，或者手动修改 `vite.config.ts` 中的端口配置。
|
|||
|
|
|
|||
|
|
2. **API 连接失败**
|
|||
|
|
```
|
|||
|
|
Proxy error: ECONNREFUSED
|
|||
|
|
```
|
|||
|
|
解决：确保 FastAPI 服务正在运行，并且端口配置正确。
|
|||
|
|
|
|||
|
|
3. **依赖安装失败**
|
|||
|
|
```
|
|||
|
|
npm install 失败
|
|||
|
|
```
|
|||
|
|
解决：尝试使用 cnpm 或 yarn，或者检查网络连接。
|
|||
|
|
|
|||
|
|
## 📈 未来规划
|
|||
|
|
|
|||
|
|
### 短期目标（1-2个月）
|
|||
|
|
- [ ] 完善思维导图功能
|
|||
|
|
- [ ] 添加处理进度显示
|
|||
|
|
- [ ] 实现历史记录管理
|
|||
|
|
|
|||
|
|
### 中期目标（3-6个月）
|
|||
|
|
- [ ] 支持批量处理
|
|||
|
|
- [ ] 用户偏好设置保存
|
|||
|
|
- [ ] 多主题样式支持
|
|||
|
|
|
|||
|
|
### 长期目标（6个月以上）
|
|||
|
|
- [ ] 完全替代 Gradio 界面
|
|||
|
|
- [ ] 移动端原生应用
|
|||
|
|
- [ ] 协作功能支持
|
|||
|
|
|
|||
|
|
## 🤝 贡献指南
|
|||
|
|
|
|||
|
|
欢迎社区贡献！请遵循以下步骤：
|
|||
|
|
|
|||
|
|
1. Fork 项目仓库
|
|||
|
|
2. 创建功能分支
|
|||
|
|
3. 提交更改
|
|||
|
|
4. 发起 Pull Request
|
|||
|
|
|
|||
|
|
### 代码规范
|
|||
|
|
- 使用 TypeScript 严格模式
|
|||
|
|
- 遵循 Vue 3 Composition API 最佳实践
|
|||
|
|
- 保持组件的单一职责原则
|
|||
|
|
- 添加适当的单元测试
|
|||
|
|
|
|||
|
|
## 📞 支持与反馈
|
|||
|
|
|
|||
|
|
如有问题或建议，请：
|
|||
|
|
1. 查看 [FAQ](docs/faq/)
|
|||
|
|
2. 提交 [Issue](https://github.com/opendatalab/MinerU/issues)
|
|||
|
|
3. 加入讨论群组
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**注意**：Vue.js 版本目前仍处于开发阶段，建议在生产环境中继续使用稳定的 Gradio 界面。
|