feat: 新增OCR配置,可控制功能开关和选择OCR引擎

2024-12-17 16:22:12 +08:00 · 2024-12-17 16:22:12 +08:00 · 8d332b2f8f
commit 8d332b2f8f
parent 20961e86e0
8 changed files with 180 additions and 14 deletions
--- a/src/api/setting-api.js
+++ b/src/api/setting-api.js
@ -15,6 +15,20 @@ export default {
      data
    })
  },
+  getOcrConfig(params) {
+    return request({
+      url: '/cloud/setting/ocr/config',
+      method: 'get',
+      params
+    })
+  },
+  setOcrConfig(data) {
+    return request({
+      url: '/cloud/setting/ocr/config',
+      method: 'put',
+      data
+    })
+  },
  getTranscodeConfig(params) {
    return request({
      url: '/cloud/setting/transcode/config',
--- a/src/components/TaskProgress/index.vue
+++ b/src/components/TaskProgress/index.vue
@ -45,7 +45,14 @@ export default {
      loading: false,
      tableHeader: [
        {prop: 'type', width: 100, label: '任务类型'},
-        {prop: 'name', minWidth: 100, label: '名称'},
+        {prop: 'name', minWidth: 100, label: '名称', href: {
+            url: (row) => {
+              if (row.path) {
+                return `/?path=${row.path}&highlight=${row.name}`
+              }
+            }
+          }
+        },
        {prop: 'progress', width: 200, label: '进度'},
      ]
    }
--- a/src/components/table/TableList.vue
+++ b/src/components/table/TableList.vue
@ -36,7 +36,12 @@
        tooltip-effect="dark"
      >
          <template slot-scope="scope">
-            {{ !item.formatData && !item.active ? scope.row[item.prop] : ''}}
+            <div v-if="item.href">
+              <a :href="item.href.url(scope.row)">{{ scope.row[item.prop] }}</a>
+            </div>
+            <div v-else>
+              {{ !item.formatData && !item.active ? scope.row[item.prop] : ''}}
+            </div>
            <div v-if="item.active">
              <el-button
                v-for="(o, key) in item.active"
--- a/src/locales/en_US.js
+++ b/src/locales/en_US.js
@ -67,6 +67,7 @@ export default {
    updateOnGithub: 'Update on Github',
    videoTranscoding: 'Video Transcoding',
    previewConfig: 'Preview Config',
+    ocrConfig: 'OCR Config',
    ldapAuth: 'LDAP Auth',
    startSync: 'Start scanning? ',
    confirmDeleteMenuAndRole: 'Are you sure you want to delete the current role and menu? ',
--- a/src/locales/zh_CN.js
+++ b/src/locales/zh_CN.js
@ -67,6 +67,7 @@ export default {
    updateOnGithub: '在github上更新',
    videoTranscoding: '视频转码',
    previewConfig: '预览配置',
+    ocrConfig: 'OCR配置',
    ldapAuth: 'LDAP认证',
    startSync: '是否开始扫描? ',
    confirmDeleteMenuAndRole: '您确定要删除当前角色、菜单吗? ',
--- a/src/views/setting/cloudManager.vue
+++ b/src/views/setting/cloudManager.vue
@ -74,21 +74,26 @@
              <transcode-config></transcode-config>
            </div>
          </el-tab-pane>
-          <el-tab-pane :label="$t('app.previewConfig')" name="4" class="setting-tab-panel">
+          <el-tab-pane :label="$t('app.ocrConfig')" name="4" class="setting-tab-panel">
            <div v-if="activeName === '4'">
+              <ocr-config></ocr-config>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('app.previewConfig')" name="5" class="setting-tab-panel">
+            <div v-if="activeName === '5'">
              <preview-config></preview-config>
            </div>
          </el-tab-pane>
-          <el-tab-pane :label="$t('app.ldapAuth')" name="5" class="setting-tab-panel">
-            <div v-if="activeName === '5'">
+          <el-tab-pane :label="$t('app.ldapAuth')" name="6" class="setting-tab-panel">
+            <div v-if="activeName === '6'">
              <ldap-config></ldap-config>
            </div>
          </el-tab-pane>
-          <el-tab-pane :label="$t('common.lang')" name="6" class="setting-tab-panel">
-            <div v-if="activeName === '6'">
-              <language-config></language-config>
-            </div>
-          </el-tab-pane>
+<!--          <el-tab-pane :label="$t('common.lang')" name="7" class="setting-tab-panel">-->
+<!--            <div v-if="activeName === '7'">-->
+<!--              <language-config></language-config>-->
+<!--            </div>-->
+<!--          </el-tab-pane>-->
        </el-tabs>
      </div>
    </el-card>
@ -103,6 +108,7 @@ import Logo from "@/components/Logo";
 import getPageTitle from "@/utils/get-page-title";
 import UploadImageInput from "@/components/input/UploadImageInput.vue";
 import LanguageConfig from '@/views/setting/cloudSetting/languageConfig.vue'
+import OcrConfig from '@/views/setting/cloudSetting/ocrConfig.vue'
 import PreviewConfig from '@/views/setting/cloudSetting/previewConfig.vue'
 import {mapGetters, mapState} from "vuex";
 import store from "@/store";
@ -112,7 +118,7 @@ import TranscodeConfig from "@/views/setting/cloudSetting/transcodeConfig.vue";
 import OfficeConfig from "@/views/setting/cloudSetting/officeConfig.vue";

 export default {
-  components: { LanguageConfig, PreviewConfig, OfficeConfig, TranscodeConfig, LdapConfig, TaskProgress, UploadImageInput, Logo},
+  components: { OcrConfig, LanguageConfig, PreviewConfig, OfficeConfig, TranscodeConfig, LdapConfig, TaskProgress, UploadImageInput, Logo},
  data() {
    return {
      activeName: '1',
--- a/src/views/setting/cloudSetting/ocrConfig.vue
+++ b/src/views/setting/cloudSetting/ocrConfig.vue
@ -0,0 +1,132 @@
+<template>
+  <div class="container">
+    <div class="form-instruction">
+      <p>此功能主要用于读取PDF文档内容，以便进行全文搜索</p>
+    </div>
+    <div>
+
+    </div>
+    <el-form :rules="rules" ref="transcodeConfigForm" :model="configFormData" label-width="120px" size="small"
+             style="width: 520px" autocomplete="off">
+      <el-form-item label="功能状态" prop="enable">
+        <el-switch
+          v-model="configFormData.enable"
+          active-text="启用"
+          active-color="#13ce66"
+          inactive-color="#ff4949"
+          inactive-text="禁用">
+        </el-switch>
+      </el-form-item>
+
+      <el-form-item label="OCR引擎" prop="ocrEngine">
+        <el-radio-group v-model="configFormData.ocrEngine" size="medium" @input="changeOcrEngine">
+          <el-radio border label="tesseract">Tesseract</el-radio>
+          <el-radio border label="ocrLiteOnnx">OcrLiteOnnx</el-radio>
+        </el-radio-group>
+        <div class="form-instruction">
+          <span><a href="https://github.com/tesseract-ocr/tesseract" target="_blank"><svg-icon icon-class="wailian"/>Tesseract</a> </span>
+          <span> : 中文识别率高偏低，但是对低性能设备友好</span>
+        </div>
+        <div class="form-instruction single-line">
+          <span><a href="https://github.com/DayBreak-u/chineseocr_lite" target="_blank"><svg-icon icon-class="wailian"/>OcrLiteOnnx</a> </span>
+          <span> : 中文识别率高，但是对CPU性能要求较高，低性能CPU的识别速度会相对较慢</span>
+        </div>
+        <div class="form-instruction">
+          <span>如果两者识别速度相近，建议选择OcrLiteOnnx。判断方法: </span>
+        </div>
+        <div class="form-instruction">
+          <div>1.开启OCR功能</div>
+          <div>2.找一个纯图片的PDF文件，对其重建索引</div>
+          <div>3.使用两个不同的OCR引擎，并比较耗时</div>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="最大并发数" prop="maxTasks">
+        <div class="form-item-flex">
+          <el-input-number v-model="configFormData.maxTasks" :disabled="maxTasksDisable" :min="1" :max="8" label="最大并发数"></el-input-number>
+          <div>
+            <el-tooltip class="item" effect="dark" content="OCR识别最大并发任务数, 默认为1(通常建议保持不变。如果CPU有剩余性能，可以适当增加以加快识别速度。)" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" v-loading="saveConfigLoading" @click="saveConfig">保存配置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+
+import settingApi from '@/api/setting-api'
+
+export default {
+  name: 'ocrConfig',
+  props: {
+    data: {
+      type: Array,
+      default: []
+    },
+  },
+  data() {
+    return {
+      saveConfigLoading: false,
+      cancelTaskLoading: false,
+      maxTasksDisable: false,
+      configFormData: {
+        enable: false,
+        maxTasks: 1,
+        ocrEngine: 'tesseract'
+      },
+      configEnableOptions: [{
+        value: true,
+        label: '启用'
+      }, {
+        value: false,
+        label: '禁用'
+      }],
+      rules: {
+      }
+    }
+  },
+  mounted() {
+    this.getOcrConfig()
+  },
+  methods: {
+    changeOcrEngine() {
+      if (this.configFormData.ocrEngine === 'ocrLiteOnnx') {
+        this.configFormData.maxTasks = 1
+        this.maxTasksDisable = true
+      } else {
+        this.maxTasksDisable = false
+      }
+    },
+    getOcrConfig() {
+      settingApi.getOcrConfig().then(res => {
+        this.configFormData = res.data
+      })
+    },
+    saveConfig() {
+      this.saveConfigLoading = true
+      settingApi.setOcrConfig(this.configFormData).then(() => {
+        this.saveConfigLoading = false
+        this.$message.success('保存成功')
+      }).catch(() => {
+        this.saveConfigLoading = false
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "src/styles/setting";
+.container {
+  padding: 0 !important;
+}
+.form-instruction.single-line {
+  white-space: nowrap;
+}
+</style>
--- a/src/views/setting/cloudSetting/transcodeConfig.vue
+++ b/src/views/setting/cloudSetting/transcodeConfig.vue
@ -12,11 +12,11 @@
        </el-switch>
      </el-form-item>

-      <el-form-item label="最大线程数" prop="maxThreads">
+      <el-form-item label="最大并发数" prop="maxThreads">
        <div class="form-item-flex">
          <el-input-number v-model="configFormData.maxThreads" :min="1" :max="8" label="最大线程数"></el-input-number>
          <div>
-            <el-tooltip class="item" effect="dark" content="最多同时的转码的任务数, 默认为1(可根据具体硬件配置酌情增加)" placement="top">
+            <el-tooltip class="item" effect="dark" content="最大并发转码任务数, 默认为1(根据硬件性能可适当增加)" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
@ -150,7 +150,7 @@ export default {
      saveConfigLoading: false,
      cancelTaskLoading: false,
      configFormData: {
-        enable: true,
+        enable: false,
        bitrate: undefined,
        height: undefined,
        frameRate: undefined,