@searpent/react-image-annotate 2.0.2 → 2.0.5

package/src/Annotator/reducers/get-active-image.js

@@ -0,0 +1,21 @@
+import { getIn } from "seamless-immutable"
+
+export default (state) => {
+  let currentImageIndex = null,
+    pathToActiveImage,
+    activeImage
+  if (state.annotationType === "image") {
+    currentImageIndex = state.selectedImage
+    if (currentImageIndex === -1) {
+      currentImageIndex = null
+      activeImage = null
+    } else {
+      pathToActiveImage = ["images", currentImageIndex]
+      activeImage = getIn(state, pathToActiveImage)
+    }
+  } else if (state.annotationType === "video") {
+    pathToActiveImage = ["keyframes", state.currentVideoTime || 0]
+    activeImage = getIn(state, pathToActiveImage) || null
+  }
+  return { currentImageIndex, pathToActiveImage, activeImage }
+}

package/src/Annotator/reducers/get-implied-video-regions.js

@@ -0,0 +1,115 @@
+// @flow
+
+import type { Region } from "../../ImageCanvas/region-tools.js"
+
+const emptyArr = []
+
+export default (
+  keyframes: { [string | number]: { regions: Array<Region> } },
+  time: number
+) => {
+  if (keyframes[time || 0]) {
+    return keyframes[time || 0].regions
+  }
+  // Get surrounding video keyframes
+  const keyframeTimes = Object.keys(keyframes)
+    .map((a) => parseInt(a))
+    .filter((a) => !isNaN(a))
+  if (keyframeTimes.length === 0) return emptyArr
+  keyframeTimes.sort((a, b) => a - b)
+  let nextKeyframeTimeIndex = keyframeTimes.findIndex((kt) => kt >= time)
+  if (nextKeyframeTimeIndex === -1) {
+    return (
+      keyframes[keyframeTimes[keyframeTimes.length - 1]].regions || emptyArr
+    )
+  } else if (nextKeyframeTimeIndex === 0) {
+    return emptyArr
+  }
+
+  const t1 = keyframeTimes[nextKeyframeTimeIndex - 1]
+  const prevKeyframe = keyframes[t1]
+  const t2 = keyframeTimes[nextKeyframeTimeIndex]
+  const nextKeyframe = keyframes[t2]
+
+  const [prevRegionMap, nextRegionMap] = [{}, {}]
+  for (const region of prevKeyframe.regions) prevRegionMap[region.id] = region
+  for (const region of nextKeyframe.regions) nextRegionMap[region.id] = region
+
+  const impliedRegions = []
+
+  // Weighted time coefficients for linear transition
+  const w1 = (t2 - time) / (t2 - t1)
+  const w2 = 1 - w1
+
+  for (const regionId in prevRegionMap) {
+    const [prev, next] = [prevRegionMap[regionId], nextRegionMap[regionId]]
+    if (!next) {
+      impliedRegions.push({
+        ...prev,
+        highlighted: false,
+        editingLabels: false,
+      })
+      continue
+    }
+    switch (prev.type) {
+      case "point": {
+        impliedRegions.push({
+          ...prev,
+          highlighted: false,
+          editingLabels: false,
+          x: prev.x * w1 + next.x * w2,
+          y: prev.y * w1 + next.y * w2,
+        })
+        break
+      }
+      case "box": {
+        impliedRegions.push({
+          ...prev,
+          highlighted: false,
+          editingLabels: false,
+          x: prev.x * w1 + next.x * w2,
+          y: prev.y * w1 + next.y * w2,
+          w: prev.w * w1 + next.w * w2,
+          h: prev.h * w1 + next.h * w2,
+        })
+        break
+      }
+      case "polygon": {
+        if (next.points.length === prev.points.length) {
+          impliedRegions.push({
+            ...prev,
+            highlighted: false,
+            editingLabels: false,
+            points: prev.points.map((pp, i) => [
+              pp[0] * w1 + next.points[i][0] * w2,
+              pp[1] * w1 + next.points[i][1] * w2,
+            ]),
+          })
+        } else {
+          impliedRegions.push(prev)
+        }
+        break
+      }
+      case "keypoints": {
+        const newPoints = {}
+        for (const [pointId, prevPoint] of Object.entries(prev.points)) {
+          newPoints[pointId] = {
+            x: prevPoint.x * w1 + next.points[pointId].x * w2,
+            y: prevPoint.y * w1 + next.points[pointId].y * w2,
+          }
+        }
+        impliedRegions.push({
+          ...prev,
+          highlighted: false,
+          editingLabels: false,
+          points: newPoints,
+        })
+        break
+      }
+      default:
+        break
+    }
+  }
+
+  return impliedRegions
+}

