The app consists of two main parts: the API endpoint, built with the play framework, and the frontend single-page application, built with Angular.js. The frontend app sends the data to the API to get computed and then shows the results using chart.js. Here are the steps that we need for this:

• Initialize the form
• Communicate with the API
• Populate the view with coverage data and charts

The algorithm's JSON output should be as follows:

• All the config parameters are returned
• GOAL_STATE_INDEX, the maximum Profit Index
• COVERAGE, the ratio of training trials or epochs that reach a predefined goal state
• COVERAGE_STATES, the size of the quantized option values
• COVERAGE_TRANSITIONS, the number of states squared
• Q_VALUE, the q-value of all the states
• OPTIMAL, the states with the most reward returned if the reward type isn't random

The frontend code initiates the Angular.js app with the chart.js module as follows (see in the PlayML/public/assets/js/main.js file):

angular.module("App", ['chart.js']).controller("Ctrl", ['$scope', '$http', function ($scope, $http) {
// First we initialize the form:
$scope.form = {REWARD_TYPE: "Maximum reward",NUM_NEIGHBOR_STATES: 3,STRIKE_PRICE: 190.0,MIN_TIME_EXPIRATION: 6,QUANTIZATION_STEP: 32,ALPHA: 0.2,DISCOUNT: 0.6,MAX_EPISODE_LEN: 128,NUM_EPISODES: 20,MIN_COVERAGE: 0.1
};

Then the run button action prepares the form data to be sent to the API and sends the data to the backend. Next, it passes the returned data to the result variable to be used in the frontend. Then, it clears the charts and recreates them; if an optimal is found, it initializes the optimal chart. Finally, if the Q-value is found initialize, the q-value chart is getting initialized:

$scope.run = function () {
    var formData = new FormData(document.getElementById('form'));
    $http.post('/api/compute', formData, {
    headers: {'Content-Type': undefined}}).then(function successCallback(response) {
    $scope.result = response.data;
    $('#canvasContainer').html('');

    if (response.data.OPTIMAL) {
        $('#canvasContainer').append('<canvas id="optimalCanvas"></canvas>')
        Chart.Scatter(document.getElementById("optimalCanvas").getContext("2d"), {data: { datasets:             [{data: response.data.OPTIMAL}] }, options: {...}});}if (response.data.Q_VALUE) {
        $('#canvasContainer').append('<canvas id="valuesCanvas"></canvas>')
        Chart.Line(document.getElementById("valuesCanvas").getContext("2d"), {
        data: { labels: new Array(response.data.Q_VALUE.length), datasets: [{
        data: response.data.Q_VALUE }] }, options: {...}});}});}}]
    );

The preceding frontend code is then embedded in the HTML (see PlayML/public/index.html) to get the UI to be accessed on the Web as a fancy app at http://localhost:9000/. Feel free to edit the content according to your requirement. We will see the details soon.