Home Explore Help
Register Sign In
Others
/
DocumentAIKit
4
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

[web_demo] 支持动态设置api端口

yanxin 1 year ago
parent
37614660e4
commit
944220ab16
13 changed files with 290 additions and 195 deletions
Split View Show Diff Stats
  1. 10 10
      src/api/api.ts
  2. 1 3
      src/api/index.ts
  3. 6 6
      src/components/BugButton.vue
  4. 1 1
      src/dist/assets/index-9e3c8667.css
  5. 157 157
      src/dist/assets/index-ecc43e46.js
  6. 2 2
      src/dist/index.html
  7. 50 0
      src/main.ts
  8. 14 3
      src/pages/main/views/Detection/LayoutAnalysis.vue
  9. 14 6
      src/pages/main/views/ImageProcess/magicColor.vue
  10. 13 3
      src/pages/main/views/Recognize/ocr.vue
  11. 13 3
      src/pages/main/views/Recognize/tableRec.vue
  12. 1 1
      src/store/ServerIp.ts
  13. 8 0
      src/store/ServerPort.ts

+ 10 - 10
src/api/api.ts
View File 

@@ -38,20 +38,20 @@ interface TableRecRes {
 
 }
 
 
 export const IMMagicColor = (
 
+  api: string,
 
   data: FormData
 
-): Promise<PredictRes<MagciColorRes>> =>
 
-  server.post("/v1/image_process/magic_color", data);
 
+): Promise<PredictRes<MagciColorRes>> => server.post(api, data);
 
 
-export const Detection = (data: FormData): Promise<DetectionRes> =>
 
-  server.post("/v1/detection/layout_parser", data);
 
+export const Detection = (api: string, data: FormData): Promise<DetectionRes> =>
 
+  server.post(api, data);
 
 
-export const OcrRec = (data: FormData): Promise<OcrRecRes> =>
 
-  server.post("/v1/ocr", data);
 
+export const OcrRec = (api: string, data: FormData): Promise<OcrRecRes> =>
 
+  server.post(api, data);
 
 
-export const TableRec = (data: FormData): Promise<TableRecRes> =>
 
-  server.post("/v1/table_rec", data);
 
+export const TableRec = (api: string, data: FormData): Promise<TableRecRes> =>
 
+  server.post(api, data);
 
 
-export const SubmitBug = (data: any): Promise<OcrRecRes> =>
 
-  server.get("/submitBug", data);
 
+export const SubmitBug = (api: string, data: any): Promise<OcrRecRes> =>
 
+  server.get(api, data);
 
 
 export {};

+ 1 - 3
src/api/index.ts
View File 

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

+ 6 - 6
src/components/BugButton.vue
View File 

@@ -15,11 +15,11 @@ const submitBug = async () => {
 
     return;
 
   }
 
 
-  SubmitBug(bugId.bug_id).then(res => {
 
-    console.log(res.code, res.data)
 
-  }).catch(function (err) {
 
-    console.log(err)
 
-    // loading.value = !loading.value;
 
-  });
 
+  // SubmitBug(api, bugId.bug_id).then(res => {
 
+  //   console.log(res.code, res.data)
 
+  // }).catch(function (err) {
 
+  //   console.log(err)
 
+  //   // loading.value = !loading.value;
 
+  // });
 
 };
 
 </script>

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


File diff suppressed because it is too large
+ 157 - 157
src/dist/assets/index-ecc43e46.js


+ 2 - 2
src/dist/index.html
View File 

@@ -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-ecc43e46.js"></script>
 
-    <link rel="stylesheet" href="./assets/index-9e3c8667.css">
 
+    <script type="module" crossorigin src="./assets/index-fc713686.js"></script>
 
+    <link rel="stylesheet" href="./assets/index-dde8a1a6.css">
 
   </head>
 
   <body>
 
     <div id="app"></div>

+ 50 - 0
src/main.ts
View File 

@@ -4,6 +4,9 @@ import "element-plus/dist/index.css";
 
 import App from "./App.vue";
 
 import router from "./pages/main/router";
 
 import { createPinia } from "pinia";
 
+import { storeToRefs } from "pinia";
 
+import { useServerIpStore } from "./store/ServerIp";
 
+import { useServerPortStore } from "./store/ServerPort";
 
 
 const app = createApp(App);
 
 const pinia = createPinia();
 
@@ -12,3 +15,50 @@ app.use(pinia);
 
 app.use(ElementPlus);
 
 app.use(router);
 
 app.mount("#app");
 
+
 
+const si = useServerIpStore();
 
+const { server_ip } = storeToRefs(si);
 
+const sp = useServerPortStore();
 
+const { server_port } = storeToRefs(sp);
 
+
 
+const xhr = new XMLHttpRequest();
 
+xhr.open("GET", window.location.href);
 
