@searpent/react-image-annotate 2.0.75 → 2.0.77

package/src/VideoOrImageCanvasBackground/index.js

@@ -0,0 +1,170 @@
+// @flow weak
+
+import React, { useRef, useEffect, useMemo, useState } from "react"
+import { styled } from "@mui/material/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import useEventCallback from "use-event-callback"
+import { useSettings } from "../SettingsProvider"
+
+const theme = createTheme()
+const Video = styled("video")(({ theme }) => ({
+  zIndex: 0,
+  position: "absolute",
+}))
+
+const StyledImage = styled("img")(({ theme }) => ({
+  zIndex: 0,
+  position: "absolute",
+}))
+
+const Error = styled("div")(({ theme }) => ({
+  zIndex: 0,
+  position: "absolute",
+  left: 0,
+  right: 0,
+  bottom: 0,
+  top: 0,
+  backgroundColor: "rgba(255,0,0,0.2)",
+  color: "#ff0000",
+  fontWeight: "bold",
+  whiteSpace: "pre-wrap",
+  padding: 50,
+}))
+
+export default ({
+  imagePosition,
+  mouseEvents,
+  videoTime,
+  videoSrc,
+  imageSrc,
+  onLoad,
+  useCrossOrigin = false,
+  videoPlaying,
+  onChangeVideoTime,
+  onChangeVideoPlaying,
+}) => {
+  const settings = useSettings()
+  const videoRef = useRef()
+  const imageRef = useRef()
+  const [error, setError] = useState()
+
+  useEffect(() => {
+    if (!videoPlaying && videoRef.current) {
+      videoRef.current.currentTime = (videoTime || 0) / 1000
+    }
+  }, [videoTime])
+
+  useEffect(() => {
+    let renderLoopRunning = false
+    if (videoRef.current) {
+      if (videoPlaying) {
+        videoRef.current.play()
+        renderLoopRunning = true
+        if (settings.videoPlaybackSpeed) {
+          videoRef.current.playbackRate = parseFloat(
+            settings.videoPlaybackSpeed
+          )
+        }
+      } else {
+        videoRef.current.pause()
+      }
+    }
+
+    function checkForNewFrame() {
+      if (!renderLoopRunning) return
+      if (!videoRef.current) return
+      const newVideoTime = Math.floor(videoRef.current.currentTime * 1000)
+      if (videoTime !== newVideoTime) {
+        onChangeVideoTime(newVideoTime)
+      }
+      if (videoRef.current.paused) {
+        renderLoopRunning = false
+        onChangeVideoPlaying(false)
+      }
+      requestAnimationFrame(checkForNewFrame)
+    }
+    checkForNewFrame()
+
+    return () => {
+      renderLoopRunning = false
+    }
+  }, [videoPlaying])
+
+  const onLoadedVideoMetadata = useEventCallback((event) => {
+    const videoElm = event.currentTarget
+    videoElm.currentTime = (videoTime || 0) / 1000
+    if (onLoad)
+      onLoad({
+        naturalWidth: videoElm.videoWidth,
+        naturalHeight: videoElm.videoHeight,
+        videoElm: videoElm,
+        duration: videoElm.duration,
+      })
+  })
+  const onImageLoaded = useEventCallback((event) => {
+    const imageElm = event.currentTarget
+    if (onLoad)
+      onLoad({
+        naturalWidth: imageElm.naturalWidth,
+        naturalHeight: imageElm.naturalHeight,
+        imageElm,
+      })
+  })
+  const onImageError = useEventCallback((event) => {
+    setError(
+      `Could not load image\n\nMake sure your image works by visiting ${
+        imageSrc || videoSrc
+      } in a web browser. If that URL works, the server hosting the URL may be not allowing you to access the image from your current domain. Adjust server settings to enable the image to be viewed.${
+        !useCrossOrigin
+          ? ""
+          : `\n\nYour image may be blocked because it's not being sent with CORs headers. To do pixel segmentation, browser web security requires CORs headers in order for the algorithm to read the pixel data from the image. CORs headers are easy to add if you're using an S3 bucket or own the server hosting your images.`
+      }\n\n If you need a hand, reach out to the community at universaldatatool.slack.com`
+    )
+  })
+
+  const stylePosition = useMemo(() => {
+    let width = imagePosition.bottomRight.x - imagePosition.topLeft.x
+    let height = imagePosition.bottomRight.y - imagePosition.topLeft.y
+    return {
+      imageRendering: "pixelated",
+      left: imagePosition.topLeft.x,
+      top: imagePosition.topLeft.y,
+      width: isNaN(width) ? 0 : width,
+      height: isNaN(height) ? 0 : height,
+    }
+  }, [
+    imagePosition.topLeft.x,
+    imagePosition.topLeft.y,
+    imagePosition.bottomRight.x,
+    imagePosition.bottomRight.y,
+  ])
+
+  if (!videoSrc && !imageSrc)
+    return <Error>No imageSrc or videoSrc provided</Error>
+
+  if (error) return <Error>{error}</Error>
+
+  return (
+    <ThemeProvider theme={theme}>
+      {imageSrc && videoTime === undefined ? (
+        <StyledImage
+          {...mouseEvents}
+          src={imageSrc}
+          ref={imageRef}
+          style={stylePosition}
+          onLoad={onImageLoaded}
+          onError={onImageError}
+          crossOrigin={useCrossOrigin ? "anonymous" : undefined}
+        />
+      ) : (
+        <Video
+          {...mouseEvents}
+          ref={videoRef}
+          style={stylePosition}
+          onLoadedMetadata={onLoadedVideoMetadata}
+          src={videoSrc || imageSrc}
+        />
+      )}
+    </ThemeProvider>
+  )
+}

