Merge pull request #838 from opendatalab/release-0.9.0

Release 0.9.0

projects/web/src/constant/storage.ts

+export const LOCALE_STORAGE_KEY = "locale-minerU"
\ No newline at end of file

projects/web/src/context/language-provider.tsx

+import React from "react";
+import { IntlProvider } from "react-intl";
+import { useLanguageStore } from "@/store/languageStore";
+import contentEn from "@/locale/en.json";
+import contentZh from "@/locale/zh.json";
+import sideEn from "@/locale/side/en.ts";
+import sideZh from "@/locale/side/zh.ts";
+import commonEn from "@/locale/common/en.json";
+import commonZh from "@/locale/common/zh.json";
+import { Language } from "@/constant";
+
+const messages = {
+  [Language.EN_US]: {
+    ...contentEn,
+    ...sideEn,
+    ...commonEn,
+  },
+  [Language.ZH_CN]: {
+    ...contentZh,
+    ...sideZh,
+    ...commonZh,
+  },
+};
+
+export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const { language } = useLanguageStore();
+
+  return (
+    <IntlProvider
+      messages={messages[language] as unknown as Record<string, string>}
+      locale={language}
+      defaultLocale="en"
+    >
+      {children}
+    </IntlProvider>
+  );
+};

projects/web/src/context/query-provider.tsx

