Merge pull request #668 from LollipopsAndWine/dev

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

projects/web/src/types/extract-task-type.ts

+export type ExtractTaskType =
+  | "pdf"
+  | "formula-detect"
+  | "formula-extract"
+  | "table-recogn";
+
+export const EXTRACTOR_TYPE_LIST = {
+  table: "table",
+  formula: "formula",
+  pdf: "PDF",
+};
+
+export enum FORMULA_TYPE {
+  extract = "extract",
+  detect = "detect",
+}
+
+export enum MD_PREVIEW_TYPE {
+  preview = "preview",
+  code = "code",
+}

projects/web/src/utils/download.ts

+export async function downloadFileUseAScript(
+  url: string,
+  filename?: string
+): Promise<void> {
+  try {
+    // 发起请求获取文件
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    // 获取文件内容的 Blob
+    const blob = await response.blob();
+
+    // 创建一个 Blob URL
+    const blobUrl = window.URL.createObjectURL(blob);
+
+    // 创建一个隐藏的<a>元素
+    const link = document.createElement("a");
+    link.style.display = "none";
+    link.href = blobUrl;
+
+    // 设置下载的文件名
+    const contentDisposition = response.headers.get("Content-Disposition");
+    const fileName =
+      filename ||
+      (contentDisposition
+        ? contentDisposition.split("filename=")[1].replace(/['"]/g, "")
+        : url.split("/").pop() || "download");
+
+    link.download = fileName;
+
+    // 将链接添加到文档中并触发点击
+    document.body.appendChild(link);
+    link.click();
+
+    // 清理
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(blobUrl);
+  } catch (error) {
+    console.error("Download failed:", error);
+  }
+}

projects/web/src/utils/locale.ts

+export enum ELocal {
+  "zh-CN" = "zh-CN",
+  "en-US" = "en-US",
+}
+export const locale: { [key: string]: string } = {
+  [ELocal["zh-CN"]]: "中文",
+  [ELocal["en-US"]]: "En",
+};
+export const localeName: { [key: string]: string } = {
+  [ELocal["zh-CN"]]: "nameZh",
+  [ELocal["en-US"]]: "name",
+};
+
+export const getLocale = () => {
+  return localStorage.getItem("umi_locale") || ELocal["zh-CN"];
+};

projects/web/src/utils/windowOpen.ts

+export const windowOpen = (
+  url: string,
+  type?: "_blank" | "_parent" | "_self" | "_top"
+) => {
+  const a = document.createElement("a");
+  a.setAttribute("href", url);
+  a.setAttribute("target", type || "_blank");
+  a.rel = "noreferrer";
+  document.body.appendChild(a);
+  if (a.click) {
+    a?.click();
+  } else {
+    try {
+      let evt = new Event("click", {
+        bubbles: false,
+        cancelable: true,
+      });
+      a.dispatchEvent(evt);
+    } catch (error) {
+      window.open(url, type || "_blank");
+    }
+  }
+  document.body.removeChild(a);
+};

projects/web/src/vite-env.d.ts

+/// <reference types="vite/client" />

projects/web/tailwind.config.js

+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  plugins: [
+    function ({ addUtilities }) {
+      const newUtilities = {
+        '.scrollbar-thin': {
+          scrollbarWidth: '2px',
+          // scrollbarColor: 'rgba(13, 83, 222, 1)',
+          '&::-webkit-scrollbar': {
+            width: '6px',
+            height: '6px'
+          },
+          '&::-webkit-scrollbar-track': {
+            backgroundColor: 'transparent'
+          },
+          '&::-webkit-scrollbar-thumb': {
+            // backgroundColor: 'rgba(13, 83, 222, 0.01)',
+            borderRadius: '20px',
+            border: '3px solid transparent'
+          },
+          '&:hover::-webkit-scrollbar-thumb': {
+            width: '6px',
+            border: '3px solid rgb(229 231 235)',
+            backgroundColor: 'rgb(229 231 235)'
+          }
+        }
+        // 你可以添加更多自定义的滚动条样式
+      };
+      addUtilities(newUtilities, ['responsive', 'hover']);
+    },
+  ],
+  // ...other configurations
+}
\ No newline at end of file

projects/web/tsconfig.app.json

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

projects/web/tsconfig.json

+{
+  "files": [],
+  "compilerOptions": {
+    // ... other options ...
+    "types": ["node"]
+  },
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

projects/web/tsconfig.node.json

+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

projects/web/vite.config.ts

+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:5559",
+        changeOrigin: true,
+      },
+    },
+  },
+  css: {
+    modules: {
+      localsConvention: "camelCaseOnly", // transfer kebab-case to camelCase
+      scopeBehaviour: "local",
+      generateScopedName: "[name]__[local]___[hash:base64:5]",
+    },
+  },
+  publicDir: "public",
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});

