update copy OCR

app.py

@@ -1,6 +1,115 @@
 import streamlit as st
+from akaocr import TextEngine, BoxEngine
+import cv2
+import numpy as np
+from PIL import Image
+import time
+import pyperclip  # Import pyperclip for clipboard operations
 
-from st_copy_to_clipboard import st_copy_to_clipboard
+from custom_component import st_copy_to_clipboard
 
-# Render copy to clipboard button
-st_copy_to_clipboard("Copy this to clipboard")
+
+# Initialize the OCR engines
+box_engine = BoxEngine()
+text_engine = TextEngine()
+
+
+def transform_image(image, box):
+    # Get perspective transform image
+    assert len(box) == 4, "Shape of points must be 4x2"
+    img_crop_width = int(
+        max(
+            np.linalg.norm(box[0] - box[1]),
+            np.linalg.norm(box[2] - box[3])))
+    img_crop_height = int(
+        max(
+            np.linalg.norm(box[0] - box[3]),
+            np.linalg.norm(box[1] - box[2])))
+    pts_std = np.float32([[0, 0],
+                          [img_crop_width, 0],
+                          [img_crop_width, img_crop_height],
+                          [0, img_crop_height]])
+    box = np.array(box, dtype="float32")
+    M = cv2.getPerspectiveTransform(box, pts_std)
+    dst_img = cv2.warpPerspective(
+        image,
+        M, (img_crop_width, img_crop_height),
+        borderMode=cv2.BORDER_REPLICATE,
+        flags=cv2.INTER_CUBIC)
+
+    img_height, img_width = dst_img.shape[0:2]
+    if img_height/img_width >= 1.25:
+        dst_img = np.rot90(dst_img, k=3)
+
+    return dst_img
+
+
+def two_pts(bounding_box):
+    # Extract the x and y coordinates separately
+    return (
+        (
+        round(min([x[0] for x in bounding_box])), 
+        round(min([x[1] for x in bounding_box]))
+        ),
+        (
+        round(max([x[0] for x in bounding_box])), 
+        round(max([x[1] for x in bounding_box]))
+        )
+    )
+    
+
+
+def main():
+    st.set_page_config(
+        page_title="Quick OCR Copy", 
+        page_icon=":flag-vn:",
+        layout="wide"
+    )
+
+    uploaded_file = st.file_uploader(
+        "Choose an image...", type=["jpg", "jpeg", "png"])
+
+    if uploaded_file is not None:
+        # Convert the uploaded file to an OpenCV image
+        file_bytes = np.asarray(
+            bytearray(uploaded_file.read()), dtype=np.uint8)
+        org_image = cv2.imdecode(file_bytes, 1)
+        # st.image(org_image, channels="BGR", caption='Uploaded Image')
+
+        images = []
+        start = time.perf_counter()
+        boxes = box_engine(org_image)
+        processing_time = time.perf_counter() - start
+        st.write(f"Box detection took {processing_time:.2f} seconds.")
+
+
+        for box in boxes[::-1]:
+            org_image = cv2.polylines(org_image, [box.astype(
+                np.int32)], isClosed=True, color=(0, 255, 0), thickness=2)
+            image = transform_image(org_image, box)
+            images.append(image)
+
+        # Get the texts from the boxes
+        texts = text_engine(images)
+
+        # Convert back to PIL Image for displaying
+        output_image = Image.fromarray(
+            cv2.cvtColor(org_image, cv2.COLOR_BGR2RGB))
+        # st.image(output_image, caption='Detected Text Boxes', use_column_width=True)
+
+        # button_locations = [(50, 10), (100, 100), (200, 300)]
+        # text_list = ["Hello", "Streamlit", "World"]
+        button_coords = [two_pts(box) for box in boxes[::-1]]
+        text_list = [x[0] for x in texts]
+
+        # Call the custom component
+        st_copy_to_clipboard(
+            image=output_image,
+            button_coords=button_coords,
+            text_list=text_list,
+            before_copy_label="",
+            after_copy_label=""
+        )
+
+if __name__ == '__main__':
+    main()

custom_component/__init__.py

@@ -0,0 +1,73 @@
+# __init__.py
+
+from pathlib import Path
+from typing import Optional, Tuple, List
+from PIL import Image
+import streamlit as st
+import streamlit.components.v1 as components
+
+frontend_dir = (Path(__file__).parent / "frontend").absolute()
+_component_func = components.declare_component(
+    "streamlit_copy_to_clipboard", path=str(frontend_dir)
+)
+
+def st_copy_to_clipboard(
+    image: Image.Image,
+    button_coords: List[Tuple[Tuple[int, int], Tuple[int, int]]],
+    text_list: List[str],
+    before_copy_label: str = "📋",
+    after_copy_label: str = "✅",
+    key: Optional[str] = None,
+):
+    """
+    Streamlit component to copy text to clipboard with buttons over an image.
+
+    Parameters
+    ----------
+    image : PIL.Image
+        The image over which the buttons will be placed.
+    button_coords : List[Tuple[Tuple[int, int], Tuple[int, int]]]
+        List of tuples, each containing top-left and bottom-right coordinates for buttons.
+    text_list : List[str]
+        List of texts to be copied to the clipboard.
+    before_copy_label : str
+        Label of the button before text is copied.
+    after_copy_label : str
+        Label of the button after text is copied.
+    key : str or None
+        An optional key that uniquely identifies the component.
+    """
+    # Convert the PIL image to base64 for sending to frontend
+    import base64
+    from io import BytesIO
+
+    buffered = BytesIO()
+    image.save(buffered, format="PNG")
+    img_str = base64.b64encode(buffered.getvalue()).decode("utf-8")
+
+    # Create the component
+    component_value = _component_func(
+        key=key,
+        image=f"data:image/png;base64,{img_str}",
+        button_coords=button_coords,
+        text_list=text_list,
+        before_copy_label=before_copy_label,
+        after_copy_label=after_copy_label,
+    )
+
+    return component_value
+
+
+def main():
+    st.write("## Example: Image with Copy Buttons")
+
+    # Example image and button coordinates
+    img = Image.new('RGB', (1080, 1080), color = 'white')
+    button_coords = [((152, 130), (252, 180)), ((400, 500), (500, 550))]  # List of top-left and bottom-right points
+    texts = ["Copy text 1", "Copy text 2"]
+
+    st_copy_to_clipboard(img, button_coords, texts)
+
+
+if __name__ == "__main__":
+    main()