package/src/colors.js

@@ -0,0 +1,32 @@
+// @flow
+
+import * as muiColors from "@mui/material/colors"
+
+export const colors = [
+  muiColors.red[500],
+  muiColors.blue[500],
+  muiColors.green[500],
+  muiColors.orange[800],
+  muiColors.brown[500],
+  muiColors.lightGreen[700],
+  muiColors.pink[500],
+  muiColors.purple[500],
+  muiColors.indigo[500],
+  muiColors.teal[500],
+  muiColors.lime[500],
+  muiColors.blueGrey[500],
+]
+
+const transparency = 0x88000000
+
+function reverseParseColor(rrggbb) {
+  rrggbb = rrggbb.replace("#", "")
+  const bbggrr = rrggbb.substr(4, 2) + rrggbb.substr(2, 2) + rrggbb.substr(0, 2)
+  return parseInt(bbggrr, 16)
+}
+
+export const colorInts: Array<number> = colors.map(
+  (c) => (reverseParseColor(c) | transparency) >>> 0
+)
+
+export default colors

package/src/hooks/use-colors.js

@@ -0,0 +1,95 @@
+import { useSettings } from "../SettingsProvider"
+
+const DEFAULT_GROUP_COLOR = "#32CD32";
+
+function defaultClsColor(cls) {
+  switch (cls) {
+    case 'title':
+      return '#f70202'
+    case 'subtitle':
+      return "#ffb405"
+    case 'text':
+      return "#14deef"
+    case 'author':
+      return "#f8d51e"
+    case 'appendix':
+      return "#bfede2"
+    case 'photo_author':
+      return "#9a17bb"
+    case 'photo_caption':
+      return "#ff84f6"
+    case 'advertisement':
+      return "#ffb201"
+    case 'other_graphics':
+      return "#ff5400"
+    case 'unknown':
+      return "#bfede2"
+    case 'about_author':
+      return "#9a17bb"
+    case 'image':
+      return "#14deef"
+    case 'interview':
+      return "#23b20f"
+    case 'table':
+      return "#02b4ba"
+    case 'section':
+      return "#ffcccc"
+    case 'continuation_ref':
+      return '#FF33CC'
+    case 'cover_clip':
+      return '#669966'
+    case 'page_id':
+      return '#4433AA'
+    case 'continuation_mark':
+      return '#660066'
+    case 'follow_up_mark':
+      return '#873e23'
+    case 'article_termination_mark':
+      return '#873e23'
+    case 'page_splitting_stripe':
+      return '#873e23'
+    case 'column_id_stripe':
+      return '#873e23'
+    case 'prev_page_reference':
+      return '#f3a864'
+    case 'section_subcategory':
+      return '#442c55'
+    default:
+      return "#02b4ba"
+  }
+}
+
+function stringToNumber(str) {
+  let sum = 0
+  for (let index = 0; index < str.length; index++) {
+    sum += str.charCodeAt(index)
+
+  }
+  return sum
+}
+
+const useColors = () => {
+  const { clsColors, groupColors } = useSettings()
+
+  const clsColor = (cls) => {
+    if (!clsColors) { return DEFAULT_GROUP_COLOR }
+    if (clsColors[cls]) { return clsColors[cls] }
+    return defaultClsColor(cls)
+  }
+
+  const groupColor = (idx) => {
+    if (isNaN(idx)) {
+      return groupColors[stringToNumber(idx) % groupColors.length] || DEFAULT_GROUP_COLOR
+    } else {
+      return groupColors[idx % groupColors.length] || DEFAULT_GROUP_COLOR
+    }
+
+  }
+
+  return {
+    clsColor,
+    groupColor
+  }
+}
+
+export default useColors;