package/src/Annotator/reducers/history-handler.js

@@ -0,0 +1,60 @@
+// @flow
+
+import type { MainLayoutState, Action } from "../../MainLayout/types"
+import { setIn, updateIn, asMutable, without } from "seamless-immutable"
+import moment from "moment"
+
+const typesToSaveWithHistory = {
+  BEGIN_BOX_TRANSFORM: "Transform/Move Box",
+  BEGIN_MOVE_POINT: "Move Point",
+  DELETE_REGION: "Delete Region",
+}
+
+export const saveToHistory = (state: MainLayoutState, name: string) =>
+  updateIn(state, ["history"], (h) =>
+    [
+      {
+        time: moment().toDate(),
+        state: without(state, "history"),
+        name,
+      },
+    ].concat((h || []).slice(0, 9))
+  )
+
+export default (reducer) => {
+  return (state: MainLayoutState, action: Action) => {
+    const prevState = state
+    const nextState = reducer(state, action)
+
+    if (action.type === "RESTORE_HISTORY") {
+      if (state.history.length > 0) {
+        return setIn(
+          nextState.history[0].state,
+          ["history"],
+          nextState.history.slice(1)
+        )
+      }
+    } else {
+      if (
+        prevState !== nextState &&
+        Object.keys(typesToSaveWithHistory).includes(action.type)
+      ) {
+        return setIn(
+          nextState,
+          ["history"],
+          [
+            {
+              time: moment().toDate(),
+              state: without(prevState, "history"),
+              name: typesToSaveWithHistory[action.type] || action.type,
+            },
+          ]
+            .concat(nextState.history || [])
+            .slice(0, 9)
+        )
+      }
+    }
+
+    return nextState
+  }
+}

package/src/Annotator/reducers/image-reducer.js

@@ -0,0 +1,23 @@
+// @flow
+
+import type {
+  MainLayoutImageAnnotationState,
+  Action,
+} from "../../MainLayout/types"
+import { setIn } from "seamless-immutable"
+import getActiveImage from "./get-active-image"
+
+export default (state: MainLayoutImageAnnotationState, action: Action) => {
+  const { currentImageIndex, pathToActiveImage, activeImage } =
+    getActiveImage(state)
+
+  switch (action.type) {
+    case "IMAGE_OR_VIDEO_LOADED": {
+      return setIn(state, ["images", currentImageIndex, "pixelSize"], {
+        w: action.metadata.naturalWidth,
+        h: action.metadata.naturalHeight,
+      })
+    }
+  }
+  return state
+}

package/src/Annotator/reducers/video-reducer.js

@@ -0,0 +1,85 @@
+// @flow
+
+import type {
+  MainLayoutVideoAnnotationState,
+  Action,
+} from "../../MainLayout/types"
+import { setIn, without } from "seamless-immutable"
+import getImpliedVideoRegions from "./get-implied-video-regions"
+import { saveToHistory } from "./history-handler.js"
+
+export default (state: MainLayoutVideoAnnotationState, action: Action) => {
+  const copyImpliedRegions = () => {
+    return setIn(
+      saveToHistory(state, "Add Keyframe"),
+      ["keyframes", state.currentVideoTime || 0],
+      {
+        regions: getImpliedVideoRegions(
+          state.keyframes,
+          state.currentVideoTime
+        ),
+      }
+    )
+  }
+
+  switch (action.type) {
+    case "IMAGE_OR_VIDEO_LOADED": {
+      const { duration } = action.metadata
+      if (typeof duration === "number") {
+        return setIn(state, ["videoDuration"], duration * 1000)
+      }
+    }
+    case "HEADER_BUTTON_CLICKED": {
+      switch (action.buttonName.toLowerCase()) {
+        case "play":
+          return setIn(state, ["videoPlaying"], true)
+        case "pause":
+          return setIn(state, ["videoPlaying"], false)
+      }
+    }
+    case "CHANGE_VIDEO_TIME": {
+      return setIn(state, ["currentVideoTime"], action.newTime)
+    }
+    case "CHANGE_VIDEO_PLAYING": {
+      return setIn(state, ["videoPlaying"], action.isPlaying)
+    }
+    case "DELETE_KEYFRAME": {
+      return setIn(state, ["keyframes"], without(state.keyframes, action.time))
+    }
+    default:
+      break
+  }
+
+  // Before the user modifies regions, copy the interpolated regions over to a
+  // new keyframe
+  if (!state.keyframes[state.currentVideoTime]) {
+    switch (action.type) {
+      case "BEGIN_BOX_TRANSFORM":
+      case "BEGIN_MOVE_POINT":
+      case "BEGIN_MOVE_KEYPOINT":
+      case "BEGIN_MOVE_POLYGON_POINT":
+      case "ADD_POLYGON_POINT":
+      case "SELECT_REGION":
+      case "CHANGE_REGION":
+      case "DELETE_REGION":
+      case "OPEN_REGION_EDITOR":
+        return copyImpliedRegions()
+      case "MOUSE_DOWN": {
+        switch (state.selectedTool) {
+          case "create-point":
+          case "create-polygon":
+          case "create-box":
+          case "create-keypoints":
+            return copyImpliedRegions()
+          default:
+            break
+        }
+        break
+      }
+      default:
+        break
+    }
+  }
+
+  return state
+}

