Skip to content

UniversalDataTool/react-nlp-annotate

Repository files navigation

React NLP Annotate

If you just want to edit NLP data, it's easier to just use the Universal Data Tool (MIT). This library is a module of the Universal Data Tool for use in custom react applications.

Interface for doing various NLP tasks. Here's a code playground. Please help this repository by adding documentation and issues!

  • Audio transcription
  • Text Labeling (Entity, Classification)
  • Entity Relation Labeling

screenshot 1

screenshot 2

screenshot 3

Installation

npm install react-nlp-annotate

Usage

Document Classification

import NLPAnnotator from "react-nlp-annotate" const MyComponent = () => ( <NLPAnnotator type="label-document" labels={[ { "id": "gryffindor", "displayName": "Gryffindor", "description": "Daring, strong nerve and chivalry." }, { "id": "slytherin", "displayName": "Slytherin", "description": "Cunning and ambitious. Possibly dark wizard." } ]} multipleLabels={false} document="Harry" onChange={(classification) => { console.log("Harry is a " + classification) }} /> )

Entity Relation Labeling

import React from "react"; import NLPAnnotator from "react-nlp-annotate"; const labels = [ { id: "gryffindor", displayName: "Gryffindor", description: "Daring, strong nerve and chivalry." }, { id: "slytherin", displayName: "Slytherin", description: "Cunning and ambitious. Possibly dark wizard." } ]; export default () => ( <NLPAnnotator hotkeysEnabled type="label-relationships" labels={labels} multipleLabels={false} document="Harry was an honest to god good man" onChange={(output) => { console.log("Output is...", output); }} // this is just for label-relationships entityLabels={labels} relationshipLabels={labels} /> </div> );