package/src/hooks/use-event-callback.js

@@ -0,0 +1,11 @@
+// @flow
+
+import { useRef, useCallback, useLayoutEffect, useEffect } from "react"
+
+export default (fn) => {
+  let ref = useRef()
+  useLayoutEffect(() => {
+    ref.current = fn
+  })
+  return useCallback((...args) => (0, ref.current)(...args), [])
+}

package/src/hooks/use-exclude-pattern.js

@@ -0,0 +1,27 @@
+// @flow weak
+
+import { useRef } from "react"
+import excludePatternSrc from "./xpattern.js"
+
+export default () => {
+  const excludePattern = useRef(null)
+  if (excludePattern.current === null) {
+    excludePattern.current = {
+      image: new Image(),
+      pattern: null,
+    }
+    const canvas = document.createElement("canvas")
+    canvas.width = 100
+    canvas.height = 100
+    const context = canvas.getContext("2d")
+
+    excludePattern.current.image.onload = () => {
+      excludePattern.current.pattern = context.createPattern(
+        excludePattern.current.image,
+        "repeat"
+      )
+    }
+    excludePattern.current.image.src = excludePatternSrc
+  }
+  return excludePattern.current.pattern
+}

package/src/hooks/use-load-image.js

@@ -0,0 +1,21 @@
+// @flow weak
+
+import { useRef, useState } from "react"
+
+export default (imageSrc, onImageLoaded) => {
+  const [imageLoaded, changeImageLoaded] = useState(false)
+  const image = useRef(null)
+  if (image.current === null) {
+    image.current = new Image()
+    image.current.onload = () => {
+      changeImageLoaded(true)
+      if (onImageLoaded)
+        onImageLoaded({
+          width: image.current.naturalWidth,
+          height: image.current.naturalHeight,
+        })
+    }
+    image.current.src = imageSrc
+  }
+  return [image.current, imageLoaded]
+}

package/src/hooks/use-window-size.js

@@ -0,0 +1,46 @@
+// @flow
+
+import { useEffect } from "react"
+
+import { useRafState, useInterval } from "react-use"
+
+const useWindowSize = (initialWidth = Infinity, initialHeight = Infinity) => {
+  const isClient = typeof window !== "undefined"
+  const [state, setState] = useRafState({
+    width: isClient ? window.innerWidth : initialWidth,
+    height: isClient ? window.innerHeight : initialHeight,
+  })
+
+  useEffect(() => {
+    if (!isClient) return
+    const handler = () => {
+      setState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    }
+
+    window.addEventListener("resize", handler)
+
+    return () => {
+      window.removeEventListener("resize", handler)
+    }
+  }, [])
+
+  useInterval(() => {
+    if (!isClient) return
+    if (
+      window.innerWidth !== state.width ||
+      window.innerHeight !== state.height
+    ) {
+      setState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    }
+  }, 100)
+
+  return state
+}
+
+export default useWindowSize

package/{hooks → src/hooks}/xpattern.js

@@ -1 +1 @@
-export default "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4wMSAxY5oG+lzgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAcSURBVAjXY/jPwPCfAQnA+TAGugLcAhhakRUAAK3lEe8m9qZhAAAAAElFTkSuQmCC";
+export default `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4wMSAxY5oG+lzgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAcSURBVAjXY/jPwPCfAQnA+TAGugLcAhhakRUAAK3lEe8m9qZhAAAAAElFTkSuQmCC`

