Changeset 35769 for main/trunk/model-interfaces-dev

Timestamp:

2021-12-08T11:05:22+13:00 (2 years ago)

Author:

cstephen

Message:

Implement thresholded image display

Location:

main/trunk/model-interfaces-dev/atea/ocr/src

Files:

• components/MainPage.vue (modified) (7 diffs)
• js/OcrService.js (modified) (5 diffs)

main/trunk/model-interfaces-dev/atea/ocr/src/components/MainPage.vue

@@ -11 +11 @@
         </div>
 
-        <div v-if="imageUrl !== null" class="image-area">
+        <div v-if="imageUrl !== null" class="main-area">
             <div class="controls">
+                <button class="btn-primary" @click="showEditor = true" :disabled="ocrInProgress">
+                    <span class="material-icons">edit</span>
+                    <span>{{ translations.get("MainPage_EditImage") }}</span>
+                </button>
+
                 <button class="btn-primary" @click="doOcr" :disabled="ocrInProgress">
                     <span class="material-icons">play_arrow</span>
                     <span>{{ translations.get("MainPage_PerformOCR") }}</span>
-                </button>
-
-                <button class="btn-primary" @click="showEditor = true" :disabled="ocrInProgress">
-                    <span class="material-icons">edit</span>
-                    <span>{{ translations.get("MainPage_EditImage") }}</span>
                 </button>
 
@@ -38 +38 @@
             </div>
 
-            <img class="image-display" :src="imageUrl" />
+            <div class="ocr-image-container">
+                <img class="ocr-image" :src="imageUrl" />
+                <img v-if="showThresholdedImage" class="ocr-image" :src="thresholdedImageUrl" />
+
+                <div v-if="thresholdedImageUrl" class="thresholded-image-controls card">
+                    <input id="chk-show-thresholded-image" type="checkbox" v-model="showThresholdedImage" />
+                    <label for="chk-show-thresholded-image">{{ translations.get('MainPage_ShowThresholdedImage') }}</label>
+
+                    <span class="body2">{{ translations.get('MainPage_ThresholdedImageDescription') }}</span>
+                </div>
+            </div>
 
             <textarea class="text-container" v-model="ocrResult" :placeholder="translations.get('MainPage_OCRHint')"
@@ -103 +113 @@
 }
 
-.image-area {
+.main-area {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -122 +132 @@
 }
 
-.image-display {
+.ocr-image-container {
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+
+    align-items: center;
+    justify-items: center;
+
+    &:hover {
+        .thresholded-image-controls {
+            opacity: 0.99;
+        }
+    }
+}
+
+.ocr-image {
     border: 1px solid #444;
     max-width: 100%;
     max-height: 80vh;
     object-fit: contain;
+    grid-row: 1;
+    grid-column: 1;
+}
+
+.thresholded-image-controls {
+    position: absolute;
+    top: 1em;
+    left: 1em;
+    max-width: 50%;
+
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    align-items: center;
+    justify-items: start;
+    gap: 0.5em;
+
+    transition-duration: var(--transition-duration);
+    opacity: 0;
+
+    span {
+        grid-column: span 2;
+    }
 }
 
@@ -160 +212 @@
             imageBuffer: null,
             imageUrl: null,
+
+            thresholdedImageUrl: null,
+            showThresholdedImage: false,
+
             ocrInProgress: false,
+            /** @type {OcrResult} */
             ocrResult: null,
+
             showEditor: false,
             ocrTextEdited: false
@@ -226 +284 @@
                 this.ocrResult = result[0].text;
                 this.ocrTextEdited = false;
+
+                const thresholdedImageBlob = await ocrService.getThresholdedImage(result[0].thresholdedImageKey);
+
+                if (this.thresholdedImageUrl !== null) {
+                    URL.revokeObjectURL(this.thresholdedImageUrl);
+                }
+
+                this.thresholdedImageUrl = URL.createObjectURL(thresholdedImageBlob);
             }
             catch (ex) {
@@ -291 +357 @@
             }
 
-            URL.revokeObjectURL(this.imageUrl);
-            this.imageUrl = null;
+            if (this.imageUrl) {
+                URL.revokeObjectURL(this.imageUrl);
+                this.imageUrl = null;
+            }
+
+            if (this.thresholdedImageUrl) {
+                URL.revokeObjectURL(this.thresholdedImageUrl);
+                this.thresholdedImageUrl = null;
+            }
+
             this.ocrInProgress = false;
             this.ocrResult = null;

main/trunk/model-interfaces-dev/atea/ocr/src/js/OcrService.js

@@ -28 +28 @@
 }
 
+export class OcrResult
+{
+    /**
+     * Initializes a new instance of the {@link OcrResult} object.
+     * @param {String} key The result key.
+     * @param {String} text The extracted text.
+     * @param {String} fileName The name of the file from which the text was extracted.
+     * @param {String} thresholdedImageKey The key that can be used to retrieve the thresholded image used in the OCR process.
+     */
+    constructor(key, text, fileName, thresholdedImageKey)
+    {
+        /** @type {String} The result key. */
+        this.key = key;
+
+        /** @type {String} The extracted text. */
+        this.text = text;
+
+        /** @type {String} The name of the file from which the text was extracted. */
+        this.fileName = fileName;
+
+        /** @type {String} The key that can be used to retrieve the thresholded image. */
+        this.thresholdedImageKey = thresholdedImageKey;
+    }
+}
+
 export class OcrOptions
 {
@@ -49 +74 @@
         /** @type {String} The URL to which query POST requests should be made. */
         if (process.env.NODE_ENV !== "production") {
-            this.queryUrl = "//localhost:8383/gs3-atea-ocr/tesseract";
+            this.queryUrl = "//localhost:8383/gs3-atea-ocr/";
         }
         else {
@@ -56 +81 @@
     }
 
-    // TODO: Needs to allow blobs, and take file name
     /**
      * Makes an OCR request.
      * @param {{image: Blob, fileName: String, options: OcrOptions}[]} images The image set to perform OCR on.
-     * @returns {Promise<{key: String, fileName: String, text: String}[]>} A JSON list of the recognised text.
+     * @returns {Promise<OcrResult[]>} A JSON list of the recognised text.
      */
     async run(images)
     {
-        const queryUrl = this.queryUrl;
+        const queryUrl = this.queryUrl + "tesseract";
 
         try
@@ -92 +116 @@
             if (!response.ok)
             {
-                log(`OCR failed  with status ${response.status} and message ${response.statusText}`, "error");
+                log(`OCR failed with status ${response.status} and message ${response.statusText}`, "error");
                 throw new OcrError(response.statusText, null, response.status);
             }
@@ -104 +128 @@
         }
     }
+
+    /**
+     * Gets a thresholded image.
+     * @param {String} key The image key
+     */
+    async getThresholdedImage(key)
+    {
+        const queryUrl = this.queryUrl + `image?key=${key}`;
+
+        try
+        {
+            const response = await fetch(queryUrl);
+
+            if (!response.ok)
+            {
+                log(`Thresholded image retrieval failed with status ${response.status} and message ${response.statusText}`, "error");
+                throw new OcrError("Thresholded image retrieval failed: " + response.statusText, null, response.status);
+            }
+
+            return await response.blob(); // TODO: Should this be arraybuffer?
+        }
+        catch (e)
+        {
+            log(`Thresholded image retrieval failed with reason ${e}`, "error");
+            throw new OcrError("Thresholded image retrieval failed", null, null)
+        }
+    }
 }