Repository files navigation

taggy is a typescript-based frontend package to automatically tag (or categorize) textual content

• try out the live-demo here

This here is to get you going quickly.For more information on taggy, more demos and extended docs, pleasego here.

Import it via CDN:

<scriptsrc="https://cdn.jsdelivr.net/npm/@b1tsteller/taggy"></script>

Or install taggy with npm:

npm install @b1tsteller/taggy

Then import the package and create a new instance with at least an input and an output-element:

import{Taggy}from"@b1tsteller/taggy";letinputElement=document.getElementById('inputField');letoutputElement=document.getElementById("outputDiv");lettaggy=newTaggy(inputElement,outputElement);

• The input-element is a html-tag, preferably<input> or<textarea>, but can be everything holding text

• The output-element can be a html-tag of any kind, preferably<div>

Get your glossary ready and adjust it to your needs:

The default comes integrated under/data/glossary.json with the data shown below.But you definetly want to use your own :)

You can set it like this:

importmyGlossaryfrom"../data/my-glossary.json";taggy.setGlossary(myGlossary);

{"tags": [    {"category":"Herbs and Spices","keywords": ["Rosemary","Parsley","Pepper","Thyme","Mint","Chilli","Basil","Dill"]    },    {"category":"Vegetables","keywords": ["Potatoes","Cucumber","Garlic","Carrots","Spinach","Onion","Mushrooms"]    },    {"category":"Fish","keywords": ["Salmon","Tuna","Red Snapper","Sardines","Herring","Flounder","Bass","Mackerel"]    }  ]}

Retrieve detected single Tag:

The input-element which was provided on instatiation will receive the parameter "value" with the detected tag in it. For example:

<divid="outputDiv"value="Economy"><divclass="taggy-tag">Economy</div></div>

Retrieve multiple Tags:

You can get multiple detected tags via the override-function, even when it's not visible to your users (e.g. "display: none"). Please make sure to turn it on (see options below). You'll get an element like this:

<divid="override"value="Politics, Science"><divclass="taggy-tag taggy-override">Politics</div><divclass="taggy-tag taggy-override">Science</div></div>

You can add additional params when creating the taggy object:

lettaggy=newTaggy(inputElement,outputElement,{submitButton:submit,loaderElement:loaderDiv,includeTop:true});

This is a basic example on how you can integrate taggy into an Angular-project:

In your HTML-Template:

<inputtype="text"#taggyInput/><div#taggyOutput></div>

In your .ts-file:

import{ViewChild,ElementRef}from"@angular/core";import{Taggy}from"@b1tsteller/taggy";...@ViewChild("taggyInput") taggyInput:ElementRef;@ViewChild("taggyOutput") taggyOutput:ElementRef;...ngAfterViewInit(){lettaggyObject=newTaggy(this.taggyInput.nativeElement,this.taggyOutput.nativeElement);}

taggy is language agnostic. But it's advised to define it, so common (and for this task irrelevant words) akastopwords ("by", "a", "the", "also", "and", ...) in the input won't be processed. Below list fromhere

If you don't have your own glossary ready to feed taggy, you can build your own with a service like thishttps://freetools.textmagic.com/word-cloud-generator and the following steps:

1. Paste all of your existing training/example textsfor one category into the input field
2. Hit "Generate" and receive the wordcloud for this category
3. Click download as CSV and you have your keywords ready
4. Put the most frequent ones into yourtaggy glossary-JSON
5. Repeat steps 1 - 4 for all your other categories