@searpent/react-image-annotate 2.0.0

package/src/ShortcutsManager/index.js

@@ -0,0 +1,162 @@
+import React, { useMemo } from "react"
+import { HotKeys } from "react-hotkeys"
+
+export const defaultHotkeys = [
+  {
+    id: "select_tool",
+    description: "Switch to the Select Tool",
+    binding: "escape",
+  },
+  {
+    id: "zoom_tool",
+    description: "Select the Zoom Tool",
+    binding: "z",
+  },
+  {
+    id: "create_point",
+    description: "Create a point",
+  },
+  {
+    id: "create_bounding_box",
+    description: "Create a bounding box",
+    binding: "b",
+  },
+  {
+    id: "pan_tool",
+    description: "Select the Pan Tool",
+    binding: "m",
+  },
+  {
+    id: "create_polygon",
+    description: "Create a Polygon",
+    binding: "p",
+  },
+  {
+    id: "create_pixel",
+    description: "Create a Pixel Mask",
+  },
+  {
+    id: "save_and_previous_sample",
+    description: "Save and go to previous sample",
+    binding: "ArrowLeft",
+  },
+  {
+    id: "save_and_next_sample",
+    description: "Save and go to next sample",
+    binding: "ArrowRight",
+  },
+  {
+    id: "save_and_exit_sample",
+    description: "Save and exit current sample",
+  },
+  {
+    id: "exit_sample",
+    description: "Exit sample without saving",
+  },
+  {
+    id: "delete_region",
+    description: "Delete selected region",
+    binding: "d",
+  },
+  {
+    id: "undo",
+    description: "Undo latest change",
+    binding: "Ctrl+z",
+  },
+]
+export const defaultKeyMap = {}
+for (const { id, binding } of defaultHotkeys) defaultKeyMap[id] = binding
+
+export const useDispatchHotkeyHandlers = ({ dispatch }) => {
+  const handlers = useMemo(
+    () => ({
+      select_tool: () => {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "select",
+        })
+      },
+      zoom_tool: () => {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "zoom",
+        })
+      },
+      create_point: () => {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "create-point",
+        })
+      },
+      create_bounding_box: () => {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "create-box",
+        })
+      },
+      pan_tool: () => {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "pan",
+        })
+      },
+      create_polygon: () => {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "create-polygon",
+        })
+      },
+      create_pixel: () => {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "create-pixel",
+        })
+      },
+      save_and_previous_sample: () => {
+        dispatch({
+          type: "HEADER_BUTTON_CLICKED",
+          buttonName: "Prev",
+        })
+      },
+      save_and_next_sample: () => {
+        dispatch({
+          type: "HEADER_BUTTON_CLICKED",
+          buttonName: "Next",
+        })
+      },
+      save_and_exit_sample: () => {
+        dispatch({
+          type: "HEADER_BUTTON_CLICKED",
+          buttonName: "Save",
+        })
+      },
+      delete_region: () => {
+        dispatch({
+          type: "DELETE_SELECTED_REGION",
+        })
+      },
+      undo: () => {
+        dispatch({
+          type: "RESTORE_HISTORY",
+        })
+      },
+      // TODO
+      // exit_sample: () => {
+      //   dispatch({
+      //     type: "",
+      //   })
+      // }
+    }),
+    [dispatch]
+  )
+  return handlers
+}
+
+export default ({ children, dispatch }) => {
+  const handlers = useDispatchHotkeyHandlers({ dispatch })
+  return (
+    <HotKeys allowChanges handlers={handlers}>
+      {children}
+    </HotKeys>
+  )
+}

package/src/Sidebar/index.js

@@ -0,0 +1,117 @@
+// @flow
+
+import React from "react"
+import { styled } from "@mui/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import TaskDescription from "../TaskDescriptionSidebarBox"
+import ImageSelector from "../ImageSelectorSidebarBox"
+import RegionSelector from "../RegionSelectorSidebarBox"
+import History from "../HistorySidebarBox"
+import DebugBox from "../DebugSidebarBox"
+import TagsSidebarBox from "../TagsSidebarBox"
+import KeyframesSelector from "../KeyframesSelectorSidebarBox"
+import type { Region } from "../ImageCanvas/region-tools.js"
+
+const theme = createTheme()
+const Container = styled("div")(({ theme }) => ({}))
+
+type Image = {
+  name: string,
+  src: string,
+  cls?: string,
+  tags?: Array<string>,
+  thumbnailSrc?: string,
+  regions?: Array<Region>,
+}
+
+type Props = {
+  debug: any,
+  taskDescription: string,
+  images?: Array<Image>,
+  regions: Array<Region>,
+  history: Array<{ state: Object, name: string, time: Date }>,
+
+  labelImages?: boolean,
+  currentImage?: Image,
+  imageClsList?: Array<string>,
+  imageTagList?: Array<string>,
+
+  onChangeImage: (Image) => any,
+  onSelectRegion: (Region) => any,
+  onSelectImage: (Image) => any,
+  onChangeRegion: (Region) => any,
+  onDeleteRegion: (Region) => any,
+  onRestoreHistory: () => any,
+  onShortcutActionDispatched: (action: any) => any,
+}
+
+const emptyArr = []
+
+export const Sidebar = ({
+  debug,
+  taskDescription,
+  keyframes,
+  images,
+  regions,
+  history,
+  labelImages,
+  currentImage,
+  currentVideoTime,
+  imageClsList,
+  imageTagList,
+  onChangeImage,
+  onSelectRegion,
+  onSelectImage,
+  onChangeRegion,
+  onDeleteRegion,
+  onRestoreHistory,
+  onChangeVideoTime,
+  onDeleteKeyframe,
+  onShortcutActionDispatched,
+}: Props) => {
+  if (!regions) regions = emptyArr
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Container>
+        {debug && <DebugBox state={debug} lastAction={debug.lastAction} />}
+        {taskDescription && (taskDescription || "").length > 1 && (
+          <TaskDescription description={taskDescription} />
+        )}
+        {labelImages && (
+          <TagsSidebarBox
+            currentImage={currentImage}
+            imageClsList={imageClsList}
+            imageTagList={imageTagList}
+            onChangeImage={onChangeImage}
+            expandedByDefault
+          />
+        )}
+        {/* {images && images.length > 1 && (
+        <ImageSelector onSelect={onSelectImage} images={images} />
+      )} */}
+        <RegionSelector
+          regions={regions}
+          onSelectRegion={onSelectRegion}
+          onChangeRegion={onChangeRegion}
+          onDeleteRegion={onDeleteRegion}
+        />
+        {keyframes && (
+          <KeyframesSelector
+            currentVideoTime={currentVideoTime}
+            keyframes={keyframes}
+            onChangeVideoTime={onChangeVideoTime}
+            onDeleteKeyframe={onDeleteKeyframe}
+          />
+        )}
+        <History
+          history={history}
+          onRestoreHistory={() => onRestoreHistory()}
+        />
+        {/* <Shortcuts onShortcutActionDispatched={onShortcutActionDispatched} /> */}
+      </Container>
+    </ThemeProvider>
+  )
+}
+
+export default Sidebar

