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.
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!
Top comments (0)