/react-nlp-annotate

Interface for making NLP annotations.

Primary LanguageJavaScript

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>
);