[web_demo] 新增文档切边矫正，印章检测，pdf转word功能

src/MenuView.vue

@@ -30,14 +30,17 @@
           <el-col :span="3">🔥</el-col>
           <span>版面分析</span>
         </el-menu-item>
-        <el-menu-item index="6">
-          <span></span>
+        <el-menu-item index="6" @click="routerJump('/dewarp')">
+          <el-col :span="3">🔥</el-col>
+          <span>文档切边矫正</span>
         </el-menu-item>
-        <el-menu-item index="7">
-          <span></span>
+        <el-menu-item index="7" @click="routerJump('/StampDetection')">
+          <el-col :span="3">🔥</el-col>
+          <span>印章检测</span>
         </el-menu-item>
-        <el-menu-item index="8">
-          <span></span>
+        <el-menu-item index="8" @click="routerJump('/PdfToWord')">
+          <el-col :span="3">🔥</el-col>
+          <span>PDF转Word</span>
         </el-menu-item>
         <el-menu-item index="9">
           <span></span>

src/api/api.ts

@@ -1,4 +1,5 @@
 import server from "./index";
+import axios, { AxiosResponse } from 'axios';
 
 interface InputData<T> {
   image: File;
@@ -19,6 +20,17 @@ interface MagciColorRes {
   cost: number;
 }
 
+interface ConvertRes {
+  file_path: string;
+  cost: number;
+}
+
+interface DewarpRes {
+  image: string;
+  points: any;
+  cost: number;
+}
+
 interface DetectionRes {
   code: number;
   response_id: string;
@@ -37,23 +49,22 @@ interface TableRecRes {
   data: any;
 }
 
-export const GetVersion = (
-  api: string
-): Promise<string> => server.get(api);
+export const GetVersion = (api: string): Promise<string> => server.get(api);
 
-export const GetBuildTag = (
-  api: string
-): Promise<string> => server.get(api);
+export const GetBuildTag = (api: string): Promise<string> => server.get(api);
 
-export const GetModelInfo = (
-  api: string
-): Promise<string> => server.get(api);
+export const GetModelInfo = (api: string): Promise<string> => server.get(api);
 
 export const IMMagicColor = (
   api: string,
   data: FormData
 ): Promise<PredictRes<MagciColorRes>> => server.post(api, data);
 
+export const IMDewarp = (
+  api: string,
+  data: FormData
+): Promise<PredictRes<DewarpRes>> => server.post(api, data);
+
 export const Detection = (api: string, data: FormData): Promise<DetectionRes> =>
   server.post(api, data);
 
@@ -66,4 +77,20 @@ export const TableRec = (api: string, data: FormData): Promise<TableRecRes> =>
 export const SubmitBug = (api: string, data: any): Promise<OcrRecRes> =>
   server.get(api, data);
 
+// export const Download = (api: string, data: FormData): Promise<Blob> => server.post(api, data);
+
+export const Download = async (api: string, file_path: string): Promise<Blob> => {
+  const formData = new FormData();
+  formData.append('file_path', file_path);
+  const response: AxiosResponse = await axios.post(api, formData, {
+    responseType: 'blob',
+  });
+  return response.data;
+};
+
+export const PDFToWord = (
+  api: string,
+  data: FormData
+): Promise<PredictRes<ConvertRes>> => server.post(api, data);
+
 export {};

src/components/FileUpload.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="upload-container">
+        {{ fileName }}
         <div class="mask" @dragover.prevent @drop="handleDrop">
             <el-upload class="upload" drag :before-upload="BeforeUpload">
                 <el-button type="primary">点击或拖拽上传文件</el-button>
@@ -13,7 +14,29 @@ import { useCanvasImgStore } from '../store/CanvasImg';
 import { usePdfProperty } from '../store/PdfProperty';
 import { storeToRefs } from 'pinia'
 import { fabric } from 'fabric';
+import { ref, onMounted } from 'vue'
 
+const fileName = ref("")
+
+const props = defineProps({
+    fileFormats: String, // 定义名字属性
+    isConvert: Boolean
+});
+
+const image_format = ['.jpg', '.jpeg', '.png', '.bmp']
+const pdf_format = ['.pdf']
+
+let support_format: any = []
+
+onMounted(async () => {
+    if (props.fileFormats == 'all') {
+        support_format = image_format.concat(pdf_format)
+    } else if (props.fileFormats == 'pdf') {
+        support_format = pdf_format
+    } else {
+        support_format = image_format.concat(pdf_format)
+    }
+});
 
 const c_img = useCanvasImgStore();
 const { show_image, show_canvas, fabric_canvas, input_file } = storeToRefs(c_img);
@@ -22,28 +45,13 @@ const { is_pdf, pdf_source } = storeToRefs(pdf_property);
 
 function handleDrop(e: any) {
     e.preventDefault()
+    // console.log(support_format)
     const files = e.dataTransfer.files
     if (files.length > 0) {
         const file = files[0]
-        if (fabric_canvas.value != null) {
-            fabric_canvas.value.dispose();
-            fabric_canvas.value = null;
-        }
-
         const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
-        if (post_ == ".pdf") {
-            is_pdf.value = true;
-            pdf_source.value = URL.createObjectURL(file);
-        } else if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
-            is_pdf.value = false
-            show_image.value.src = URL.createObjectURL(file);
-            show_image.value.onload = () => {
-                show_canvas.value.width = show_image.value.width;
-                show_canvas.value.height = show_image.value.height;
-                fabric_canvas.value = new fabric.Canvas(show_canvas.value);
-                fabric_canvas.value.clear()
-            }
-            input_file.value = file;
+        if (support_format.includes(post_)) {
+            UpdateFile(file)
         } else {
             alert('不支持的文件格式！')
         }
@@ -51,28 +59,42 @@ function handleDrop(e: any) {
 }
 
 const BeforeUpload = (file: File): boolean | Promise<boolean> => {
+    const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
+    if (support_format.includes(post_)) {
+        UpdateFile(file)
+    } else {
+        alert('不支持的文件格式！')
+    }
+    return true;
+}
+
+function UpdateFile(file: File) {
     if (fabric_canvas.value != null) {
         fabric_canvas.value.dispose();
         fabric_canvas.value = null;
     }
+    fileName.value = file.name;
     const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
     if (post_ == ".pdf") {
-        is_pdf.value = true;
-        pdf_source.value = URL.createObjectURL(file);
+        if (props.isConvert == true) {
+            input_file.value = file;
+        } else {
+            is_pdf.value = true;
+            pdf_source.value = URL.createObjectURL(file);
+        }
     } else if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
         is_pdf.value = false
-        show_image.value.src = URL.createObjectURL(file);
-        show_image.value.onload = () => {
-            show_canvas.value.width = show_image.value.width;
-            show_canvas.value.height = show_image.value.height;
-            fabric_canvas.value = new fabric.Canvas(show_canvas.value);
-            fabric_canvas.value.clear()
+        if (show_image.value != null && show_canvas.value != null) {
+            show_image.value.src = URL.createObjectURL(file);
+            show_image.value.onload = () => {
+                show_canvas.value.width = show_image.value.width;
+                show_canvas.value.height = show_image.value.height;
+                fabric_canvas.value = new fabric.Canvas(show_canvas.value);
+                fabric_canvas.value.clear()
+            }
         }
         input_file.value = file;
-    } else {
-        alert('不支持的文件格式！')
     }
-    return true;
 }
 </script>
 
@@ -82,7 +104,7 @@ const BeforeUpload = (file: File): boolean | Promise<boolean> => {
     top: 0;
     left: 0;
     width: 100%;
-    height: 200px;
+    height: 100%;
     background-color: gray;
 }
 

src/pages/main/router/index.ts

@@ -1,9 +1,12 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import DocumentAIIntroduction from "@/pages/main/views/homePage.vue";
 import magicColor from "@/pages/main/views/ImageProcess/magicColor.vue";
+import dewarp from "@/pages/main/views/ImageProcess/dewarp.vue";
 import ocr from "@/pages/main/views/Recognize/ocr.vue";
 import tableRec from "@/pages/main/views/Recognize/tableRec.vue";
 import LayoutAnalysis from "@/pages/main/views/Detection/LayoutAnalysis.vue";
+import StampDetection from "@/pages/main/views/Detection/StampDetection.vue";
+import PdfToWord from "@/pages/main/views/Convert/PdfToWord.vue";
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -32,6 +35,21 @@ const router = createRouter({
       path: "/LayoutAnalysis",
       name: "LayoutAnalysis",
       component: LayoutAnalysis,
+    },
+    {
+      path: "/dewarp",
+      name: "dewarp",
+      component: dewarp,
+    },
+    {
+      path: "/StampDetection",
+      name: "StampDetection",
+      component: StampDetection,
+    },
+    {
+      path: "/PdfToWord",
+      name: "PdfToWord",
+      component: PdfToWord,
     }
   ],
 });

src/pages/main/views/Convert/PdfToWord.vue

@@ -0,0 +1,96 @@
+<template>
+    <div style="width: 100%; height: 100%;">
+        <div class="common-layout">
+            <el-container>
+                <el-header style="height: 10%; width: 80%;">
+                    <h2>PDF转Word</h2>
+                    <p>将PDF文档转换为Word。转换出的文件尽可能保持PDF原有格式(目前暂不支持文字大小，颜色与样式，不支持分栏排版)</p>
+                </el-header>
+                <el-main style="height: 800px; width: 100%; position: relative;">
+                    <FileUpload fileFormats="pdf" :isConvert=true />
+                </el-main>
+                <el-footer style="display: flex; justify-content: center; align-items: center; width: 100%;">
+                    <OcrLangList />
+                    <el-button type="primary" @click="predict" :loading="loading">开始转换</el-button>
+                    <el-button type="primary" @click="download" :loading="loading">下载结果</el-button>
+                </el-footer>
+                <section> 耗时：{{ predictTime }} ms</section>
+            </el-container>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PDFToWord, Download } from '../../../../api/api'
+
+import { storeToRefs } from 'pinia'
+import { useServerStore } from '../../../../store/Server';
+import { useCanvasImgStore } from '../../../../store/CanvasImg';
+import { useOcrLangStore } from '../../../../store/OcrLang';
+
+import FileUpload from '../../../../components/FileUpload.vue'
+import OcrLangList from '../../../../components/OcrLangList.vue'
+
+const si = useServerStore();
+const { api_download, api_pdf_to_word } = storeToRefs(si);
+const my_canvas = useCanvasImgStore();
+const { input_file } = storeToRefs(my_canvas);
+const ol = useOcrLangStore();
+const { ocr_lang } = storeToRefs(ol);
+
+const fileName = ref("")
+let predictTime = ref(0)
+let loading = ref(false)
+const output_path = ref("")
+
+const predict = async () => {
+    fileName.value = ''
+    fileName.value = input_file.value?.name
+    if (fileName.value == undefined || fileName.value == '') {
+        alert('请上传文件！')
+        return;
+    }
+    if (ocr_lang.value == undefined || ocr_lang.value == "") {
+        alert('请先指定语言！')
+        return;
+    }
+
+    loading.value = !loading.value
+    var data = new FormData();
+    data.append('pdf', input_file.value);
+    data.append('lang', ocr_lang.value);
+    data.append('page_range', "None");
+
+    PDFToWord(api_pdf_to_word.value, data).then(res => {
+        console.log(res)
+        predictTime.value = res.data.cost;
+        output_path.value = res.data.file_path;
+        loading.value = !loading.value;
+    }).catch(function (err) {
+        loading.value = !loading.value;
+        predictTime.value = 0
+    });
+};
+
+const download = async () => {
+    if (output_path.value != "") {
+        Download(api_download.value, output_path.value).then(res => {
+            const url = window.URL.createObjectURL(res)
+            const a = document.createElement('a')
+            a.href = url
+            a.download = fileName.value.split('.')[0] + '.docx'
+            document.body.appendChild(a)
+            a.click()
+            document.body.removeChild(a)
+            window.URL.revokeObjectURL(url)
+        }).catch(function (err) {
+            console.log(err)
+        });
+    }
+    else
+        alert('请先上传pdf文件并等待成功转换')
+}
+</script>
+
+<style scoped lang="less"></style>

src/pages/main/views/Detection/LayoutAnalysis.vue

@@ -10,8 +10,8 @@
       <el-row>
         <ShowImage :show-src-image=true   />
       </el-row>
-      <el-row>
-        <FileUpload />
+      <el-row style="height: 200px; width: 100%; position: relative;">
+        <FileUpload fileFormats="all" :isConvert=false />
       </el-row>
       <el-row style="color: gray; font-size: small;">
         <h4>支持jpg, png, bmp, pdf等文件格式,点击灰色区域或者直接拖拽文件至灰色区域上传文件</h4>

src/pages/main/views/Detection/StampDetection.vue

@@ -0,0 +1,218 @@
+<template>
+    <el-row :gutter="20" class="page">
+      <el-col :span="12" class="place">
+        <el-row class="small-title">
+          <h2>印章检测</h2>
+        </el-row>
+        <el-row style="color: gray; font-size: small;">
+          <p>检测图片中的印章</p>
+        </el-row>
+        <el-row>
+          <ShowImage :show-src-image=true   />
+        </el-row>
+        <el-row style="height: 200px; width: 100%; position: relative;">
+          <FileUpload />
+        </el-row>
+        <el-row style="color: gray; font-size: small;">
+          <h4>支持jpg, png, bmp, pdf等文件格式,点击灰色区域或者直接拖拽文件至灰色区域上传文件</h4>
+        </el-row>
+        <el-row style="position: absolute;">
+          <PdfPreview />
+          <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
+        </el-row>
+      </el-col>
+      <el-col :span="12" class="place">
+        <el-row class="small-title">
+          <h2 style="margin-right: 0;">识别结果展示</h2>
+          <!-- <el-button type="danger" @click="submitBug" disabled>提交bug</el-button> -->
+        </el-row>
+        <div>
+          <h2>印章</h2>
+          <el-scrollbar height="auto">
+            <ul>
+              <li v-for="(item, index) in stampArr" :key="index" @click="figureHandleClick(index, item, stamp_rects)"
+                :style="index == stampSelectedItem ? 'color: blue' : ''">
+                {{ item }}
+              </li>
+            </ul>
+          </el-scrollbar>
+        </div>
+        <el-row>
+          <section> 耗时：{{ predictTime }} ms.</section>
+        </el-row>
+      </el-col>
+    </el-row>
+  </template>
+  
+  <script lang="ts" setup>
+  import { Detection, SubmitBug } from '../../../../api/api'
+  import { fabric } from 'fabric';
+  import { reactive, ref, onMounted } from 'vue'
+  
+  import { storeToRefs } from 'pinia'
+  import { useServerStore } from '../../../../store/Server';
+  import { useCanvasImgStore } from '../../../../store/CanvasImg';
+  
+  import FileUpload from '../../../../components/FileUpload.vue'
+  import ShowImage from '../../../../components/ShowImage.vue'
+  import PdfPreview from '../../../../components/PdfPreview.vue'
+  
+  const si = useServerStore();
+  const { server_ip, server_port, api_stamp_detection } = storeToRefs(si);
+  const my_canvas = useCanvasImgStore();
+  const { input_file, fabric_canvas, show_canvas, show_image } = storeToRefs(my_canvas);
+  
+  
+  let loading = ref(false)
+  let show_predict = ref(false)
+  let predictTime = ref(0)
+  const fileName = ref(null as unknown as string);
+  let stampSelectedItem = ref(-1)
+  
+  let stampArr: any = ref([])
+  
+  let bugId = ref("");
+  const json_result = ref("");
+  
+  interface iRect {
+    left: number,
+    top: number,
+    width: number,
+    height: number
+  }
+  
+  let stamp_rects: any = []
+  
+  type RectWithId = fabric.Rect & { id: number };
+  
+  function CreateRect(canvas: any, i: number, left: number, top: number, width: number, height: number, highlight: boolean, label: number) {
+    var rect = new fabric.Rect({
+      left: left,
+      top: top,
+      width: width,
+      height: height,
+      fill: 'transparent',
+      stroke: highlight ? 'blue' : 'green',
+      strokeWidth: 2,
+      opacity: 1.0,
+      selectable: false,
+      name: highlight ? 'high' : 'normal',
+    }) as RectWithId;
+    rect.set('id', i);
+    canvas.add(rect);
+  }
+  
+  const predict = async () => {
+    fileName.value = ''
+    fileName.value = input_file.value?.name
+    if (fileName.value == undefined || fileName.value == '') {
+      alert('请上传图片！')
+      return;
+    }
+  
+    if (fabric_canvas.value != null) {
+      fabric_canvas.value.dispose();
+      fabric_canvas.value = null;
+      fabric_canvas.value = new fabric.Canvas(show_canvas.value);
+      fabric_canvas.value.clear()
+    }
+    stamp_rects.splice(0)
+  
+    loading.value = !loading.value
+    var data = new FormData();
+    data.append('image', input_file.value);
+  
+    Detection(api_stamp_detection.value, data).then(res => {
+      // console.log(res.code)
+      json_result.value = JSON.stringify(res.data, null, 4);
+      console.log(res.data);
+      // rec_result.value = res.data.text.reduce((total: any, cur: any) => total + `<p>${cur}</p>`);
+      stampArr.value.splice(0);
+      let tmp_labels = res.data.labels;
+      if (tmp_labels.length == 0) {
+        alert("no result!");
+      } else {
+        let tmp_boxes = res.data.boxes;
+        const h_radio = show_image.value.height / show_image.value.naturalHeight;
+        const w_radio = show_image.value.width / show_image.value.naturalWidth;
+  
+        for (let i = 0; i < tmp_labels.length; i++) {
+          let left = w_radio * tmp_boxes[i][0];
+          let top = h_radio * tmp_boxes[i][1];
+          let width = w_radio * (tmp_boxes[i][2] - tmp_boxes[i][0]);
+          let height = h_radio * (tmp_boxes[i][3] - tmp_boxes[i][1]);
+          const rect: iRect = { left, top, width, height };
+          if (tmp_labels[i] == "Seal") {
+            stampArr.value.push("印章");
+            stamp_rects.push(rect);
+            CreateRect(fabric_canvas.value, i, left, top, width, height, false, 1);
+          }
+        }
+        stampArr.value.reverse();
+        for (let i = 0; i < stampArr.value.length; i++) {
+          stampArr.value[i] = stampArr.value[i] + " -- " + String(i + 1);
+        }
+      }
+      predictTime.value = res.data.cost;
+      loading.value = !loading.value;
+      bugId.value = res.response_id;
+      if (show_predict.value === false)
+        show_predict.value = !show_predict.value;
+    }).catch(function (err) {
+      loading.value = !loading.value;
+      bugId.value = ""
+      predictTime.value = 0
+    });
+  };
+  
+//   const submitBug = async () => {
+//     if (bugId.value == undefined || bugId.value == "") {
+//       alert('请先预测结果！')
+//       return;
+//     }
+  
+//     SubmitBug(api_stamp_detection.value, bugId.value).then(res => {
+//       console.log(res.code, res.data)
+//     }).catch(function (err) {
+//       console.log(err)
+//       // loading.value = !loading.value;
+//     });
+//   };
+  
+  onMounted(async () => {
+    console.log('layout analysis mounted')
+    input_file.value = undefined
+  })
+  
+  async function figureHandleClick(index: any, item: any, rects: any) {
+    stampSelectedItem.value = index;
+    let objects = fabric_canvas.value.getObjects();
+    for (let i = 0; i < objects.length; i++) {
+      if (objects[i].name === 'high') {
+        // 找到名为 rectName 的矩形元素，执行删除操作等
+        fabric_canvas.value.remove(objects[i]);
+        break;
+      }
+    }
+    CreateRect(fabric_canvas.value, index, rects[index].left, rects[index].top, rects[index].width, rects[index].height, true, 1);
+  }
+  </script>
+  
+  <style scoped>
+  .page {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .place {
+    margin-right: auto;
+    margin-left: auto;
+    border-right: solid 1px #ccc;
+  }
+  
+  .small-title {
+    justify-content: space-between;
+    align-items: center;
+  }
+  </style>
+  

src/pages/main/views/ImageProcess/dewarp.vue

@@ -0,0 +1,121 @@
+<template>
+    <el-row :gutter="20" class="page">
+      <el-col :span="12" class="place">
+        <el-row class="small-title">
+          <h2>文档切边矫正</h2>
+        </el-row>
+        <el-row style="color: gray; font-size: small;">
+          <p>智能定位图像中文档主体的边缘，并进行背景切除 (文档提取)，对文档进行矫正。</p>
+        </el-row>
+        <el-row>
+          <ShowImage :show-src-image=true />
+        </el-row>
+        <el-row style="height: 200px; width: 100%; position: relative;">
+          <FileUpload />
+        </el-row>
+        <el-row style="color: gray; font-size: small;">
+          <h4>支持jpg, png, bmp, pdf等文件格式,点击灰色区域或者直接拖拽文件至灰色区域上传文件</h4>
+        </el-row>
+        <el-row style="position: absolute;">
+          <PdfPreview />
+          <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
+        </el-row>
+      </el-col>
+      <el-col :span="12" class="place">
+        <el-row class="small-title">
+          <h2 style="margin-right: 100;">推理结果展示</h2>
+          <!-- <el-button type="danger" @click="submitBug" disabled>提交bug</el-button> -->
+        </el-row>
+        <div style="margin-top: 43px;">
+          <ShowImage :show-src-image=false />
+        </div>
+        <section> 耗时：{{ predictTime }} ms</section>
+      </el-col>
+    </el-row>
+  </template>
+  
+  <script lang="ts" setup>
+  import { IMDewarp, SubmitBug } from '../../../../api/api'
+  import { ref, onMounted } from 'vue'
+  
+  import FileUpload from '../../../../components/FileUpload.vue'
+  import ShowImage from '../../../../components/ShowImage.vue'
+  import PdfPreview from '../../../../components/PdfPreview.vue'
+  
+  import { storeToRefs } from 'pinia'
+  import { useServerStore } from '../../../../store/Server';
+  import { useCanvasImgStore } from '../../../../store/CanvasImg';
+  
+  const si = useServerStore();
+  const { server_ip, server_port, api_dewarp } = storeToRefs(si);
+  const my_canvas = useCanvasImgStore();
+  const { input_file, res_image } = storeToRefs(my_canvas);
+  
+  let loading = ref(false)
+  const fileName = ref(null as unknown as string);
+  let bugId = ref("");
+  let predictTime = ref(0)
+  
+  const predict = () => {
+    fileName.value = ''
+    fileName.value = input_file.value?.name
+    if (fileName.value == undefined || fileName.value == '') {
+      alert('请上传图片！')
+      return;
+    }
+    loading.value = !loading.value
+    var data = new FormData();
+  
+    data.append('image', input_file.value);
+  
+    IMDewarp(api_dewarp.value, data).then(res => {
+        console.log(res)
+      res_image.value.src = res.data.image
+      predictTime.value = res.data.cost
+      bugId.value = res.response_id;
+      loading.value = !loading.value
+    }).catch(function (err) {
+        console.log(err)
+      loading.value = !loading.value;
+      bugId.value = ""
+      predictTime.value = 0
+    });
+  }
+  
+  onMounted(async () => {
+    console.log('magic color mounted')
+    input_file.value = undefined
+  })
+  
+  // const submitBug = async () => {
+  //   if (bugId.value == undefined || bugId.value == "") {
+  //     alert('请先预测结果！')
+  //     return;
+  //   }
+  
+  //   SubmitBug(api, bugId.value).then(res => {
+  //     console.log(res.code, res.data)
+  //   }).catch(function (err) {
+  //     console.log(err)
+  //   });
+  // };
+  </script>
+  
+  <style scoped>
+  .place {
+    margin-right: auto;
+    margin-left: auto;
+    border-right: solid 1px #ccc;
+  }
+  
+  .page {
+    height: 100%;
+    width: 100%;
+  }
+  
+  .small-title {
+    justify-content: space-between;
+    align-items: center;
+  }
+  </style>
+  

src/pages/main/views/ImageProcess/magicColor.vue

@@ -10,7 +10,7 @@
       <el-row>
         <ShowImage :show-src-image=true />
       </el-row>
-      <el-row>
+      <el-row style="height: 200px; width: 100%; position: relative;">
         <FileUpload />
       </el-row>
       <el-row style="color: gray; font-size: small;">

src/pages/main/views/Recognize/ocr.vue

@@ -14,7 +14,7 @@
       <el-row>
         <ShowImage :show-src-image=true />
       </el-row>
-      <el-row>
+      <el-row style="height: 200px; width: 100%; position: relative;">
         <FileUpload />
       </el-row>
       <OcrLangList />

src/pages/main/views/Recognize/tableRec.vue

@@ -14,7 +14,7 @@
       <el-row>
         <ShowImage :show-src-image=true />
       </el-row>
-      <el-row>
+      <el-row style="height: 200px; width: 100%; position: relative;">
         <FileUpload />
       </el-row>
       <OcrLangList />

src/store/Server.ts

@@ -2,10 +2,10 @@ import { defineStore } from 'pinia';
 import { ref } from 'vue'
 
 export const useServerStore = defineStore('server', () => {
-  const tmp_ip = "http://192.168.10.84:80"
+  const tmp_ip = "http://192.168.10.116:80"
   const server_ip = ref("localhost")
   const server_port = ref(":7896")
-  const api_dewarp = ref("")
+  const api_dewarp = ref(tmp_ip + "/v1/image_process/dewarp")
   const api_version = ref(tmp_ip + "/v1/version")
   const api_build_tag = ref(tmp_ip + "/v1/buildTag")
   const api_model_info = ref(tmp_ip + "/v1/modelInfo")
@@ -13,8 +13,11 @@ export const useServerStore = defineStore('server', () => {
   const api_ocr = ref(tmp_ip + "/v1/ocr")
   const api_table_rec = ref(tmp_ip + "/v1/table_rec")
   const api_layout_analysis = ref(tmp_ip + "/v1/detection/layout_parser")
-  const api_seal_detection = ref("")
+  const api_stamp_detection = ref(tmp_ip + "/v1/detection/detection_stamp")
+  const api_pdf_to_word = ref(tmp_ip + "/v1/convert/pdf2word")
+  const api_download = ref(tmp_ip + "/download")
 
-  return { server_ip, server_port, api_dewarp, api_layout_analysis, api_magic_color, 
-           api_ocr, api_seal_detection, api_table_rec, api_build_tag, api_model_info, api_version }
+  return { server_ip, server_port, api_dewarp, api_layout_analysis, api_magic_color, api_pdf_to_word,
+           api_ocr, api_stamp_detection, api_table_rec, api_build_tag, api_model_info, api_version,
+           api_download }
 })