@searpent/react-image-annotate 2.0.74 → 2.0.76

package/src/ImageCanvas/use-wasd-mode.js

@@ -0,0 +1,50 @@
+import { useEffect } from "react"
+import { useSettings } from "../SettingsProvider"
+
+export default ({ getLatestMat, changeMat }) => {
+  const { wasdMode } = useSettings()
+  useEffect(() => {
+    if (!wasdMode) return
+    const vel = 10
+    const dirs = {
+      w: [0, -vel],
+      a: [-vel, 0],
+      s: [0, vel],
+      d: [vel, 0],
+    }
+    const keysDown = {}
+    const keys = Object.keys(dirs)
+    const keyDownListener = (e) => {
+      if (keys.includes(e.key)) {
+        keysDown[e.key] = true
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    }
+    const keyUpListener = (e) => {
+      if (keys.includes(e.key)) {
+        keysDown[e.key] = false
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    }
+    const interval = setInterval(() => {
+      let newMat = getLatestMat().clone()
+      let somethingChanged = false
+      for (const key in keysDown) {
+        if (keysDown[key]) {
+          newMat = newMat.translate(...dirs[key])
+          somethingChanged = true
+        }
+      }
+      if (somethingChanged) changeMat(newMat)
+    }, 16)
+    window.addEventListener("keydown", keyDownListener)
+    window.addEventListener("keyup", keyUpListener)
+    return () => {
+      clearInterval(interval)
+      window.removeEventListener("keydown", keyDownListener)
+      window.removeEventListener("keyup", keyUpListener)
+    }
+  }, [wasdMode])
+}

package/src/ImageMask/index.js

@@ -0,0 +1,127 @@
+// @flow
+
+import React, { useState, useEffect, useMemo, useRef } from "react"
+import { colorInts } from "../colors"
+import { useDebounce } from "react-use"
+import loadImage from "./load-image"
+import autoseg from "autoseg/webworker"
+
+function convertToUDTRegions(regions) {
+  return regions
+    .map((r) => {
+      switch (r.type) {
+        case "point": {
+          return {
+            regionType: "point",
+            classification: r.cls,
+            x: r.x,
+            y: r.y,
+          }
+        }
+        case "polygon": {
+          return {
+            regionType: "polygon",
+            classification: r.cls,
+            points: r.points.map(([x, y]) => ({ x, y })),
+          }
+        }
+        case "box": {
+          return {
+            regionType: "bounding-box",
+            classification: r.cls,
+            centerX: r.x + r.w / 2,
+            centerY: r.y + r.h / 2,
+            width: r.w,
+            height: r.h,
+          }
+        }
+        default: {
+          return null
+        }
+      }
+    })
+    .filter(Boolean)
+}
+
+export const ImageMask = ({
+  regions,
+  regionClsList,
+  imageSrc,
+  imagePosition,
+  zIndex = 1,
+  hide = false,
+  autoSegmentationOptions = { type: "simple" },
+}) => {
+  // if (!window.mmgc) window.mmgc = MMGC_INIT()
+  // const mmgc = window.mmgc
+  const [canvasRef, setCanvasRef] = useState(null)
+
+  const [sampleImageData, setSampleImageData] = useState()
+
+  useEffect(() => {
+    if (!imageSrc) return
+
+    loadImage(imageSrc).then((imageData) => {
+      autoseg.setConfig({
+        classNames: regionClsList,
+        ...autoSegmentationOptions,
+      })
+      autoseg.loadImage(imageData)
+      setSampleImageData(imageData)
+    })
+  }, [imageSrc])
+
+  useDebounce(
+    () => {
+      if (hide) return
+      if (!canvasRef) return
+      if (!sampleImageData) return
+      if (regions.filter((cp) => cp.cls).length < 2) return
+
+      const udtRegions = convertToUDTRegions(regions)
+
+      autoseg.getMask(udtRegions).then((maskImageData) => {
+        const context = canvasRef.getContext("2d")
+        context.clearRect(0, 0, maskImageData.width, maskImageData.height)
+        context.putImageData(maskImageData, 0, 0)
+      })
+    },
+    1000,
+    [canvasRef, sampleImageData, regions, hide]
+  )
+
+  const style = useMemo(() => {
+    let width = imagePosition.bottomRight.x - imagePosition.topLeft.x
+    let height = imagePosition.bottomRight.y - imagePosition.topLeft.y
+    return {
+      display: hide ? "none" : undefined,
+      imageRendering: "pixelated",
+      transform: "translateZ(0px)",
+      left: imagePosition.topLeft.x,
+      top: imagePosition.topLeft.y,
+      width: isNaN(width) ? 0 : width,
+      height: isNaN(height) ? 0 : height,
+      zIndex,
+      position: "absolute",
+      pointerEvents: "none",
+    }
+  }, [
+    imagePosition.topLeft.x,
+    imagePosition.topLeft.y,
+    imagePosition.bottomRight.x,
+    imagePosition.bottomRight.y,
+    zIndex,
+    hide,
+  ])
+
+  return (
+    <canvas
+      style={style}
+      width={sampleImageData ? sampleImageData.width : 0}
+      height={sampleImageData ? sampleImageData.height : 0}
+      ref={setCanvasRef}
+    />
+  )
+}
+
+export default ImageMask

package/src/ImageMask/load-image.js

@@ -0,0 +1,32 @@
+export const loadImage = (imageSrc) => {
+  // Check if image is already loaded in a page element
+  let image = Array.from(document.getElementsByTagName("img")).find(
+    (img) => img.src === imageSrc
+  )
+
+  const canvas = document.createElement("canvas")
+  const ctx = canvas.getContext("2d")
+
+  if (!image) {
+    image = new Image()
+    image.crossOrigin = "anonymous"
+    image.src = imageSrc
+  }
+
+  return new Promise((resolve, reject) => {
+    image.onload = () => {
+      canvas.width = image.naturalWidth
+      canvas.height = image.naturalHeight
+      ctx.drawImage(image, 0, 0)
+      const imageData = ctx.getImageData(
+        0,
+        0,
+        image.naturalWidth,
+        image.naturalHeight
+      )
+      resolve(imageData)
+    }
+  })
+}
+
+export default loadImage

package/src/ImageSelectorSidebarBox/index.js

@@ -0,0 +1,54 @@
+// @flow
+
+import React, { memo } from "react"
+import { makeStyles } from "@mui/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import SidebarBoxContainer from "../SidebarBoxContainer"
+import CollectionsIcon from "@mui/icons-material/Collections"
+import { grey } from "@mui/material/colors"
+import List from "@mui/material/List"
+import ListItem from "@mui/material/ListItem"
+import ListItemText from "@mui/material/ListItemText"
+import Avatar from "@mui/material/Avatar"
+import isEqual from "lodash/isEqual"
+
+const theme = createTheme()
+const useStyles = makeStyles((theme) => ({
+  img: { width: 40, height: 40, borderRadius: 8 },
+}))
+
+export const ImageSelectorSidebarBox = ({ images, onSelect }) => {
+  const classes = useStyles()
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarBoxContainer
+        title="Images"
+        subTitle={`(${images.length})`}
+        icon={<CollectionsIcon style={{ color: grey[700] }} />}
+      >
+        <div>
+          <List>
+            {images.map((img, i) => (
+              <ListItem button onClick={() => onSelect(img)} dense key={i}>
+                <img className={classes.img} src={img.src} />
+                <ListItemText
+                  primary={img.name}
+                  secondary={`${(img.regions || []).length} Labels`}
+                />
+              </ListItem>
+            ))}
+          </List>
+        </div>
+      </SidebarBoxContainer>
+    </ThemeProvider>
+  )
+}
+
+const mapUsedImageProps = (a) => [a.name, (a.regions || []).length, a.src]
+
+export default memo(ImageSelectorSidebarBox, (prevProps, nextProps) =>
+  isEqual(
+    prevProps.images.map(mapUsedImageProps),
+    nextProps.images.map(mapUsedImageProps)
+  )
+)

package/src/KeyframeTimeline/get-time-string.js

@@ -0,0 +1,25 @@
+// @flow
+
+const getTimeString = (ms, precision = 1) => {
+  if (ms < 1000) {
+    return ms + "ms"
+  } else {
+    const secs = ms / 1000
+    if (secs < 60) {
+      if (Number.isInteger(secs)) {
+        return secs + "s"
+      } else {
+        return secs.toFixed(precision) + "s"
+      }
+    } else {
+      const mins = secs / 60
+      if (Number.isInteger(mins)) {
+        return mins + "m"
+      } else {
+        return mins.toFixed(precision) + "m"
+      }
+    }
+  }
+}
+
+export default getTimeString

package/src/KeyframeTimeline/index.js

@@ -0,0 +1,223 @@
+// @flow weak
+
+import React, { useMemo, useState, useEffect } from "react"
+import { styled } from "@mui/material/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import range from "lodash/range"
+import * as colors from "@mui/material/colors"
+import useMeasure from "react-use-measure"
+import useEventCallback from "use-event-callback"
+import { useRafState } from "react-use"
+import getTimeString from "./get-time-string"
+
+const theme = createTheme()
+
+const Container = styled("div")(({ theme }) => ({
+  position: "relative",
+  display: "flex",
+  flexGrow: 1,
+  minWidth: 240,
+  height: 64,
+  marginLeft: 16,
+  marginRight: 16,
+}))
+
+const Tick = styled("div")(({ theme }) => ({
+  position: "absolute",
+  width: 2,
+  marginLeft: -1,
+  height: "100%",
+  backgroundColor: colors.grey[300],
+  bottom: 0,
+}))
+const TickText = styled("div")(({ theme }) => ({
+  position: "absolute",
+  userSelect: "none",
+  fontSize: 10,
+  color: colors.grey[600],
+  fontWeight: "bold",
+  bottom: 0,
+}))
+
+const PositionCursor = styled("div")(({ theme }) => ({
+  position: "absolute",
+  bottom: "calc(50% + 6px)",
+  fontSize: 10,
+  fontWeight: "bold",
+  color: "#fff",
+  display: "grid",
+  placeItems: "center",
+  width: 48,
+  marginLeft: -24,
+  borderRadius: 2,
+  height: 24,
+  backgroundColor: colors.blue[500],
+  userSelect: "none",
+  fontVariantNumeric: "tabular-nums",
+
+  "&::before": {
+    position: "absolute",
+    bottom: -6,
+    left: 24 - 8,
+    content: '""',
+    width: 0,
+    height: 0,
+    borderTop: `8px solid ${colors.blue[500]}`,
+    borderLeft: "8px solid transparent",
+    borderRight: "8px solid transparent",
+  },
+}))
+
+const KeyframeMarker = styled("div")(({ theme }) => ({
+  position: "absolute",
+  bottom: 8,
+  cursor: "pointer",
+  opacity: 0.75,
+  fontSize: 10,
+  fontWeight: "bold",
+  color: "#fff",
+  display: "grid",
+  placeItems: "center",
+  width: 16,
+  marginLeft: 0,
+  borderTopLeftRadius: 2,
+  borderTopRightRadius: 2,
+  height: 12,
+  marginLeft: -8,
+  backgroundColor: colors.red[500],
+  userSelect: "none",
+  fontVariantNumeric: "tabular-nums",
+
+  "&::before": {
+    position: "absolute",
+    bottom: -8,
+    left: 0,
+    content: '""',
+    width: 0,
+    height: 0,
+    borderTop: `8px solid ${colors.red[500]}`,
+    borderLeft: "8px solid transparent",
+    borderRight: "8px solid transparent",
+  },
+}))
+
+const min = 60000
+const displayIntervalPairs = [
+  [50, 250],
+  [100, 500],
+  [250, 1000],
+  [1000, 5000],
+  [5000, 30000],
+  [10000, min],
+  [30000, min * 2],
+  [min, min * 5],
+  [min * 5, min * 30],
+  [min * 10, min * 60],
+  [min * 30, min * 60 * 3],
+  [min * 60, min * 60 * 5],
+]
+
+const getMajorInterval = (duration) => {
+  for (const [minor, major] of displayIntervalPairs) {
+    if (duration / major < 6 && duration / major > 2) {
+      return [minor, major]
+    }
+  }
+  return [duration / 4, duration]
+}
+
+export default ({
+  currentTime = 0,
+  duration,
+  onChangeCurrentTime,
+  keyframes,
+}) => {
+  const [ref, bounds] = useMeasure()
+  const [instantCurrentTime, changeInstantCurrentTime] = useState(currentTime)
+  const [draggingTime, changeDraggingTime] = useRafState(false)
+  const keyframeTimes = Object.keys(keyframes || {})
+    .map((t) => parseInt(t))
+    .filter((t) => !isNaN(t))
+    .sort((a, b) => a - b)
+
+  useEffect(() => {
+    if (currentTime !== instantCurrentTime) {
+      changeInstantCurrentTime(currentTime)
+    }
+  }, [currentTime])
+
+  const [minorInterval, majorInterval] = useMemo(
+    () => getMajorInterval(duration),
+    [duration]
+  )
+
+  const onMouseMove = useEventCallback((e) => {
+    if (draggingTime) {
+      const px = (e.clientX - bounds.left) / bounds.width
+      changeInstantCurrentTime(
+        Math.min(duration, Math.max(0, Math.floor(px * duration)))
+      )
+    }
+  })
+
+  const onMouseUp = useEventCallback((e) => {
+    changeDraggingTime(false)
+    const px = (e.clientX - bounds.left) / bounds.width
+    const newTime = Math.min(duration, Math.max(0, Math.floor(px * duration)))
+    changeInstantCurrentTime(newTime)
+    onChangeCurrentTime(newTime)
+  })
+
+  // TODO skeleton
+  if (!duration) return null
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Container onMouseMove={onMouseMove} onMouseUp={onMouseUp} ref={ref}>
+        {range(0, duration, majorInterval).map((a) => (
+          <>
+            <Tick
+              key={a}
+              style={{ left: (a / duration) * bounds.width, height: "50%" }}
+            />
+            <TickText
+              style={{
+                left: (a / duration) * bounds.width + 8,
+                bottom: "calc(50% - 12px)",
+              }}
+            >
+              {getTimeString(a)}
+            </TickText>
+          </>
+        ))}
+        {range(0, duration, minorInterval)
+          .filter((a) => !Number.isInteger(a / majorInterval))
+          .map((a) => (
+            <Tick
+              key={a}
+              style={{
+                left: (a / duration) * bounds.width,
+                height: "25%",
+              }}
+            />
+          ))}
+        {keyframeTimes.map((kt) => (
+          <KeyframeMarker
+            onClick={() => onChangeCurrentTime(kt)}
+            key={kt}
+            style={{ left: (kt / duration) * bounds.width }}
+          />
+        ))}
+        <PositionCursor
+          onMouseDown={(e) => changeDraggingTime(true)}
+          style={{
+            cursor: draggingTime ? "grabbing" : "grab",
+            left: (instantCurrentTime / duration) * bounds.width,
+          }}
+        >
+          {getTimeString(instantCurrentTime)}
+        </PositionCursor>
+      </Container>
+    </ThemeProvider>
+  )
+}

