examples/prediction/views/index.erb

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5     <title>Prediction API</title>
   6     <style type="text/css">
   7       body {
   8         font-family: Arial, Helvetica, sans-serif;
   9       }
  10       #log {
  11         font-family: monospace;
  12         background-color: #eee;
  13         padding: 1em;
  14       }
  15       #log p {
  16         margin: 0;
  17       }
  18       #predict {
  19         display: none;
  20       }
  21       #predict label, #predict textarea, #predict button {
  22         margin: 1em 0;
  23         font-size: 1em;
  24         display: block;
  25         width: 50%;
  26       }
  27     </style>
  28   </head>
  29   <body>
  30     <h1>Prediction API: Language Sample</h1>
  31     <div id="log">
  32     </div>
  33     <div id="predict">
  34       <label for="input">Input</label>
  35       <textarea id="input" placeholder="Généralement, les gens qui savant peu parlent beaucoup, et les gens qui savant beaucoup parlent peu."></textarea>
  36       <button id="go">Submit</button>
  37     </div>
  38     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  39     <script type="text/javascript">
  40       function logMessage(message) {
  41         $("#log").append("<p>" + message + "</p>");
  42       }
  43       $(document).ready(function(e) {
  44         $.getJSON("/train", function (data) {
  45           logMessage("Training started...");
  46           var delay = 1000;
  47           var checkStatus = function () {
  48             logMessage("Checking training status...");
  49             $.getJSON("/checkStatus", function(data) {
  50               if (data && data.status == 'success') {
  51                 logMessage("Training complete.");
  52                 $("#predict").show();
  53                 $("#go").click(function () {
  54                   var input = $("#input").val();
  55                   $.ajax({
  56                     type: "POST",
  57                     url: "/predict",
  58                     data: {"input": input},
  59                     success: function(data) {
  60                       if (data && data.status == 'success') {
  61                         logMessage("Predicted label: " + data.response.outputLabel);
  62                       } else if (data && data.message) {
  63                         logMessage(data.message);
  64                       }
  65                     }
  66                   });
  67                 });
  68                 return;
  69               } else if (data && data.message) {
  70                 logMessage(data.message);
  71               }
  72               delay = delay * 2;
  73               if (delay > 30000) {
  74                 // Upper maximum delay.
  75                 delay = 30000;
  76               }
  77               logMessage("Checking again in " + (delay / 1000) + " seconds.");
  78               setTimeout(checkStatus, delay);
  79             });
  80           };
  81           setTimeout(checkStatus, delay);
  82         });
  83       })
  84     </script>
  85   </body>
  86 </html>