package/src/SidebarBoxContainer/index.js

@@ -0,0 +1,93 @@
+// @flow
+
+import React, { useState, memo } from "react"
+import Paper from "@mui/material/Paper"
+import { makeStyles } from "@mui/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import ExpandIcon from "@mui/icons-material/ExpandMore"
+import IconButton from "@mui/material/IconButton"
+import Collapse from "@mui/material/Collapse"
+import { grey } from "@mui/material/colors"
+import classnames from "classnames"
+import useEventCallback from "use-event-callback"
+import SidebarBox from "react-material-workspace-layout/SidebarBox"
+
+const theme = createTheme()
+const useStyles = makeStyles((theme) => ({
+  container: { margin: 8 },
+  header: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "bold",
+    flexGrow: 1,
+    paddingLeft: 8,
+    color: grey[800],
+    "& span": {
+      color: grey[600],
+      fontSize: 12,
+    },
+  },
+  expandButton: {
+    padding: 0,
+    width: 30,
+    height: 30,
+    "& .icon": {
+      marginTop: -6,
+      width: 20,
+      height: 20,
+      transition: "500ms transform",
+      "&.expanded": {
+        transform: "rotate(180deg)",
+      },
+    },
+  },
+  expandedContent: {
+    maxHeight: 300,
+    overflowY: "auto",
+    "&.noScroll": {
+      overflowY: "visible",
+      overflow: "visible",
+    },
+  },
+}))
+
+export const SidebarBoxContainer = ({
+  icon,
+  title,
+  subTitle,
+  children,
+  noScroll = false,
+  expandedByDefault = false,
+}) => {
+  const classes = useStyles()
+  const content = (
+    <div
+      className={classnames(classes.expandedContent, noScroll && "noScroll")}
+    >
+      {children}
+    </div>
+  )
+
+  const [expanded, changeExpanded] = useState(expandedByDefault)
+  const toggleExpanded = useEventCallback(() => changeExpanded(!expanded))
+
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarBox icon={icon} title={title}>
+        {children}
+      </SidebarBox>
+    </ThemeProvider>
+  )
+}
+
+export default memo(
+  SidebarBoxContainer,
+  (prev, next) => prev.title === next.title && prev.children === next.children
+)

package/src/SmallToolButton/index.js

@@ -0,0 +1,57 @@
+// @flow
+
+import React, { createContext, useContext, memo } from "react"
+import IconButton from "@mui/material/IconButton"
+import Tooltip from "@mui/material/Tooltip"
+import { blue } from "@mui/material/colors"
+
+export const SelectedTool = createContext()
+
+export const SmallToolButton = ({
+  id,
+  name,
+  icon,
+  selected,
+  togglable,
+  alwaysShowing = false,
+}: {
+  id: string,
+  name: string,
+  icon: any,
+  alwaysShowing?: boolean,
+  selected?: boolean,
+  togglable?: boolean,
+}) => {
+  const { enabledTools, selectedTool, onClickTool } = useContext(SelectedTool)
+  if (!enabledTools.includes(id) && !alwaysShowing) return null
+  selected = selected || selectedTool === id
+  return (
+    <Tooltip placement="right" title={name}>
+      <div>
+        <IconButton
+          disabled={!togglable ? selected : undefined}
+          aria-label={name}
+          onClick={() => onClickTool(id)}
+          size="small"
+          style={{
+            width: 50,
+            height: 50,
+            margin: 1,
+            color: selected ? blue[500] : undefined,
+          }}
+        >
+          {icon}
+        </IconButton>
+      </div>
+    </Tooltip>
+  )
+}
+
+export default memo(
+  SmallToolButton,
+  (prevProps, nextProps) =>
+    prevProps.togglable === nextProps.togglable &&
+    prevProps.selected === nextProps.selected &&
+    prevProps.name === nextProps.name &&
+    prevProps.id === nextProps.id
+)

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