Using Watson Conversation System Entities

conversation.js

var express = require( 'express' );
var request = require( 'request' );

// Router
var router = express.Router();

// Send message to Conversation
// Return found system entities
router.post( '/message', function( req, res ) {
  // Build URL
  var url = 
    'https://gateway.watsonplatform.net' +
    '/conversation/api/v1/workspaces/' +
    req.config.workspace +
    '/message?' +
    'version=2017-05-26';

  // Send message
  // Watson Conversation
  // https://www.ibm.com/watson/developercloud/doc/conversation/system-entities.html#sys-datetime
  request( {
    url: url,
    auth: {
      user: req.config.username,
      pass: req.config.password
    },
    method: 'POST',
    json: {
      input: {
        text: req.body.message
      }
    }
  }, function( err, body, response ) {
    res.json( response );
  } );  
} );

// Test
router.get( '/test', function( req, res ) {    
  res.json( {watson: 'Conversation.'} );
} );
  
// Export
module.exports = router;

entities.browser.js

class Entities {
  constructor() {
    // Query input
    this.query = document.querySelector( 'input' );
    this.query.addEventListener( 'keydown', evt => this.doKeyDown( evt ) );
    this.query.addEventListener( 'focus', evt => this.doFocus( evt ) );
    this.query.addEventListener( 'blur', evt => this.doBlur( evt ) );
    this.query.focus();

    // Result list
    this.results = document.querySelector( '.results' );

    // Row template
    this.template = document.querySelector( '#row' );

    // Services
    this.xhr = new XMLHttpRequest();
    this.xhr.addEventListener( 'load', evt => this.doResponseLoad( evt ) );
  }

  doBlur( evt ) {
    // Transparent if no value present
    // Stay opaque if a value is present
    if( this.query.value.trim().length == 0 ) {
      this.query.style.opacity = 0.30;
    }
  }

  doFocus( evt ) {
    // Fully opaque when selected
    this.query.style.opacity = 1;
  }

  doKeyDown( evt ) {
    // Catch enter key to submit
    if( evt.keyCode == 13 ) {   
      // Remove existing results 
      while( this.results.children.length > 0 ) {
        this.results.children[0].remove();
      }

      // Analyze query
      // https://www.ibm.com/watson/developercloud/doc/conversation/system-entities.html#sys-datetime
      this.xhr.open( 'POST', Entities.WHISK_PATH, true );
      this.xhr.setRequestHeader( 'Content-Type', 'application/json' );
      this.xhr.send( JSON.stringify( {
        message: this.query.value.trim()
      } ) );
    }
  }

  doResponseLoad( evt ) {
    let data = JSON.parse( this.xhr.responseText );

    // Debug
    console.log( data );

    for( let entity of data.entities ) {
      // Get entity type
      let dash = entity.entity.indexOf( '-' ) + 1;

      // Get word from query
      let word = this.query.value.substring( 
        entity.location[0], 
        entity.location[1] 
      ).trim();

      // Populate template
      this.template.content.querySelector( 'p:nth-of-type( 1 )' ).innerHTML = entity.entity.substr( dash );
      this.template.content.querySelector( 'p:nth-of-type( 2 )' ).innerHTML = word;
      this.template.content.querySelector( 'p:nth-of-type( 3 )' ).innerHTML = entity.value.trim();
      this.template.content.querySelector( 'p:nth-of-type( 4 )' ).innerHTML = Math.round( entity.confidence * 100 ) + '%';    

      // Clone into document
      let clone = document.importNode( this.template.content, true );
      this.results.appendChild( clone );

      // Debug
      console.log( entity );
    }
  }
}

// Node.js server or OpenWhisk action
Entities.LOCAL_PATH = '/api/conversation/message';
Entities.WHISK_PATH = 'https://openwhisk.ng.bluemix.net/api/v1/web/krhoyt%40us.ibm.com_dev/watson/conversation.entities';

// Off we go!
let app = new Entities();

entities.css

body {
  background-color: #ececec;   
  color: rgba( 0, 0, 0, 0.87 );
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 16px;  
}

