@searpent/react-image-annotate 2.0.1 → 2.0.4

package/src/MainLayout/types.js

@@ -23,6 +23,11 @@ export type ToolEnum =
   | "create-expanding-line"
   | "create-keypoints"
 
+export type Metadata = {
+  key: string,
+  value: string
+}
+
 export type Image = {
   src: string,
   thumbnailSrc?: string,
@@ -31,6 +36,7 @@ export type Image = {
   pixelSize?: { w: number, h: number },
   realSize?: { w: number, h: number, unitName: string },
   frameTime?: number,
+  metadata?: Array<Metadata>
 }
 
 export type Mode =
@@ -38,79 +44,79 @@ export type Mode =
   | {| mode: "DRAW_POLYGON", regionId: string |}
   | {| mode: "MOVE_POLYGON_POINT", regionId: string, pointIndex: number |}
   | {|
-      mode: "RESIZE_BOX",
-      editLabelEditorAfter?: boolean,
-      regionId: string,
+  mode: "RESIZE_BOX",
+    editLabelEditorAfter ?: boolean,
+    regionId: string,
       freedom: [number, number],
-      original: { x: number, y: number, w: number, h: number },
-      isNew?: boolean,
+        original: { x: number, y: number, w: number, h: number },
+isNew ?: boolean,
     |}
   | {| mode: "MOVE_REGION" |}
   | {| mode: "MOVE_KEYPOINT", regionId: string, keypointId: string |}
   | {|
-      mode: "RESIZE_KEYPOINTS",
-      landmarks: {
-        [string]: KeypointDefinition,
+  mode: "RESIZE_KEYPOINTS",
+    landmarks: {
+  [string]: KeypointDefinition,
       },
-      centerX: number,
-      centerY: number,
-      regionId: string,
+centerX: number,
+  centerY: number,
+    regionId: string,
       isNew: boolean,
     |}
 
 export type MainLayoutStateBase = {|
   annotationType: "video" | "image",
-  mouseDownAt?: ?{ x: number, y: number },
-  fullScreen?: boolean,
-  settingsOpen?: boolean,
-  minRegionSize?: number,
-  showTags: boolean,
-  showMask: boolean,
-  showPointDistances?: boolean,
-  pointDistancePrecision?: number,
-  selectedTool: ToolEnum,
-  selectedCls?: string,
-  mode: Mode,
-  taskDescription: string,
-  allowedArea?: { x: number, y: number, w: number, h: number },
-  regionClsList?: Array<string>,
-  regionTagList?: Array<string>,
-  imageClsList?: Array<string>,
-  imageTagList?: Array<string>,
-  enabledTools: Array<string>,
-  history: Array<{ time: Date, state: MainLayoutState, name: string }>,
-  keypointDefinitions: KeypointsDefinition,
+    mouseDownAt ?: ? { x: number, y: number },
+    fullScreen ?: boolean,
+    settingsOpen ?: boolean,
+    minRegionSize ?: number,
+    showTags: boolean,
+      showMask: boolean,
+        showPointDistances ?: boolean,
+        pointDistancePrecision ?: number,
+        selectedTool: ToolEnum,
+          selectedCls ?: string,
+          mode: Mode,
+            taskDescription: string,
+              allowedArea ?: { x: number, y: number, w: number, h: number },
+              regionClsList ?: Array < string >,
+              regionTagList ?: Array < string >,
+              imageClsList ?: Array < string >,
+              imageTagList ?: Array < string >,
+              enabledTools: Array < string >,
+                history: Array < { time: Date, state: MainLayoutState, name: string } >,
+                  keypointDefinitions: KeypointsDefinition,
 |}
 
 export type MainLayoutImageAnnotationState = {|
   ...MainLayoutStateBase,
   annotationType: "image",
 
-  selectedImage?: string,
-  images: Array<Image>,
-  labelImages?: boolean,
+    selectedImage ?: string,
+    images: Array < Image >,
+      labelImages ?: boolean,
 
-  // If the selectedImage corresponds to a frame of a video
-  selectedImageFrameTime?: number,
+      // If the selectedImage corresponds to a frame of a video
+      selectedImageFrameTime ?: number,
 |}
 
 export type MainLayoutVideoAnnotationState = {|
   ...MainLayoutStateBase,
   annotationType: "video",
 
-  videoSrc: string,
-  currentVideoTime: number,
-  videoName?: string,
-  videoPlaying: boolean,
-  videoDuration?: number,
-  keyframes: {
-    [time: number]: {|
-      time: number,
-      regions: Array<Region>,
+    videoSrc: string,
+      currentVideoTime: number,
+        videoName ?: string,
+        videoPlaying: boolean,
+          videoDuration ?: number,
+          keyframes: {
+  [time: number]: {|
+    time: number,
+      regions: Array < Region >,
     |},
-  },
-  pixelSize?: { w: number, h: number },
-  realSize?: { w: number, h: number, unitName: string },
+},
+pixelSize ?: { w: number, h: number },
+  realSize ?: { w: number, h: number, unitName: string },
 |}
 
 export type MainLayoutState =
@@ -121,11 +127,11 @@ export type Action =
   | {| type: "@@INIT" |}
   | {| type: "SELECT_IMAGE", image: Image, imageIndex: number |}
   | {|
-      type: "IMAGE_OR_VIDEO_LOADED",
-      metadata: {
-        naturalWidth: number,
-        naturalHeight: number,
-        duration?: number,
+  type: "IMAGE_OR_VIDEO_LOADED",
+    metadata: {
+  naturalWidth: number,
+    naturalHeight: number,
+      duration ?: number,
       },
     |}
   | {| type: "CHANGE_REGION", region: Region |}
@@ -137,10 +143,10 @@ export type Action =
   | {| type: "BEGIN_MOVE_POLYGON_POINT", polygon: Polygon, pointIndex: number |}
   | {| type: "BEGIN_MOVE_KEYPOINT", region: Keypoints, keypointId: string |}
   | {|
-      type: "ADD_POLYGON_POINT",
-      polygon: Polygon,
+  type: "ADD_POLYGON_POINT",
+    polygon: Polygon,
       point: { x: number, y: number },
-      pointIndex: number,
+pointIndex: number,
     |}
   | {| type: "MOUSE_MOVE", x: number, y: number |}
   | {| type: "MOUSE_DOWN", x: number, y: number |}
@@ -154,3 +160,5 @@ export type Action =
   | {| type: "SELECT_TOOL", selectedTool: ToolEnum |}
   | {| type: "CANCEL" |}
   | {| type: "SELECT_CLASSIFICATION", cls: string |}
+  | {| type: "UPDATE_REGIONS", imageId: string, regions: Arrat < Region >}
+  | {| type: "IMAGES_CHANGED", updatedAt: Date |}

package/src/MetadataEditorSidebarBox/index.js

@@ -0,0 +1,98 @@
+// @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"
+
+type MetadataItemProps = {
+  name: string,
+  value: string,
+  imageIndex: number,
+  onChange: ({ name: string, value: String, imageIndex: number }) => void
+}
+
+const MetadataItemDiv = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  marginBottom: "1rem",
+  "& > label": {
+    fontSize: "1rem",
+    marginBottom: ".5rem",
+    textTransform: "capitalize"
+  }
+}))
+
+const MetadataItem = ({ name, value, imageIndex, onChange }: MetadataItemProps) => {
+  const handleChange = e => {
+    e.preventDefault()
+    const { name, value } = e.target
+    onChange({
+      name,
+      value,
+      imageIndex
+    })
+  }
+
+  return (
+    <MetadataItemDiv>
+      <label for={name}>{name}</label>
+      <input type="text" value={value} name={name} onChange={handleChange} />
+    </MetadataItemDiv>
+  )
+}
+
+const MetadataList = ({ title, metadata, imageIndex, onMetadataChange }) => (
+  <div>
+    <h2>{title}</h2>
+    {
+      metadata.map(({ key, value }) => (
+        <MetadataItem name={key} value={value} imageIndex={imageIndex} onChange={onMetadataChange} />
+      ))
+    }
+  </div>
+)
+
+const theme = createTheme()
+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 MetadataEditorSidebarBox = ({ state, onMetadataChange }) => {
+
+
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarBoxContainer
+        title="Metadata"
+        icon={<DescriptionIcon style={{ color: grey[700] }} />}
+        expandedByDefault={true}
+      >
+        <DivContainer>
+          <MetadataList title="Global" metadata={state.metadata} onMetadataChange={onMetadataChange} />
+          {
+            state?.images[state.selectedImage]?.metadata && (
+              <MetadataList title="Local" metadata={state.images[state.selectedImage].metadata} imageIndex={state.selectedImage} onMetadataChange={onMetadataChange} />
+            )
+          }
+
+        </DivContainer>
+      </SidebarBoxContainer>
+    </ThemeProvider>
+  )
+}
+
+export default memo(MetadataEditorSidebarBox)

