DEV Community

loading...
Cover image for react-text-annotate-blend: a component for blended annotations

react-text-annotate-blend: a component for blended annotations

smhaley profile image smhaley ・1 min read

Live Demo.

Recently I was tasked with developing a homegrown tagging tool for NLP model development.

At first our team looked to some of the more popular tools such as Doccano and prodi.gy.

Due to infrastructure challenges we decided to develop our own annotation tool using react. Using the the library react-text-annotate this wasn't too bad.

Unfortunately the way this tool handles overlapping tags is to duplicate text with visually unappealing results. Looking around at the NLP annotation space, I noticed there were few quick and simple tools for overlapping annotations.

The natural question was, can I overlap and blend tags more naturally?

Spending some time, I was able to come up with react-text-annotate-blend.

Currently this library offers a single component TextAnnotateBlend. The component allows for overlapping annotations, resulting in a mixture of the annotation colors.

Alt Text

Check out a demo with live code here.

Let me know what you think!

One update I may make soon is a stripped blending of the colors using linear gradients.

Thanks!

Discussion (0)

Forem Open with the Forem app