Skip to content

UniversalDataTool/react-nlp-annotate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

8708105 · Sep 20, 2020

History

99 Commits
Sep 20, 2020
Feb 6, 2019
Jul 1, 2019
Aug 26, 2020
Feb 9, 2019
Feb 6, 2019
Feb 9, 2019
Aug 25, 2020
Feb 6, 2019
Aug 25, 2020
Sep 20, 2020
Sep 20, 2020
Sep 20, 2020

Repository files navigation

React NLP Annotate

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