@searpent/react-image-annotate 2.0.74 → 2.0.76

package/src/FullImageSegmentationAnnotator/index.story.js

@@ -0,0 +1,177 @@
+// @flow
+
+import React from "react"
+
+import { storiesOf } from "@storybook/react"
+import { action } from "@storybook/addon-actions"
+import orange from "./orange.story.png"
+import hard1 from "./hard1.story.jpg"
+import hard2 from "./hard2.story.jpg"
+import hard3 from "./hard3.story.jpg"
+
+import FullImageSegmentationAnnotator from "./"
+
+storiesOf("FullImageSegmentationAnnotator.Basic", module)
+  .add("Orange 2 Class", () => (
+    <div style={{ width: "95vw", height: "95vh" }}>
+      <FullImageSegmentationAnnotator
+        images={[
+          {
+            name: "Seve's Desk",
+            // src:
+            //   "https://a.allegroimg.com/s128/113a6e/09d2c0ed4f278610e555c95b1d50/Rama-BIANCHI-OLTRE-XR4-DISC-carbon-Vision-ACR-51cm-Dedykowany-a-do-kolarstwo-szosowe",
+            // src: "https://i.imgur.com/Dv5lkQZ.png",
+            src: orange,
+            regions: [
+              [1, 40, 280],
+              [1, 10, 10],
+              [1, 240, 300],
+            ]
+              .map(([cls, y, x], i) => ({
+                cls: ["fg", "bg"][cls],
+                color: "hsl(162,100%,50%)",
+                editingLabels: false,
+                highlighted: false,
+                id: "a" + i,
+                type: "point",
+                x: x / 320,
+                y: y / 249,
+              }))
+              .concat([
+                {
+                  cls: "fg",
+                  color: "hsl(162,100%,50%)",
+                  editingLabels: false,
+                  highlighted: false,
+                  id: "bb",
+                  type: "box",
+                  x: 0.3,
+                  y: 0.25,
+                  w: 0.35,
+                  h: 0.38,
+                },
+              ]),
+          },
+        ]}
+        regionClsList={["bg", "fg"]}
+        onExit={action("onExit")}
+      />
+    </div>
+  ))
+  .add("S3 CORS domain", () => (
+    <div style={{ width: "95vw", height: "95vh" }}>
+      <FullImageSegmentationAnnotator
+        images={[
+          {
+            name: "Seve's Desk",
+            src: "https://s3.amazonaws.com/datasets.workaround.online/faces/010041.jpg",
+            regions: [
+              [0, 100, 125],
+              [0, 100, 150],
+              [1, 40, 280],
+              [1, 10, 10],
+              [1, 240, 300],
+            ].map(([cls, y, x], i) => ({
+              cls: ["fg", "bg"][cls],
+              color: "hsl(162,100%,50%)",
+              editingLabels: false,
+              highlighted: false,
+              id: "a" + i,
+              type: "point",
+              x: x / 320,
+              y: y / 249,
+            })),
+          },
+        ]}
+        regionClsList={["bg", "fg"]}
+        onExit={action("onExit")}
+      />
+    </div>
+  ))
+  .add("Orange 3 Class", () => (
+    <div style={{ width: "95vw", height: "95vh" }}>
+      <FullImageSegmentationAnnotator
+        images={[
+          {
+            name: "Seve's Desk",
+            src: orange,
+            regions: [
+              [0, 100, 125],
+              [0, 100, 150],
+              [1, 40, 280],
+              [1, 10, 10],
+              [1, 240, 300],
+            ].map(([cls, y, x], i) => ({
+              cls: ["orange", "bg", "hand"][cls],
+              color: "hsl(162,100%,50%)",
+              editingLabels: false,
+              highlighted: false,
+              id: "a" + i,
+              type: "point",
+              x: x / 320,
+              y: y / 249,
+            })),
+          },
+        ]}
+        regionClsList={["bg", "orange", "hand"]}
+        onExit={action("onExit")}
+      />
+    </div>
+  ))
+  .add("Hard 1, 8 Class, Simple Mode", () => (
+    <div style={{ width: "95vw", height: "95vh" }}>
+      <FullImageSegmentationAnnotator
+        images={[
+          {
+            name: "Hard",
+            src: hard1,
+          },
+        ]}
+        regionClsList={["bg", "1", "2", "3", "4", "5", "6", "7", "8"]}
+        onExit={action("onExit")}
+        autoSegmentationOptions={{ type: "simple" }}
+      />
+    </div>
+  ))
+  .add("Hard 1, 8 Class", () => (
+    <div style={{ width: "95vw", height: "95vh" }}>
+      <FullImageSegmentationAnnotator
+        images={[
+          {
+            name: "Hard",
+            src: hard1,
+          },
+        ]}
+        regionClsList={["1", "2", "3", "4", "5", "6", "7", "8"]}
+        onExit={action("onExit")}
+      />
+    </div>
+  ))
+  .add("Hard 2, 8 Class", () => (
+    <div style={{ width: "95vw", height: "95vh" }}>
+      <FullImageSegmentationAnnotator
+        images={[
+          {
+            name: "Really Hard",
+            src: hard2,
+          },
+        ]}
+        regionClsList={["1", "2", "3", "4", "5", "6", "7", "8"]}
+        onExit={action("onExit")}
+      />
+    </div>
+  ))
+  .add("Hard 3, 8 Class", () => (
+    <div style={{ width: "95vw", height: "95vh" }}>
+      <FullImageSegmentationAnnotator
+        images={[
+          {
+            name: "Extremely Hard",
+            src: hard3,
+          },
+        ]}
+        regionClsList={["1", "2", "3", "4", "5", "6", "7", "8"]}
+        onExit={action("onExit")}
+      />
+    </div>
+  ))