+// QueryProvider.tsx
+import React from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const defaultQueryClientConfig = {
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false,
+      staleTime: 5 * 60 * 1000, // 5 minutes
+    },
+  },
+};
+
+interface QueryProviderProps {
+  children: React.ReactNode;
+}
+
+const QueryProvider: React.FC<QueryProviderProps> = ({ children }) => {
+  const queryClient = new QueryClient({
+    ...defaultQueryClientConfig,
+  });
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+export default QueryProvider;

projects/web/src/index.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: white;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+

projects/web/src/locale/common/en.json

+{
+    "common.cancel": "Cancel",
+    "common.confirm": "Confirm",
+    "common.retry": "retry"
+}
\ No newline at end of file

projects/web/src/locale/common/zh.json

+{
+    "common.cancel": "取消",
+    "common.confirm": "确定",
+    "common.retry": "retry"
+}
\ No newline at end of file

projects/web/src/locale/en.json

+{
+    "extractor.common.upload": "Click to upload file",
+    "extractor.common.try": "Try：",
+    "extractor.home": "Home",
+    "extractor.button.download": "Download",
+    "extractor.button.lineWrap": "Line Wrap",
+    "extractor.button.fullScreen": "Fullscreen",
+    "extractor.button.exitFullScreen": "Exit Fullscreen",
+    "extractor.button.showLayer": "Display recognition results",
+    "extractor.button.hiddenLayer": "Hide recognition results",
+    "extractor.error": "Extraction failed",
+    "extractor.law": "Please ensure that the documents you upload are legal and compliant, and we do not assume legal responsibility for the content of the documents. Data Protection Policy Children's Information Protection Policy Service Agreement | © All Rights Reserved.Shanghai ICP 2021009351-21",
+    "extractor.button.reUpload": "Re-Upload",
+    "extractor.failed": "Unable to extract, no data to display yet",
+    "extractor.common.extracting": "Extracting, please wait",
+    "extractor.common.extracting.queue": "Queuing for extraction, currently ranked at {id}",
+    "extractor.common.loading": "Loading",
+    "extractor.common.pdf.demo1": "Example1.pdf",
+    "extractor.common.pdf.demo2": "Example2.pdf",
+    "extractor.common.formula.detect.demo1": "FormulaDetail1.jpg",
+    "extractor.common.formula.extract.demo1": "FormulaExtract1.jpg",
+    "extractor.common.login.desc": "Functionality available after login",
+    "extractor.markdown.preview": "Preview",
+    "extractor.markdown.code": "Code",
+    "extractor.home.title": "Welcome to Miner U",
+    "extractor.home.subTitle": "Upload documents and intelligently extract them into Markdown format",
+    "extractor.side.extractTask": "Extraction Tasks",
+    "extractor.side.extractTask.title": "Please upload a PDF document within 5M (within 10 pages) or a JPG/PNG image",
+    "extractor.pdf.title": "PDF Document Extraction",
+    "extractor.pdf.subTitle": "Supports text/scanned PDF parsing, identifies various layout elements and converts them into multimodal Markdown format",
+    "extractor.common.pdf.upload.tip": "Please upload a PDF document",
+    "extractor.pdf.ocr": "OCR Identify Pattern",
+    "extractor.pdf.ocr.popover": "By default, PDF types (text-based, scanned) will be automatically recognized, and based on the recognition results, you can choose to use text recognition or OCR recognition. If enabled, all types of PDF will be recognized by OCR.",
+    "extractor.formula.title2": "Recognize mathematical formulas in images as LaTex format, support multi-line formulas and handwritten formula recognition",
+    "extractor.formula.title": "Locate the formulas within and between rows in the image and generate bounding boxes",
+    "extractor.formula.upload.text": "Click to upload an image",
+    "extractor.formula.popover.extract": "In order to obtain the best formula recognition effect, please crop the image, focus on the formula part, and upload a clear, watermark-free image of the mathematical formula, as shown below",
+    "extractor.formula.popover.detect": "In order to get the best formula recognition effect, please upload clear, non-watermarked images containing mathematical formulas, as shown below",
+    "extractor.formula.upload.accept": "Please upload a JPG/PNG image within 5M",
+    "extractor.formula.upload.try": "Please upload an image containing a mathematical formula Example: ",
+    "extractor.guide.title": "Welcome to use more open source products 🎉",
+    "extractor.queue": "Extract records",
+    "extractor.queue.delete": "Confirm to delete this file?",
+    "extractor.queue.extracting": "Extracting",
+    "extractor.feedback.title1": "Are you satisfied with the overall extraction performance?",
+    "extractor.feedback.title3": "Look forward to your suggestions to help us better optimize",
+    "extractor.feedback.up.title": "What improvements are you expecting to see?",
+    "extractor.feedback.down.title": "What is the reason for your dissatisfaction? ",
+    "extractor.feedback.up": "Satisfied",
+    "extractor.feedback.down": "Dissatisfied",
+    "extractor.feedback.input.placeholder": "Please enter your suggestions for improvement",
+    "extractor.feedback.input.submit": "Submit",
+    "extractor.feedback.success": "Thank you for the feedback",
+    "extractor.queue.delete.success": "Delete successfully"
+}
\ No newline at end of file

projects/web/src/locale/side/en.ts

+import { EXTRACTOR_TYPE_LIST } from "@/types/extract-task-type";
+import odlLogo from "@/assets/pdf/odl-logo.svg";
+import labelLLMLogo from "@/assets/pdf/label-llm.svg";
+import labelULogo from "@/assets/pdf/labelU.svg";
+
+export default {
+  "extractor.side.tabList": [
+    {
+      label: "PDF Extraction",
+      type: EXTRACTOR_TYPE_LIST.pdf,
+    },
+    // {
+    //   label: "Formula Extraction",
+    //   type: EXTRACTOR_TYPE_LIST.formula,
+    // },
+  ],
+  "extractor.side.guide_list": [
+    {
+      type: "odl",
+      icon: odlLogo,
+      title: "OpenDataLab",
+      desc: "Covers a huge amount of high-quality, multimodal datasets",
+      goToText: "Go Now",
+      link: "https://opendatalab.com",
+    },
+    {
+      type: "labelU",
+      icon: labelULogo,
+      title: "Label U Labeling Tool",
+      desc: "Lightweight open source annotation tools",
+      goToText: "github",
+      link: "https://github.com/opendatalab/labelU",
+    },
+    {
+      type: "labelLLM",
+      icon: labelLLMLogo,
+      [`zh-CN-title`]: "LabelLLM Labeling Tool",
+      title: "LabelLLM Labeling Tool",
+      desc: "Specializing in dialogue annotation for large language models",
+      goToText: "github",
+      link: "https://github.com/opendatalab/LabelLLM",
+    },
+  ],
+};

projects/web/src/locale/side/zh.ts

+import { EXTRACTOR_TYPE_LIST } from "@/types/extract-task-type";
+import odlLogo from "@/assets/pdf/odl-logo.svg";
+import labelLLMLogo from "@/assets/pdf/label-llm.svg";
+import labelULogo from "@/assets/pdf/labelU.svg";
+
+export default {
+  "extractor.side.tabList": [
+    {
+      label: "PDF文档提取",
+      type: EXTRACTOR_TYPE_LIST.pdf,
+    },
+    // {
+    //   label: "公式检测与识别",
+    //   type: EXTRACTOR_TYPE_LIST.formula,
+    // },
+  ],
+  "extractor.side.guide_list": [
+    {
+      type: "odl",
+      icon: odlLogo,
+      title: "OpenDataLab",
+      desc: "涵盖海量优质、多模态数据集",
+      goToText: "立即前往",
+      link: "https://opendatalab.com",
+    },
+    {
+      type: "labelU",
+      icon: labelULogo,
+      title: "Label U 标注工具",
+      desc: "轻量级开源标注工具",
+      goToText: "github",
+      link: "https://github.com/opendatalab/labelU",
+    },
+    {
+      type: "labelLLM",
+      icon: labelLLMLogo,
+      title: "LabelLLM 标注工具",
+      desc: "专攻于大模型的对话标注",
+      goToText: "github",
+      link: "https://github.com/opendatalab/LabelLLM",
+    },
+  ],
+};

projects/web/src/locale/zh.json

+{
+    "extractor.common.upload": "点击上传文件",
+    "extractor.common.try": "试一试：",
+    "extractor.home": "首页",
+    "extractor.button.download": "下载",
+    "extractor.button.lineWrap": "换行",
+    "extractor.button.fullScreen": "全屏",
+    "extractor.button.exitFullScreen": "退出全屏",
+    "extractor.button.showLayer": "显示识别结果",
+    "extractor.button.hiddenLayer": "隐藏识别结果",
+    "extractor.button.reUpload": "重新上传",
+    "extractor.error": "提取失败",
+    "extractor.common.loading": "加载中",
+    "extractor.law": "请确保您上传的文件合法合规，我们不承担因文件内容产生的法律责任。《信息保护政策》 《儿童信息保护政策》《服务协议》|© All Rights Reserved.沪ICP备2021009351号-21",
+    "extractor.failed": "不可提取，暂无可展示数据",
+    "extractor.common.extracting": "提取中，请稍等",
+    "extractor.common.extracting.queue": "正在排队提取，当前排在第 {id} 位",
+    "extractor.common.pdf.demo1": "示例1.pdf",
+    "extractor.common.pdf.demo2": "示例2.pdf",
+    "extractor.common.formula.detect.demo1": "公式检测1.jpg",
+    "extractor.common.formula.extract.demo1": "公式识别1.jpg",
+    "extractor.common.login.desc": "登录后可使用完整功能",
+    "extractor.markdown.preview": "预览",
+    "extractor.markdown.code": "代码",
+    "extractor.home.title": "欢迎使用 Miner U",
+    "extractor.home.subTitle": "上传文档，智能提取为 Markdown 格式",
+    "extractor.side.extractTask": "提取任务",
+    "extractor.side.extractTask.title": "请上传 5M 以内的 PDF 文档 （ 10 页以内）或 JPG/PNG 图片",
+    "extractor.pdf.title": "PDF文档提取",
+    "extractor.pdf.subTitle": "支持文本/扫描型 PDF 解析，识别各类版面元素并转换为多模态 Markdown 格式",
+    "extractor.common.pdf.upload.tip": "请上传 PDF 文档",
+    "extractor.pdf.ocr": "OCR 识别模式",
+    "extractor.pdf.ocr.popover": "  默认将自动识别PDF类型（文本型、扫描型），并根据识别结果选择采用文本识别或者OCR识别方式。 如开启，将对所有类型PDF采用OCR识别方式。",
+    "extractor.formula.title": "定位图片中的行内、行间公式，生成边界框",
+    "extractor.formula.title2": "将图片中的数学公式识别为 laTex 格式，支持多行公式、手写公式识别",
+    "extractor.formula.upload.text": "点击上传图片",
+    "extractor.formula.popover.extract": "为获得最佳的公式识别效果，请上传清晰、无水印的包含数学公式的图片，如下图",
+    "extractor.formula.popover.detect": "为获得最佳的公式识别效果，请裁剪图片，聚焦公式部分，上传清晰、无水印的数学公式图片，如下图",
+    "extractor.formula.upload.accept": "请上传 5M 以内的JPG/PNG 图片",
+    "extractor.formula.upload.try": "请上传包含数学公式的图片 示例：",
+    "extractor.guide.title": "欢迎使用更多开源产品 🎉",
+    "extractor.queue": "提取记录",
+    "extractor.queue.delete": "确认删除此文件？",
+    "extractor.queue.extracting": "提取中",
+    "extractor.feedback.title1": "您对整体提取效果是否满意 ？",
+    "extractor.feedback.title3": "期待您的建议，帮助我们更好的优化",
+    "extractor.feedback.up.title": "您期望看到哪些改进？",
+    "extractor.feedback.down.title": "您感到不满意的原因是？",
+    "extractor.feedback.up": "满意",
+    "extractor.feedback.down": "不满意",
+    "extractor.feedback.input.placeholder": "请输入您的改进建议",
+    "extractor.feedback.input.submit": "提交",
+    "extractor.feedback.success": "感谢你的反馈",
+    "extractor.queue.delete.success": "删除成功"
+}
\ No newline at end of file

projects/web/src/main.tsx

+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

projects/web/src/pages/extract-side/index.module.scss

+@import '@/styles/variable.scss';
+
+.gradientBtn {
+    width: 179px;
+    height: 37px;
+    border-radius: 4px;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.95);
+    // background: linear-gradient(110deg, #38A0FF -33.56%, #0D53DE 32.84%, #5246FF 102.05%);
+    background: #3477EB;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    &:hover {
+        background: #3477EB;
+    }
+  }
+  
+  .linearBlue {
+    // TIP： 这里为啥用bg呢，因为ui稿给的参数是假的
+    background: url('@/assets/pdf/pdf-upload.png');
+    background-size: cover;
+  }
+  
+  .tryText {
+      font-size: 13px;
+      line-height: 20px;
+      background: linear-gradient(107deg, #38A0FF -24.14%, #0D53DE 30.09%, #5246FF 86.61%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+  }
+  
+  .extractorContainer {
+    min-width: $page-min-witch;
+  }
+  
\ No newline at end of file

projects/web/src/pages/extract-side/index.tsx

+import DarkLogo from "@/assets/svg/logo.svg";
+
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import commonStyles from "./index.module.scss";
+
+import { EXTRACTOR_TYPE_LIST } from "@/types/extract-task-type";
+
+import extractorPdfIcon from "@/assets/pdf/extractor-pdf.svg";
+import extractorTableIcon from "@/assets/pdf/extractor-table.svg";
+import extractorFormulaIcon from "@/assets/pdf/extractor-formula.svg";
+import { useIntl } from "react-intl";
+import cls from "classnames";
+import ExtractorGuide from "@/pages/extract/components/extractor-guide";
+import ExtractorQueue from "@/pages/extract/components/extractor-queue";
+import ExtractorLang from "@/pages/extract/components/extractor-lang";
+
+interface IExtractorSideProps {
+  className?: string;
+}
+
+interface TabItem {
+  label: string;
+  type: string;
+}
+
+export const ExtractorSide = ({ className = "" }: IExtractorSideProps) => {
+  const navigate = useNavigate();
+
+  const params = useParams();
+  const location = useLocation();
+  const { messages } = useIntl();
+
+  const menuClass =
+    "px-2 py-2.5 mb-1 text-[0.875rem] text-[#121316]/[0.8] font-semibold rounded h-10 flex items-center cursor-pointer hover:bg-[#0d53de]/[0.05]";
+
+  const handleMenuClick = (type: string) => {
+    navigate(`/OpenSourceTools/Extractor/${type}`);
+  };
+  const goToOpenSource = () => {
+    navigate("/OpenSourceTools/Extractor/");
+  };
+
+  const tabList =
+    (messages?.["extractor.side.tabList"] as unknown[] as TabItem[]) || [];
+
+  const getIconStyle = (type: string) => {
+    const activeClassName = "!bg-[#0d53de]/[0.05] !text-[#0D53DE]";
+    const path = location.pathname;
+    const regex = /\/Extractor\/([^/]+)(\/|$)/;
+
+    const match = params?.jobID ? "" : path.match(regex)?.[1] || "/";
+
+    const getIcon = () => {
+      switch (type) {
+        case EXTRACTOR_TYPE_LIST.pdf:
+          return extractorPdfIcon;
+        case EXTRACTOR_TYPE_LIST.table:
+          return extractorTableIcon;
+        case EXTRACTOR_TYPE_LIST.formula:
+          return extractorFormulaIcon;
+      }
+    };
+    return {
+      icon: getIcon(),
+      tabClassName: match === type ? activeClassName : "",
+    };
+  };
+
+  return (
+    <div
+      className={cls(
+        `w-[240px] min-w-[240px] h-full px-4  py-6 flex flex-col justify-start border-r-[1px] border-y-0 border-l-0 border-solid border-[#EBECF0] select-none`,
+        commonStyles.linearBlue,
+        className
+      )}
+    >
+      <div className={""}>
+        <div className="h-[2rem] mb-6 flex justify-between items-center">
+          <img
+            className="h-full cursor-pointer"
+            src={DarkLogo}
+            alt=""
+            onClick={goToOpenSource}
+          />
+          <ExtractorGuide />
+        </div>
+
+        {/* tab-list */}
+        <div className="mb-2">
+          {tabList.map((i) => (
+            <div
+              key={i.type}
+              className={cls(menuClass, getIconStyle(i.type)?.tabClassName)}
+              onClick={() => handleMenuClick(i.type)}
+            >
+              <img src={getIconStyle(i.type).icon} className="mr-2 w-6 h-6" />
+              {i.label}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="bg-[#0d53de]/[0.08] w-full h-[1px] mt-2 mb-4"></div>
+      <ExtractorQueue className="flex-1 overflow-y-auto mb-6" />
+      <ExtractorLang className="absolute bottom-6" />
+    </div>
+  );
+};

projects/web/src/pages/extract/components/extractor-guide/index.module.scss

+.extractorGuide {
+  :global {
+
+    .ant-popover-content, .ant-popover-inner {
+      border-radius: 12px !important;
+      overflow: hidden;
+      box-shadow: 0px 8px 26px 0px rgba(0, 0, 0, 0.12);
+    }
+
+    .ant-popover-inner-content {
+      padding: 24px !important;
+    }
+
+    .ant-popover-arrow {
+      display: none !important;
+    }
+  }
+}

projects/web/src/pages/extract/components/extractor-guide/index.tsx

+import { Popover } from "antd";
+import guideToolsSvg from "@/assets/pdf/guideTools.svg";
+import style from "./index.module.scss";
+import { useIntl } from "react-intl";
+import IconFont from "@/components/icon-font";
+import { windowOpen } from "@/utils/windowOpen";
+
+interface GuideItem {
+  type: string;
+  icon: string;
+  "zh-CN-title": string;
+  title: string;
+  desc: string;
+  goToText: string;
+  link: string;
+}
+
+const ExtractorGuide = () => {
+  const { formatMessage, messages } = useIntl();
+
+  const EXTRACTOR_GUIDE_ITEM_LIST = (messages?.["extractor.side.guide_list"] ||
+    []) as unknown as GuideItem[];
+
+  const content = (
+    <div>
+      <div className="text-[1.25rem] font-semibold mt-3 mb-2  ml-4">
+        {formatMessage({
+          id: "extractor.guide.title",
+        })}
+      </div>
+      <hgroup>
+        {EXTRACTOR_GUIDE_ITEM_LIST?.map((i) => {
+          return (
+            <div
+              key={i.type}
+              className="flex p-4 items-center cursor-pointer hover:bg-[#F4F5F9] rounded group h-[6.5rem]"
+              onClick={() => windowOpen(i.link)}
+            >
+              <img
+                src={i.icon}
+                alt=""
+                className="w-[1.5rem] h-[1.5rem] transition-all mr-[0.75rem]"
+              />
+              <div className="">
+                <div className="font-semibold transition-all text-[1rem]">
+                  {i.title}
+                </div>
+                <div className="text-base text-[13px] text-[#121316]/[0.6] transition-all ">
+                  {i.desc}
+                </div>
+                <div className="h-0 mt-2 overflow-hidden !text-[13px] text-[#121316]/[0.8] transition-all group-hover:h-auto">
+                  {i.goToText}
+                  <IconFont type="icon-ArrowRightOutlined" className="ml-1" />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </hgroup>
+    </div>
+  );
+  return (
+    <Popover
+      overlayClassName={style.extractorGuide}
+      content={content}
+      showArrow={false}
+      placement="right"
+    >
+      <img
+        className="w-[1.32rem] h-[1.32rem] p-0.5 hover:rotate-45 transition-all cursor-pointer rounded"
+        src={guideToolsSvg}
+        alt="guideToolsSvg"
+      />
+    </Popover>
+  );
+};
+
+export default ExtractorGuide;

projects/web/src/pages/extract/components/extractor-lang/index.tsx

+import LangChangeIcon from "@/assets/pdf/lang-change.svg";
+import { useLanguageStore } from "@/store/languageStore";
+import cls from "classnames";
+
+interface ExtractorLangProps {
+  className?: string;
+}
+
+const ExtractorLang: React.FC<ExtractorLangProps> = ({ className }) => {
+  const { toggleLanguage } = useLanguageStore();
+  const changeLang = () => {
+    toggleLanguage?.();
+  };
+  return (
+    <>
+      <img
+        onClick={() => changeLang()}
+        src={LangChangeIcon}
+        alt="LangChangeIcon"
+        className={cls(
+          "w-[1.5rem] h-[1.5rem] cursor-pointer object-cover hover:bg-[#0D53DE]/[0.1] rounded cursor-pointer",
+          className
+        )}
+      />
+    </>
+  );
+};
+
+export default ExtractorLang;

projects/web/src/pages/extract/components/extractor-queue/index.tsx

+import IconFont from "@/components/icon-font";
+import { useIntl } from "react-intl";
+import extractorQueueSvg from "@/assets/pdf/extractor-queue.svg";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  EXTRACTOR_TYPE_LIST,
+  ExtractTaskType,
+} from "@/types/extract-task-type";
+import cls from "classnames";
+import { useLatest, useRequest } from "ahooks";
+import { deleteExtractJob, getExtractorHistory } from "@/api/extract";
+import { message, Popconfirm, Tooltip } from "antd";
+import { useEffect } from "react";
+import { ADD_TASK_LIST, UPDATE_TASK_LIST } from "@/constant/event";
+import { findIndex } from "lodash";
+import { TextTooltip } from "@/components/text-tooltip";
+
+interface ExtractorQueueProps {
+  className?: string;
+}
+
+const ExtractorQueue: React.FC<ExtractorQueueProps> = ({ className }) => {
+  const { formatMessage, locale } = useIntl();
+  const navigate = useNavigate();
+
+  const params = useParams();
+
+  const { data: taskList, mutate } = useRequest(() => {
+    return getExtractorHistory({
+      pageNo: 1,
+      pageSize: 100,
+    }).then((res) => {
+      return res?.list?.filter((i) => !!i.id && !!i.type) || [];
+    });
+  });
+
+  let timeout: NodeJS.Timeout | null = null;
+
+  const activeClassName = "!bg-[#0d53de]/[0.05] !text-[#0D53DE]";
+  const handleExtractor = (originType: ExtractTaskType, id: string) => {
+    const type = originType?.split("-")[0];
+    const detailType = originType?.split("-")[1];
+
+    if (type === EXTRACTOR_TYPE_LIST.formula.toLowerCase()) {
+      navigate(`/OpenSourceTools/Extractor/formula/${id}?type=${detailType}`);
+    } else if (type === EXTRACTOR_TYPE_LIST.pdf.toLowerCase()) {
+      navigate(`/OpenSourceTools/Extractor/PDF/${id}`);
+    } else if (type === EXTRACTOR_TYPE_LIST.table.toLocaleLowerCase()) {
+      navigate(`/OpenSourceTools/Extractor/table/${id}`);
+    }
+    return;
+  };
+
+  const cancel = (e?: React.MouseEvent<HTMLElement>) => {
+    e?.stopPropagation();
+    e?.preventDefault();
+  };
+
+  const confirm = (id: string) => {
+    const deleteIndex = findIndex(taskList, (i) => i.id === id);
+    const nextJob = taskList?.[deleteIndex + 1]
+      ? taskList?.[deleteIndex + 1]
+      : taskList?.[deleteIndex - 1];
+    mutate(taskList?.filter((i) => i.id !== id));
+    deleteExtractJob(id).then(() => {
+      message.success(formatMessage({ id: "extractor.queue.delete.success" }));
+    });
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      if (nextJob?.id) {
+        handleExtractor(nextJob?.type as any, nextJob?.id);
+      } else {
+        navigate("/OpenSourceTools/Extractor");
+      }
+    }, 10);
+  };
+  const taskListRef = useLatest(taskList);
+  const handleAddList = ({ detail }: CustomEvent) => {
+    const taskData = detail as any;
+    mutate(
+      [
+        {
+          fileName: taskData?.fileName,
+          id: taskData?.id,
+          type: taskData?.type,
+          state: taskData?.state, // 提取状态
+        } as any,
+      ].concat(taskListRef?.current)
+    );
+  };
+
+  useEffect(() => {
+    const handleUpdateList = ({ detail }: CustomEvent) => {
+      const taskData = detail as any;
+      taskListRef?.current?.forEach((i) => {
+        if (i.id === taskData?.id) {
+          i.state = taskData?.state || taskData?.state;
+        }
+      });
+
+      mutate(taskListRef?.current);
+    };
+    document.addEventListener(
+      UPDATE_TASK_LIST,
+      handleUpdateList as EventListener
+    );
+    document.addEventListener(ADD_TASK_LIST, handleAddList as EventListener);
+    return () => {
+      document.removeEventListener(
+        UPDATE_TASK_LIST,
+        handleUpdateList as EventListener
+      );
+      document.removeEventListener(
+        ADD_TASK_LIST,
+        handleAddList as EventListener
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    mutate(taskListRef?.current);
+  }, [locale]);
+
+  return (
+    <div className={cls("w-full flex flex-col mb-3", className)}>
+      <header className="flex items-center px-2 py-[0.625rem] text-[#121316]/[0.8] text-[0.875rem] font-semibold">
+        <img
+          src={extractorQueueSvg}
+          className="w-6 h-6 mr-2 "
+          alt="extractorQueueSvg"
+        />
+        {formatMessage({
+          id: "extractor.queue",
+        })}
+      </header>
+      <hgroup className="overflow-auto flex-1 scrollbar-thin">
+        {taskList?.map((i, index) => {
+          return (
+            <div
+              className={cls(
+                "group h-[2.5rem] flex items-center px-4 py-2.5 mb-1 text-[#121316]/[0.8] pl-10 text-sm rounded h-10 flex items-center cursor-pointer hover:bg-[#0d53de]/[0.05]",
+                params?.jobID === String(i?.id) && activeClassName
+              )}
+              key={i?.fileName + index + i?.id}
+              onClick={() => handleExtractor(i.type as any, i.id)}
+            >
+              <span className="truncate mr-2 max-w-[calc(100%-2rem)]">
+                <TextTooltip trigger="hover" str={i?.fileName} />
+              </span>
+              <>
+                {i?.state === "failed" && (
+                  <Tooltip
+                    title={formatMessage({
+                      id: "extractor.error",
+                    })}
+                  >
+                    <IconFont
+                      type={"icon-attentionFilled"}
+                      className="text-[#FF8800] mr-1"
+                    />
+                  </Tooltip>
+                )}
+
+                <Popconfirm
+                  title={formatMessage({ id: "extractor.queue.delete" })}
+                  description={<div className="my-4"></div>}
+                  onConfirm={(e) => {
+                    e?.stopPropagation();
+                    e?.preventDefault();
+                    confirm(i.id);
+                  }}
+                  onCancel={cancel}
+                  okText={formatMessage({ id: "common.confirm" })}
+                  cancelText={formatMessage({ id: "common.cancel" })}
+                  okButtonProps={{
+                    style: {
+                      backgroundColor: "#F5483B",
+                    },
+                  }}
+                >
+                  <IconFont
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                    }}
+                    type="icon-shanchu"
+                    className="hidden ml-auto text-[1rem] text-[#121316]/[0.8] hover:text-[#0D53DE] group-hover:block"
+                  />
+                </Popconfirm>
+              </>
+            </div>
+          );
+        })}
+      </hgroup>
+    </div>
+  );
+};
+
+export default ExtractorQueue;

projects/web/src/pages/extract/components/extractor-repo/index.module.scss

+.githubBtn {
+  position: relative;
+  width: 100%;
+  cursor: pointer;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.25rem;
+  overflow: hidden;
+  border-radius: 8px;
+  cursor: pointer;
+
+
+  filter: blur(0px);
+
+  z-index: 0;
+  &::before {
+    width: 100%;
+    height: 100%;
+    display: block;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    background:  linear-gradient(to bottom, rgba(185,214,246,1) -100%, rgba(244,247,254,) 100%);
+    z-index: 0;
+  }
+
+
+  & > span {
+      border-radius: 7px;
+      display:inline-flex;
+      width: calc(100% - 2px);
+      height: calc(100% - 2px);
+      background: linear-gradient(180deg, #5C93FF1F -160.94%, rgba(255, 255, 255, 1) 80%);
+      z-index: 1;
+      filter: blur(0px);
+      justify-content: center;
+      align-items: center;
+      font-size: 16px;
+      &:hover {
+        background: linear-gradient(180deg, #5C93FF1F -60.94%, rgba(255, 255, 255, 1) 80%);
+        filter: blur(0px);
+      }
+      span:nth-child(3){
+          color: var(--80-text-4, rgba(18, 19, 22, 0.80));
+          -webkit-background-clip: text;
+          background-clip: text;
+      }
+  }
+}
+
+.githubText {
+  /* 正文/加粗text-1-semibold */
+  font-family: "PingFang SC";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 21px; /* 150% */
+  color: #121316;
+}

projects/web/src/pages/extract/components/extractor-repo/index.tsx

+import githubSvg from "@/assets/pdf/github.svg";
+import { windowOpen } from "@/utils/windowOpen";
+import styles from "./index.module.scss";
+import cls from "classnames";
+
+const ExtractorRepo = () => {
+  return (
+    <div
+      className={cls(styles.githubBtn)}
+      onClick={() =>
+        windowOpen("https://github.com/opendatalab/MinerU", "_blank")
+      }
+    >
+      <span className="text-sm ">
+        <img src={githubSvg} className="mr-2" />
+        <span className="!text-[14px] ml-[0.5rem]">🎉</span>
+      </span>
+    </div>
+  );
+};
+
+export default ExtractorRepo;

projects/web/src/pages/extract/components/iframe-loading/index.tsx

+import LoadingAnimation from "@/components/loading-animation";
+import { ExclamationCircleFilled } from "@ant-design/icons";
+import cls from "classnames";
+
+export const IframeLoading = ({
+  filename,
+  type,
+  text,
+  errorElement,
+  classNameTitle = "",
+  showHeader,
+}: {
+  filename?: string;
+  type: "loading" | "error";
+  text?: string;
+  errorElement?: React.ReactElement;
+  classNameTitle?: string;
+  showHeader?: boolean;
+}) => {
+  return (
+    <div className="flex flex-col h-full text-sm text-[#121316]/[0.8] whitespace-nowrap ">
+      {showHeader && (
+        <div
+          className={cls(
+            "h-[47px] border-0 border-solid border-b-[1px] border-[#EBECF0] w-full pl-[24px]",
+            classNameTitle
+          )}
+        >
+          {filename}
+        </div>
+      )}
+
+      <div className="flex-1 flex justify-center items-center">
+        {type === "error" ? (
+          errorElement ? (
+            errorElement
+          ) : (
+            <>
+              <ExclamationCircleFilled
+                style={{ color: "#FF8800" }}
+                rotate={180}
+              />
+              <span className="ml-2.5">上传失败，请</span>
+              <span className="text-[#0D53DE] ml-1 cursor-pointer">
+                重新上传
+              </span>
+            </>
+          )
+        ) : (
+          <>
+            <LoadingAnimation />
+            <span className="ml-2.5">{text || "PDF 上传中，请稍等..."}</span>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};