custom_component/frontend/index.html

@@ -0,0 +1,22 @@
+<!-- index.html -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>st-copy-to-clipboard</title>
+    <script src="./streamlit-component-lib.js"></script>
+    <script src="./main.js"></script>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+
+  <body>
+    <div id="root">
+      <!-- Container for the image and buttons -->
+      <div id="image-container" class="image-container">
+        <img id="image-element" class="copy-image" src="" alt="Image with copy buttons" />
+      </div>
+    </div>
+  </body>
+</html>

custom_component/frontend/main.js

@@ -0,0 +1,63 @@
+// main.js
+
+function sendValue(value) {
+  Streamlit.setComponentValue(value);
+}
+
+function onRender(event) {
+  if (!window.rendered) {
+    const { image, button_coords, text_list, before_copy_label, after_copy_label } = event.detail.args;
+
+    // Set the image source
+    const imageElement = document.getElementById("image-element");
+    imageElement.src = image;
+
+    // Wait for the image to load to adjust frame height and width
+    imageElement.onload = function () {
+      const imageWidth = imageElement.naturalWidth;
+      const imageHeight = imageElement.naturalHeight;
+
+      // Set the container size to match the image
+      const imageContainer = document.getElementById("image-container");
+      imageContainer.style.width = `${imageWidth}px`;
+      imageContainer.style.height = `${imageHeight}px`;
+
+      // Dynamically set the frame height based on the image size
+      Streamlit.setFrameHeight(imageHeight + 50);  // Add some extra space for buttons
+
+      // Place buttons based on provided coordinates and sizes
+      button_coords.forEach((coords, index) => {
+        const [topLeft, bottomRight] = coords;
+        const button = document.createElement("button");
+        button.textContent = before_copy_label;
+        button.className = "st-copy-to-clipboard-btn";
+
+        // Calculate button position and size
+        const buttonWidth = bottomRight[0] - topLeft[0];
+        const buttonHeight = bottomRight[1] - topLeft[1];
+        button.style.position = "absolute";
+        button.style.left = `${topLeft[0]}px`;
+        button.style.top = `${topLeft[1]}px`;
+        button.style.width = `${buttonWidth}px`;
+        button.style.height = `${buttonHeight}px`;
+
+        // Define copy function for each button
+        button.addEventListener("click", () => {
+          navigator.clipboard.writeText(text_list[index]);
+          button.textContent = after_copy_label;
+          setTimeout(() => {
+            button.textContent = before_copy_label;
+          }, 1000);
+        });
+
+        imageContainer.appendChild(button);
+      });
+    };
+
+    window.rendered = true;
+  }
+}
+
+// Register Streamlit event listeners
+Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender);
+Streamlit.setComponentReady();

custom_component/frontend/streamlit-component-lib.js

@@ -0,0 +1,34 @@
+
+// Borrowed minimalistic Streamlit API from Thiago
+// https://discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064
+function sendMessageToStreamlitClient(type, data) {
+  console.log(type, data)
+  const outData = Object.assign({
+      isStreamlitMessage: true,
+      type: type,
+  }, data);
+  window.parent.postMessage(outData, "*");
+}
+
+const Streamlit = {
+  setComponentReady: function() {
+      sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1});
+  },
+  setFrameHeight: function(height) {
+      sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height});
+  },
+  setComponentValue: function(value) {
+      sendMessageToStreamlitClient("streamlit:setComponentValue", {value: value});
+  },
+  RENDER_EVENT: "streamlit:render",
+  events: {
+      addEventListener: function(type, callback) {
+          window.addEventListener("message", function(event) {
+              if (event.data.type === type) {
+                  event.detail = event.data
+                  callback(event);
+              }
+          });
+      }
+  }
+}

custom_component/frontend/style.css

@@ -0,0 +1,39 @@
+/* style.css */
+
+.image-container {
+  position: relative;  /* Allows for absolute positioning of buttons */
+  display: inline-block;
+}
+
+.copy-image {
+  width: 100%;  /* Ensures the image scales properly */
+  height: auto;  /* Maintains aspect ratio */
+  display: block;  /* Prevents any inline space issues */
+}
+
+.st-copy-to-clipboard-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
+  border-radius: 0.5rem;
+  margin: 0;
+  line-height: 1.6;
+  color: inherit;
+  user-select: none;
+  background-color: transparent;
+  border: transparent;
+  cursor: copy;
+  position: absolute;  /* Absolute position for placement over the image */
+}
+
+.st-copy-to-clipboard-btn:hover {
+  border-color: rgb(255, 75, 75);
+  color: transparent;
+}
+
+.st-copy-to-clipboard-btn:active {
+  border-color: rgb(255, 75, 75);
+  background-color: rgb(255, 75, 75);
+  color: rgb(255, 255, 255);
+}