[web_demo][ocr] 与后端真实api接口联调，完善demo页面逻辑

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "axios": "^1.2.2",
         "element-plus": "^2.2.28",
+        "form-data": "^4.0.0",
         "less": "^4.1.3",
         "pinia": "^2.0.29",
         "vue": "^3.2.45",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "axios": "^1.2.2",
     "element-plus": "^2.2.28",
+    "form-data": "^4.0.0",
     "less": "^4.1.3",
     "pinia": "^2.0.29",
     "vue": "^3.2.45",

src/api/api.ts

@@ -1,6 +1,6 @@
 import server from "./index";
 
-interface InputData {
+interface InputData<T> {
   image: File;
 }
 
@@ -10,13 +10,18 @@ interface PredictRes<T>{
   data: T
 }
 
+interface OcrInput {
+  FormData: FormData
+}
+
 interface MagciColorRes {
   image: string;
 }
 
 interface OcrRecRes {
-  image: string;
-  text: string[];
+  boxes: any
+  rec_scores: any
+  text: any
 }
 
 interface TableRecRes {
@@ -24,13 +29,13 @@ interface TableRecRes {
   json: string;
 }
 
-export const IMMagicColor = (data: InputData): Promise<PredictRes<MagciColorRes>> =>
+export const IMMagicColor = (data: InputData<OcrInput>): Promise<PredictRes<MagciColorRes>> =>
   server.post("/magicColor", data);
 
-export const OcrRec = (data: InputData): Promise<PredictRes<OcrRecRes>> =>
-  server.post("/ocr", data);
+export const OcrRec = (data: FormData): Promise<OcrRecRes> => 
+  server.post("/v1/ocr", data);
 
-export const TableRec = (data: InputData): Promise<PredictRes<TableRecRes>> =>
+export const TableRec = (data: InputData<OcrInput>): Promise<PredictRes<TableRecRes>> =>
   server.post("/TableRec", data);
 
 export {};

src/api/index.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const server = axios.create({
-  baseURL: "http://192.168.10.73:3000",
+  baseURL: "http://192.168.10.11:8000",
 });
 
 server.interceptors.request.use(

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

@@ -12,7 +12,14 @@
         <h4>上传文本图片</h4>
       </el-row>
       <el-row>
-        <el-input type="file" v-model="fileName" @change="uploadImg"></el-input>
+        <div class="common-layout">
+          <el-container>
+            <el-input type="file" v-model="fileName" @change="uploadImg"></el-input>
+            <el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable class="inline-input w-50"
+              placeholder="Please Input" @select="handleSelect" />
+            <el-button type="primary" @click="predict">Predict</el-button>
+          </el-container>
+        </div>
       </el-row>
       <el-row>
         <!-- 用于展示图片 -->
@@ -29,10 +36,7 @@
         <h2 v-if="loading">处理中</h2>
       </el-row>
       <el-row>
-        <el-button type="primary" @click="predict">Predict</el-button>
-      </el-row>
-      <el-row>
-        <section v-show="!loading"> 耗时：{{ predictTime }} s</section>
+        <section v-show="!loading"> 耗时：{{ predictTime }} ms.</section>
       </el-row>
       <el-row>
         <!-- <canvas id="canvas" class="show-area"></canvas> -->
@@ -43,7 +47,18 @@
       <el-row class="small-title">
         <h2>识别结果展示</h2>
       </el-row>
-      <span v-html="result"></span>
+      <div class="demo-collapse">
+        <el-collapse v-model="activeName" accordion>
+          <el-collapse-item title="JSON识别结果" name="1">
+            <span v-html="json_result"></span>
+          </el-collapse-item>
+          <el-collapse-item title="识别结果" name="2">
+            <el-scrollbar height="600px">
+              <span v-html="result"></span>
+            </el-scrollbar>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
     </el-col>
   </el-row>
 </template>
@@ -61,8 +76,49 @@ const canvas = ref(null as unknown as HTMLCanvasElement);
 
 const result = ref("");
 
+interface RestaurantItem {
+  value: string
+}
+
+const state1 = ref('')
+
+const activeName = ref('2')
+const json_result = ref("");
+
+const restaurants = ref<RestaurantItem[]>([])
+const querySearch = (queryString: string, cb: any) => {
+  const results = queryString
+    ? restaurants.value.filter(createFilter(queryString))
+    : restaurants.value
+  // call callback function to return suggestions
+  cb(results)
+}
+const createFilter = (queryString: string) => {
+  return (restaurant: RestaurantItem) => {
+    return (
+      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+    )
+  }
+}
+const loadAll = () => {
+  return [
+    { value: 'chinese' },
+    { value: 'chinese-tra' },
+    { value: 'english' },
+    { value: 'korea' },
+    { value: 'japan' },
+    { value: 'ladin' },
+    { value: 'hindi' },
+  ]
+}
+
+const handleSelect = (item: RestaurantItem) => {
+  console.log(item)
+}
+
 onMounted(async () => {
   canvas.value = document.getElementById("canvas") as HTMLCanvasElement;
+  restaurants.value = loadAll()
 });
 
 const uploadImg = () => {
@@ -103,15 +159,17 @@ const predict = async () => {
   const file = inputElement.files![0];
 
   loading.value = !loading.value
+  var data = new FormData();
+  data.append('lang', state1.value);
+  // console.log(state1.value)
+  data.append('images', file);
 
-  OcrRec({
-    image: file,
-  }).then(res => {
-    console.log(res.code)
-    predictImg.src = res.data.image
-    predictTime.value = res.costTime
-    result.value = res.data.text.reduce((total, cur) => total + `<p>${cur}</p>`);
-    loading.value = !loading.value
+  OcrRec(data).then(res => {
+    console.log(res)
+    json_result.value = JSON.stringify(res);
+    // console.log(json_text)
+    result.value = res.text.reduce((total: any, cur: any) => total + `<p>${cur}</p>`);
+    loading.value = !loading.value;
   })
 };
 

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

@@ -14,9 +14,6 @@
       <el-row>
         <el-input type="file" v-model="fileName" @change="uploadImg"></el-input>
       </el-row>
-      <el-row>
-        <el-button type="primary" @click="predict">Predict</el-button>
-      </el-row>
       <el-row>
         <!-- 用于展示图片 -->
         <img id="show-img" class="show-area" />
@@ -26,6 +23,9 @@
       <div>
         <PDFView :pdfUrl="jsPdf" />
       </div>
+      <el-row>
+        <el-button type="primary" @click="predict">Predict</el-button>
+      </el-row>
     </el-col>
     <el-col :span="12" class="place">
       <el-row class="small-title">
@@ -61,7 +61,7 @@ const activeName = ref('2')
 const canvas = ref(null as unknown as HTMLCanvasElement);
 
 const html_result = ref("");
-const json_result = ref("")
+const json_result = ref("");
 
 onMounted(async () => {
   canvas.value = document.getElementById("canvas") as HTMLCanvasElement;