fix ocr

Author: ttop32

doc/description.md

@@ -19,6 +19,9 @@ Mouseover Translate Any Language At Once
 English, Russian, Japanese, Chinese and so on
 
 # Change Log
+- 0.1.194
+  - Fix Shadow root image ocr not working
+  - Enhance performance speed for OCR
 - 0.1.193
   - Fix OCR reprocess conflict  
   - Portuguese, Brazilian localization (contributed by EdsonBittencourt)

src/contentScript.js

@@ -887,7 +887,7 @@ function applyStyleSetting() {
       visibility: visible  !important;
       white-space: pre-line;
     }
-    .tippy-box[data-theme~="custom"], .tippy-content *{
+    .tippy-box[data-theme~="custom"], .tippy-box[data-theme~="ocr"], .tippy-content *{
       font-size: ${setting["tooltipFontSize"]}px  !important;
       text-align: ${setting["tooltipTextAlign"]} !important;
       overflow-wrap: break-word !important;
@@ -907,8 +907,16 @@ function applyStyleSetting() {
       box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
       opacity: 1.0; /* Adjusted opacity for transparency */
     }
+    .tippy-box[data-theme~="ocr"]{
+      max-width: $1000px  !important;
+      backdrop-filter: blur(${setting["tooltipBackgroundBlur"]}px) !important;
+      background-color: ${setting["tooltipBackgroundColor"]} !important;
+      border: 1px solid ${setting["tooltipBorderColor"]}; 
+      box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+      opacity: 1.0; /* Adjusted opacity for transparency */
+    }
     .tippy-box[data-theme~="transparent"] {
-      max-width: 200px  !important;
+      max-width: $1000px  !important;
       backdrop-filter: blur(${setting["tooltipBackgroundBlur"]}px) !important;
       background-color: ${setting["tooltipBackgroundColor"]} !important;
       border: 1px solid ${setting["tooltipBorderColor"]}; 
@@ -921,18 +929,19 @@ function applyStyleSetting() {
       visibility: visible  !important;
       position: absolute !important;
     }
-    .tippy-box[data-theme~='custom'][data-placement^='top'] > .tippy-arrow::before { 
+    .tippy-box[data-theme~='custom'][data-placement^='top'] > .tippy-arrow::before, .tippy-box[data-theme~='ocr'][data-placement^='top'] > .tippy-arrow::before { 
       border-top-color: ${setting["tooltipBackgroundColor"]} !important;
     }
-    .tippy-box[data-theme~='custom'][data-placement^='bottom'] > .tippy-arrow::before {
+    .tippy-box[data-theme~='custom'][data-placement^='bottom'] > .tippy-arrow::before, .tippy-box[data-theme~='ocr'][data-placement^='bottom'] > .tippy-arrow::before {
       border-bottom-color: ${setting["tooltipBackgroundColor"]} !important;
     }
-    .tippy-box[data-theme~='custom'][data-placement^='left'] > .tippy-arrow::before {
+    .tippy-box[data-theme~='custom'][data-placement^='left'] > .tippy-arrow::before, .tippy-box[data-theme~='ocr'][data-placement^='left'] > .tippy-arrow::before {
       border-left-color: ${setting["tooltipBackgroundColor"]} !important;
     }
-    .tippy-box[data-theme~='custom'][data-placement^='right'] > .tippy-arrow::before {
+    .tippy-box[data-theme~='custom'][data-placement^='right'] > .tippy-arrow::before, .tippy-box[data-theme~='ocr'][data-placement^='right'] > .tippy-arrow::before {
       border-right-color: ${setting["tooltipBackgroundColor"]} !important;
     }
+
     .mtt-highlight{
       background-color: ${setting["mouseoverTextHighlightColor"]}  !important;
       position: absolute !important;   

src/ocr/ocrView.js

@@ -218,6 +218,10 @@ async function showTooltipBoxes(img, textBoxList) {
     var { targetText, sourceLang, targetLang } = await handleTranslate(
       textBox["text"]
     );
+    // filter large translate text len gap
+    if(targetText.length >textBox["text"].length*7){
+      continue;
+    }
     addTooltipBox(img, textBox, targetText, targetLang);
   }
 }
@@ -289,12 +293,13 @@ function adjustTextBoxBbox(textBox, ratio) {
   textBox["bbox"]["y1"] = Math.ceil(textBox["bbox"]["y1"] / ratio);
 }
 
+
 function addTooltipBox(img, textBox, text, targetLang) {
   // Create a tooltip element using Tippy.js
-  const tooltipContent = $("<div/>", {
+  var tooltipWidth = textBox["bbox"]["x1"] - textBox["bbox"]["x0"];
+  const tooltipContent = $("<span/>", {
     text: text,
     css: {
-      maxWidth: "200px",
       wordWrap: "break-word",
       zIndex: 1000001, // Ensure tooltip content is in front
       pointerEvents: "auto", // Allow pointer interactions with the tooltip content
@@ -322,13 +327,14 @@ function addTooltipBox(img, textBox, text, targetLang) {
   const instance = tippy(tooltipTarget[0], {
     content: tooltipContent[0],
     allowHTML: true,
-    theme: "custom",
+    theme: "ocr",
     placement: "top",
     zIndex: 100000 + textBox["text"].length, // Adjust z-index based on text length
     arrow: false,
     role: "mtttooltip",
     showOnCreate: true, // Ensure the tooltip is always visible
     hideOnClick: false, // Prevent hiding on outside click
+    maxWidth: `${tooltipWidth}px`, // Set tooltip width dynamically
     popperOptions: {
       modifiers: [
         {
@@ -365,10 +371,20 @@ function addTooltipBox(img, textBox, text, targetLang) {
   // Restore the tooltip visibility when mouse leaves the tooltip content
   tooltipContent.on("mouseleave", () => {
     instance.setProps({
-      theme: "custom", // Restore the original theme
+      theme: "ocr", // Restore the original theme
     });
     tooltipContent.css("opacity", 1); // Restore opacity
   });
+
+  $(window).on("resize", () => {
+    const { left, top, width, height } = calculateImgSegBoxSize(img, textBox["bbox"]);
+    tooltipTarget.css({
+      left: `${left}px`,
+      top: `${top + height * 0.7}px`,
+      width: `${width}px`,
+      height: `1px`,
+    });
+  });
 }
 
 function getTextBoxList(ocrData) {

src/ocr/opencvHandler.js

@@ -124,10 +124,12 @@ function detectText(canvasIn, mode) {
     // Convert image to grayscale and ensure single-channel
     cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, 0);
     // Threshold to get white areas (255, 255, 255)
+    // cv.bitwise_not(dst, dst);
 
     //get white area as mask
     cv.threshold(dst, dst, 230, 255, cv.THRESH_BINARY);
 
+      // showImage(dst, mode);
     // Combine all masks into one
     let combinedFloodMask = new cv.Mat(
       dst.rows,
@@ -162,6 +164,7 @@ function detectText(canvasIn, mode) {
       combinedFloodMask,
       combinedFloodVisited
     );
+    // showImage(combinedFloodMask, mode);
 
     // Remove mask area that exists in combinedFloodMask
     cv.bitwise_not(dst, dst);
@@ -172,6 +175,8 @@ function detectText(canvasIn, mode) {
     let mask = new cv.Mat();
     cv.bitwise_and(src, src, mask, dst);
 
+    // showImage(mask, mode);
+
     // make invert white area using floodfill
     dst = mask.clone(); // Update dst to the masked image
     cv.copyMakeBorder(
@@ -199,12 +204,14 @@ function detectText(canvasIn, mode) {
     let slicedResultMask = new cv.Mat();
     cv.bitwise_and(src, src, slicedResultMask, slicedBorderMask);
 
+    // showImage(slicedResultMask, mode);
     // // make white background and combine with slicedResultMask
     cv.bitwise_not(slicedBorderMask, slicedBorderMask);
     cv.cvtColor(slicedBorderMask, slicedBorderMask, cv.COLOR_GRAY2RGBA, 0);
     cv.bitwise_or(slicedResultMask, slicedBorderMask, slicedBorderMask);
     // showImage(slicedBorderMask, mode);
 
+
     // Enhance color saturation
     let enhancedImage = new cv.Mat();
     cv.cvtColor(slicedBorderMask, enhancedImage, cv.COLOR_RGBA2RGB, 0);