package/src/PageSelector/index.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from "classnames"
+require('./page-selector.css').toString();
+
+function PageThumbnail({ src, isActive, onClick, pageNumber }) {
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className={classnames('page-thumbnail', {
+        'page-thumbnail-is-active': isActive
+      })}
+      onClick={onClick}
+    >
+      <img src={src} alt="" />
+      {
+        (pageNumber !== undefined) && (
+          <div className="page-number-wrapper">
+            <span className="page-number">{pageNumber}</span>
+          </div>
+        )
+      }
+
+    </div >
+  );
+}
+
+function PagesSelector({ pages, onPageClick, onRecalc, onSave, recalcActive, saveActive }) {
+  return (
+    <div className="page-selector">
+      <div className="bottom-buttons">
+        <button onClick={onRecalc} disabled={!recalcActive}>Recalc</button>
+        <button onClick={onSave} disabled={!saveActive}>Save</button>
+      </div>
+      <div className="pages">
+        {pages.map((page, idx) => (
+          <PageThumbnail
+            key={page.id}
+            src={page.src}
+            isActive={page.isActive}
+            onClick={() => onPageClick(idx)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+PagesSelector.propTypes = {
+  pages: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      src: PropTypes.string.isRequired,
+      isActive: PropTypes.string.isRequired,
+      pageNumber: PropTypes.string
+    })
+  ).isRequired,
+  onPageClick: PropTypes.func,
+  onRecalc: PropTypes.func,
+  onSave: PropTypes.func,
+  recalcActive: PropTypes.bool,
+  saveActive: PropTypes.bool,
+  pageNumber: PropTypes.string
+};
+
+PagesSelector.defaultProps = {
+  onPageClick: () => { },
+  onRecalc: () => { },
+  onSave: () => { },
+  recalcActive: false,
+  saveActive: false,
+  pageNumber: undefined
+};
+
+export default PagesSelector;

package/src/PageSelector/page-selector.css

@@ -0,0 +1,69 @@
+.page-selector {
+  height: 100vh;
+  overflow-y: scroll;
+  width: 10%;
+}
+
+.pages {
+  list-style: none;
+  padding: 1rem;
+}
+
+.page-thumbnail {
+  margin-bottom: 1rem;
+  border-radius: .25rem !important;
+  overflow: hidden;
+  filter: grayscale(1);
+  transition: transform .2s;
+  opacity: .5;
+}
+
+.page-thumbnail:hover {
+  box-shadow: 0 0 2rem 0 #8898aa !important;
+  filter: grayscale(0);
+  cursor: pointer;
+  opacity: 1;
+}
+
+.page-thumbnail-is-active {
+  filter: grayscale(0);
+  opacity: 1;
+}
+
+.page-thumbnail img {
+  width: 100%;
+}
+
+.bottom-buttons {
+  background: linear-gradient(#8898aa, rgba(255, 255, 255, 0));
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  z-index: 100;
+}
+
+.bottom-buttons button {
+  margin-bottom: 1rem;
+  width: 100%;
+}
+
+.page-number-wrapper {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 10%;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(rgba(255, 255, 255, 0), #8898aa);
+  padding: .5rem 0;
+}
+
+.page-number {
+  font-size: 1.5rem;
+  font-weight: 800;
+}

package/src/RegionLabel/index.js

@@ -25,6 +25,7 @@ type Props = {
   editing?: boolean,
   allowedClasses?: Array<string>,
   allowedTags?: Array<string>,
+  allowedGroups?: Array<{ value: String, label: String }>,
   cls?: string,
   tags?: Array<string>,
   onDelete: (Region) => null,
@@ -33,6 +34,7 @@ type Props = {
   onOpen: (Region) => null,
   onRegionClassAdded: () => {},
   allowComments?: boolean,
+  hideNotEditingLabel?: boolean,
 }
 
 export const RegionLabel = ({
@@ -46,6 +48,8 @@ export const RegionLabel = ({
   onOpen,
   onRegionClassAdded,
   allowComments,
+  hideNotEditingLabel,
+  allowedGroups,
 }: Props) => {
   const classes = useStyles()
   const commentInputRef = useRef(null)
@@ -56,6 +60,8 @@ export const RegionLabel = ({
     if (commentInput) return commentInput.focus()
   }
 
+  if (hideNotEditingLabel && !editing) return null
+
   return (
     <ThemeProvider theme={theme}>
       <Paper
@@ -136,6 +142,21 @@ export const RegionLabel = ({
                 />
               </div>
             )}
+            {(allowedGroups || []).length > 0 && (
+              <Select
+                onChange={(newGroup) => onChange({
+                  ...(region: any),
+                  groupId: newGroup.value,
+                })
+
+                }
+                placeholder="Group"
+                value={
+                  allowedGroups.filter(g => g.value === region.groupId)
+                }
+                options={allowedGroups}
+              />
+            )}
             {(allowedTags || []).length > 0 && (
               <div style={{ marginTop: 4 }}>
                 <Select

package/src/RegionShapes/index.js

@@ -2,6 +2,8 @@
 
 import React, { memo } from "react"
 import colorAlpha from "color-alpha"
+import useColors from '../hooks/use-colors';
+
 
 function clamp(num, min, max) {
   return num <= min ? min : num >= max ? max : num
@@ -31,19 +33,36 @@ const RegionComponents = {
       />
     </g>
   )),
-  box: memo(({ region, iw, ih }) => (
-    <g transform={`translate(${region.x * iw} ${region.y * ih})`}>
-      <rect
-        strokeWidth={2}
-        x={0}
-        y={0}
-        width={Math.max(region.w * iw, 0)}
-        height={Math.max(region.h * ih, 0)}
-        stroke={colorAlpha(region.color, 0.75)}
-        fill={colorAlpha(region.color, 0.25)}
-      />
-    </g>
-  )),
+  box: memo(({ region, iw, ih }) => {
+    const { clsColor, groupColor } = useColors();
+
+    if (region.groupId !== undefined) {
+      return <g transform={`translate(${region.x * iw} ${region.y * ih})`}>
+        <rect
+          strokeWidth={(region.groupHighlighted) ? 3 : 0}
+          x={0}
+          y={0}
+          width={Math.max(region.w * iw, 0)}
+          height={Math.max(region.h * ih, 0)}
+          stroke={colorAlpha(clsColor(region.cls), 0.85)}
+          fill={(region.groupHighlighted) ? colorAlpha(groupColor(region.groupId), 0.5) : colorAlpha(groupColor(region.groupId), 0.25)}
+        />
+      </g>
+    } else {
+      return <g transform={`translate(${region.x * iw} ${region.y * ih})`}>
+        <rect
+          strokeWidth={2}
+          x={0}
+          y={0}
+          width={Math.max(region.w * iw, 0)}
+          height={Math.max(region.h * ih, 0)}
+          stroke={colorAlpha(clsColor(region.cls), 0.85)}
+          fill={colorAlpha(clsColor(region.cls), 0.25)}
+        />
+      </g>
+    }
+  }
+  ),
   polygon: memo(({ region, iw, ih, fullSegmentationMode }) => {
     const Component = region.open ? "polyline" : "polygon"
     const alphaBase = fullSegmentationMode ? 0.5 : 1
@@ -144,9 +163,8 @@ const RegionComponents = {
         {points.map(({ x, y, angle }, i) => (
           <g
             key={i}
-            transform={`translate(${x * iw} ${y * ih}) rotate(${
-              (-(angle || 0) * 180) / Math.PI
-            })`}
+            transform={`translate(${x * iw} ${y * ih}) rotate(${(-(angle || 0) * 180) / Math.PI
+              })`}
           >
             <g>
               <rect

package/src/RegionTags/index.js

@@ -28,6 +28,8 @@ export const RegionTags = ({
   RegionEditLabel,
   onRegionClassAdded,
   allowComments,
+  hideNotEditingLabel,
+  allowedGroups
 }) => {
   const RegionLabel =
     RegionEditLabel != null ? RegionEditLabel : DefaultRegionLabel
@@ -44,9 +46,9 @@ export const RegionTags = ({
 
       const coords = displayOnTop
         ? {
-            left: pbox.x,
-            top: pbox.y - margin / 2,
-          }
+          left: pbox.x,
+          top: pbox.y - margin / 2,
+        }
         : { left: pbox.x, top: pbox.y + pbox.h + margin / 2 }
       if (region.locked) {
         return (
@@ -120,6 +122,8 @@ export const RegionTags = ({
               imageSrc={imageSrc}
               onRegionClassAdded={onRegionClassAdded}
               allowComments={allowComments}
+              hideNotEditingLabel={hideNotEditingLabel}
+              allowedGroups={allowedGroups}
             />
           </div>
         </div>

package/src/SettingsProvider/index.js

@@ -20,7 +20,7 @@ const pullSettingsFromLocalStorage = () => {
         settings[key.replace("settings_", "")] = JSON.parse(
           window.localStorage.getItem(key)
         )
-      } catch (e) {}
+      } catch (e) { }
     }
   }
   return settings
@@ -28,8 +28,12 @@ const pullSettingsFromLocalStorage = () => {
 
 export const useSettings = () => useContext(SettingsContext)
 
-export const SettingsProvider = ({ children }) => {
-  const [state, changeState] = useState(() => pullSettingsFromLocalStorage())
+export const SettingsProvider = ({ children, clsColors, groupColors }) => {
+  const [state, changeState] = useState({
+    ...() => pullSettingsFromLocalStorage(),
+    clsColors,
+    groupColors,
+  })
   const changeSetting = (setting: string, value: any) => {
     changeState({ ...state, [setting]: value })
     window.localStorage.setItem(`settings_${setting}`, JSON.stringify(value))

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/utils/filter-only-unique.js

@@ -0,0 +1,5 @@
+function onlyUnique(value, index, self) {
+  return self.indexOf(value) === index;
+}
+
+export default onlyUnique;