osroca/index.html

## index.html
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>BigML Prediction Test</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            font-family: helvetica, arial;
            padding: 15px;
            box-sizing: border-box;
        }
        div {
            margin-top: 10px;
            line-height: 18px;
            font-family: helvetica;
            font-size: 14px;
            font-weight: 300;
            color: #768b96;
        }
        ul li {
            color: #54636b;
        }
        ul li strong{
            font-weight: 600;
            color: #167caf;
        }
    </style>
</head>

<body>
    <div id="model">Training model...</div>
    <div id="prediction"></div>
    <div id="sunburst"></div>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            var BASE_API_HOST = "https://tropo.dev.bigml.io/",
                BASE_EMBEDDED_URL = "https://tropo.dev.bigml.com/embedded/",
                CREDENTIALS = "username=roviratropo&api_key=3cf1c2a417e107f5dd74b55d498d66234b6b6b96";

            function createPrediction(modelResource) {
                $('#prediction').html('[ ' + modelResource + ' ] is predicting ...')
                var data = {
                    model: modelResource,
                    input_data: {
                        "000003": 0.79
                    }
                };

                jQuery.ajax({
                    url: BASE_API_HOST + "prediction?" + CREDENTIALS,
                    type: "POST",
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify(data),
                    success: function(prediction) {
                    	console.log(prediction);
                    	$('#prediction').html(
                    	    "Prediction: [ " + prediction.resource + " ]" +
                    	    "<ul>" +
                    	    "<li>Output: <strong>" + prediction.output + "</strong></li>" +
                    	    "<li>Confidence: <strong>" + prediction.confidence + "</strong></li>" +
                    	    "</ul>"
                    	);
                    },
                    error: function(error) {
                    	console.log(error);
                    	$('#prediction').html("Error creating prediction");
                    }
                });
            }

            function pollModel(modelResource) {
                var url = BASE_API_HOST +
                            modelResource + "?" + CREDENTIALS;
                jQuery.ajax({
                    url: url,
                    type: "GET",
                    contentType: "application/json",
                    dataType: "json",
                    success: function(response) {
                    	console.log(response);
                    	processModelResponse(response);
                    },
                    error: function(error) {
                    	console.log(error);
                    	$('#model').html("Error retrieving the model");
                    }
                });
            }

            function shareModel(modelResource) {
                $('#sunburst').html('Sharing model ' + modelResource);
                var data = {
                        'shared': true
                    },
                    url = BASE_API_HOST + modelResource + "?" + CREDENTIALS,
                    $iframe = $('<iframe frameborder="0" allowtransparency="true" ' +
                                'allowfullscreen="allowfullscreen" width="600" height="400"></iframe>'
                            ),
                    embedURL = BASE_EMBEDDED_URL + "model/";

                jQuery.ajax({
                    url: url,
                    type: "PUT",
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify(data),
                    success: function(response) {
                    	console.log(response);
                    	if (response.code == 202 &&
                    	    'shared_hash' in response &&
                    	    response.shared_hash.length) {
                    	    embedURL += response.shared_hash;
                    	    $iframe.attr('src', embedURL);
                    	    $('#sunburst').html($iframe);
                    	} else {
                    	    $('#sunburst').html("Error sharing the model");
                    	}
                    },
                    error: function(error) {
                    	console.log(error);
                    	$('#sunburst').html("Error sharing the model");
                    }
                });
            }

            function processModelResponse(response) {
                var timeout;
                switch(response.status.code) {
                    case -1:
                        //FAULTY
                        $('#model').html("Error training the model");
                        break;
            	    case 5:
            	        //FINISHED
            	        if (typeof timeout !== 'undefined') {
            	            clearTimeout(timeout);
            	        }
            	        $('#model').html(
            	            "[ " + response.resource + " ] " +
            	            response.status.message +
            	            ' in ' + response.status.elapsed + " ms"
                	    );
                	    shareModel(response.resource);
                	    createPrediction(response.resource);
                	    break;
                	default:
                	    //UNKNOWN, RUNNABLE, QUEUED, STARTED, IN_PROGRESS, SUMMARIZED
                	    $('#model').html(
                	        "Training model ...[ " + response.resource + " ]<br/>" +
                	        response.status.message
                	    );
                	    timeout = setTimeout(function() {
                    	    pollModel(response.resource)
                	    }, 3000);
                	    break;
            	}
            }

            var data = {
                dataset: "dataset/572aa029b95b39287a000997",
                name: "Iris dataset model"
            };
            jQuery.ajax({
                url: BASE_API_HOST + "model?" + CREDENTIALS,
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(data),
                success: function(response) {
                	console.log(response);
                	processModelResponse(response);
                },
                error: function(error) {
                	console.log(error);
                	$('#model').html(error.statusText);
                }
            });
        });
    </script>