package/src/KeyframesSelectorSidebarBox/index.js

@@ -0,0 +1,93 @@
+// @flow weak
+
+import React from "react"
+import AddLocationIcon from "@mui/icons-material/AddLocation"
+import SidebarBoxContainer from "../SidebarBoxContainer"
+import * as colors from "@mui/material/colors"
+import getTimeString from "../KeyframeTimeline/get-time-string.js"
+import TrashIcon from "@mui/icons-material/Delete"
+import { styled } from "@mui/material/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+
+const theme = createTheme()
+const KeyframeRow = styled("div")(({ theme }) => ({
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  padding: 8,
+  fontSize: 14,
+  color: colors.grey[700],
+  "&.current": {
+    backgroundColor: colors.blue[100],
+  },
+  "&:hover": {
+    backgroundColor: colors.grey[100],
+  },
+  "& .time": {
+    flexGrow: 1,
+    fontWeight: "bold",
+    "& .regionCount": {
+      marginLeft: 8,
+      fontWeight: "normal",
+      color: colors.grey[500],
+    },
+  },
+  "& .trash": {
+    "& .icon": {
+      fontSize: 18,
+      color: colors.grey[600],
+      transition: "transform 80ms",
+      "&:hover": {
+        color: colors.grey[800],
+        transform: "scale(1.25,1.25)",
+      },
+    },
+  },
+}))
+
+const KeyframesSelectorSidebarBox = ({
+  currentVideoTime,
+  keyframes,
+  onChangeVideoTime,
+  onDeleteKeyframe,
+}) => {
+  const keyframeTimes = Object.keys(keyframes).map((t) => parseInt(t))
+
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarBoxContainer
+        title="Keyframes"
+        subTitle=""
+        icon={<AddLocationIcon style={{ color: colors.grey[700] }} />}
+        expandedByDefault
+      >
+        {keyframeTimes.map((t) => (
+          <KeyframeRow
+            fullWidth
+            key={t}
+            className={currentVideoTime === t ? "current" : ""}
+            onClick={() => onChangeVideoTime(t)}
+          >
+            <div className="time">
+              {getTimeString(t, 2)}
+              <span className="regionCount">
+                ({(keyframes[t]?.regions || []).length})
+              </span>
+            </div>
+            <div className="trash">
+              <TrashIcon
+                onClick={(e) => {
+                  onDeleteKeyframe(t)
+                  e.stopPropagation()
+                }}
+                className="icon"
+              />
+            </div>
+          </KeyframeRow>
+        ))}
+      </SidebarBoxContainer>
+    </ThemeProvider>
+  )
+}
+
+export default KeyframesSelectorSidebarBox

