Merge pull request #668 from LollipopsAndWine/dev

feat: 集成前端界面，配置一键启动

.gitignore

@@ -38,3 +38,8 @@ ocr_demo
 source.dev.env
 
 tmp
+
+projects/web/node_modules
+projects/web/dist
+
+projects/web_demo/web_demo/static/

README.md

@@ -41,6 +41,7 @@
 </div>
 
 # Changelog
+- 2024/09/27 Version 0.8.2 released, providing a [localized deployment version](https://github.com/opendatalab/MinerU/tree/master/projects/web_demo/README.md) of the [online demo](https://opendatalab.com/OpenSourceTools/Extractor/PDF/) and the [front-end interface](https://github.com/opendatalab/MinerU/tree/master/projects/web/README.md).
 - 2024/09/09: Version 0.8.0 released, supporting fast deployment with Dockerfile, and launching demos on Huggingface and Modelscope.
 - 2024/08/30: Version 0.7.1 released, add paddle tablemaster table recognition option
 - 2024/08/09: Version 0.7.0b1 released, simplified installation process, added table recognition functionality

README_zh-CN.md

@@ -41,6 +41,7 @@
 </div>
 
 # 更新记录
+- 2024/09/27 0.8.2发布，提供了[在线demo](https://opendatalab.com/OpenSourceTools/Extractor/PDF/)的[本地化部署版本](https://github.com/opendatalab/MinerU/tree/master/projects/web_demo/README_zh-CN.md)和[前端界面](https://github.com/opendatalab/MinerU/tree/master/projects/web/README_zh-CN.md)
 - 2024/09/09 0.8.0发布，支持Dockerfile快速部署，同时上线了huggingface、modelscope demo
 - 2024/08/30 0.7.1发布，集成了paddle tablemaster表格识别功能
 - 2024/08/09 0.7.0b1发布，简化安装步骤提升易用性，加入表格识别功能

projects/README.md

@@ -4,5 +4,5 @@
 
 - [llama_index_rag](./llama_index_rag/README.md): Build a lightweight RAG system based on llama_index
 - [gradio_app](./gradio_app/README.md): Build a web app based on gradio
-
+- [web_demo](./web_demo/README.md): MinerU online [demo](https://opendatalab.com/OpenSourceTools/Extractor/PDF/) localized deployment version
 

projects/README_zh-CN.md

@@ -4,4 +4,5 @@
 
 - [llama_index_rag](./llama_index_rag/README_zh-CN.md): 基于 llama_index 构建轻量级 RAG 系统
 - [gradio_app](./gradio_app/README_zh-CN.md): 基于 Gradio 的 Web 应用
+- [web_demo](./web_demo/README_zh-CN.md): MinerU在线[demo](https://opendatalab.com/OpenSourceTools/Extractor/PDF/)本地化部署版本
 

projects/web/.gitignore

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

projects/web/README.md

+# MinerU web
+
+## Table of Contents
+- [Local Frontend Development](#local-frontend-development)
+- [Technology Stack](#technology-stack)
+
+## Local Frontend Development
+
+### Prerequisites
+- Node.js 18.x
+- pnpm
+
+### Installation Steps
+
+1. Install Node.js 18
+   - Visit the [Node.js official website](https://nodejs.org/) to download and install Node.js version 18.x
+
+2. Install pnpm
+   ```bash
+   npm install -g pnpm
+3. Clone the repository
+    ```git clone https://github.com/opendatalab/MinerU
+    cd ./projects/web
+    ```
+4. Install dependencies
+    ```
+    pnpm install
+    ```
+5. Run the development server
+    ```
+    pnpm run dev
+    ```
+6. ⚠️ Note: This command is for local development only, do not use for deployment!
+Open your browser and visit http://localhost:5173 (or another address output in the console)
+
+7. Ensure that the backend service in ./projects/web_demo is running
+
+8. If you encounter an error when executing `pnpm install`, you can switch to an alternative package manager.
+   ```
+   npm install -g yarn
+   yarn
+   yarn start
+   ```
+
+
+##  Building the Project
+```
+pnpm run build
+```
+## Technology Stack
+- React
+- Tailwind CSS
+- typeScript
+- zustand
+- ahooks

projects/web/README_zh-CN.md

+# MinerU web 
+
+
+## 目录
+- [前端本地开发](#前端本地开发)
+- [技术栈](#技术栈)
+## 前端本地开发
+
+### 前置条件
+- Node.js 18.x
+- pnpm
+
+### 安装步骤
+
+1. 安装 Node.js 18
+   - 访问 [Node.js 官网](https://nodejs.org/) 下载并安装 Node.js 18.x 版本
+
+2. 安装 pnpm
+   ```bash
+   npm install -g pnpm
+   ```
+3. 克隆仓库
+   ```
+   1. git clone https://github.com/opendatalab/MinerU
+   2. cd ./projects/web
+   ```
+
+4. 安装依赖
+   ```
+   pnpm install
+   ```
+
+5. 运行开发服务器
+   ```
+   pnpm run dev
+   ```
+
+6. ⚠️ 注意：此命令仅用于本地开发，不要用于部署！
+打开浏览器访问 http://localhost:5173（或控制台输出的其他地址）
+构建项目
+要构建生产版本，请执行以下命令：
+
+   ```
+   pnpm run build
+   ```
+7. 请确保./projects/web_demo后端服务启动
+
+8. 如果pnpm install执行error，可更换包管理器
+   ```
+   npm install -g yarn
+   yarn
+   yarn start
+   ```
+
+## 技术栈
+
+- React
+- Tailwind CSS
+- typeScript
+- zustand
+- ahooks

projects/web/eslint.config.js

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

projects/web/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MinerU</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

projects/web/package.json

+{
+  "name": "my-react-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host ",
+    "build": "tsc --noEmit && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.4.0",
+    "@codemirror/view": "^6.33.0",
+    "@tanstack/react-query": "^5.56.2",
+    "@types/lodash": "^4.17.7",
+    "@types/qs": "^6.9.15",
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@uiw/codemirror-extensions-langs": "^4.23.0",
+    "@uiw/react-codemirror": "^4.23.0",
+    "ahooks": "^3.8.1",
+    "antd": "^5.20.3",
+    "axios": "^1.7.5",
+    "canvas": "^2.11.2",
+    "classnames": "^2.5.1",
+    "js-cookie": "^3.0.5",
+    "lodash": "^4.17.21",
+    "path2d": "^0.2.1",
+    "qs": "^6.13.0",
+    "react": "^18.3.1",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-dom": "^18.3.1",
+    "react-intl": "^6.6.8",
+    "react-markdown": "^9.0.1",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.26.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "rehype-katex": "^7.0.1",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
+    "zustand": "^4.5.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "^22.5.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "less": "^4.2.0",
+    "postcss": "^8.4.41",
+    "sass-embedded": "^1.77.8",
+    "tailwindcss": "^3.4.10",
+    "ts-prune": "^0.10.3",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1"
+  }
+}
\ No newline at end of file

projects/web/postcss.config.js

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

projects/web/public/logo.svg

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1924_30132)">
+<path opacity="0.4" d="M2.1688 9.68828C2.14583 9.59322 2.16383 9.49288 2.21842 9.41173L6.04222 3.7273C6.09089 3.65495 6.1649 3.60346 6.24966 3.58298L16.6007 1.08163C16.7879 1.03639 16.9763 1.15147 17.0216 1.33868L19.658 12.2487C20.7217 16.6504 18.0157 21.0808 13.6141 22.1445C9.21248 23.2082 4.782 20.5022 3.71834 16.1006L2.1688 9.68828Z" fill="url(#paint0_linear_1924_30132)"/>
+<path d="M5.19531 7.24425C5.19531 7.14645 5.23638 7.05315 5.3085 6.98709L10.3605 2.35987C10.4248 2.30098 10.5089 2.26831 10.5961 2.26831H21.2451C21.4377 2.26831 21.5938 2.42444 21.5938 2.61703V13.8411C21.5938 18.3694 17.9229 22.0404 13.3946 22.0404C8.86624 22.0404 5.19531 18.3694 5.19531 13.8411V7.24425Z" fill="url(#paint1_linear_1924_30132)"/>
+<path d="M9.87906 7.30192L5.28333 7.01537L10.4111 2.32143L10.626 6.5632C10.6475 6.98306 10.2987 7.32808 9.87906 7.30192Z" fill="#5D76FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7002 11.8158V13.0479C15.7002 14.0038 14.9253 14.7787 13.9694 14.7787C13.0135 14.7787 12.2386 14.0038 12.2386 13.0479V9.96771H10.2145V13.3413C10.2145 15.4151 11.8956 17.0962 13.9694 17.0962C16.0432 17.0962 17.7243 15.4151 17.7243 13.3413V9.96771L17.7243 11.8158H15.7002Z" fill="#0028FD"/>
+<path d="M17.7243 10.9944H18.5457V11.8158L17.7243 11.8158L17.7243 10.9944Z" fill="#0028FD"/>
+<path d="M15.7002 10.4957H17.0203V11.8158L15.7002 11.8158L15.7002 10.4957Z" fill="#0028FD"/>
+<path d="M17.0203 9.7917H17.7243V10.4957L17.0203 10.4957L17.0203 9.7917Z" fill="#0028FD"/>
+<path d="M18.135 8.61828H18.5751V9.05831H18.135V8.61828Z" fill="#0028FD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4627 11.7367V12.9688C15.4627 13.9246 14.6878 14.6995 13.7319 14.6995C12.776 14.6995 12.0011 13.9246 12.0011 12.9688V9.88854H9.97697V13.2621C9.97697 15.3359 11.6581 17.017 13.7319 17.017C15.8057 17.017 17.4868 15.3359 17.4868 13.2621V9.88854L17.4868 11.7367H15.4627Z" fill="white"/>
+<path d="M17.4868 10.9153H18.3082V11.7367L17.4868 11.7367L17.4868 10.9153Z" fill="white"/>
+<path d="M15.4627 10.4166H16.7828V11.7367L15.4627 11.7367L15.4627 10.4166Z" fill="white"/>
+<path d="M16.7828 9.71253H17.4868V10.4166L16.7828 10.4166L16.7828 9.71253Z" fill="white"/>
+<path d="M17.8975 8.53912H18.3376V8.97915H17.8975V8.53912Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1924_30132" x1="0.16149" y1="7.29712" x2="19.8967" y2="12.4412" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1543FE"/>
+<stop offset="1" stop-color="#8C46FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1924_30132" x1="3.80582" y1="4.44849" x2="21.7806" y2="14.0843" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1543FE"/>
+<stop offset="1" stop-color="#8C46FF"/>
+</linearGradient>
+<clipPath id="clip0_1924_30132">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>