feat: Merge pull request #232 from UniversalDataTool/improved-pixel-segmentation

improved pixel segmentation with web workers and configurable quality

Author: seveibar

package.json

@@ -106,7 +106,7 @@
     "react-hotkeys": "^2.0.0",
     "react-i18next": "^11.4.0",
     "react-icons": "^3.9.0",
-    "react-image-annotate": "^1.2.7",
+    "react-image-annotate": "^1.3.1",
     "react-material-workspace-layout": "^0.1.6",
     "react-scripts": "^3.4.1",
     "react-select": "^3.0.8",

src/components/ConfigureImagePixelSegmentation/index.js

@@ -1,12 +1,19 @@
 // @flow
 import React, { useMemo } from "react"
 import Survey from "material-survey/components/Survey"
-import { setIn } from "seamless-immutable"
 
-const autoSegmentationOptions = {
-  simple: { type: "simple" },
-  autoseg: { type: "autoseg" },
+const maxClusterPresets = {
+  low: 1000,
+  medium: 8000,
+  high: 64000,
 }
+const maxClusterPresetsRev = Object.entries(maxClusterPresets).reduce(
+  (acc, curr) => {
+    acc[curr[1]] = curr[0]
+    return acc
+  },
+  {}
+)
 
 const form = {
   questions: [
@@ -32,11 +39,28 @@ const form = {
       type: "text",
     },
     {
-      name: "autoseg",
+      name: "autosegMode",
       type: "dropdown",
       title: "Automatic Segmentation Engine",
       choices: ["simple", "autoseg"],
     },
+    {
+      name: "autosegPreset",
+      type: "dropdown",
+      visibleIf: "{autosegMode}='autoseg'",
+      title: "Super Pixel Quality",
+      choices: ["low", "medium", "high", "custom"],
+    },
+    {
+      name: "autosegMaxClusters",
+      type: "slider",
+      visibleIf: "{autosegPreset}='custom'",
+      title: "Total Super Pixels",
+      min: 10,
+      max: 100000,
+      step: 10,
+      defaultValue: 1000,
+    },
   ],
 }
 
@@ -48,7 +72,12 @@ export default ({ iface, onChange }) => {
         (iface.labels || []).map((a) =>
           typeof a === "string" ? { id: a, description: a } : a
         ) || [],
-      autoseg: iface.autoSegmentationEngine?.type,
+      autosegMode: iface.autoSegmentationEngine?.mode,
+      autosegPreset:
+        maxClusterPresetsRev[
+          iface.autoSegmentationEngine?.maxClusters || 1000
+        ] || "custom",
+      autosegMaxClusters: iface.autoSegmentationEngine?.maxClusters || 1000,
     }),
     [iface]
   )