+xhr.onreadystatechange = function () {
 
+  if (xhr.readyState === XMLHttpRequest.DONE) {
 
+    if (xhr.status === 200) {
 
+      const headers = xhr.getAllResponseHeaders();
 
+      let portRegExp: RegExp = /port:\s*(\d+)/i;
 
+      let matchResult: RegExpExecArray | null = portRegExp.exec(headers);
 
+      if (matchResult) {
 
+        let portValue: string = matchResult[1];
 
+        server_port.value = ":" + portValue;
 
+
 
+        // console.log(`当前端口为：${server_port.value}`);
 
+        // console.log(`当前ip为：${server_ip.value}`);
 
+      }
 
+      // const port = headers.match(/port: (\d+)/i)[1];
 
+      // console.log("Port:", headers);
 
+    } else {
 
+      console.error("There was a problem with the request.");
 
+    }
 
+  }
 
+};
 
+xhr.send();
 
+
 
+// fetch(window.location.href)
 
+//   .then((response) => {
 
+//     if (!response.ok) {
 
+//       throw new Error("Network response was not ok");
 
+//     }
 
+//     const headers = response.headers;
 
+//     const port = headers.get("port");
 
+//     console.log("headers:", headers);
 
+
 
+//     server_port.value = port ? ":" + port : ":7896";
 
+
 
+//     console.log(`当前端口为：${server_port.value}`);
 
+//     console.log(`当前ip为：${server_ip.value}`);
 
+//   })
 
+//   .catch((error) => {
 
+//     console.error("There was a problem with the fetch operation: ", error);
 
+//   });

+ 14 - 3
src/pages/main/views/Detection/LayoutAnalysis.vue
View File 

@@ -88,6 +88,17 @@ import {
 
   ArrowRight,
 
 } from '@element-plus/icons-vue'
 
 
+import { storeToRefs } from 'pinia'
 
+import { useServerIpStore } from '../../../../store/ServerIp';
 
+import { useServerPortStore } from '../../../../store/ServerPort';
 
+
 
+const si = useServerIpStore();
 
+const { server_ip } = storeToRefs(si);
 
+const sp = useServerPortStore();
 
+const { server_port } = storeToRefs(sp);
 
+
 
+const api = "http://" + server_ip.value + server_port.value + "/v1/detection/layout_parser";
 
+
 
 let loadingTask: any;
 
 const is_pdf = ref(false);
 
 const pdf_page = ref(1);
 