</body>
</html>
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>BigML Prediction Test</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<script src="https://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
	<style type="text/css">
	body {
	font-family: helvetica, arial;
	padding: 15px;
	box-sizing: border-box;
	}
	div {
	margin-top: 10px;
	line-height: 18px;
	font-family: helvetica;
	font-size: 14px;
	font-weight: 300;
	color: #768b96;
	}
	ul li {
	color: #54636b;
	}
	ul li strong{
	font-weight: 600;
	color: #167caf;
	}
	</style>
	</head>

	<body>
	<div id="model">Training model...</div>
	<div id="prediction"></div>
	<div id="sunburst"></div>

	<script type="text/javascript">
	jQuery(document).ready(function() {
	var BASE_API_HOST = "https://tropo.dev.bigml.io/",
	BASE_EMBEDDED_URL = "https://tropo.dev.bigml.com/embedded/",
	CREDENTIALS = "username=roviratropo&api_key=3cf1c2a417e107f5dd74b55d498d66234b6b6b96";

	function createPrediction(modelResource) {
	$('#prediction').html('[ ' + modelResource + ' ] is predicting ...')
	var data = {
	model: modelResource,
	input_data: {
	"000003": 0.79
	}
	};

	jQuery.ajax({
	url: BASE_API_HOST + "prediction?" + CREDENTIALS,
	type: "POST",
	contentType: "application/json",
	dataType: "json",
	data: JSON.stringify(data),
	success: function(prediction) {
	console.log(prediction);
	$('#prediction').html(
	"Prediction: [ " + prediction.resource + " ]" +
	"<ul>" +
	"<li>Output: <strong>" + prediction.output + "</strong></li>" +
	"<li>Confidence: <strong>" + prediction.confidence + "</strong></li>" +
	"</ul>"
	);
	},
	error: function(error) {
	console.log(error);
	$('#prediction').html("Error creating prediction");
	}
	});
	}

	function pollModel(modelResource) {
	var url = BASE_API_HOST +
	modelResource + "?" + CREDENTIALS;
	jQuery.ajax({
	url: url,
	type: "GET",
	contentType: "application/json",
	dataType: "json",
	success: function(response) {
	console.log(response);
	processModelResponse(response);
	},
	error: function(error) {
	console.log(error);
	$('#model').html("Error retrieving the model");
	}
	});
	}

	function shareModel(modelResource) {
	$('#sunburst').html('Sharing model ' + modelResource);
	var data = {
	'shared': true
	},
	url = BASE_API_HOST + modelResource + "?" + CREDENTIALS,
	$iframe = $('<iframe frameborder="0" allowtransparency="true" ' +
	'allowfullscreen="allowfullscreen" width="600" height="400"></iframe>'
	),
	embedURL = BASE_EMBEDDED_URL + "model/";

	jQuery.ajax({
	url: url,
	type: "PUT",
	contentType: "application/json",
	dataType: "json",
	data: JSON.stringify(data),
	success: function(response) {
	console.log(response);
	if (response.code == 202 &&
	'shared_hash' in response &&
	response.shared_hash.length) {
	embedURL += response.shared_hash;
	$iframe.attr('src', embedURL);
	$('#sunburst').html($iframe);
	} else {
	$('#sunburst').html("Error sharing the model");
	}
	},
	error: function(error) {
	console.log(error);
	$('#sunburst').html("Error sharing the model");
	}
	});
	}

	function processModelResponse(response) {
	var timeout;
	switch(response.status.code) {
	case -1:
	//FAULTY
	$('#model').html("Error training the model");
	break;
	case 5:
	//FINISHED
	if (typeof timeout !== 'undefined') {
	clearTimeout(timeout);
	}
	$('#model').html(
	"[ " + response.resource + " ] " +
	response.status.message +
	' in ' + response.status.elapsed + " ms"
	);
	shareModel(response.resource);
	createPrediction(response.resource);
	break;
	default:
	//UNKNOWN, RUNNABLE, QUEUED, STARTED, IN_PROGRESS, SUMMARIZED
	$('#model').html(
	"Training model ...[ " + response.resource + " ]<br/>" +
	response.status.message
	);
	timeout = setTimeout(function() {
	pollModel(response.resource)
	}, 3000);
	break;
	}
	}

	var data = {
	dataset: "dataset/572aa029b95b39287a000997",
	name: "Iris dataset model"
	};
	jQuery.ajax({
	url: BASE_API_HOST + "model?" + CREDENTIALS,
	type: "POST",
	contentType: "application/json",
	dataType: "json",
	data: JSON.stringify(data),
	success: function(response) {
	console.log(response);
	processModelResponse(response);
	},
	error: function(error) {
	console.log(error);
	$('#model').html(error.statusText);
	}
	});
	});
	</script>
	</body>
	</html>