package/src/GroupSelectorSidebarBox/index.js

@@ -0,0 +1,48 @@
+// @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 uuidToHash from '../utils/uuid-to-hash';
+
+const theme = createTheme()
+const useStyles = makeStyles((theme) => ({
+  img: { width: 40, height: 40, borderRadius: 8 },
+}))
+
+export const GroupSelectorSidebarBox = ({ title, subtitle, groups, onSelect, selectedGroupId }) => {
+  const classes = useStyles()
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarBoxContainer
+        title={title || ''}
+        subTitle={subtitle || ''}
+        icon={<CollectionsIcon style={{ color: grey[700] }} />}
+      >
+        <List>
+          {groups.map(({ id, title: groupTitle, subtitle: groupSubtitle, color }, i) => (
+            <ListItem button onClick={() => onSelect(id)} dense key={id} style={{
+              backgroundColor: id === selectedGroupId ? '#bbdefb' : null
+            }}>
+              <ListItemText
+                primary={<strong style={{
+                  color
+                }}>{uuidToHash(groupTitle)}</strong>}
+                secondary={groupSubtitle}
+              />
+            </ListItem>
+          ))}
+        </List>
+
+      </SidebarBoxContainer>
+    </ThemeProvider>
+  )
+}
+
+export default GroupSelectorSidebarBox

package/src/GroupsEditorSidebarBox/index.js

@@ -0,0 +1,108 @@
+// @flow
+
+import React, { memo, useState } from "react"
+import SidebarBoxContainer from "../SidebarBoxContainer"
+import FilterNoneIcon from '@mui/icons-material/FilterNone';
+import { styled } from "@mui/material/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import { grey } from "@mui/material/colors"
+import uuidToHash from "../utils/uuid-to-hash";
+
+const theme = createTheme()
+
+const GroupItemDiv = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  marginBottom: "1rem",
+  "& > label": {
+    fontSize: "1rem",
+    marginBottom: ".5rem",
+    textTransform: "capitalize"
+  }
+}))
+
+const GroupItem = ({ group }) => {
+  return (
+    <GroupItemDiv>
+      {uuidToHash(group.id)}
+    </GroupItemDiv>
+  )
+}
+
+const GroupList = ({ groups }) => (
+  <div>
+    <h2>Groups</h2>
+    {
+      groups.map((g, idx) => <GroupItem key={`${g}-${idx}`} group={g} />)
+    }
+  </div>
+)
+
+const AddGroupFormDiv = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+}))
+
+const AddGroupFrom = ({ onAddGroup }) => {
+  const [value, setValue] = useState("");
+
+  const handleChange = (e) => {
+    setValue(e.target.value)
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onAddGroup(value);
+    setValue('')
+  }
+
+  return (
+    <AddGroupFormDiv>
+      <form onSubmit={handleSubmit} style={{
+        display: "flex",
+        paddingRight: "6px",
+      }}>
+        <input type="text" value={value} name="new-group" placeholder="New group name" onChange={handleChange} style={{
+          marginRight: "1rem",
+        }} />
+        <input type="submit" value="Create group" />
+      </form >
+    </AddGroupFormDiv>
+  )
+}
+
+
+const DivContainer = 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 GroupsEditorSidebarBox = ({ groups, onAddGroup }) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarBoxContainer
+        title="Groups"
+        icon={<FilterNoneIcon style={{ color: grey[700] }} />}
+        expandedByDefault={true}
+      >
+        <DivContainer>
+          <h2>Add new group</h2>
+          <AddGroupFrom onAddGroup={onAddGroup} />
+          <GroupList groups={groups} />
+        </DivContainer>
+      </SidebarBoxContainer>
+    </ThemeProvider>
+  )
+}
+
+export default memo(GroupsEditorSidebarBox)

