fix: Merge pull request #211 from UniversalDataTool/feat/transform-image-segments-into-samples

Introduce transform image segments to image samples

Author: seveibar

src/components/TransformImageSamplesIntoSegmentsDialog/index.js

@@ -16,9 +16,13 @@ const ErrorBox = styled("pre")({
 
 const splitOptions = [
   { label: "2x2", value: "2x2" },
+  { label: "1x2 (columns)", value: "1x2" },
   { label: "3x3", value: "3x3" },
+  { label: "1x2 (columns)", value: "1x2" },
+  { label: "1x3 (columns)", value: "1x3" },
+  { label: "2x3 (2 rows)", value: "2x3" },
   { label: "4x4", value: "4x4" },
-  { label: "3x4", value: "3x4" },
+  { label: "3x4 (3 rows)", value: "3x4" },
 ]
 
 export default ({ open, onChangeDataset, onClose, dataset }) => {

src/components/TransformPage/index.js

@@ -17,6 +17,7 @@ import TransformVideoFramesToImagesDialog from "../TransformVideoFramesToImagesD
 import usePosthog from "../../utils/use-posthog"
 import TransformLocalFilesToWebURLs from "../TransformLocalFilesToWebURLs"
 import TransformImageSamplesIntoSegmentsDialog from "../TransformImageSamplesIntoSegmentsDialog"
+import TransformSegmentsIntoImageSamplesDialog from "../TransformSegmentsIntoImageSamplesDialog"
 
 import ComputerIcon from "@material-ui/icons/Computer"
 import LanguageIcon from "@material-ui/icons/Language"
@@ -149,6 +150,13 @@ export default ({ dataset, onChangeDataset }) => {
         >
           Split Image Samples into Segments
         </Button>
+        <Button
+          dialog="combine-segments-into-image-samples"
+          Icon1={GridOnIcon}
+          Icon2={CheckBoxOutlineBlankIcon}
+        >
+          Combine Segments into Image Samples
+        </Button>
         <TransformVideoKeyframesDialog
           open={selectedDialog === "convert-keyframes-to-samples"}
           onClose={closeDialog}
@@ -185,6 +193,12 @@ export default ({ dataset, onChangeDataset }) => {
           onClose={closeDialog}
           onChangeDataset={onChangeDataset}
         ></TransformImageSamplesIntoSegmentsDialog>
+        <TransformSegmentsIntoImageSamplesDialog
+          dataset={dataset}
+          open={selectedDialog === "combine-segments-into-image-samples"}
+          onClose={closeDialog}
+          onChangeDataset={onChangeDataset}
+        ></TransformSegmentsIntoImageSamplesDialog>
       </div>
     </SelectDialogContext.Provider>
   )

src/components/TransformSegmentsIntoImageSamplesDialog/index.js

@@ -0,0 +1,57 @@
+// @flow weak
+
+import React, { useState } from "react"
+import SimpleDialog from "../SimpleDialog"
+import { styled } from "@material-ui/core/styles"
+import { setIn } from "seamless-immutable"
+
+const ErrorBox = styled("pre")({
+  color: "red",
+  whiteSpace: "prewrap",
+  fontSize: 11,
+})
+
+export default ({ open, onChangeDataset, onClose, dataset }) => {
+  const [errors, setErrors] = useState("")
+  return (
+    <SimpleDialog
+      open={open}
+      onClose={onClose}
+      title="Convert Segments to Image Samples"
+      actions={[
+        {
+          text: "Convert Segments to Image Samples",
+          onClick: async () => {
+            try {
+              const imageUrls = Array.from(
+                new Set(dataset.samples.map((s) => s.imageUrl))
+              )
+              const newSamples = []
+              for (const imageUrl of imageUrls) {
+                const pieces = dataset.samples.filter(
+                  (s) => s.imageUrl === imageUrl
+                )
+                newSamples.push({
+                  imageUrl,
+                  annotation: pieces
+                    .flatMap((p) => p.annotation)
+                    .filter(Boolean),
+                })
+              }
+              onChangeDataset(setIn(dataset, ["samples"], newSamples))
+              onClose()
+            } catch (e) {
+              setErrors(e.toString())
+            }
+          },
+        },
+      ]}
+    >
+      This transformation will take image samples that have been split into
+      segments (each with an allowedArea), and combine them into one image
+      sample again. This is typically executed after a splitting operation when
+      the samples are to be recombined.
+      {errors && <ErrorBox>{errors}</ErrorBox>}
+    </SimpleDialog>
+  )
+}