|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Practical Alien Detector</title> |
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|
|
<script> |
|
|
function uploadImage() { |
|
|
var formData = new FormData(); |
|
|
formData.append('image', $('#imageUpload')[0].files[0]); |
|
|
|
|
|
$.ajax({ |
|
|
url: '/predict', |
|
|
type: 'POST', |
|
|
data: formData, |
|
|
processData: false, |
|
|
contentType: false, |
|
|
success: function(response) { |
|
|
if (response.predicted_class == "aliens") { |
|
|
$('#result').text('This is an alien.'); |
|
|
} else { |
|
|
$('#result').text('This is NOT an alien.'); |
|
|
} |
|
|
$('#prob').text('Probability its an alien: '+response.predicted_probabilities); |
|
|
}, |
|
|
error: function(xhr, status, error) { |
|
|
console.log(error); |
|
|
} |
|
|
}); |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Practical Alien Detector</h1> |
|
|
<input type="file" id="imageUpload"> |
|
|
<button onclick="uploadImage()">Predict</button> |
|
|
<div id="result"></div> |
|
|
<div id="prob"></div> |
|
|
</body> |
|
|
</html> |