package/src/HelpSidebarBox/index.js

@@ -0,0 +1,43 @@
+// @flow
+
+import React, { memo } from "react"
+import SidebarBoxContainer from "../SidebarBoxContainer"
+import HelpIcon from '@mui/icons-material/Help';
+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 HelpSidebarBox = ({ help }) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarBoxContainer
+        title="Help"
+        icon={<HelpIcon style={{ color: grey[700] }} />}
+        expandedByDefault={help && help !== "" ? false : true}
+      >
+        <MarkdownContainer>
+          <Markdown source={help} />
+        </MarkdownContainer>
+      </SidebarBoxContainer>
+    </ThemeProvider>
+  )
+}
+
+export default memo(HelpSidebarBox)

package/src/HighlightBox/index.js

@@ -0,0 +1,143 @@
+// @flow
+
+import React from "react"
+import classnames from "classnames"
+import { makeStyles } from "@mui/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+
+const theme = createTheme()
+const useStyles = makeStyles((theme) => ({
+  "@keyframes borderDance": {
+    from: { strokeDashoffset: 0 },
+    to: { strokeDashoffset: 100 },
+  },
+  highlightBox: {
+    zIndex: 2,
+    transition: "opacity 500ms",
+    "&.highlighted": {
+      zIndex: 3,
+    },
+    "&:not(.highlighted)": {
+      opacity: 0,
+    },
+    "&:not(.highlighted):hover": {
+      opacity: 0.6,
+    },
+    "& path": {
+      // NOTE: attributes below commnted because resetting screen caused old frame to highlight
+      // vectorEffect: "non-scaling-stroke",
+      // strokeWidth: 2,
+      // stroke: "#FFF",
+      // strokeDasharray: 5,
+      fill: "none",
+      animationName: "$borderDance",
+      animationDuration: "4s",
+      animationTimingFunction: "linear",
+      animationIterationCount: "infinite",
+      animationPlayState: "running",
+    },
+  },
+}))
+
+export const HighlightBox = ({
+  mouseEvents,
+  dragWithPrimary,
+  zoomWithPrimary,
+  createWithPrimary,
+  onBeginMovePoint,
+  onSelectRegion,
+  region: r,
+  pbox,
+}: {
+  mouseEvents: any,
+  dragWithPrimary: boolean,
+  zoomWithPrimary: boolean,
+  createWithPrimary: boolean,
+  onBeginMovePoint: Function,
+  onSelectRegion: Function,
+  region: any,
+  pbox: { x: number, y: number, w: number, h: number },
+}) => {
+  const classes = useStyles()
+  if (!pbox.w || pbox.w === Infinity) return null
+  if (!pbox.h || pbox.h === Infinity) return null
+  if (r.unfinished) return null
+
+  const styleCoords =
+    r.type === "point"
+      ? {
+        left: pbox.x + pbox.w / 2 - 30,
+        top: pbox.y + pbox.h / 2 - 30,
+        width: 60,
+        height: 60,
+      }
+      : {
+        left: pbox.x - 5,
+        top: pbox.y - 5,
+        width: pbox.w + 10,
+        height: pbox.h + 10,
+      }
+
+  const pathD =
+    r.type === "point"
+      ? `M5,5 L${styleCoords.width - 5} 5L${styleCoords.width - 5} ${styleCoords.height - 5
+      }L5 ${styleCoords.height - 5}Z`
+      : `M5,5 L${pbox.w + 5},5 L${pbox.w + 5},${pbox.h + 5} L5,${pbox.h + 5} Z`
+
+  return (
+    <ThemeProvider theme={theme}>
+      <svg
+        key={r.id}
+        className={classnames(classes.highlightBox, {
+          highlighted: r.highlighted,
+        })}
+        {...mouseEvents}
+        {...(!zoomWithPrimary && !dragWithPrimary
+          ? {
+            onMouseDown: (e) => {
+              if (
+                !r.locked &&
+                r.type === "point" &&
+                r.highlighted &&
+                e.button === 0
+              ) {
+                return onBeginMovePoint(r)
+              }
+              if (e.button === 0 && !createWithPrimary)
+                return onSelectRegion({ ...r, ctrlKey: e.ctrlKey })
+              mouseEvents.onMouseDown(e)
+            },
+          }
+          : {})}
+        style={{
+          ...(r.highlighted
+            ? {
+              pointerEvents: r.type !== "point" ? "none" : undefined,
+              cursor: "grab",
+            }
+            : {
+              cursor: !(
+                zoomWithPrimary ||
+                dragWithPrimary ||
+                createWithPrimary
+              )
+                ? "pointer"
+                : undefined,
+              pointerEvents:
+                zoomWithPrimary ||
+                  dragWithPrimary ||
+                  (createWithPrimary && !r.highlighted)
+                  ? "none"
+                  : undefined,
+            }),
+          position: "absolute",
+          ...styleCoords,
+        }}
+      >
+        <path d={pathD} />
+      </svg>
+    </ThemeProvider>
+  )
+}
+
+export default HighlightBox

