dlvm/nvidia/webapp/templates/index.html (62 lines of code) (raw):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Google Cloud Nvidia Inference</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>$(document).on('change', '#browsebutton :file', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
$(document).ready( function() {
$('#browsebutton :file').on('fileselect', function(event, numFiles, label) {
var input = $(this).parents('.input-group').find(':text'),
log = numFiles > 1 ? numFiles + ' files selected' : label;
if( input.length ) {
input.val(log);
} else {
if( log ) alert(log);
}
});
});
</script>
</head>
<body>
<div class="container">
<h3><img src="https://cloud.google.com/_static/images/cloud/icons/favicons/onecloud/apple-icon.png" style="width: 5%; height: 5%">
Make a prediction
</h3>
<form class="form-inline center-block" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data">
<div class="input-group">
<label id="browsebutton" class="btn btn-default input-group-addon" for="my-file-selector" style="background-color:white">
<input type="file" id="my-file-selector" name="image" style="display:none;">
Browse...
</label>
<input type="text" class="form-control" readonly="">
</div>
<button type="submit" class="btn btn-success">Predict</button>
</form>
<div class="text-center">
{% if init %}
<div>
<img src="{{ url_for('static', filename='images/'+user_image) }}" style="width: 10%; height: 10%" class="img-responsive center-block" alt="">
</div>
{% if prediction %}
<div class="alert alert-success" style="margin-top:18px;">
<strong>Prediction: </strong> {{ prediction }}
</div>
{% else %}
<div class="alert alert-danger" style="margin-top:18px;">
<strong>System Error</strong> No prediction!
</div>
{% endif %}
{% endif %}
</div>
</div>
</body>
</html>