[web_demo] ocr语言选择组件补充english，部分页面优化

src/api/api.ts

@@ -15,7 +15,7 @@ interface OcrInput {
 }
 
 interface MagciColorRes {
-  out_image: string;
+  image: string;
   cost: number;
 }
 
@@ -43,7 +43,7 @@ export const IMMagicColor = (
   server.post("/v1/image_process/magic_color", data);
 
 export const Detection = (data: FormData): Promise<DetectionRes> =>
-  server.post("/v1/detection", data);
+  server.post("/v1/detection/layout_parser", data);
 
 export const OcrRec = (data: FormData): Promise<OcrRecRes> =>
   server.post("/v1/ocr", data);

src/api/index.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const server = axios.create({
-  baseURL: "http://localhost:7896",
+  baseURL: "http://localhost:8888",
 });
 
 server.interceptors.request.use(

src/components/OcrLangList.vue

@@ -24,6 +24,9 @@ const options = [
   {
     value: 'chinese_cht'
   },
+  {
+    value: 'english'
+  },
   {
     value: 'korean'
   },

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

@@ -26,8 +26,6 @@
               </el-icon>
             </el-button>
           </el-button-group>
-          <!-- <div class="page-tool-item" @click="prePage">上一页</div>
-          <div class="page-tool-item" @click="nextPage">下一页</div> -->
           <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
           <el-container>
             <el-input type="number" v-model="pdf_page"></el-input>
@@ -52,10 +50,20 @@
         <el-button type="danger" @click="submitBug" disabled>提交bug</el-button>
       </el-row>
       <div>
-        <el-scrollbar height="600px">
+        <h2>图片</h2>
+        <el-scrollbar height="auto">
           <ul>
-            <li v-for="(item, index) in recArr" :key="index" @click="handleClick(index, item)"
-              :style="index == selectedItem ? 'color: blue' : ''">
+            <li v-for="(item, index) in figureArr" :key="index" @click="figureHandleClick(index, item, figure_rects)"
+              :style="index == figureSelectedItem ? 'color: blue' : ''">
+              {{ item }}
+            </li>
+          </ul>
+        </el-scrollbar>
+        <h2>表格</h2>
+        <el-scrollbar height="auto">
+          <ul>
+            <li v-for="(item, index) in tableArr" :key="index" @click="tableHandleClick(index, item, table_rects)"
+              :style="index == tableSelectedItem ? 'color: blue' : ''">
               {{ item }}
             </li>
           </ul>
@@ -81,7 +89,6 @@ import {
 } from '@element-plus/icons-vue'
 
 let loadingTask: any;
-
 const is_pdf = ref(false);
 const pdf_page = ref(1);
 const pdf_img: any = ref("")
@@ -89,7 +96,6 @@ const pdf_img: any = ref("")
 const state = reactive({
   source: "", //预览pdf文件地址
   pageNum: 1, //当前页面
-  // scale: 4, // 缩放比例
   numPages: 0, // 总页数
 });
 
@@ -113,11 +119,9 @@ function getPdfImage(index: number) {
       const viewport = page.getViewport({ scale: 4.0 })
       canvas.value.height = viewport.height;
       canvas.value.width = viewport.width;
-      // 画布的dom大小, 设置移动端,宽度设置铺满整个屏幕
-      // const clientWidth = document.body.clientWidth;
       const destWidth = 398;
       canvas.value.style.width = destWidth + 'px';
-      // 根据pdf每页的宽高比例设置canvas的高度
+
       canvas.value.style.height = destWidth * (viewport.height / viewport.width) + 'px';
       const ctx = canvas.value.getContext('2d');
       page.render({
@@ -129,7 +133,8 @@ function getPdfImage(index: number) {
         const showImg = document.getElementById("show-img") as HTMLImageElement;
         showImg.src = canvas.value.toDataURL('images/png', 1.0);
         fa_canvas = new fabric.Canvas(canvas.value);
-        rects.splice(0)
+        figure_rects.splice(0)
+        table_rects.splice(0)
       });
     })
   });
@@ -189,16 +194,14 @@ let show_predict = ref(false)
 let predictTime = ref(0)
 const fileName = ref(null);
 const canvas = ref(null as unknown as HTMLCanvasElement);
+let figureSelectedItem = ref(-1)
+let tableSelectedItem = ref(-1)
 
-let selectedItem = ref(-1)
-
-let recArr: any = ref([])
+let figureArr: any = ref([])
+let tableArr: any = ref([])
 
 let fa_canvas: any = null;
-const rec_result = ref("");
 let bugId = ref("");
-
-const activeName = ref('2')
 const json_result = ref("");
 
 interface iRect {
@@ -208,7 +211,8 @@ interface iRect {
   height: number
 }
 
-let rects: any = []
+let figure_rects: any = []
+let table_rects: any = []
 
 onMounted(async () => {
   canvas.value = document.getElementById("canvas") as HTMLCanvasElement;
@@ -232,7 +236,6 @@ const uploadImg = () => {
       fa_canvas ? fa_canvas.clear() : 0;
       if (post_ == ".pdf") {
         state.pageNum = 1;
-        // state.scale = 4;
         state.source = URL.createObjectURL(file);
         is_pdf.value = true
         loadingTask = createLoadingTask(state.source);
@@ -243,13 +246,14 @@ const uploadImg = () => {
           canvas.value.width = showImg.width;
           canvas.value.height = showImg.height;
           fa_canvas = new fabric.Canvas(canvas.value);
-          rects.splice(0)
-          selectedItem.value = -1;
+          figure_rects.splice(0)
+          table_rects.splice(0)
+          figureSelectedItem.value = -1;
+          tableSelectedItem.value = -1;
         }
         is_pdf.value = false
       } else {
         alert('不支持的文件格式！')
-        // fileName.value = null
       }
     };
     reader.readAsDataURL(file);
@@ -277,7 +281,6 @@ function CreateRect(canvas: any, i: number, left: number, top: number, width: nu
   }) as RectWithId;
   rect.set('id', i);
   canvas.add(rect);
-  // canvas.renderAll();
 }
 
 const predict = async () => {
@@ -287,7 +290,8 @@ const predict = async () => {
   }
 
   fa_canvas.clear()
-  rects.splice(0)
+  figure_rects.splice(0)
+  table_rects.splice(0)
 
   const img = document.getElementById("show-img") as HTMLImageElement;
   const inputElement = document
@@ -300,32 +304,40 @@ const predict = async () => {
 
   if (is_pdf.value) {
     const file: any = convertCanvasToFile(canvas.value, "pdf.png").then(result => {
-      data.append('images', result);
+      data.append('image', result);
       Detection(data).then(res => {
         console.log(res.code)
         json_result.value = JSON.stringify(res.data, null, 4);
         console.log(res.data);
-        recArr.value.splice(0);
-        let tmp_text = res.data.labels;
-        if (tmp_text.length == 0) {
-          recArr.value.push("no result!");
+        figureArr.value.splice(0);
+        tableArr.value.splice(0);
+        let tmp_labels = res.data.labels;
+        if (tmp_labels.length == 0) {
+          alert("no result!");
         } else {
-          for (let i = 0; i < tmp_text.length; i++) {
-            recArr.value.push(tmp_text[i]);
+          let tmp_boxes = res.data.boxes;
+          const h_radio = img.height / img.naturalHeight;
+          const w_radio = img.width / img.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] == "Figure") {
+              figureArr.value.push("图片" + String(figureArr.value.length + 1));
+              figure_rects.push(rect);
+            } else if (tmp_labels[i] == "Table_0" || tmp_labels[i] == "Table_std") {
+              tableArr.value.push("表格" + String(tableArr.value.length + 1));
+              table_rects.push(rect);
+            }
+            CreateRect(fa_canvas, i, left, top, width, height, false);
           }
-        }
-        let tmp_boxes = res.data.boxes;
-        // fa_canvas = new fabric.Canvas(canvas.value);
-        const h_radio = img.height / img.naturalHeight;
-        const w_radio = img.width / img.naturalWidth;
-        for (let i = 0; i < tmp_boxes.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 };
-          rects.push(rect);
-          CreateRect(fa_canvas, i, left, top, width, height, false);
+          // if (figureArr.value.length == 0)
+          //   figureArr.value.push("无");
+          // if (tableArr.value.length == 0)
+          //   tableArr.value.push("无");
         }
         predictTime.value = res.data.cost;
         loading.value = !loading.value;
@@ -339,34 +351,42 @@ const predict = async () => {
       });
     })
   } else {
-    data.append('images', file);
+    data.append('image', file);
 
     Detection(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>`);
-      recArr.value.splice(0);
-      let tmp_text = res.data.labels;
-      if (tmp_text.length == 0) {
-        alert('未检测到结果！');
+      figureArr.value.splice(0);
+      tableArr.value.splice(0);
+      let tmp_labels = res.data.labels;
+      if (tmp_labels.length == 0) {
+        alert("no result!");
       } else {
-        for (let i = 0; i < tmp_text.length; i++) {
-          recArr.value.push(tmp_text[i]);
+        let tmp_boxes = res.data.boxes;
+        const h_radio = img.height / img.naturalHeight;
+        const w_radio = img.width / img.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] == "Figure") {
+            figureArr.value.push("图片" + String(figureArr.value.length + 1));
+            figure_rects.push(rect);
+          } else if (tmp_labels[i] == "Table_0" || tmp_labels[i] == "Table_std") {
+            tableArr.value.push("表格" + String(tableArr.value.length + 1));
+            table_rects.push(rect);
+          }
+          CreateRect(fa_canvas, i, left, top, width, height, false);
         }
-      }
-      let tmp_boxes = res.data.boxes;
-      // fa_canvas = new fabric.Canvas(canvas.value);
-      const h_radio = img.height / img.naturalHeight;
-      const w_radio = img.width / img.naturalWidth;
-      for (let i = 0; i < tmp_boxes.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 };
-        rects.push(rect);
-        CreateRect(fa_canvas, i, left, top, width, height, false);
+        // if (figureArr.value.length == 0)
+        //   figureArr.value.push("无");
+        // if (tableArr.value.length == 0)
+        //   tableArr.value.push("无");
       }
       predictTime.value = res.data.cost;
       loading.value = !loading.value;
@@ -387,7 +407,6 @@ const submitBug = async () => {
     return;
   }
 
-
   SubmitBug(bugId.value).then(res => {
     console.log(res.code, res.data)
   }).catch(function (err) {
@@ -396,8 +415,23 @@ const submitBug = async () => {
   });
 };
 
-async function handleClick(index: any, item: any) {
-  selectedItem.value = index;
+async function figureHandleClick(index: any, item: any, rects: any) {
+  figureSelectedItem.value = index;
+  tableSelectedItem.value = -1;
+  let objects = fa_canvas.getObjects();
+  for (let i = 0; i < objects.length; i++) {
+    if (objects[i].name === 'high') {
+      // 找到名为 rectName 的矩形元素，执行删除操作等
+      fa_canvas.remove(objects[i]);
+      break;
+    }
+  }
+  CreateRect(fa_canvas, index, rects[index].left, rects[index].top, rects[index].width, rects[index].height, true);
+}
+
+async function tableHandleClick(index: any, item: any, rects: any) {
+  tableSelectedItem.value = index;
+  figureSelectedItem.value = -1;
   let objects = fa_canvas.getObjects();
   for (let i = 0; i < objects.length; i++) {
     if (objects[i].name === 'high') {

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

@@ -2,90 +2,80 @@
   <el-row :gutter="20">
     <el-col :span="12" class="place">
       <el-row class="small-title">
-          <h2>图像锐化增强</h2>
-        </el-row>
-        <el-row style="color: gray; font-size: small;">
-          <p>V1 主要针对文档图片，去阴影效果较好</p>
-        </el-row>
-        <el-row style="color: gray; font-size: small;">
-          <h4>支持jpg, png, bmp, pdf格式</h4>
-        </el-row>
-        <div class="common-layout">
-          <el-container>
-            <el-input type="file" v-model="fileName" @change="uploadImg"></el-input>
-            <el-button type="primary" @click="predict">Predict</el-button>
-          </el-container>
+        <h2>图像锐化增强</h2>
+      </el-row>
+      <el-row style="color: gray; font-size: small;">
+        <p>V1 主要针对文档图片，去阴影效果较好</p>
+      </el-row>
+      <el-row style="color: gray; font-size: small;">
+        <h4>支持jpg, png, bmp, pdf格式</h4>
+      </el-row>
+      <div class="common-layout">
+        <el-container>
+          <el-input type="file" v-model="fileName" @change="uploadImg"></el-input>
+          <el-button type="primary" @click="predict">Predict</el-button>
+        </el-container>
+      </div>
+      <el-row v-show="!is_pdf">
+        <img id="show-img" class="show-area" />
+      </el-row>
+      <div class="pdf-preview" v-show="is_pdf">
+        <div class="pdf-wrap">
+          <vue-pdf-embed :source="state.source" :scale="3.0" class="vue-pdf-embed" :page="state.pageNum" />
         </div>
-        <el-row v-show="!is_pdf">
-          <!-- 用于展示图片 -->
-          <img id="show-img" class="show-area" />
-          <!-- 用于存放真实图片 -->
-          <img id="raw-img" style="display: none" />
-        </el-row>
-        <div class="pdf-preview" v-show="is_pdf">
-          <div class="pdf-wrap">
-            <vue-pdf-embed :source="state.source" :scale="3.0" class="vue-pdf-embed" :page="state.pageNum" />
-          </div>
-          <div class="page-tool">
-            <div class="page-tool-item" @click="prePage">上一页</div>
-            <div class="page-tool-item" @click="nextPage">下一页</div>
-            <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
-            <el-input type="number" v-model="pdf_page"></el-input>
-            <el-button type="primary" @click="SetPdfPage" plain>页面跳转</el-button>
-          </div>
+        <div class="page-tool">
+          <div class="page-tool-item" @click="prePage">上一页</div>
+          <div class="page-tool-item" @click="nextPage">下一页</div>
+          <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
+          <el-input type="number" v-model="pdf_page"></el-input>
+          <el-button type="primary" @click="SetPdfPage" plain>页面跳转</el-button>
         </div>
-        <canvas id="canvas" style="display: none;"></canvas>
+      </div>
+      <canvas id="canvas" style="display: none;"></canvas>
     </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>
-        <el-row style="color: gray; font-size: small;">
-          <p></p>
-        </el-row>
-        <el-row style="color: gray; font-size: small;">
-          <h4></h4>
-        </el-row>
-        <div>
-          <h4></h4>
-          <h4></h4>
-        </div>
-        <el-row v-loading="loading" class="small-title">
-          <h4></h4>
-          <h4></h4>
-        </el-row>
-        <el-row>
-          <img id="predict-img" class="show-area" />
-          <section> 耗时：{{ predictTime }} ms</section>
-        </el-row>
+        <h2 style="margin-right: 100;">推理结果展示</h2>
+        <el-button type="danger" @click="submitBug" disabled>提交bug</el-button>
+      </el-row>
+      <el-row style="color: gray; font-size: small;">
+        <p></p>
+      </el-row>
+      <el-row style="color: gray; font-size: small;">
+        <h4></h4>
+      </el-row>
+      <div>
+        <h4></h4>
+        <h4></h4>
+      </div>
+      <el-row v-loading="loading" class="small-title">
+        <h4></h4>
+        <h4></h4>
+      </el-row>
+      <el-row>
+        <img id="res-img" class="show-area" />
+        <section> 耗时：{{ predictTime }} ms</section>
+      </el-row>
     </el-col>
   </el-row>
-
-
-  
 </template>
 
 <script lang="ts" setup>
 import { IMMagicColor, SubmitBug } from '../../../../api/api'
 import { useServerIpStore } from '../../../../store/ServerIp';
 import { storeToRefs } from 'pinia'
-
-import { reactive, ref, toRefs, computed } from 'vue'
+import { reactive, ref } from 'vue'
 import { onMounted } from "vue";
 import VuePdfEmbed from "vue-pdf-embed";
 import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数
 
 let loadingTask: any;
-
 const pdf_page = ref(1);
-
 const pdf_img: any = ref("")
 
 const state = reactive({
   source: "", //预览pdf文件地址
   pageNum: 1, //当前页面
-  // scale: 4, // 缩放比例
   numPages: 0, // 总页数
 });
 
@@ -102,18 +92,14 @@ function dataURLtoBlob(dataURL: any) {
 }
 
 function getPdfImage(index: number) {
-  // console.log(index, state.pageNum)
   loadingTask.promise.then((pdf: any) => {
     state.numPages = pdf.numPages;
     pdf.getPage(index).then((page: any) => {
       const viewport = page.getViewport({ scale: 4.0 })
       canvas.value.height = viewport.height;
       canvas.value.width = viewport.width;
-      // 画布的dom大小, 设置移动端,宽度设置铺满整个屏幕
-      // const clientWidth = document.body.clientWidth;
       const destWidth = 398;
       canvas.value.style.width = destWidth + 'px';
-      // 根据pdf每页的宽高比例设置canvas的高度
       canvas.value.style.height = destWidth * (viewport.height / viewport.width) + 'px';
       const ctx = canvas.value.getContext('2d');
       page.render({
@@ -122,8 +108,6 @@ function getPdfImage(index: number) {
       });
       canvas.value.toBlob(function (blob) {
         pdf_img.value = dataURLtoBlob(canvas.value.toDataURL('images/png', 1.0))
-        // console.log(pdf_img.value);
-        // console.log(canvas.value.toDataURL(), state.pageNum)
       });
     })
   });
@@ -178,28 +162,22 @@ async function convertCanvasToFile(canvas: HTMLCanvasElement, fileName: any) {
   return file;
 }
 
-const si = useServerIpStore()
-const { server_ip } = storeToRefs(si);
-
 let loading = ref(false)
 const fileName = ref(null);
-
 let bugId = ref("");
-
 let predictTime = ref(0)
-
 const is_pdf = ref(false);
-
 const canvas = ref(null as unknown as HTMLCanvasElement);
+const res_image: any = ref();
 
 onMounted(async () => {
   canvas.value = document.getElementById("canvas") as HTMLCanvasElement;
+  res_image.value = document.getElementById("res-img") as HTMLImageElement;
 });
 
 const uploadImg = () => {
   const reader = new FileReader();
   const showImg = document.getElementById("show-img") as HTMLImageElement;
-  const rawImg = document.getElementById("raw-img") as HTMLImageElement;
   const predictImg = document.getElementById("predict-img") as HTMLImageElement;
   const inputElement = document
     .getElementsByClassName("el-input")[0]
@@ -218,7 +196,6 @@ const uploadImg = () => {
         getPdfImage(state.pageNum);
       } else if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp") {
         showImg.src = URL.createObjectURL(file);
-        rawImg.src = URL.createObjectURL(file);
         is_pdf.value = false
       } else {
         alert('不支持的文件格式！')
@@ -242,7 +219,6 @@ const predict = () => {
     .getElementsByClassName("el-input")[0]
     .getElementsByTagName("input")[0];
   const file = inputElement.files![0];
-  // console.log(file)
 
   loading.value = !loading.value
   var data = new FormData();
@@ -250,32 +226,25 @@ const predict = () => {
   if (is_pdf.value) {
     const file: any = convertCanvasToFile(canvas.value, "pdf.png").then(result => {
       console.log(result)
-      data.append('images', result);
+      data.append('image', result);
       IMMagicColor(data).then(res => {
         console.log(res.code)
-        // bug_id.value = res.response_id;
-        predictImg.src = server_ip.value + res.data.out_image
+        res_image.value.src = res.data.image
         predictTime.value = res.data.cost
         bugId.value = res.response_id;
-
-
         loading.value = false
       }).catch(function (err) {
         loading.value = false
-        // bug_id.value = ""
         predictTime.value = 0
       });
     })
-    // console.log(file)
-    // data.append('images', file.File);
   } else {
-    data.append('images', file);
+    data.append('image', file);
 
     IMMagicColor(data).then(res => {
-      predictImg.src = server_ip.value + res.data.out_image
+      res_image.value.src = res.data.image
       predictTime.value = res.data.cost
       bugId.value = res.response_id;
-
       loading.value = !loading.value
     }).catch(function (err) {
       loading.value = !loading.value;
@@ -295,52 +264,11 @@ const submitBug = async () => {
     console.log(res.code, res.data)
   }).catch(function (err) {
     console.log(err)
-    // loading.value = !loading.value;
   });
 };
-
-let src = ''
 </script>
 
 <style scoped>
-.demo-image__placeholder .block {
-  padding: 30px 0;
-  text-align: center;
-  border-right: solid 1px var(--el-border-color);
-  display: inline-block;
-  width: 50%;
-  box-sizing: border-box;
-  vertical-align: top;
-}
-
-.demo-image__placeholder .demonstration {
-  display: block;
-  color: var(--el-text-color-secondary);
-  font-size: 14px;
-  margin-bottom: 20px;
-}
-
-.demo-image__placeholder .el-image {
-  padding: 0 5px;
-  max-width: 300px;
-  max-height: 200px;
-}
-
-.demo-image__placeholder.image-slot {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  background: var(--el-fill-color-light);
-  color: var(--el-text-color-secondary);
-  font-size: 14px;
-}
-
-.demo-image__placeholder .dot {
-  animation: dot 2s infinite steps(3, start);
-  overflow: hidden;
-}
 .place {
   margin-right: auto;
   margin-left: auto;

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

@@ -46,7 +46,6 @@
         <h2>文字区域检测</h2>
       </el-row>
       <el-row v-loading="loading" class="small-title">
-        <!-- <p v-if="loading">处理中</p> -->
       </el-row>
       <el-row>
         <div>
@@ -73,8 +72,6 @@
                 <li v-for="(item, index) in recArr" :key="index" @click="handleClick(index, item)"
                   :style="index == selectedItem ? 'color: blue' : ''">
                   {{ item }}
-                  <!-- <el-button type="info" :icon="DocumentCopy" @click="copy(index)" plain/> -->
-                  <!-- <button @click="copy(index)" class="copy-btn">Copy</button> -->
                 </li>
               </ul>
             </el-scrollbar>
@@ -99,9 +96,6 @@ import { onMounted } from "vue";
 import useClipboard from 'vue-clipboard3'
 import VuePdfEmbed from "vue-pdf-embed";
 import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数
-// import {
-//   CopyDocument, DocumentCopy,
-// } from '@element-plus/icons-vue'
 
 let loadingTask: any;
 
@@ -112,7 +106,6 @@ const pdf_img: any = ref("")
 const state = reactive({
   source: "", //预览pdf文件地址
   pageNum: 1, //当前页面
-  // scale: 4, // 缩放比例
   numPages: 0, // 总页数
 });
 
@@ -136,11 +129,9 @@ function getPdfImage(index: number) {
       const viewport = page.getViewport({ scale: 4.0 })
       canvas.value.height = viewport.height;
       canvas.value.width = viewport.width;
-      // 画布的dom大小, 设置移动端,宽度设置铺满整个屏幕
-      // const clientWidth = document.body.clientWidth;
       const destWidth = 398;
       canvas.value.style.width = destWidth + 'px';
-      // 根据pdf每页的宽高比例设置canvas的高度
+
       canvas.value.style.height = destWidth * (viewport.height / viewport.width) + 'px';
       const ctx = canvas.value.getContext('2d');
       page.render({
@@ -332,7 +323,7 @@ const predict = async () => {
 
   if (is_pdf.value) {
     const file: any = convertCanvasToFile(canvas.value, "pdf.png").then(result => {
-      data.append('images', result);
+      data.append('image', result);
       OcrRec(data).then(res => {
         console.log(res.code)
         json_result.value = JSON.stringify(res.data, null, 4);
@@ -371,7 +362,7 @@ const predict = async () => {
       });
     })
   } else {
-    data.append('images', file);
+    data.append('image', file);
 
     OcrRec(data).then(res => {
       console.log(res.code)
@@ -423,7 +414,6 @@ const submitBug = async () => {
     console.log(res.code, res.data)
   }).catch(function (err) {
     console.log(err)
-    // loading.value = !loading.value;
   });
 };
 

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

@@ -32,8 +32,6 @@
           <div class="page-tool-item" @click="prePage">上一页</div>
           <div class="page-tool-item" @click="nextPage">下一页</div>
           <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
-        <!-- <div class="page-tool-item" @click="pageZoomOut">放大</div>
-                  <div class="page-tool-item" @click="pageZoomIn">缩小</div> -->
           <el-input type="number" v-model="pdf_page"></el-input>
           <el-button type="primary" @click="SetPdfPage" plain>页面跳转</el-button>
         </div>
@@ -64,9 +62,6 @@
                   <span v-html="item"></span>
                 </div>
               </el-scrollbar>
-            <!-- <div>
-                <el-button type="info" :icon="DocumentCopy" @click="copy(index)" v-on:mouseover="showText()" v-on:mouseout="hideText()" plain />
-                  </div> -->
             </li>
           </el-collapse-item>
         </el-collapse>
@@ -90,9 +85,6 @@ import OcrLangList from '../../../../components/OcrLangList.vue'
 import { useOcrLangStore } from '../../../../store/OcrLang';
 import { useBugIdStore } from '../../../../store/BugID';
 import useClipboard from 'vue-clipboard3';
-import {
-  DocumentCopy,
-} from '@element-plus/icons-vue'
 
 const ol = useOcrLangStore();
 const { ocr_lang } = storeToRefs(ol);
@@ -106,7 +98,6 @@ const { bug_id } = storeToRefs(bi);
 const state = reactive({
   source: "", //预览pdf文件地址
   pageNum: 1, //当前页面
-  // scale: 4, // 缩放比例
   numPages: 0, // 总页数
 });
 
@@ -148,7 +139,6 @@ const uploadImg = () => {
   try {
     const file = inputElement.files![0];
     reader.onload = () => {
-      // console.log(file.name.substring(file.name.lastIndexOf("."), file.name.length))
       const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
       if (post_ == ".pdf") {
         state.pageNum = 1;
@@ -193,11 +183,9 @@ const predict = async () => {
   data.append('lang', ocr_lang.value);
   // console.log('is_pdf' + is_pdf.value)
   if (is_pdf.value) {
-    // console.log(res.code)
-    // console.log(pdf_img)
     const file: any = convertCanvasToFile(canvas.value, "pdf.png").then(result => {
       // console.log(result)
-      data.append('images', result);
+      data.append('image', result);
       TableRec(data).then(res => {
         console.log(res.code)
         bug_id.value = res.response_id;
@@ -223,11 +211,9 @@ const predict = async () => {
         predictTime.value = 0
       });
     })
-    // console.log(file)
-    // data.append('images', file.File);
   } else {
     // console.log(file)
-    data.append('images', file);
+    data.append('image', file);
     TableRec(data).then(res => {
       console.log(res.code)
       bug_id.value = res.response_id;
@@ -263,15 +249,6 @@ function SetPdfPage() {
   }
 }
 
-let copy_text = ref("click this button to copy the html table");
-
-function showText() {
-  copy_text.value = "click it!";
-}
-
-function hideText() {
-  copy_text.value = "click this button to copy the html table";
-}
 
 const submitBug = async () => {
   if (bug_id.value == undefined || bug_id.value == "") {
@@ -331,11 +308,9 @@ function getPdfImage(index: number) {
       const viewport = page.getViewport({ scale: 4.0 })
       canvas.value.height = viewport.height;
       canvas.value.width = viewport.width;
-      // 画布的dom大小, 设置移动端,宽度设置铺满整个屏幕
-      // const clientWidth = document.body.clientWidth;
       const destWidth = 398;
       canvas.value.style.width = destWidth + 'px';
-      // 根据pdf每页的宽高比例设置canvas的高度
+
       canvas.value.style.height = destWidth * (viewport.height / viewport.width) + 'px';
       const ctx = canvas.value.getContext('2d');
       page.render({
@@ -365,18 +340,6 @@ function nextPage() {
   }
 }
 
-const { toClipboard } = useClipboard()
-
-function copy(index: any) {
-  try {
-    toClipboard(htmlArr.value[index])
-    copy_text.value = "copied!";
-    console.log('Copied to clipboard')
-  } catch (e) {
-    console.error(e)
-  }
-}
-
 </script>
 
 <style scoped lang="less">

src/store/ServerIp.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { ref } from 'vue'
 
 export const useServerIpStore = defineStore('server_ip', () => {
-  const server_ip = ref("http://localhost:7896")
+  const server_ip = ref("http://localhost:8888")
 
   return { server_ip }
 })