Update the OpenIE demo with Ollie as well

stanfordnlp · Mar 13, 2015 · f26315e · f26315e
1 parent f917763
commit f26315e
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 20 deletions.
diff --git a/src/edu/stanford/nlp/naturalli/OpenIEServlet.java b/src/edu/stanford/nlp/naturalli/OpenIEServlet.java
@@ -17,9 +17,7 @@
 import java.io.IOException;
 import java.io.PrintWriter;
 import java.io.StringWriter;
-import java.util.ArrayList;
+import java.util.*;
-import java.util.List;
-import java.util.Properties;
 
 /**
  * A simple web frontend to the Open IE System.
@@ -177,7 +175,7 @@ private void doGet(PrintWriter out, String q) {
       annotate(ann);
       // Collect results
       List<String> entailments = new ArrayList<>();
-      List<String> triples = new ArrayList<>();
+      Set<String> triples = new LinkedHashSet<>();
       for (CoreMap sentence : ann.get(CoreAnnotations.SentencesAnnotation.class)) {
         for (SentenceFragment fragment : sentence.get(NaturalLogicAnnotations.EntailedSentencesAnnotation.class)) {
           entailments.add(quote(fragment.toString()));

diff --git a/src/edu/stanford/nlp/naturalli/demo/index.html b/src/edu/stanford/nlp/naturalli/demo/index.html
@@ -31,7 +31,7 @@ <h1>Open IE ACL Demo</h1>
             </center>
             <div class="col-md-12">
                 <!-- Query Box -->
-                <form id="form-query" class="form-inline" role="form" action="http://plato42.stanford.edu:8080/openie/">
+                <form id="form-query" class="form-inline" role="form" action="#">
                     <div class="input-group">
                         <input id="q" type="text" name="q" class="form-control input-lg"
                                placeholder="e.g., faeries are dancing in the field where I lost my bike."
@@ -44,10 +44,15 @@ <h1>Open IE ACL Demo</h1>
 
         <!-- Truth Value -->
         <div id="triples-row" class="row" style="margin-top:2em;">
-            <div class="col-md-2"></div>
+
-            <div id="triples-container" class="col-md-8 centered">
+            <div id="triples-left" class="col-md-6 centered">
+                <h2 id="system-header" style="visibility: hidden;">Our System</h2>
+                <div id="triples-container" class="triples"></div>
+            </div>
+            <div id="triples-right" class="col-md-6 centered">
+                <h2 id="ollie-header" style="visibility: hidden;">Ollie</h2>
+                <div id="ollie-container" class="triples"></div>
             </div>
-            <div class="col-md-2"></div>
         </div>
 
     </div>

diff --git a/src/edu/stanford/nlp/naturalli/demo/naturalli.css b/src/edu/stanford/nlp/naturalli/demo/naturalli.css
@@ -97,3 +97,23 @@ body {
   text-align: center;
 }
 
+h2 {
+  color:  #000080;
+  padding-bottom: 1ex;
+}
+
+.triples {
+  font-size: large;
+  text-align: center;
+}
+
+.triple-table {
+  margin: 0 auto !important;
+  float: none !important;
+}
+
+td {
+  text-align: left;
+  padding-right: 2ex;
+  padding-bottom: 1ex;
+}
diff --git a/src/edu/stanford/nlp/naturalli/demo/naturalli.js b/src/edu/stanford/nlp/naturalli/demo/naturalli.js
@@ -1,25 +1,28 @@
 
 function handleError(message) {
-  console.log("FAILURE!");
   $( "#q" ).prop('disabled', false);
   $( "#query-button").unbind( "click" );
   $( "#query-button" ).click(function(event) { $( "#form-query" ).submit(); });
   $( "#triples-container").html('<div style="color:red; font-size:xx-large;">ERROR</div> <div style="color: black; font-size: 12pt">(' + message + ')<div>');
 }
 
-function querySuccess(query) {
+function querySuccess(elem) {
-  console.log("fn-rtn");
   return function(response) {
-    console.log("SUCCESS!");
     $( "#q" ).prop('disabled', false);
     $( "#query-button").unbind( "click" );
     $( "#query-button" ).click(function(event) { $( "#form-query" ).submit(); });
-    console.log(response.triples);
+    if (response.triples.length > 0) {
-    var gloss = ""
+      var gloss = '<table class="triple-table">';
-    for (i = 0; i < response.triples.length; ++i) {
+      for (i = 0; i < response.triples.length; ++i) {
-      gloss += '(' + response.triples[i][0] + '; ' + response.triples[i][1] + '; ' + response.triples[i][2] + ') <br/>';
+        gloss += '<tr><td>(</td><td>' + response.triples[i][0] + ';</td>';
+        gloss += '<td>' + response.triples[i][1] + ';</td>';
+        gloss += '<td>' + response.triples[i][2] + '</td><td>)</td></tr>';
+      }
+      gloss += '</table>';
+      $(elem).html(gloss);
+    } else {
+      $(elem).html('<i>(no responses)</i>');
     }
-    $( "#triples-container" ).html(gloss);
   }
 }
 
@@ -38,10 +41,14 @@ $(document).ready(function(){
   $( "#form-query" ).submit(function( event ) {
     // (don't actually submit anything)
     event.preventDefault();
+    // (set the headers)
+    $( "#system-header" ).css("visibility", "visible");
+    $( "#ollie-header" ).css("visibility", "visible");
     // (create a default if not input was given)
     if ( $( '#q' ).val().trim() == '') { $( '#q' ).val('faeries are dancing in the field where I lost my bike.'); }
     // (start loading icon)
     $( '#triples-container' ).html('loading...');
+    $( '#ollie-container' ).html('loading...');
     // (submission data)
     target = $(this).attr('action');
     getData = $(this).serialize();
@@ -50,12 +57,17 @@ $(document).ready(function(){
     $( "#q" ).prop('disabled', true);
     $( "#query-button").unbind( "click" );
     // (ajax request)
-    console.log("Querying...");
     $.ajax({
-      url: target,
+      url: 'http://plato42.stanford.edu:8080/openie/',
       data: getData,
       dataType: 'json',
-      success: querySuccess(value)
+      success: querySuccess("#triples-container")
+    });
+    $.ajax({
+      url: 'http://plato42.stanford.edu:8080/ollie/',
+      data: getData,
+      dataType: 'json',
+      success: querySuccess("#ollie-container")
     });
   });