Deep Learning Bot

MATLAB Production Server demo

HTML

<h3>Deep Learning Bot - MATLAB Production Server Demo</h3>
<div id="container" class="chat">
  <p class="chat-header">Deep Learning Chatbot</p>
  <div id="chatbox"></div>
</div>
<div class="logo_container hidden-xs hidden-sm">
  <a href="http://www.mathworks.com/index.html?s_tid=gn_logo" class="svg_link pull-left">
    <img src="http://www.mathworks.com/images/responsive/global/pic-header-mathworks-logo.svg" class="mw_logo" alt="MathWorks">
  </a>
</div>

CSS

#main {
  width: 400px;
  padding: 10px;
}

#container {
  width: 400px;
}

body {
  background: #FFFFFF;
  font-family: 'Open Sans', sans-serif;
}

hr {
  margin: 30px 100px;
}

.note {
  font-size: small;
  width: 400px;
}

.logo_container {
  margin-top: 5px;
  margin-bottom: 6px;
  float: left;
  width: 200px;
}

#chatbox {
  height: 600px;
  overflow: auto;
}

.message {
  width: 80%;
  margin-bottom: 20px;
}

.chat {
  border: 1px solid #2f7eb2;
  padding: 10px;
}

.chat-header {
  background-color: #2f7eb2;
  color: #fff;
  padding: 10px;
  margin: -11px -11px 10px -11px;
}

div.text {
  width: 300px;
  font-size: larger;
}

.message.sent {
  float: right;
}

.message.sent div.text {
  background-color: #ccf2ff;
}

.message.received div.text {
  background-color: #e3e1dc;
}

.message.error {
  float: right;
}

.message.error div.text {
  background-color: #ffcccc;
}

.time {
  color: #808080;
  margin: 10px;
  font-size: smaller;
  font-weight: normal;
}

.sender {
  font-weight: bold;
  right-margin: 10px;
}

.message.error p.sender {
  color: #FF0000;
  font-weight: bold;
  right-margin: 10px;
}

JavaScript

// This function runs when the page is loaded
$(document).ready(function() {
  // Check for the various File API support.
  var timestamp = Date.now();
  var msg = '';
  if (window.File && window.FileReader && window.FileList && window.Blob) { // check for File support
    $('#file').change(handleFileSelect);
  setTimeout(function() {
    msg = "Hello, I'm a Deep Learning chatbot inspired by <a href='http://youtu.be/-ENmRfKWjmo'>Deep Learning in 11 lines of MATLAB code</a>";
    show(msg, timestamp, 'nobutton');
    msg = "Send me an image and I will do my best to tell you what's in the image with AlexNet model. &#128522;";
    timestamp += 1000; // increment by second
    show(msg, timestamp, 'nobutton');
    msg = "I'm usually good at recognizing dog breeds. Please center your subject and make it stand out from the background.";  // increment by second
    timestamp += 1000;
    show(msg, timestamp, 'showbutton');
  }, 500);
  } else {
    msg = "The File APIs are not fully supported in this browser and you cannot use it to submit your image. Sorry. &#128577;";
    show(msg, timestamp, 'nobutton');
  }
});

// This shows the message in the chat box
function show(text, timestamp, buttonflag) {
  var ts = new Date(timestamp).toLocaleTimeString();
  $('#chatbox').append("<div class='message new'></div>");
  $('.message.new').append("<p class='sender'>Bot</p>");
  $('.message.new p').append("<span class='time'>" + ts + "</span>");
  $('.message.new').append("<div class='text'>" + text + "</div>");
  $('.message.new').addClass("sent");
  if (buttonflag == 'showbutton') {
    $('.message.new').append('<p><input type="file" id="file" name="file" accept="image/*" /></p>');
    $('#file').change(handleFileSelect) // attach event listener
  }
  $('.message.new').removeClass("new");
  $('#chatbox').scrollTop($('#chatbox')[0].scrollHeight);
}

// run when the file button is clicked
function handleFileSelect(evt) {
  var f = evt.target.files; // FileList object
  var ts =...