label-studio icon indicating copy to clipboard operation
label-studio copied to clipboard

How to create custom tags

Open new-bajie opened this issue 6 months ago • 1 comments

For example, <newImage>, Additionally, I have discovered a problem <View style="display: flex;"> <Image name="cls_dec" value="$image"/> <View style="padding: 0em 1em; background: #f1f1f1; margin-right: 1em; border-radius: 3px; width:25%;"> <View style="position: sticky; top: 0"> <Header value="图像分类:" size="4" /> <RectangleLabels name="cls_rectangle" toName="cls_dec" canRotate="false"> <Label value="OK"/> <Label value="short"/> <Label value="missPart"/> <Label value="missStitch"/> <Label value="airholeAD"/> <Label value="weldAD"/> <Label value="hole"/> <Label value="Shaotin"/> <Label value="empty"/> <Label value="ADobj"/> <Label value="break"/> <Label value="shot"/> <Label value="hit"/> <Label value="hitempty"/> </RectangleLabels> <View visibleWhen="region-selected" whenTagName="cls_rectangle"> <Taxonomy name="cls_taxonomy" toName="cls_dec" perRegion="true" placeholder="下拉选择物料" maxUsages="1"> <Choice value="pin"/> <Choice value="C5_1"/> <Choice value="C5_2"/> <Choice value="C5_3"/> <Choice value="C5_4"/> <Choice value="triode"/> <Choice value="RR"/> <Choice value="C_ocr"/> <Choice value="Transistor_ocr"/> <Choice value="P_1"/> <Choice value="capacitance_b4"/> <Choice value="capacitance_o4"/> <Choice value="2L0"/> <Choice value="special"/> <Choice value="heter"/> <Choice value="Plum_1"/> <Choice value="Plum_2"/> <Choice value="Plum_L2"/> <Choice value="cir_g"/> <Choice value="screw"/> </Taxonomy> </View> </View> <View> <Header value="目标检测:" size="4" /> <RectangleLabels name="dec_rectangle" toName="cls_dec"> <Label value="short"/> <Label value="Shaotin"/> <Label value="missStitch"/> <Label value="airholeAD"/> <Label value="hole"/> <Label value="empty"/> <Label value="ADobj"/> </RectangleLabels> <View visibleWhen="region-selected" whenTagName="dec_rectangle"> <Header value="实例框属性" size="5" /> <Choices name="dec_choices" toName="cls_dec" perRegion="true" showInline="true" choice="multiple"> <Choice value="is_synthetic"/> <Choice value="iscrowd"/> <Choice value="ignore"/> </Choices> </View> </View> </View> </View>

Multiple RectangleLabels tasks, marking the Label of the first task, when marking the second RectangleLabels task, it will select both tasks simultaneously. I expect that when selecting the second Label, the first Label should be deselected, just like switching from RectangleLabels Label to PolygonLabels Label.

new-bajie avatar May 30 '25 03:05 new-bajie

Hello,

Thanks for sharing your configuration and please try this 1. Creating Custom Tags

Label Studio’s Editor lets you add new tags via the plugin system. You can’t use <newImage> out of the box—you must write a small JavaScript plugin that registers that tag. For example:

  1. In your Label Studio install, create a plugin folder:

    frontend/plugins/new-image/

  2. Add a manifest file pluginManifest.json in that folder:

    { "name": "new-image", "version": "1.0.0", "tags": ["newImage"] }

  3. Create index.js alongside it:

    import plugin from '@heartexlabs/ls-plugin'; import NewImage from './NewImage'; plugin.registerTag('newImage', NewImage);

  4. Implement NewImage as a React component that renders your custom image element.

  5. Restart Label Studio. Your <newImage> tag will now be recognized.

Thank you, Abu

Comment by Abubakar Saad Workflow Run

heidi-humansignal avatar Jun 06 '25 20:06 heidi-humansignal