package/src/LandingPage/content.md

@@ -0,0 +1,57 @@
+# Features
+
+- Simple input/output format
+- Bounding Box, Point and Polygon Annotation
+- Zooming, Scaling, Panning
+- Multiple Images
+- Cursor Crosshair
+
+![Screenshot of Annotator](https://user-images.githubusercontent.com/1910070/51199716-83c72080-18c5-11e9-837c-c3a89c8caef4.png)
+
+# Usage
+
+## Installation
+
+```bash
+npm install react-image-annotate
+```
+
+## Basic Example
+
+```javascript
+import ReactImageAnnotate from "react-image-annotate"
+
+const App = () => (
+  <ReactImageAnnotate
+    selectedImage="https://example.com/image1.png"
+    taskDescription="# Draw region around each animal."
+    images={[{ src: "https://example.com/image1.png", name: "Image 1" }]}
+    regionClsList={["Dog", "Cat"]}
+    enabledTools={["create-box"]}
+  />
+)
+```
+
+# Props
+
+All of the following properties can be defined on the `ReactImageAnnotate` component...
+
+| Prop                     | Type (\* = required)                             | Description                                                                             | Default       |
+| ------------------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------- | ------------- |
+| `taskDescription`        | \*`string`                                       | Markdown description for what to do in the image.                                       |               |
+| `allowedArea`            | `{ x: number, y: number, w: number, h: number }` | Area that is available for annotation.                                                  | Entire image. |
+| `regionTagList`          | `Array<string>`                                  | Allowed "tags" (mutually inclusive classifications) for regions.                        |               |
+| `regionClsList`          | `Array<string>`                                  | Allowed "classes" (mutually exclusive classifications) for regions.                     |               |
+| `imageTagList`           | `Array<string>`                                  | Allowed tags for entire image.                                                          |               |
+| `imageClsList`           | `Array<string>`                                  | Allowed classes for entire image.                                                       |               |
+| `enabledTools`           | `Array<string>`                                  | Tools allowed to be used. e.g. "select", "create-point", "create-box", "create-polygon" | Everything.   |
+| `showTags`               | `boolean`                                        | Show tags and allow tags on regions.                                                    | `true`        |
+| `selectedImage`          | `string`                                         | URL of initially selected image.                                                        |               |
+| `images`                 | `Array<Image>`                                   | Array of images to load into annotator                                                  |               |
+| `showPointDistances`     | `boolean`                                        | Show distances between points.                                                          | `false`       |
+| `pointDistancePrecision` | `number`                                         | Precision on displayed points (e.g. 3 => 0.123)                                         |               |
+| `onExit`                 | `MainLayoutState => any`                         | Called when "Save" is called.                                                           |               |
+
+# Sponsors
+
+[![wao.ai sponsorship image](https://s3.amazonaws.com/asset.workaround.online/sponsorship-banner-1.png)](https://wao.ai)