package/src/HistorySidebarBox/index.js

@@ -0,0 +1,78 @@
+// @flow
+
+import React, { setState, memo } from "react"
+import { makeStyles } from "@mui/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import SidebarBoxContainer from "../SidebarBoxContainer"
+import HistoryIcon from "@mui/icons-material/History"
+import List from "@mui/material/List"
+import ListItem from "@mui/material/ListItem"
+import ListItemText from "@mui/material/ListItemText"
+import IconButton from "@mui/material/IconButton"
+import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction"
+import UndoIcon from "@mui/icons-material/Undo"
+import moment from "moment"
+import { grey } from "@mui/material/colors"
+import isEqual from "lodash/isEqual"
+import Box from "@mui/material/Box"
+
+const theme = createTheme()
+const useStyles = makeStyles((theme) => ({
+  emptyText: {
+    fontSize: 14,
+    fontWeight: "bold",
+    color: grey[500],
+    textAlign: "center",
+    padding: 20,
+  },
+}))
+
+const listItemTextStyle = { paddingLeft: 16 }
+
+export const HistorySidebarBox = ({
+  history,
+  onRestoreHistory,
+}: {
+  history: Array<{ name: string, time: Date }>,
+}) => {
+  const classes = useStyles()
+
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarBoxContainer
+        title="History"
+        icon={<HistoryIcon style={{ color: grey[700] }} />}
+        expandedByDefault
+      >
+        <List>
+          {history.length === 0 && (
+            <div className={classes.emptyText}>No History Yet</div>
+          )}
+          {history.map(({ name, time }, i) => (
+            <ListItem button dense key={i}>
+              <ListItemText
+                style={listItemTextStyle}
+                primary={name}
+                secondary={moment(time).format("LT")}
+              />
+              {i === 0 && (
+                <ListItemSecondaryAction onClick={() => onRestoreHistory()}>
+                  <IconButton>
+                    <UndoIcon />
+                  </IconButton>
+                </ListItemSecondaryAction>
+              )}
+            </ListItem>
+          ))}
+        </List>
+      </SidebarBoxContainer>
+    </ThemeProvider>
+  )
+}
+
+export default memo(HistorySidebarBox, (prevProps, nextProps) =>
+  isEqual(
+    prevProps.history.map((a) => [a.name, a.time]),
+    nextProps.history.map((a) => [a.name, a.time])
+  )
+)