Merge pull request #33 from lcahlander/master

Merge to master

src/main/js/frontend/package.json

@@ -17,6 +17,7 @@
     "react-bootstrap": "^2.0.3",
     "react-bootstrap-icons": "^1.6.1",
     "react-dom": "^17.0.2",
+    "react-json-view": "^1.21.3",
     "react-router": "^6.1.1",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",

src/main/js/frontend/src/App.css

@@ -48,11 +48,21 @@ body {
 .NLPContent {
   height: 100%;
   width: 100%;
-  background-color: lightgray;
 }
 .LoadingContent {
   height: 100%;
   width: 100%;
-  background-color: lightgoldenrodyellow;
+}
+
+.i-misc {
+  color: green;
+}
+
+.i-per {
+  color: red;
+}
+
+.i-loc {
+  color: blue;
 }
 

src/main/js/frontend/src/App.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { HashRouter as Router, Route, Routes } from "react-router-dom";
 import Layout from "./Layout";
 import LoadingContent from "./LoadingContent";
+import NERContext from "./NERContext";
 
 function App() {
   return (
@@ -11,6 +12,9 @@ function App() {
                 <Route path="/loading" element={<LoadingContent/>}>
 
                 </Route>
+                <Route path="/ner" element={<NERContext/>}>
+
+                </Route>
 
             </Route>
         </Routes>

src/main/js/frontend/src/NERContext.tsx

@@ -0,0 +1,125 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React, {useEffect, useState} from "react";
+import './App.css';
+import {Button, Col, Form, Row} from "react-bootstrap";
+import ReactJson from 'react-json-view';
+
+function NERContext() {
+
+    const [running, setRunning] = useState({
+        "arabic": { "start": null, "end": null, "isRunning": false, isLoaded: false },
+        "english-kbp": { "start": null, "end": null, "isRunning": false, isLoaded: false },
+        "english": { "start": null, "end": null, "isRunning": false, isLoaded: false },
+        "chinese": { "start": null, "end": null, "isRunning": false, isLoaded: false },
+        "french": { "start": null, "end": null, "isRunning": false, isLoaded: false },
+        "german": { "start": null, "end": null, "isRunning": false, isLoaded: false },
+        "spanish": { "start": null, "end": null, "isRunning": false, isLoaded: false }
+    })
+
+    const [language, setLanguage] = useState("en");
+    const [content, setContent] = useState("");
+    const [namedEntities, setNamedEntities] = useState("");
+    const [nerError, setNerError] = useState({ code: null, description: null, value: null, properties: {}});
+
+    useEffect(() => {
+        let uri = '/exist/restxq/stanford/nlp/logs';
+
+        fetch(uri)
+            .then((response) => response.json())
+            .then(
+                (result) => {
+                    setRunning(result.running);
+                },
+                (error) => {
+
+                }
+            )
+
+    }, [])
+
+    // @ts-ignore
+    function handleChange(e) {
+        if (e.target.name === 'language') {
+            setLanguage(e.target.value);
+        } else {
+            setContent(e.target.value);
+        }
+    }
+
+    function handleSubmit() {
+        const requestOptions = {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                language: language,
+                text: content
+            })
+        };
+
+        fetch("/exist/restxq/Stanford/ner", requestOptions)
+            .then(res => res.json())
+            .then(
+                (result) => {
+                    if (result.text) {
+                        setNamedEntities(result.text);
+                    } else {
+                        setNerError(result);
+                    }
+                },
+                (error) => {
+
+                }
+            )
+
+    }
+
+    return (
+        <div style={{padding: 35}}>
+            <Form>
+                <Row className={'mb-3'}>
+                    <Col md={4}>
+                        <Form.Group>
+                            <Form.Label>Select language</Form.Label>
+                            <Form.Select name="language" onChange={handleChange}>
+                                <option value="en" disabled={!running.english.isLoaded}>English</option>
+                                <option value="ar" disabled={!running.arabic.isLoaded}>Arabic</option>
+                                <option value="zh" disabled={!running.chinese.isLoaded}>Chinese</option>
+                                <option value="fr" disabled={!running.french.isLoaded}>French</option>
+                                <option value="de" disabled={!running.german.isLoaded}>German</option>
+                                <option value="es" disabled={!running.spanish.isLoaded}>Spanish</option>
+                            </Form.Select>
+                        </Form.Group>
+                    </Col>
+                </Row>
+                <Form.Group as={Row} className={'mb-3'}>
+                    <Form.Label>Text to find named entities</Form.Label>
+                    <Form.Control as="textarea" rows={10} onChange={handleChange} />
+                </Form.Group>
+                <Form.Group as={Row} className={'mb-3'}>
+                    <Col sm={2}>
+                        <Button type={'submit'} onClick={handleSubmit}>Submit</Button>
+                    </Col>
+                </Form.Group>
+            </Form>
+            <Row>
+                <div>Results</div>
+                <hr/>
+                <div dangerouslySetInnerHTML={{__html: namedEntities}}></div>
+                <div>{
+                    nerError.code ?
+                        <>
+                            <div><b>Code</b> <span>{nerError.code}</span></div>
+                            <div><b>Description</b> <span>{nerError.description}</span></div>
+                            <div><b>Value</b> <span>{nerError.value}</span></div>
+                            <ReactJson src={nerError.properties} />
+                        </>
+                        : null
+                }</div>
+                <hr/>
+            </Row>
+        </div>
+    )
+
+}
+
+export default NERContext;

src/main/js/frontend/src/SideBarData.js

@@ -7,6 +7,10 @@ export const SideBarData = [
         icon: <HouseDoorFill />,
         key: "/"
     },
+    {
+        label: "NER",
+        key: "/ner"
+    },
     {
         label: "Loading",
         icon: <HouseDoorFill />,

src/main/xar-resources/modules/rest-api.xqm

@@ -1,6 +1,7 @@
 xquery version "3.1";
 
 module namespace api = "http://exist-db.org/xquery/stanford-nlp/api";
+import module namespace ner = "http://exist-db.org/xquery/stanford-nlp/ner";
 import module namespace scheduler = "http://exist-db.org/xquery/scheduler";
 import module namespace map = "http://www.w3.org/2005/xpath-functions/map";
 
@@ -131,3 +132,37 @@ function api:logs($timestamp as xs:string*) as map(*)
                 }
         }
 };
+
+(:~
+ : This method runs the ner:clasify($text, $properties) on the text passed in for the language specified.
+ : @param $content the properties of the source graph in a JSON object
+ : @see ner:properties-from-language()
+ : @return A map
+ : @custom:openapi-tag Natural Language Processing
+ :)
+declare
+    %rest:POST("{$content}")
+    %rest:path("/Stanford/ner")
+    %rest:consumes("application/json")
+    %rest:produces("application/json")
+    %output:media-type("application/json")
+    %output:method("json")
+function api:query-text-as-json($content as xs:string) as map(*) {
+    let $postBody := fn:parse-json(util:base64-decode($content))
+    let $properties := ner:properties-from-language($postBody?language)
+    let $classified := ner:classify($postBody?text, $properties)
+    return
+        try {
+    map {
+        'text' : ner:stringify($classified)
+    }
+        } catch * {
+            map {
+                'code': $err:code,
+                'description': $err:description,
+                'value': $err:value,
+                'properties': $properties
+            }
+        }
+};
+