package/src/index.js

@@ -0,0 +1,18 @@
+// @flow
+
+import React from "react"
+import ReactDOM from "react-dom"
+import Theme from "./Theme"
+import DemoSite from "./DemoSite"
+import LandingPage from "./LandingPage"
+import "./site.css"
+
+const Site = () => {
+  const path = window.location.pathname
+    .replace(/\/$/, "")
+    .split("/")
+    .slice(-1)[0]
+  return <Theme>{path === "demo" ? <DemoSite /> : <LandingPage />}</Theme>
+}
+
+ReactDOM.render(<Site />, document.getElementById("root"))

package/src/lib.js

@@ -0,0 +1,7 @@
+// @flow
+
+import Annotator from "./Annotator"
+
+export { Annotator }
+
+export default Annotator

package/src/site.css

@@ -0,0 +1,5 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}

package/src/stories.js

@@ -0,0 +1,2 @@
+const importAll = (r) => r.keys().map(r)
+importAll(require.context("./", true, /\.story\.js$/))

package/src/utils/blocks-to-article.js

@@ -0,0 +1,61 @@
+import { whitespaceCharactersToHTML } from '../Editor/annotation-plugin/annotation';
+
+function sanitizedText(text) {
+  const escapedWhitespaces = whitespaceCharactersToHTML(text);
+
+  // remove whitespaces
+  const trimmed = escapedWhitespaces.trim();
+
+  // replace dashes at the end of sentence
+  const noTrailingDash = trimmed.replace(/-$/, "")
+
+  return noTrailingDash;
+}
+
+function getConnectingSymbol(labelName) {
+  switch (labelName) {
+    case 'text':
+      return "";
+    case 'appendix':
+      return "<br><br>"
+    default:
+      return "<br>"
+  }
+}
+
+function blocksToArticle(blocks) {
+  const renamedBlocks = blocks.map(b => {
+    const newBlock = {
+      ...b, data: {
+        ...b.data,
+        labelName: b.data.labelName === 'interview' ? 'text' : b.data.labelName
+      }
+    }
+    return newBlock
+  })
+
+  const article = renamedBlocks.reduce((acc, curr) => {
+    const { labelName, text } = curr?.data;
+    if (acc[labelName] === undefined) {
+      acc[labelName] = ""
+    }
+
+    let connectingSymbol = getConnectingSymbol(labelName);
+
+    // if last symbol is dot, next sentence should start with space
+    if (acc[labelName].charAt(acc[labelName].length - 1) === "." && connectingSymbol === "") {
+      connectingSymbol = " "
+    }
+
+    acc[labelName] = acc[labelName] + connectingSymbol + sanitizedText(text);
+
+    return acc;
+  }, {
+    title: "",
+    text: ""
+  })
+
+  return article;
+}
+
+export default blocksToArticle;

package/{utils → src/utils}/blocks-to-article.test.js

@@ -1,5 +1,6 @@
 import blocksToArticle from "./blocks-to-article";
