Epsilon-Greedy Bandit Example

MATLAB Production Server demo

by Toshi Takeuchi

HTML

<script src="https://www.google.com/jsapi"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<h2>Epsilon-Greedy Bandit - MATLAB Production Server Demo</h2>
<p>This is a simulation to test the button color. The button color is set by <a href="http://www.mathworks.com/products/matlab-production-server/">MATLAB Production Server</a> using <strong>the epsilon-greedy multi-armed bandit algorithm</strong>.</p>
<p>
In a real test you will not see the "No Thanks" button. Clicks on "No Thanks" represent cases visitors leave the page without clicking the "Buy Now" button. To reflect the realistic user behavior, "No Thanks" should be clicked much more frequently than "Buy Now".
</p>
<div id="msgbox" class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <span id="message">To display the plot below, click on "Buy Now" or "No Thanks".</span>
</div>
<div id="tshirt">
  <p><img src="http://blogs.mathworks.com/images/cleve/shirt.jpg" width="320" height="240" align="middle">
    <a href="#" id="buy" class="myButton">Buy Now</a><a href="#" id="no" class="myButton">No Thanks</a>
  </p>
</div>
<div id="main">
  <h3>
    Expected Reward (Click Rate) Plot
  </h3>
</div>

<div id="container">
  <div id="answer"></div>
  <div id="chart_div" style="width: 900px; height: 500px;"></div>
</div>
<p class="note"> 
When the page loads, JavaScript calls MATLAB Production Server to get the color to use for the button.
When either button is clicked, our code running on MATLAB Production Server updates the scores and generates the plot using Google Charts API. 
</p>
<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;
}

#container {
  width: 400px;
  display: none;
}

#answer {
  font-color: red;
  font-size: 18pt;
}

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

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

.note
{
     color: #404040;
     border: solid 1px #e6e600;
     background-color: #ffffe6;
     padding: 14px 20px;
     font-size: 11pt;
}

.myButton {
  background-color: #555555;
  -moz-border-radius: 28px;
  -webkit-border-radius: 28px;
  border-radius: 28px;
  border: 1px solid #404040;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 17px;
  padding: 16px 31px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #404040;
}

.myButton:hover {
  background-color: #808080;
}

.myButton:active {
  position: relative;
  top: 1px;
}

.blueBG {
  background-color: #7892c2;
  color: #ffffff;
  border: 1px solid #4e6096;
  text-shadow: 0px 1px 0px #283966;
}

.blueBG:hover {
  background-color: #476e9e;
}

.orangeBG {
  background-color: #d78825;
  color: #ffffff;
  border: 1px solid #ffab23;
  text-shadow: 0px 1px 0px #d78825;
}

.orangeBG:hover {
  background-color: #cb6015;
}

.yellowBG {
  background-color: #ffec64;
  color: #333333;
  border: 1px solid #ffaa22;
  text-shadow: 0px 1px 0px #ffee66;
}

.yellowBG:hover {
  background-color: #ffab23;
}

.alert {
  padding: 20px;
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  margin-bottom: 15px;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

JavaScript

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);

// This function runs when the page is loaded
$(document).ready(function() {
  // call MATLAB Production Server
  setColorMPS();                               // set button color
});

// Run when either button is clicked
$('.myButton').click(function() {
  if ($("#chart_div").is(':empty')) {          // if no plot
      var color = whichColor();                // call helper function to get the color
      var click = 0;                           // by default no click
      var id = $(this).attr("id");             // get the id of the clicked button
      $("#message").text("Please see the plot below.");
      if (id == "buy") {                       // if "Buy Now" button
        click = 1;                             // count as 1 click
        $("#message").text("Thank you for clicking! Please see the plot below.");
      }
      $("#msgbox").css("display", "block");    // make message box visible
      
      // call MATLAB Production Server
      scoreButtonMPS(color, click);            // pass the color and count of click
      $("#container").css("display", "block"); // show the plot
   }
});

// helper function to determine the color of the buy button
function whichColor() {
  var classname = $("#buy").attr("class").split(' ')[1]; // css class name
  if (classname == "blueBG") {                           // if blue button
    color = 1;                                           // blue button = 1
  } else if (classname == "orangeBG") {                  // if orange
    color = 2;                                           // orange button = 2 
  } else {                                               // otherwise
    color = 3;                                           // yellow button  = 3
  }
  return color;
}

/* Call MATLAB Production Server to set the button color.
   MATLAB Production Server is running the custom MATLAB
   function...