projects/web_api/README.md

-## 安装
-
-MinerU
-
-```bash
-# mineru已安装则跳过此步骤
-
-git clone https://github.com/opendatalab/MinerU.git
-cd MinerU
-
-conda create -n MinerU python=3.10
-conda activate MinerU
-pip install .[full] --extra-index-url https://wheels.myhloli.com
-```
-
-第三方软件
-
-```bash
-cd projects/web_api
-pip install poetry
-portey install
-```
-
-启动服务
-
-```bash
-cd web_api
-python app.py
-```
-
-接口文档
-```
-在浏览器打开 mineru-web接口文档.html
-```

projects/web_demo/README.md

+# MinerU Local web_demo
+## Feature Overview
+<p align="center">
+  <img src="images/web_demo_1.png" width="600px" style="vertical-align:middle;">
+</p>
+
+- Supports uploading PDFs and calling MinerU for processing
+
+- Supports online editing of the Markdown results parsed by MinerU
+
+- Supports viewing of historical tasks
+
+## Installation and Deployment
+
+0. MinerU Installation and Deployment
+
+
+```
+# The service depends on mineru, please ensure mineru is installed first
+```
+
+1. Package the front-end interface
+
+```bash
+# First, navigate to the front-end directory
+cd projects/web
+
+# Modify the configuration
+# Change the IP in the target field of the file vite.config.ts to your own computer's IP
+
+# Build the front-end project
+npm install -g yarn
+yarn install
+yarn build
+```
+
+2. Install service dependencies
+
+```bash
+# First, navigate to the back-end directory
+cd projects/web_demo
+# Install dependencies
+pip3 install -r requirements.txt  -i https://pypi.tuna.tsinghua.edu.cn/simple
+```
+
+3. Start the service
+
+```bash
+# Navigate to the program directory
+cd projects/web_demo/web_demo
+# Start the service
+python3 app.py or python app.py
+# Access the interface by visiting the started address in the browser
+```
+
+ps：API documentation
+
+```
+Open the mineru-web API mineru-web接口文档.html in the browser
+```

projects/web_demo/README_zh-CN.md

+# Mineru本地web_demo
+## 功能简介
+<p align="center">
+  <img src="images/web_demo_1.png" width="600px" style="vertical-align:middle;">
+</p>
+
+- 支持上传pdf，并调用MinerU进行处理
+
+- 支持对MinerU解析的Markdown结果进行在线修改
+
+- 支持查看历史任务
+
+## 安装部署
+
+0. MinerU安装部署
+
+```
+# 服务依赖MinerU，请先确保MinerU已安装
+```
+
+1. 打包前端界面
+
+```bash
+# 先进入前端目录
+cd projects/web
+
+# 修改配置
+# 将文件vite.config.ts中的target中的IP更改为自己电脑IP
+
+# 打包前端项目
+npm install -g yarn
+yarn install
+yarn build
+```
+
+2. 安装服务依赖
+
+```bash
+# 先进入后端目录
+cd projects/web_demo
+# 安装依赖
+pip3 install -r requirements.txt  -i https://pypi.tuna.tsinghua.edu.cn/simple
+```
+
+3. 启动服务
+
+```bash
+# 进入程序目录
+cd projects/web_demo/web_demo
+# 启动服务
+python3 app.py 或者 python app.py
+# 在浏览器访问启动的地址即可访问界面
+```
+
+ps：接口文档
+
+```
+在浏览器打开 mineru-web接口文档.html
+```

projects/web_demo/requirements.txt

+flask-cors
+flask-jwt-extended
+flask-marshmallow
+flask-migrate
+flask-restful
+flask-sqlalchemy
+flask
+greenlet
+loguru
+marshmallow-sqlalchemy
+marshmallow
+pyjwt
+pyyaml