package/src/Annotator/video.story.js

@@ -0,0 +1,51 @@
+// @flow
+
+import React from "react"
+
+import { storiesOf } from "@storybook/react"
+import { action } from "@storybook/addon-actions"
+import Annotator from "./"
+
+storiesOf("Annotator(video)", module).add("Video Annotator", () => {
+  const props = {
+    regionClsList: ["valid", "invalid"],
+    enabledTools: ["select", "create-box", "create-polygon", "create-point"],
+    keyframes: {
+      0: {
+        regions: [
+          {
+            id: "910517662556203",
+            cls: "valid",
+            color: "#f44336",
+            type: "box",
+            x: 0.12195121951219515,
+            y: 0.28726287262872624,
+            w: 0.2606707317073171,
+            h: 0.4769647696476965,
+          },
+        ],
+      },
+      2656: {
+        regions: [
+          {
+            id: "910517662556203",
+            cls: "valid",
+            color: "#f44336",
+            type: "box",
+            x: 0.13109756097560976,
+            y: 0.08672086720867206,
+            w: 0.3445121951219512,
+            h: 0.7913279132791328,
+          },
+        ],
+      },
+    },
+    onExit: action("onExit"),
+    taskDescription: "",
+    videoName: "",
+    videoTime: 0,
+    videoSrc:
+      "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
+  }
+  return <Annotator {...props} />
+})

package/src/ClassSelectionMenu/index.js

@@ -0,0 +1,108 @@
+import React, { useEffect } from "react"
+import { styled } from "@mui/material/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import * as muiColors from "@mui/material/colors"
+import SidebarBoxContainer from "../SidebarBoxContainer"
+import colors from "../colors"
+import BallotIcon from "@mui/icons-material/Ballot"
+import capitalize from "lodash/capitalize"
+import classnames from "classnames"
+
+const theme = createTheme()
+const LabelContainer = styled("div")(({ theme }) => ({
+  display: "flex",
+  paddingTop: 4,
+  paddingBottom: 4,
+  paddingLeft: 16,
+  paddingRight: 16,
+  alignItems: "center",
+  cursor: "pointer",
+  opacity: 0.7,
+  backgroundColor: "#fff",
+  "&:hover": {
+    opacity: 1,
+  },
+  "&.selected": {
+    opacity: 1,
+    fontWeight: "bold",
+  },
+}))
+const Circle = styled("div")(({ theme }) => ({
+  width: 12,
+  height: 12,
+  borderRadius: 12,
+  marginRight: 8,
+}))
+const Label = styled("div")(({ theme }) => ({
+  fontSize: 11,
+}))
+const DashSep = styled("div")(({ theme }) => ({
+  flexGrow: 1,
+  borderBottom: `2px dotted ${muiColors.grey[300]}`,
+  marginLeft: 8,
+  marginRight: 8,
+}))
+const Number = styled("div")(({ theme }) => ({
+  fontSize: 11,
+  textAlign: "center",
+  minWidth: 14,
+  paddingTop: 2,
+  paddingBottom: 2,
+  fontWeight: "bold",
+  color: muiColors.grey[700],
+}))
+
+export const ClassSelectionMenu = ({
+  selectedCls,
+  regionClsList,
+  onSelectCls,
+}) => {
+  useEffect(() => {
+    const keyMapping = {}
+    for (let i = 0; i < 9 && i < regionClsList.length; i++) {
+      keyMapping[i + 1] = () => onSelectCls(regionClsList[i])
+    }
+    const onKeyDown = (e) => {
+      if (keyMapping[e.key]) {
+        keyMapping[e.key]()
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    }
+    window.addEventListener("keydown", onKeyDown)
+    return () => window.removeEventListener("keydown", onKeyDown)
+  }, [regionClsList, selectedCls])
+
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarBoxContainer
+        title="Classifications"
+        subTitle=""
+        icon={<BallotIcon style={{ color: muiColors.grey[700] }} />}
+        expandedByDefault
+      >
+        {regionClsList.map((label, index) => (
+          <LabelContainer
+            className={classnames({ selected: label === selectedCls })}
+            onClick={() => onSelectCls(label)}
+          >
+            <Circle
+              style={{ backgroundColor: colors[index % colors.length] }}
+            />
+            <Label className={classnames({ selected: label === selectedCls })}>
+              {capitalize(label)}
+            </Label>
+            <DashSep />
+            <Number className={classnames({ selected: label === selectedCls })}>
+              {index < 9 ? `Key [${index + 1}]` : ""}
+            </Number>
+          </LabelContainer>
+        ))}
+        <Box pb={2} />
+      </SidebarBoxContainer>
+    </ThemeProvider>
+  )
+}
+
+export default ClassSelectionMenu