-var blocks = [{
+
+const blocks = [{
   id: "a1",
   type: "annotation",
   data: {
@@ -44,11 +45,13 @@ var blocks = [{
     labelName: "text",
     text: "potamus is a big animal."
   }
-}];
-test('blocksToArticle', function () {
-  var article = blocksToArticle(blocks);
+}]
+
+test('blocksToArticle', () => {
+  const article = blocksToArticle(blocks);
   expect(article).toEqual({
     title: "Tohle je jeden kus title.",
     text: "First part of text. First part of interview. Second part of text. Hippopotamus is a big animal."
   });
-});
+});
+

package/{utils → src/utils}/default-locked-until.js

@@ -1,6 +1,5 @@
 export default function defaultLockedUntil() {
   var now = new Date();
   now.setDate(now.getDate() + 1); // Add 1 day to current date
-
-  return now;
+  return now
 }

package/{utils → src/utils}/filter-only-unique.js

@@ -2,4 +2,4 @@ function onlyUnique(value, index, self) {
   return self.indexOf(value) === index;
 }
 
-export default onlyUnique;
+export default onlyUnique;

package/src/utils/get-from-local-storage.js

@@ -0,0 +1,7 @@
+export default (key, defaultValue) => {
+  try {
+    return JSON.parse(window.localStorage[`__REACT_IMAGE_ANNOTATE_${key}`])
+  } catch (e) {
+    return defaultValue
+  }
+}

package/src/utils/get-hotkey-help-text.js

@@ -0,0 +1,11 @@
+import { getApplicationKeyMap } from "react-hotkeys"
+
+export const getHotkeyHelpText = (commandName) => {
+  const firstSequence =
+    getApplicationKeyMap()[commandName]?.sequences?.[0]?.sequence
+
+  if (!firstSequence) return ""
+  return ` (${firstSequence})`
+}
+
+export default getHotkeyHelpText

package/src/utils/get-landmarks-with-transform.js

@@ -0,0 +1,23 @@
+// @flow
+import type { KeypointDefinition } from "../ImageCanvas/region-tools"
+
+type Parameters = {
+  center: { x: number, y: number },
+  scale: number,
+  landmarks: {
+    [string]: KeypointDefinition,
+  },
+}
+
+export default ({ center, scale, landmarks }: Parameters) => {
+  const points = {}
+  for (const [keypointId, { defaultPosition }] of (Object.entries(
+    landmarks
+  ): any)) {
+    points[keypointId] = {
+      x: defaultPosition[0] * scale + center.x,
+      y: defaultPosition[1] * scale + center.y,
+    }
+  }
+  return points
+}

package/src/utils/photosToImages.js

@@ -0,0 +1,67 @@
+function labelAndTextFromResultText(resultText) {
+  if (!resultText) { return {} }
+  const parsedResultText = JSON.parse(resultText);
+  const label = parsedResultText[0].label;
+  const text = parsedResultText[0].text;
+  return { label, text }
+}
+
+function extractionEngineModelResultsToRegions(modelResults) {
+  return modelResults.map(r => {
+    const { label, text } = labelAndTextFromResultText(r.text);
+    return {
+      id: r.id,
+      type: "box",
+      visible: r.label === 'metadata' ? false : true,
+      cls: label,
+      highlighted: false,
+      groupHighlighted: false,
+      x: r.box.X1,
+      y: r.box.Y1,
+      w: r.box.X2 - r.box.X1,
+      h: r.box.Y2 - r.box.Y1,
+      groupId: r.groupId,
+      text: text,
+    }
+  })
+}
+
+function metadataEngineModelResultsToRegions(modelResults) {
+  return modelResults.map(r => {
+    return {
+      id: r.id,
+      type: "box",
+      visible: false,
+      cls: "metadata",
+      highlighted: false,
+      groupHighlighted: false,
+      x: r.box.X1,
+      y: r.box.Y1,
+      w: r.box.X2 - r.box.X1,
+      h: r.box.Y2 - r.box.Y1,
+      groupId: r.groupId,
+      text: r.text,
+    }
+  })
+}
+
+
+function modelResultsToRegions(modelResults) {
+  const extractionEngineRegions = extractionEngineModelResultsToRegions(modelResults.find(mr => mr.name === 'extraction-engine')?.results || [])
+  const metadataEngineRegions = metadataEngineModelResultsToRegions(modelResults.find(mr => mr.name === 'metadata-engine')?.results || [])
+  return [...extractionEngineRegions, ...metadataEngineRegions]
+}
+
+function photosToImages(photos) {
+  return photos.map(photo => ({
+    id: photo.id,
+    src: photo.fullsize.key,
+    thumbnail: photo.thumbnail.key,
+    name: photo.fullsize.key,
+    regions: modelResultsToRegions(photo.modelResults.v1),
+    metadata: photo.metadata,
+    lockedUntil: photo.lockedUntil,
+  }))
+}
+
+export default photosToImages;

package/src/utils/regions-groups.js

@@ -0,0 +1,19 @@
+const MAX_GROUP_LENGTH = 20;
+
+function regionsGroups(regions) {
+  if (!regions) {
+    return []
+  }
+  const groups = regions.reduce((acc, curr) => {
+    const { groupId } = curr;
+    if (acc.some(e => e.id === groupId)) {
+      return acc
+    }
+    acc.push({ id: groupId, label: curr?.text?.substring(0, MAX_GROUP_LENGTH) || groupId })
+    return acc;
+  }, [])
+
+  return groups;
+}
+
+export default regionsGroups;