react-nlp v0.0.3

react-nlp

Visualization of Natural Language Processing for React

Installation

npm install react-nlp

Usage

import React from "react";
import { render } from "react-dom";
import { View } from "react-nlp";

render(
  <View
    types={types}
    data={data}
    colors={colors}
  />,
  document.getElementById("root")
);

Properties of View Component

types

The types is an array of annotation type to show.

The annotations are shown in the order of types.

example:

["wiki", "ne", "pos"]

data

The data is an array of the object consists of a text and annotation data .

example:

[
  {
    text: "Darth Vador, also known as Anakin Skywalker is a fictional character.",
    anno: [
      ["wiki", 0, 10, "Darth_Vador"],
      ["wiki", 27, 41, "Darth_Vador"],
      ["ne", 0, 10, "PERSON"],
      ["ne", 27, 41, "PERSON"],
      ["pos", 0, 4, "NNP"],
      ["pos", 6, 10, "NNP"],
      ["pos", 11, 11, ","]
    ]
  },
  {
    text: "He is originally a good person, but",
    anno: [
      ["pos", 0, 1, "PRP"],
      ["pos", 3, 4, "VBZ"],
      ["pos", 6, 15, "RB"],
      ["pos", 17, 17, "DT"],
    ]
  }
]

relations

The relations is a list of relation of annotations.

example:

[
  ["hh", 0, 0, 0, 1, "rel_label1"],
  ["ht", 0, 0, 0, 2, "rel_label2"],
  ["tt", 0, 0, 1, 0, "rel_label3"],
  ["hh", 0, 0, 1, 7, "rel_label4"]
]

colors

The colors is a map for colors for annotation labels.

example:

{
  "wiki": {
    "Darth_Vador": "gray"
  },
  "ne": {
    "PERSON": "yellow"
  },
  "pos": {
    ",": "#84b62b"
  }
}

theme

Run Example

npm install
npm install react react-dom
npm run build
npm run example

Then, access http://localhost:8080/ in your browser.

If enable Server Mode, access http://localhost:8080/?server=yes.

Run Demo App

npm install
npm install react react-dom
npm run build
npm run demo

Then, access http://localhost:8080/ in your browser.

Dependencies

• react
• react-dom
• css-element-queries
• color

License

MIT