Recently I was tasked with developing a homegrown tagging tool for NLP model development.
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.