Browse Source

[web_demo] 部分UI优化

yanxin 1 year ago
parent
commit
51291311d2

+ 2 - 2
src/MenuView.vue

@@ -42,7 +42,7 @@
           <el-col :span="3">🔥</el-col>
           <span>PDF转Word</span>
         </el-menu-item>
-        <el-menu-item index="9" @click="routerJump('/UIEX')">
+        <el-menu-item index="9" @click="routerJump('/InformationExtraction')">
           <el-col :span="3">🔥</el-col>
           <span>通用型文档信息抽取</span>
         </el-menu-item>
@@ -50,7 +50,7 @@
     </el-col>
   </el-row>
   <el-link style="position: absolute; bottom: 5%; left: 0%;" type="primary" href="https://documentaidocs.readthedocs.io/en/latest/" target="_blank">DocumentAI 在线文档</el-link>
-  <el-tag size="large" style="position: absolute; bottom: 0%; left: 0%;">V 1.1.1</el-tag>
+  <el-tag size="large" style="position: absolute; bottom: 0%; left: 0%;">V 1.2.0</el-tag>
 </template>
 
 <style scoped lang="less">

BIN
src/assets/uie(3).jpg


+ 1 - 3
src/components/ImageList.vue

@@ -44,7 +44,6 @@ import Stamp3 from '@/assets/stamp(3).jpg'
 import UIE1 from '@/assets/uie(1).jpg'
 import UIE2 from '@/assets/uie(2).jpg'
 import UIE3 from '@/assets/uie(3).jpg'
-import UIE4 from '@/assets/uie(4).jpg'
 
 const props = defineProps({
     module: String,
@@ -88,8 +87,7 @@ onMounted(async () => {
     } else if (props.module == 'uie') {
         images.value.push(UIE1)
         images.value.push(UIE2)
-        // images.value.push(UIE3)
-        // images.value.push(UIE4)
+        images.value.push(UIE3)
     }
     imageClick(0)
     image_item_index.value = 0

File diff suppressed because it is too large
+ 1 - 1
src/dist/assets/index-99f74905.css


File diff suppressed because it is too large
+ 2 - 2
src/dist/assets/index-937eedb5.js


BIN
src/dist/assets/uie(3)-9bacd680.jpg


+ 2 - 2
src/dist/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DocumentAI Web Demo</title>
-    <script type="module" crossorigin src="./assets/index-937eedb5.js"></script>
-    <link rel="stylesheet" href="./assets/index-99f74905.css">
+    <script type="module" crossorigin src="./assets/index-8f0d8d07.js"></script>
+    <link rel="stylesheet" href="./assets/index-506777a0.css">
   </head>
   <body>
     <div id="app"></div>

+ 1 - 1
src/pages/main/router/index.ts

@@ -53,7 +53,7 @@ const router = createRouter({
       component: PdfToWord,
     },
     {
-      path: "/UIEX",
+      path: "/InformationExtraction",
       name: "UIEX",
       component: UIEX,
     }

+ 73 - 59
src/pages/main/views/Convert/PdfToWord.vue

@@ -1,24 +1,24 @@
 <template>
-    <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 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>
-  </template>
+  </div>
+</template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
@@ -45,51 +45,60 @@ 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;
-    }
+  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");
+  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
-    });
+  PDFToWord(api_pdf_to_word.value, data).then(res => {
+    loading.value = !loading.value;
+    console.log(res)
+    output_path.value = ''
+    predictTime.value = 0
+    if (res.code == 400) {
+      alert('pdf页面超过100页!避免转换时间过长请输入少于100页的pdf文件!')
+      return
+    } else if (res.code == 401) {
+      alert('输入了非法的pdf页面范围!请输入正确的pdf页面范围!')
+      return
+    }
+    predictTime.value = res.data.cost;
+    output_path.value = res.data.file_path;
+  }).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文件并等待成功转换')
+  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>
 
@@ -98,6 +107,7 @@ const download = async () => {
   width: 100%;
   height: 100%;
 }
+
 .common-layout {
   width: 100%;
   height: 100%;
@@ -106,20 +116,24 @@ const download = async () => {
   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;
 }

+ 18 - 15
src/pages/main/views/NLP/UIEX.vue

@@ -26,9 +26,6 @@
             <el-row>
                 <p>实体抽取:实体类别之间以';'分割,例如 <strong>人物;组织机构</strong></p>
             </el-row>
-            <el-row style="margin-bottom: 20px;">
-                关系抽取:需配置主体和关系类别,中间以'|'分割,例如 <strong>人物|出生时间;人物|邮箱</strong>
-            </el-row>
             <el-row>
                 <div class="container">
                     <div class="box">
@@ -50,11 +47,13 @@
                 <el-button type="primary" style="width: 45%;" :loading="loading" @click="ClearInput">Clear</el-button>
                 <el-button type="primary" style="width: 45%;" :loading="loading" @click="Predict">Predict</el-button>
             </el-row>
-            <el-row v-show="outputValue">
+            <el-row v-show="jsonData">
                 <el-card style="width: 100%;">
-                    <el-scrollbar height="600px">
-                        <pre>{{ outputValue }}</pre>>
-                    </el-scrollbar>
+                    <ul>
+                        <li v-for="(value, key) in jsonData" :key="key">
+                            {{ key }}: {{ value[0].text }}
+                        </li>
+                    </ul>
                 </el-card>
             </el-row>
         </el-col>
@@ -76,17 +75,18 @@ import { UIEX } from '../../../../api/api'
 
 import { ref } from 'vue'
 
-const uie_textes = ['销售方|名称;销售方|纳税人识别号;购买方|名称;购买方|纳税人识别号;金额;价税合计;开票日期;发票代码;发票号码', 
-                    '姓名;性别;出生地;民族;籍贯;出生日期;宗教信仰;公民身份证件编号;身高;血型;文化程度;婚姻状况;兵役状况;服务处所;职业', 
-                    '', 
-                    '',
-                    '']
+const uie_textes = [
+    '销售方名称;销售方纳税人识别号;购买方名称;购买方纳税人识别号;金额;单价;价税合计;小写;开票日期;发票代码;发票号码;销售方地址、电话',
+    '姓名;性别;出生地;民族;籍贯;出生日期;宗教信仰;公民身份证件编号;身高;血型;文化程度;婚姻状况;兵役状况;服务处所;职业',
+    '繳費日期;繳費總金額;經常度數;流動電費;電子賬單優惠減收金額;服務單位;服務地址']
 
 const si = useServerStore();
 const { api_uiex } = storeToRefs(si);
 const my_canvas = useCanvasImgStore();
 const { input_file, image_item_index } = storeToRefs(my_canvas);
 
+const jsonData: any = ref(null)
+
 const inputValue = ref("");
 const outputValue = ref("");
 const ocrLanguage = ref(1);
@@ -94,6 +94,7 @@ let loading = ref(false)
 
 function ClearInput() {
     inputValue.value = ""
+    image_item_index.value = -1
 }
 
 const Predict = async () => {
@@ -115,10 +116,12 @@ const Predict = async () => {
     UIEX(api_uiex.value, data).then(res => {
         loading.value = !loading.value;
         try {
-            const obj = JSON.parse(res.data.result)
-            outputValue.value = JSON.stringify(obj, null, 2)
+            console.log(res.data.result[0])
+            jsonData.value = res.data.result[0]
+            console.log(jsonData.value)
+            outputValue.value = '1'
         } catch (e) {
-            outputValue.value = res.data.result
+            console.log(e)
         }
     }).catch(err => {
         console.log(err)