import { types } from "mobx-state-tree";
|
|
import Registry from "../../core/Registry";
|
import ControlBase from "./Base";
|
import { customTypes } from "../../core/CustomTypes";
|
import { AnnotationMixin } from "../../mixins/AnnotationMixin";
|
import SeparatedControlMixin from "../../mixins/SeparatedControlMixin";
|
import { ToolManagerMixin } from "../../mixins/ToolManagerMixin";
|
|
/**
|
* The `Magicwand` tag makes it possible to click in a region of an image a user is doing segmentation
|
* labeling on, drag the mouse to dynamically change flood filling tolerance, then release the mouse button
|
* to get a new labeled area. It is particularly effective at segmentation labeling broad, diffuse, complex
|
* edged objects, such as clouds, cloud shadows, snow, etc. in earth observation applications or organic
|
* shapes in biomedical applications.
|
*
|
* Use with the following data types: image.
|
*
|
* Zooming is supported for the Magic Wand, but it will not work on rotated images.
|
*
|
* Example of the Magic Wand in use:
|
*
|
* 
|
*
|
* ### CORS Configuration
|
*
|
* The Magic Wand requires pixel-level access to images that are being labelled in order to do its
|
* thresholding and flood filling. If you are hosting your images to label on a third-party domain,
|
* you will need to enable CORS headers for the Magic Wand to work with cross domain HTTP `GET`
|
* requests in order for the Magic Wand to be able to threshold the actual image pixel data. See the
|
* [Label Studio storage guide](../guide/storage.html#Troubleshoot-CORS-and-access-problems) for more
|
* details on configuring CORS.
|
*
|
* ### `Image` Tag Configuration
|
*
|
* The `Magicwand` tag is configured to work with an `Image` tag that it will operate on for labeling.
|
* If you are storing an image cross-domain that the `Image` tag will reference, you will have to
|
* correctly setup the `crossOrigin` on the `Image` attribute. This attribute mimics the same
|
* `crossOrigin` attribute that a normal DOM `img` tag would
|
* have ([reference])(https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin).
|
*
|
* If the image is on a public server or Google/AWS/Azure bucket that is publicly readable
|
* without any authentication, you should set `crossOrigin` to `anonymous`.
|
*
|
* If the image is on a server or a private cloud bucket that requires authentication of any
|
* kind (i.e. the request must have HTTP headers that prove authentication set along with the
|
* third party request), then you should set `crossOrigin` to `use-credentials`. Note that Google's
|
* cloud buckets [do not support authenticated requests for CORS requests](https://cloud.google.com/storage/docs/cross-origin#additional_considerations),
|
* which means you either need to make that Google bucket world readable to work with the Magic Wand, or
|
* use Label Studio's signed URL support ([AWS](../guide/storage.html#Set-up-connection-in-the-Label-Studio-UI),
|
* [GCP](../guide/storage.html#Set-up-connection-in-the-Label-Studio-UI-1), and
|
* [Azure](../guide/storage.html#Set-up-connection-in-the-Label-Studio-UI-2)).
|
*
|
* If the image is on the same host as your Label Studio instance, you can simply leave off the
|
* `crossOrigin` attribute or set it to `none`.
|
*
|
* @example
|
* <!--Basic image segmentation labeling configuration, with images stored on a third-party public cloud bucket:-->
|
* <View>
|
* <Labels name="labels" toName="image">
|
* <Label value="Person" />
|
* <Label value="Animal" />
|
* </Labels>
|
* <MagicWand name="magicwand" toName="image" />
|
* <Image name="image" value="$image" crossOrigin="anonymous" />
|
* </View>
|
* @example
|
* <!--Magic Wand example with zoom controls and the brush turned on:-->
|
* <View>
|
* <Labels name="labels" toName="image">
|
* <Label value="Person" />
|
* <Label value="Animal" />
|
* </Labels>
|
* <MagicWand name="magicwand" toName="image" />
|
* <Brush name="brush" toName="image" />
|
* <Image name="image" value="$image" zoomControl="true" zoom="true" crossOrigin="anonymous" />
|
* </View>
|
* @name Magicwand
|
* @regions BrushRegion
|
* @meta_title Magic Wand Tag for Quick Thresholded Flood Filling During Image Segmentation
|
* @meta_description Customize Label Studio with a Magic Wand tag to quickly click and drag to threshold flood fill image areas during image segmentation labeling for machine learning and data science projects.
|
* @param {string} name - Name of the element
|
* @param {string} toName - Name of the image to label
|
* @param {float=} [opacity=0.6] - Opacity of the Magic Wand region during use
|
* @param {number=} [blurradius=5] - The edges of a Magic Wand region are blurred and simplified, this is the radius of the blur kernel
|
* @param {number=} [defaultthreshold=15] - When the user initially clicks without dragging, how far a color has to be from the initial selected pixel to also be selected
|
*/
|
|
const TagAttrs = types.model({
|
toname: types.maybeNull(types.string),
|
opacity: types.optional(customTypes.range(), "0.6"),
|
blurradius: types.optional(types.string, "5"),
|
defaultthreshold: types.optional(types.string, "15"),
|
});
|
|
const Model = types
|
.model({
|
type: "magicwand",
|
removeDuplicatesNamed: "Erase",
|
})
|
.views((self) => ({
|
get hasStates() {
|
const states = self.states();
|
|
return states && states.length > 0;
|
},
|
}))
|
.volatile(() => ({
|
toolNames: ["MagicWand", "Erase"],
|
}));
|
|
const MagicWandModel = types.compose(
|
"MagicWandModel",
|
ControlBase,
|
AnnotationMixin,
|
SeparatedControlMixin,
|
TagAttrs,
|
Model,
|
ToolManagerMixin,
|
);
|
|
const HtxView = () => {
|
return null;
|
};
|
|
Registry.addTag("magicwand", MagicWandModel, HtxView);
|
|
export { HtxView, MagicWandModel };
|