input {
  background: none;
  border: none;
  border-bottom: solid 1px #994fd7;  
  color: #994fd7;
  font-size: 2em;
  font-weight: 300;
  margin: 100px 100px 30px 100px;
  padding: 0 0 16px 0;
  outline: none;
  opacity: 0.30;
}

input::placeholder {
  color: #994fd7;  
}

.entity {
  display: flex;
  flex-direction: row;
  padding: 20px 100px 20px 100px;
}

.entity > p {
  font-size: 1.5em;
  margin: 0;
  padding: 0;
}

.entity > p:nth-of-type( 1 ) {
  width: 150px;
}

.entity > p:nth-of-type( 2 ) {
  color: #994fd7;  
  flex-basis: 0;
  flex-grow: 0.60;
}

.entity > p:nth-of-type( 3 ) {
  flex-basis: 0;
  flex-grow: 0.40;
}

.entity > p:nth-of-type( 4 ) {
  text-align: right;
  width: 150px;
}

.logo {
  bottom: 16px;
  left: 16px;
  position: absolute;
}

entities.py

import json
import requests
import sys

# Read configuration options
with open( '../bluemix/config.json' ) as data_file:    
  config = json.load( data_file )

# URL for Conversation API call
url = '{0}{1}{2}{3}{4}'.format( 
  'https://gateway.watsonplatform.net',
  '/conversation/api/v1/workspaces/',
  config['workspace'],
  '/message?',
  'version=2017-05-26'  
)

# JSON
headers = {
  'Content-Type': 'application/json'
}

# Optional command line
if len( sys.argv ) > 1:
  text = sys.argv[1]
else:
  text = 'It was three days ago.'

# Example phrase
data = {
  'input': {
    'text': text
  }
}

# Call Conversation API
req = requests.post( 
  url,
  auth = ( 
    config['username'], 
    config['password'] 
  ),
  headers = headers, 
  data = json.dumps( data ) 
)
res = req.json()

# Print any found system entities (date, location, etc.)
# https://www.ibm.com/watson/developercloud/doc/conversation/system-entities.html
for entity in res['entities']:
  parts = entity['entity'].split( '-' )
  print '{0}\t{1}\t{2}\t{3}%'.format(
    parts[1],
    text[entity['location'][0]:entity['location'][1]],
    entity['value'],
    int( entity['confidence'] * 100 )
  )

entities.whisk.js

var request = require( 'request-promise' );

function main( params ) {
  // Build URL
  var url = 
    'https://gateway.watsonplatform.net' +
    '/conversation/api/v1/workspaces/' +
    params.WATSON_WORKSPACE +
    '/message?' +
    'version=2017-05-26';

  // Make API call
  // Return promise
  return request( {
    url: url,
    method: 'POST',
    auth: {
      user: params.WATSON_USERNAME,
      pass: params.WATSON_PASSWORD
    },
    json: {
      input: {
        text: params.message
      }
    }
  } ).then( function( result ) {
    // CORS
    // JSON
    return {
      headers: {
        'Access-Control-Allow-Origin': '*',        
        'Content-Type': 'application/json'
      },
      statusCode: 200,
      body: new Buffer( JSON.stringify( result ) ).toString( 'base64' )
    };
  } );
}

index.html

<html>
<head>

<title>System Entities</title>

<link href="favicon.ico" rel="icon">

<!-- Google Fonts -->
<!-- Roboto -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">

<!-- Styles -->
<link rel="stylesheet" href="style/entities.css">

</head>
<body>

<!-- Entry field -->
<input type="text" placeholder="Enter a phrase with entities (i.e. date, number)">

<!-- Holder for results -->
<div class="results"></div>

<!-- Logo -->
<a href="http://kevinhoyt.com">
  <img class="logo" src="img/ibm.svg" width="65">
</a>

<!-- Result rows -->
<template id="row">
  <div class="entity">
    <p>date</p>
    <p>tomorrow</p>
    <p>2017-06-03</p>
    <p>100%</p>
  </div>
</template>

<!-- Application -->
<script src="script/entities.js"></script>

</body>
</html>