Skip to content

Instantly share code, notes, and snippets.

@osroca
Last active September 19, 2017 21:02
Show Gist options
  • Save osroca/9161474 to your computer and use it in GitHub Desktop.
Save osroca/9161474 to your computer and use it in GitHub Desktop.
Testing BigML (bigml.io) modeling and predictions with JQuery
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment