packages/cli/serve-resource/text/index.html (101 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<title>Pipcook Server</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js">
</script>
<style>
html {
font-family: sans-serif;
}
form {
width: 600px;
background: #ccc;
margin: 0 auto;
padding: 20px;
border: 1px solid black;
}
form ol {
padding-left: 0;
}
form p,
form input {
border: 1px solid black;
font-size: 1rem;
line-height: 32px;
padding-left: 10px;
margin-bottom: 10px;
}
form label {
margin-bottom: 10px;
}
form button {
background-color: #7F9CCB;
padding: 5px 10px;
border-radius: 5px;
border: 1px ridge black;
font-size: 0.8rem;
height: auto;
}
form button:hover {
background-color: #2D5BA3;
color: white;
}
form button:active {
background-color: #0D3F8F;
color: white;
}
#input_label {
border: 0px;
margin-top: 10px;
}
#result {
margin-top: 10px;
justify-content: space-between;
line-height: 20px;
padding: 20px;
background: #eee;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
list-style-type: none;
border: 1px solid black;
white-space: pre-wrap;
}
</style>
</head>
<body>
<form>
<div>
<p id="input_label">Input text to predict:</p>
</div>
<div>
<input type="text" id="input_text">
</div>
<div>
<button id="predict">Predict</button>
</div>
<div>
<p id="result">Predict result...</p>
</div>
</form>
<script>
$(document).ready(function () {
document.getElementById('input_text').focus();
$('#predict').click(function (event) {
event.preventDefault();
var input = document.getElementById('input_text').value;
$.get({
url: 'predict?input=' + input,
cache: false,
contentType: false,
processData: false,
success: function (resp) {
$('#result').html(JSON.stringify(resp, null, ' '));
},
});
});
});
</script>
</body>
</html>