[web_demo] 组件UI美化，页面布局优化

src/components/FileUpload.vue

@@ -1,14 +1,16 @@
 <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>
+            <el-upload class="upload" drag :before-upload="BeforeUpload" :file-list="[]" action=""
+                accept=".jpg,.jpeg,.png,.bmp,.pdf">
+                <i class="el-icon-upload"></i>
+                <div class="upload-text">点击或拖拽上传文件</div>
             </el-upload>
         </div>
+        <div class="file-name" v-if="fileName">{{ fileName }}</div>
     </div>
 </template>
-
+    
 <script setup lang="ts">
 import { useCanvasImgStore } from '../store/CanvasImg';
 import { usePdfProperty } from '../store/PdfProperty';
@@ -97,7 +99,7 @@ function UpdateFile(file: File) {
     }
 }
 </script>
-
+    
 <style scoped lang="less">
 .upload-container {
     position: absolute;
@@ -105,23 +107,48 @@ function UpdateFile(file: File) {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: gray;
+    background-color: #f5f7fa;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .mask {
-    position: absolute;
-    top: 0;
-    left: 0;
     width: 100%;
     height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 2px dashed rgba(0, 0, 0, 0.3);
+}
+
+.el-upload__input {
+    display: none !important;
 }
 
 .upload {
-    width: 100%;
-    height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    width: 260px;
+    height: 160px;
+    background-color: #fff;
+    border-radius: 8px;
+    color: #c0c4cc;
+    font-size: 24px;
+    text-align: center;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.upload-text {
+    margin-top: 10px;
+}
+
+.file-name {
+    margin-top: 10px;
+    font-size: 16px;
+    text-align: center;
 }
 </style>

src/components/ShowImage.vue

@@ -30,40 +30,35 @@ defineProps<{
 
 <style scoped lang="less">
 .image-container {
-    display: relative;
-    width: 100%;
-    height: 600px;
-    background-color: gainsboro;
+position: relative;
+width: 100%;
+height: 600px;
+background-color: gainsboro;
+display: flex;
+justify-content: center;
+align-items: center;
+overflow: hidden;
 }
 
 #show_canvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    background-color: transparent;
+position: absolute;
+top: 0;
+left: 0;
+z-index: 0;
+background-color: transparent;
 }
 
-#show_img {
-    z-index: 0;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    // margin: auto;
-    max-width: 100%;
-    max-height: 100%;
-}
-
-.image {
-    max-width: 100%;
-    max-height: 100%;
-    position: flex;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
+#show_img,
+#res_img {
+z-index: 0;
+max-width: 100%;
+max-height: 100%;
+display: block;
+margin: auto;
+position: absolute;
+top: 0;
+bottom: 0;
+left: 0;
+right: 0;
 }
 </style>

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

@@ -1,24 +1,24 @@
 <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 class="page">
+      <div class="common-layout">
+        <el-container>
+          <el-header class="header">
+            <h2>PDF转Word</h2>
+            <p>将PDF文档转换为Word。转换出的文件尽可能保持PDF原有格式(目前暂不支持文字大小，颜色与样式，不支持分栏排版)</p>
+          </el-header>
+          <el-main class="main">
+            <FileUpload fileFormats="pdf" :isConvert="true" />
+          </el-main>
+          <el-footer class="footer">
+            <OcrLangList />
+            <el-button type="primary" @click="predict" :loading="loading">开始转换</el-button>
+            <el-button type="primary" @click="download" :loading="loading">下载结果</el-button>
+            <section class="predict-time">耗时：{{ predictTime }} ms</section>
+          </el-footer>
+        </el-container>
+      </div>
     </div>
-</template>
+  </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
@@ -93,4 +93,34 @@ const download = async () => {
 }
 </script>
 
-<style scoped lang="less"></style>
+<style scoped>
+.page {
+  width: 100%;
+  height: 100%;
+}
+.common-layout {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.header {
+  height: 10%;
+}
+.main {
+  height: 800px;
+  width: 100%;
+  position: relative;
+}
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.predict-time {
+  margin-left: 20px;
+}
+</style>

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

@@ -14,7 +14,7 @@
         <FileUpload fileFormats="all" :isConvert=false />
       </el-row>
       <el-row style="color: gray; font-size: small;">
-        <h4>支持jpg, png, bmp, pdf等文件格式,点击灰色区域或者直接拖拽文件至灰色区域上传文件</h4>
+        <h4>支持jpg, png, bmp, pdf等文件格式</h4>
       </el-row>
       <el-row style="position: absolute;">
         <PdfPreview />
@@ -61,6 +61,7 @@ import { reactive, ref, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useServerStore } from '../../../../store/Server';
 import { useCanvasImgStore } from '../../../../store/CanvasImg';
+import { usePdfProperty } from '../../../../store/PdfProperty';
 
 import FileUpload from '../../../../components/FileUpload.vue'
 import ShowImage from '../../../../components/ShowImage.vue'
@@ -70,6 +71,8 @@ const si = useServerStore();
 const { server_ip, server_port, api_layout_analysis } = storeToRefs(si);
 const my_canvas = useCanvasImgStore();
 const { input_file, fabric_canvas, show_canvas, show_image } = storeToRefs(my_canvas);
+const pdf = usePdfProperty();
+const { is_pdf } = storeToRefs(pdf);
 
 
 let loading = ref(false)
@@ -205,6 +208,7 @@ const submitBug = async () => {
 onMounted(async () => {
   console.log('layout analysis mounted')
   input_file.value = undefined
+  is_pdf.value = false
 })
 
 async function figureHandleClick(index: any, item: any, rects: any) {

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

@@ -1,176 +1,180 @@
 <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-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 {
+</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 { usePdfProperty } from '../../../../store/PdfProperty';
+
+
+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);
+const pdf = usePdfProperty();
+const { is_pdf } = storeToRefs(pdf);
+
+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) {
+}
+
+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',
+        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 () => {
+}
+
+const predict = async () => {
     fileName.value = ''
     fileName.value = input_file.value?.name
     if (fileName.value == undefined || fileName.value == '') {
-      alert('请上传图片！')
-      return;
+        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()
+        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);
+        // 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;
+        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
+        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) {
@@ -178,41 +182,42 @@
 //       // loading.value = !loading.value;
 //     });
 //   };
-  
-  onMounted(async () => {
+
+onMounted(async () => {
     console.log('layout analysis mounted')
     input_file.value = undefined
-  })
-  
-  async function figureHandleClick(index: any, item: any, rects: any) {
+    is_pdf.value = false
+})
+
+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;
-      }
+        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>
+}
+</script>
   
-  <style scoped>
-  .page {
+<style scoped>
+.page {
     width: 100%;
     height: 100%;
-  }
-  
-  .place {
+}
+
+.place {
     margin-right: auto;
     margin-left: auto;
     border-right: solid 1px #ccc;
-  }
-  
-  .small-title {
+}
+
+.small-title {
     justify-content: space-between;
     align-items: center;
-  }
-  </style>
+}
+</style>
   

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

@@ -1,121 +1,123 @@
 <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-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 = () => {
+</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';
+import { usePdfProperty } from '../../../../store/PdfProperty';
+
+const si = useServerStore();
+const { server_ip, server_port, api_dewarp } = storeToRefs(si);
+const my_canvas = useCanvasImgStore();
+const { input_file, res_image } = storeToRefs(my_canvas);
+const pdf = usePdfProperty();
+const { is_pdf } = storeToRefs(pdf);
+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;
+        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
+        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
+        loading.value = !loading.value;
+        bugId.value = ""
+        predictTime.value = 0
     });
-  }
-  
-  onMounted(async () => {
+}
+
+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 {
+    is_pdf.value = false
+})
+
+// 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 {
+}
+
+.page {
     height: 100%;
     width: 100%;
-  }
-  
-  .small-title {
+}
+
+.small-title {
     justify-content: space-between;
     align-items: center;
-  }
-  </style>
-  
+}
+</style>

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

