@searpent/react-image-annotate 2.0.3 → 2.0.4

package/src/TagsSidebarBox/index.js

@@ -0,0 +1,93 @@
+// @flow
+
+import React, { useMemo, memo } from "react"
+import SidebarBoxContainer from "../SidebarBoxContainer"
+import StyleIcon from "@mui/icons-material/Style"
+import { grey } from "@mui/material/colors"
+import Select from "react-select"
+import useEventCallback from "use-event-callback"
+import { asMutable } from "seamless-immutable"
+
+type Props = {
+  tags: Array<string>,
+  currentImage: { cls?: string, tags?: Array<string> },
+  imageClsList?: Array<string>,
+  imageTagList?: Array<string>,
+  onChangeImage: (Array<string>) => any,
+}
+
+const emptyArr = []
+const noop = () => null
+
+export const TagsSidebarBox = ({
+  currentImage,
+  imageClsList = emptyArr,
+  imageTagList = emptyArr,
+  onChangeImage = noop,
+}: Props) => {
+  const { tags = [], cls = null } = currentImage || {}
+  const onChangeClassification = useEventCallback((o) =>
+    onChangeImage({ cls: o.value })
+  )
+  const onChangeTags = useEventCallback((o) =>
+    onChangeImage({ tags: o.map((a) => a.value) })
+  )
+  const selectValue = useMemo(
+    () => (cls ? { value: cls, label: cls } : null),
+    [cls]
+  )
+  const memoImgClsList = useMemo(
+    () => asMutable(imageClsList.map((c) => ({ value: c, label: c }))),
+    [imageClsList]
+  )
+  const memoImgTagList = useMemo(
+    () => asMutable(imageTagList.map((c) => ({ value: c, label: c }))),
+    [imageTagList]
+  )
+  const memoCurrentTags = useMemo(
+    () => tags.map((r) => ({ value: r, label: r })),
+    [tags]
+  )
+
+  if (!currentImage) return null
+
+  return (
+    <SidebarBoxContainer
+      title="Image Tags"
+      expandedByDefault
+      noScroll
+      icon={<StyleIcon style={{ color: grey[700] }} />}
+    >
+      {imageClsList.length > 0 && (
+        <div style={{ padding: 8 }}>
+          <Select
+            placeholder="Image Classification"
+            onChange={onChangeClassification}
+            value={selectValue}
+            options={memoImgClsList}
+          />
+        </div>
+      )}
+      {imageTagList.length > 0 && (
+        <div style={{ padding: 8, paddingTop: 0 }}>
+          <Select
+            isMulti
+            placeholder="Image Tags"
+            onChange={onChangeTags}
+            value={memoCurrentTags}
+            options={memoImgTagList}
+          />
+        </div>
+      )}
+    </SidebarBoxContainer>
+  )
+}
+
+export default memo(
+  TagsSidebarBox,
+  (prevProps, nextProps) =>
+    prevProps.currentImage.cls === nextProps.currentImage.cls &&
+    prevProps.currentImage.tags === nextProps.currentImage.tags &&
+    prevProps.imageClsList === nextProps.imageClsList &&
+    prevProps.imageTagList === nextProps.imageTagList
+)

package/src/TaskDescriptionSidebarBox/index.js

@@ -0,0 +1,43 @@
+// @flow
+
+import React, { memo } from "react"
+import SidebarBoxContainer from "../SidebarBoxContainer"
+import DescriptionIcon from "@mui/icons-material/Description"
+import { styled } from "@mui/material/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import { grey } from "@mui/material/colors"
+import Markdown from "react-markdown"
+
+const theme = createTheme()
+const MarkdownContainer = styled("div")(({ theme }) => ({
+  paddingLeft: 16,
+  paddingRight: 16,
+  fontSize: 12,
+  "& h1": { fontSize: 18 },
+  "& h2": { fontSize: 14 },
+  "& h3": { fontSize: 12 },
+  "& h4": { fontSize: 12 },
+  "& h5": { fontSize: 12 },
+  "& h6": { fontSize: 12 },
+  "& p": { fontSize: 12 },
+  "& a": {},
+  "& img": { width: "100%" },
+}))
+
+export const TaskDescriptionSidebarBox = ({ description }) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarBoxContainer
+        title="Task Description"
+        icon={<DescriptionIcon style={{ color: grey[700] }} />}
+        expandedByDefault={description && description !== "" ? false : true}
+      >
+        <MarkdownContainer>
+          <Markdown source={description} />
+        </MarkdownContainer>
+      </SidebarBoxContainer>
+    </ThemeProvider>
+  )
+}
+
+export default memo(TaskDescriptionSidebarBox)

package/src/Theme/index.js

@@ -0,0 +1,36 @@
+// @flow
+
+import React from "react"
+import { ThemeProvider, createTheme } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    fontFamily: '"Inter", sans-serif',
+  },
+}))
+
+const theme = createTheme({
+  typography: {
+    fontFamily: '"Inter", "Roboto", sans-serif',
+  },
+  overrides: {
+    MuiButton: {
+      root: {
+        textTransform: "none",
+      },
+    },
+  },
+})
+
+export const Theme = ({ children }: any) => {
+  const classes = useStyles()
+  return (
+    <ThemeProvider theme={theme}>
+      {/* <div className={classes.container}>{children}</div> */}
+      <div>{children}</div>
+    </ThemeProvider>
+  )
+}
+
+export default Theme

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,74 @@
+import { useSettings } from "../SettingsProvider"
+
+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"
+    default:
+      return "#02b4ba"
+  }
+}
+
+function defaultGroupColor(groupId) {
+  switch (groupId) {
+    case "0":
+      return "#FDDFDF"
+    case "1":
+      return "#FCF7DE"
+    case "2":
+      return "#DEFDE0"
+    case "3":
+      return "#DEF3FD"
+    case "4":
+      return "#F0DEFD"
+    default:
+      return "#F0DEFD"
+  }
+}
+
+const useColors = () => {
+  const { clsColors, groupColors } = useSettings()
+
+  const clsColor = (cls) => {
+    if (clsColors[cls]) { return clsColors[cls] }
+    return defaultClsColor(cls)
+  }
+
+  const groupColor = (groupId) => {
+    if (groupColors[groupId]) { return groupColors[groupId] }
+    return defaultGroupColor(groupId)
+  }
+
+  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/filter-only-unique.js

@@ -0,0 +1,5 @@
+function onlyUnique(value, index, self) {
+  return self.indexOf(value) === index;
+}
+
+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
+}