frontend/main.js

window.addEventListener("message", (event) => {
  if (event.data.type === "streamlit:render") {
    const pasteTarget = document.getElementById("paste-target");
    pasteTarget.addEventListener("paste", (pasteEvent) => {
      const items = (pasteEvent.clipboardData || window.clipboardData).items;
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          const blob = items[i].getAsFile();
          const reader = new FileReader();
          reader.onload = (e) => {
            Streamlit.setComponentValue(e.target.result);
            pasteTarget.innerHTML = "<p>Image pasted! Processing...</p>";
          };
          reader.readAsDataURL(blob);
        }
      }
      pasteEvent.preventDefault();
    });
  }
});

// Set the frame height
Streamlit.setFrameHeight(100);