@@ -14,7 +14,7 @@
         <FileUpload />
       </el-row>
       <el-row style="color: gray; font-size: small;">
-        <h4>支持jpg, png, bmp, pdf等文件格式,点击灰色区域或者直接拖拽文件至灰色区域上传文件</h4>
+        <h4>支持jpg, png, bmp, pdf等文件格式</h4>
       </el-row>
       <el-row style="position: absolute;">
         <PdfPreview />
@@ -45,11 +45,15 @@ import PdfPreview from '../../../../components/PdfPreview.vue'
 import { storeToRefs } from 'pinia'
 import { useServerStore } from '../../../../store/Server';
 import { useCanvasImgStore } from '../../../../store/CanvasImg';
+import { usePdfProperty } from '../../../../store/PdfProperty';
+
 
 const si = useServerStore();
 const { server_ip, server_port, api_magic_color } = storeToRefs(si);
 const my_canvas = useCanvasImgStore();
 const { input_file, res_image } = storeToRefs(my_canvas);
+const pdf = usePdfProperty();
+const { is_pdf } = storeToRefs(pdf);
 
 let loading = ref(false)
 const fileName = ref(null as unknown as string);
@@ -83,6 +87,7 @@ const predict = () => {
 onMounted(async () => {
   console.log('magic color mounted')
   input_file.value = undefined
+  is_pdf.value = false
 })
 
 // const submitBug = async () => {

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

@@ -8,18 +8,18 @@
       <el-row style="color: gray; font-size: small;">
         <p>支持识别图片/通过领先的深度学习技术，对各种表格，图片，文档、证件、面单等多种通用场景进行快速、精准的检测和识别，支持简体中文/繁体中文/英文/西欧主流语言等多种种语言，同时支持印刷体、手写体、倾斜、折叠、旋转等。</p>
       </el-row>
-      <el-row style="color: gray; font-size: small;">
-        <h4>支持jpg, png, bmp, pdf等文件格式,点击灰色区域或者直接拖拽文件至灰色区域上传文件</h4>
-      </el-row>
       <el-row>
         <ShowImage :show-src-image=true />
       </el-row>
       <el-row style="height: 200px; width: 100%; position: relative;">
         <FileUpload />
       </el-row>
-      <OcrLangList />
+      <el-row style="color: gray; font-size: small;">
+        <h4>支持jpg, png, bmp, pdf等文件格式</h4>
+      </el-row>
+      <PdfPreview />
       <el-row style="position: absolute;">
-        <PdfPreview />
+        <OcrLangList />
         <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
       </el-row>
     </el-col>
@@ -62,6 +62,7 @@ import { reactive, ref, onMounted } from 'vue'
 import { useOcrLangStore } from '../../../../store/OcrLang';
 import { useServerStore } from '../../../../store/Server';
 import { useCanvasImgStore } from '../../../../store/CanvasImg';
+import { usePdfProperty } from '../../../../store/PdfProperty';
 
 
 import OcrLangList from '../../../../components/OcrLangList.vue'
@@ -75,6 +76,8 @@ const my_canvas = useCanvasImgStore();
 const { input_file, show_image, show_canvas, fabric_canvas } = storeToRefs(my_canvas);
 const ol = useOcrLangStore();
 const { ocr_lang } = storeToRefs(ol);
+const pdf = usePdfProperty();
+const { is_pdf } = storeToRefs(pdf);
 
 let loading = ref(false)
 let show_predict = ref(false)
@@ -221,6 +224,7 @@ async function handleClick(index: any, item: any) {
 onMounted(async () => {
   console.log('ocr mounted')
   input_file.value = undefined
+  is_pdf.value = false
 })
 </script>
 

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

@@ -8,18 +8,18 @@
       <el-row style="color: gray; font-size: small;">
         <p>支持识别图片/PDF格式文档中的表格内容，包括有线表格、无线表格、合并单元格表格，同时支持单张图片内的多个表格内容识别，返回各表格的表头表尾内容、单元格文字内容及其行列位置信息。</p>
       </el-row>
-      <el-row style="color: gray; font-size: small;">
-        <h4>支持jpg, png, bmp, pdf等文件格式,点击灰色区域或者直接拖拽文件至灰色区域上传文件</h4>
-      </el-row>
       <el-row>
         <ShowImage :show-src-image=true />
       </el-row>
       <el-row style="height: 200px; width: 100%; position: relative;">
         <FileUpload />
       </el-row>
-      <OcrLangList />
+      <el-row style="color: gray; font-size: small;">
+        <h4>支持jpg, png, bmp, pdf等文件格式</h4>
+      </el-row>
+      <PdfPreview />
       <el-row style="position: absolute;">
-        <PdfPreview />
+        <OcrLangList />
         <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
       </el-row>
     </el-col>
@@ -65,6 +65,7 @@ import { useOcrLangStore } from '../../../../store/OcrLang';
 import { useBugIdStore } from '../../../../store/BugID';
 import { useServerStore } from '../../../../store/Server';
 import { useCanvasImgStore } from '../../../../store/CanvasImg';
+import { usePdfProperty } from '../../../../store/PdfProperty';
 
 import OcrLangList from '../../../../components/OcrLangList.vue'
 import FileUpload from '../../../../components/FileUpload.vue'
@@ -79,6 +80,8 @@ const { ocr_lang } = storeToRefs(ol);
 
 const my_canvas = useCanvasImgStore();
 const { input_file } = storeToRefs(my_canvas);
+const pdf = usePdfProperty();
+const { is_pdf } = storeToRefs(pdf);
 
 const bi = useBugIdStore();
 const { bug_id } = storeToRefs(bi);
@@ -150,6 +153,7 @@ const predict = async () => {
 onMounted(async () => {
   console.log('table rec mounted')
   input_file.value = undefined
+  is_pdf.value = false
 })
 </script>