@@ -59,17 +88,18 @@ export default ({ iface, onChange }) => {
         variant="flat"
         defaultAnswers={defaultAnswers}
         onQuestionChange={(questionId, newValue, answers) => {
-          if (questionId === "autoseg") {
-            onChange(
-              setIn(
-                iface,
-                ["autoSegmentationEngine"],
-                autoSegmentationOptions[newValue]
-              )
-            )
-          } else {
-            onChange(setIn(iface, [questionId], newValue))
-          }
+          onChange({
+            ...iface,
+            description: answers.description,
+            labels: answers.labels,
+            autoSegmentationEngine: {
+              mode: answers.autosegMode,
+              maxClusters:
+                answers.autosegPreset === "custom"
+                  ? answers.autosegMaxClusters
+                  : maxClusterPresets[answers.autosegPreset],
+            },
+          })
         }}
         form={form}
       />

src/components/ConfigureInterface/index.js

@@ -1,6 +1,6 @@
 // @flow weak
 
-import React, { useState, useEffect } from "react"
+import React, { useState, useEffect, useReducer } from "react"
 import { styled } from "@material-ui/core/styles"
 import templates, { templateMap } from "../StartingPage/templates"
 import Button from "@material-ui/core/Button"
@@ -134,6 +134,16 @@ export const ConfigureInterface = ({
   const iface = dataset.interface
   const [previewChangedTime, changePreviewChangedTime] = useState(0)
   const [previewLoading, changePreviewLoading] = useState(false)
+  const [previewVersion, incPreviewVersion] = useReducer(
+    (state) => state + 1,
+    0
+  )
+  const [previewDataset, setPreviewDataset] = useState({
+    interface: iface,
+    samples: dataset?.samples?.length
+      ? [dataset.samples[0]]
+      : [templateMap[iface.type].dataset.samples[0]],
+  })
   const onChange = useEventCallback((...args) => {
     changePreviewChangedTime(Date.now())
     onChangeProp(...args)
@@ -143,10 +153,18 @@ export const ConfigureInterface = ({
     changePreviewLoading(true)
     let timeout = setTimeout(() => {
       changePreviewLoading(false)
+      incPreviewVersion()
+      setPreviewDataset({
+        interface: iface,
+        samples: dataset?.samples?.length
+          ? [dataset.samples[0]]
+          : [templateMap[iface.type].dataset.samples[0]],
+      })
     }, 1000)
     return () => {
       clearTimeout(timeout)
     }
+    // eslint-disable-next-line
   }, [previewChangedTime])
 
   if (!iface.type || iface.type === "empty") {
@@ -192,18 +210,13 @@ export const ConfigureInterface = ({
             <PreviewContent
               style={{ opacity: previewLoading ? 0.5 : 1, height: "100%" }}
             >
-              <LabelErrorBoundary key={previewChangedTime}>
+              <LabelErrorBoundary key={previewVersion}>
                 <UniversalDataViewer
-                  key={previewChangedTime}
+                  key={previewVersion}
                   height={600}
                   onExit={noop}
                   onSaveTaskOutputItem={noop}
-                  dataset={{
-                    interface: iface,
-                    samples: dataset?.samples?.length
-                      ? [dataset.samples[0]]
-                      : [templateMap[iface.type].dataset.samples[0]],
-                  }}
+                  dataset={previewDataset}
                 />
               </LabelErrorBoundary>
             </PreviewContent>

yarn.lock

@@ -4943,6 +4943,11 @@ autoprefixer@^9.6.1, autoprefixer@^9.7.2:
     postcss "^7.0.32"
     postcss-value-parser "^4.1.0"
 
+autoseg@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/autoseg/-/autoseg-0.0.8.tgz#30e900afd41db964c5cdaf93f322211548444620"
+  integrity sha512-Kf6qQXiaxe+J1DrNP4dfWH92tRZ9MMwaO06TtzfKxBR/wtlC745aTP3YmKAP/a2ikpIfPKz9Hf6yR2Y7SeVagg==
+
 ava@^3.7.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/ava/-/ava-3.10.1.tgz#a4e68b1a2bb248fa0d96529d23dd83f57082e944"
@@ -16143,17 +16148,18 @@ react-icons@^3.9.0:
   dependencies:
     camelcase "^5.0.0"
 
-react-image-annotate@^1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/react-image-annotate/-/react-image-annotate-1.2.7.tgz#e9f050640d8a55474b3b16f8fe9ea98fe324d4e0"
-  integrity sha512-JZGsaTG6AET0IFGZ408/uzWYDtT71SUpG1ghUN+xzXzmP9MZV+oWyET4i7sXBqZA/5hcWghzQrG1TWp0FAjvaw==
+react-image-annotate@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/react-image-annotate/-/react-image-annotate-1.3.1.tgz#721353966c7a25a7c7d832262a50f9488ab78808"
+  integrity sha512-d3sErEQPmSIjq1ib89PEnIJa6T7eTgpen/fVHBFEJ9e5QyFAF6LQpnAS6s8jZ/wXtBLYTwstavYe2yNmY8kyPw==
   dependencies:
     "@fortawesome/fontawesome-svg-core" "^1.2.12"
     "@fortawesome/free-solid-svg-icons" "^5.6.3"
     "@fortawesome/react-fontawesome" "^0.1.3"
     "@material-ui/core" "^4.6.0"
     "@material-ui/icons" "^4.9.1"
     "@semantic-release/git" "^9.0.0"
+    autoseg "^0.0.8"
     color-alpha "^1.0.4"
     get-image-data "^3.0.1"
     material-survey "^1.0.34"