@@ -305,7 +316,7 @@ const predict = async () => {
 
   if (is_pdf.value) {
 
     const file: any = convertCanvasToFile(canvas.value, "pdf.png").then(result => {
 
       data.append('image', result);
 
-      Detection(data).then(res => {
 
+      Detection(api, data).then(res => {
 
         console.log(res.code)
 
         json_result.value = JSON.stringify(res.data, null, 4);
 
         console.log(res.data);
 
@@ -353,7 +364,7 @@ const predict = async () => {
 
   } else {
 
     data.append('image', file);
 
 
-    Detection(data).then(res => {
 
+    Detection(api, data).then(res => {
 
       console.log(res.code)
 
       json_result.value = JSON.stringify(res.data, null, 4);
 
       console.log(res.data);
 
@@ -407,7 +418,7 @@ const submitBug = async () => {
 
     return;
 
   }
 
 
-  SubmitBug(bugId.value).then(res => {
 
+  SubmitBug(api, bugId.value).then(res => {
 
     console.log(res.code, res.data)
 
   }).catch(function (err) {
 
     console.log(err)

+ 14 - 6
src/pages/main/views/ImageProcess/magicColor.vue
View File 

@@ -62,13 +62,22 @@
 
 
 <script lang="ts" setup>
 
 import { IMMagicColor, SubmitBug } from '../../../../api/api'
 
-import { useServerIpStore } from '../../../../store/ServerIp';
 
-import { storeToRefs } from 'pinia'
 
 import { reactive, ref } from 'vue'
 
 import { onMounted } from "vue";
 
 import VuePdfEmbed from "vue-pdf-embed";
 
 import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数
 
 
+import { storeToRefs } from 'pinia'
 
+import { useServerIpStore } from '../../../../store/ServerIp';
 
+import { useServerPortStore } from '../../../../store/ServerPort';
 
+
 
+const si = useServerIpStore();
 
+const { server_ip } = storeToRefs(si);
 
+const sp = useServerPortStore();
 
+const { server_port } = storeToRefs(sp);
 
+
 
+const api = "http://" + server_ip.value + server_port.value + "/v1/image_process/magic_color";
 
+
 
 let loadingTask: any;
 
 const pdf_page = ref(1);
 
 const pdf_img: any = ref("")
 
@@ -227,8 +236,7 @@ const predict = () => {
 
     const file: any = convertCanvasToFile(canvas.value, "pdf.png").then(result => {
 
       console.log(result)
 
       data.append('image', result);
 
-      IMMagicColor(data).then(res => {
 
-        console.log(res.code)
 
+      IMMagicColor(api, data).then(res => {
 
         res_image.value.src = res.data.image
 
         predictTime.value = res.data.cost
 
         bugId.value = res.response_id;
 
@@ -241,7 +249,7 @@ const predict = () => {
 
   } else {
 
     data.append('image', file);
 
 
-    IMMagicColor(data).then(res => {
 
+    IMMagicColor(api, data).then(res => {
 
       res_image.value.src = res.data.image
 
       predictTime.value = res.data.cost
 
       bugId.value = res.response_id;
 
@@ -260,7 +268,7 @@ const submitBug = async () => {
 
     return;
 
   }
 
 
-  SubmitBug(bugId.value).then(res => {
 
+  SubmitBug(api, bugId.value).then(res => {
 
     console.log(res.code, res.data)
 
   }).catch(function (err) {
 
     console.log(err)

+ 13 - 3
src/pages/main/views/Recognize/ocr.vue
View File 

@@ -97,6 +97,16 @@ import useClipboard from 'vue-clipboard3'
 
 import VuePdfEmbed from "vue-pdf-embed";
 
 import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数
 
 
+import { useServerIpStore } from '../../../../store/ServerIp';
 
+import { useServerPortStore } from '../../../../store/ServerPort';
 
+
 
+const si = useServerIpStore();
 
+const { server_ip } = storeToRefs(si);
 
+const sp = useServerPortStore();
 
+const { server_port } = storeToRefs(sp);
 
+
 
+const api = "http://" + server_ip.value + server_port.value + "/v1/ocr";
 
+
 
 let loadingTask: any;
 
 
 const is_pdf = ref(false);
 
@@ -324,7 +334,7 @@ const predict = async () => {
 
   if (is_pdf.value) {
 
     const file: any = convertCanvasToFile(canvas.value, "pdf.png").then(result => {
 
       data.append('image', result);
 
-      OcrRec(data).then(res => {
 
+      OcrRec(api, data).then(res => {
 
         console.log(res.code)
 
         json_result.value = JSON.stringify(res.data, null, 4);
 
         rec_result.value = res.data.text.reduce((total: any, cur: any) => total + `<p>${cur}</p>`);
 
@@ -364,7 +374,7 @@ const predict = async () => {
 
   } else {
 
     data.append('image', file);
 
 
-    OcrRec(data).then(res => {
 
+    OcrRec(api, data).then(res => {
 
       console.log(res.code)
 
       json_result.value = JSON.stringify(res.data, null, 4);
 
       rec_result.value = res.data.text.reduce((total: any, cur: any) => total + `<p>${cur}</p>`);
 
@@ -410,7 +420,7 @@ const submitBug = async () => {
 
   }
 
 
 
-  SubmitBug(bugId.value).then(res => {
 
+  SubmitBug(api, bugId.value).then(res => {
 
     console.log(res.code, res.data)
 
   }).catch(function (err) {
 
     console.log(err)

+ 13 - 3
src/pages/main/views/Recognize/tableRec.vue
View File 

@@ -86,6 +86,16 @@ import { useOcrLangStore } from '../../../../store/OcrLang';
 
 import { useBugIdStore } from '../../../../store/BugID';
 
 import useClipboard from 'vue-clipboard3';
 
 
+import { useServerIpStore } from '../../../../store/ServerIp';
 
+import { useServerPortStore } from '../../../../store/ServerPort';
 
+
 
+const si = useServerIpStore();
 
+const { server_ip } = storeToRefs(si);
 
+const sp = useServerPortStore();
 
+const { server_port } = storeToRefs(sp);
 
+
 
+const api = "http://" + server_ip.value + server_port.value + "/v1/table_rec";
 
+
 
 const ol = useOcrLangStore();
 
 const { ocr_lang } = storeToRefs(ol);
 
 
@@ -186,7 +196,7 @@ const predict = async () => {
 
     const file: any = convertCanvasToFile(canvas.value, "pdf.png").then(result => {
 
       // console.log(result)
 
       data.append('image', result);
 
-      TableRec(data).then(res => {
 
+      TableRec(api, data).then(res => {
 
         console.log(res.code)
 
         bug_id.value = res.response_id;
 
         predictTime.value = res.data.cost;
 
@@ -214,7 +224,7 @@ const predict = async () => {
 
   } else {
 
     // console.log(file)
 
     data.append('image', file);
 
-    TableRec(data).then(res => {
 
+    TableRec(api, data).then(res => {
 
       console.log(res.code)
 
       bug_id.value = res.response_id;
 
       predictTime.value = res.data.cost;
 
@@ -256,7 +266,7 @@ const submitBug = async () => {
 
     return;
 
   }
 
 
-  SubmitBug(bug_id.value).then(res => {
 
+  SubmitBug(api, bug_id.value).then(res => {
 
     console.log(res.code, res.data)
 
   }).catch(function (err) {
 
     console.log(err)

+ 1 - 1
src/store/ServerIp.ts
View File 

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

+ 8 - 0
src/store/ServerPort.ts
View File 

@@ -0,0 +1,8 @@
 
+import { defineStore } from 'pinia';
 
+import { ref } from 'vue'
 
+
 
+export const useServerPortStore = defineStore('server_port', () => {
 
+  const server_port = ref(":7896")
 
+
 
+  return { server_port }
 
+})