package/src/Crosshairs/index.js

@@ -0,0 +1,64 @@
+// @flow
+
+import React, { Fragment, useEffect, useState } from "react"
+
+export const Crosshairs = ({
+  mousePosition,
+  x,
+  y,
+}: {
+  mousePosition: { current: { x: number, y: number } },
+  x?: number,
+  y?: number,
+}) => {
+  const [forceRenderState, changeForceRenderState] = useState()
+
+  if (mousePosition) {
+    x = mousePosition.current.x
+    y = mousePosition.current.y
+  }
+
+  useEffect(() => {
+    if (!mousePosition) return
+    const interval = setInterval(() => {
+      if (x !== mousePosition.current.x || y !== mousePosition.current.y) {
+        changeForceRenderState([
+          mousePosition.current.x,
+          mousePosition.current.y,
+        ])
+      }
+    }, 10)
+    return () => clearInterval(interval)
+  })
+
+  return (
+    <Fragment>
+      <div
+        style={{
+          position: "absolute",
+          height: "100%",
+          width: 1,
+          zIndex: 10,
+          backgroundColor: "#f00",
+          left: x,
+          pointerEvents: "none",
+          top: 0,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          width: "100%",
+          zIndex: 10,
+          height: 1,
+          backgroundColor: "#f00",
+          top: y,
+          pointerEvents: "none",
+          left: 0,
+        }}
+      />
+    </Fragment>
+  )
+}
+
+export default Crosshairs

package/src/DebugSidebarBox/index.js

@@ -0,0 +1,36 @@
+// @flow
+
+import React from "react"
+import SidebarBoxContainer from "../SidebarBoxContainer"
+
+export const DebugSidebarBox = ({ state, lastAction }: any) => {
+  const image = (state.images || [])[state.selectedImage]
+  const region = image
+    ? (image.regions || []).filter((r) => r.highlighted)
+    : null
+
+  return (
+    <SidebarBoxContainer title="Debug" icon={<span />} expandedByDefault>
+      <div style={{ padding: 4 }}>
+        <div>
+          <b>region</b>:
+        </div>
+        <pre>{JSON.stringify(region, null, "  ")}</pre>
+        <div>
+          <b>lastAction</b>:
+        </div>
+        <pre>{JSON.stringify(lastAction, null, "  ")}</pre>
+        <div>
+          <b>mode</b>:
+        </div>
+        <pre>{JSON.stringify(state.mode, null, "  ")}</pre>
+        <div>
+          <b>frame:</b>
+        </div>
+        <pre>{JSON.stringify(state.selectedImageFrameTime, null, "  ")}</pre>
+      </div>
+    </SidebarBoxContainer>
+  )
+}
+
+export default DebugSidebarBox