OpenSLU / static /template /application.html
LightChen2333's picture
Upload 78 files
223340a
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<style type="text/css">
span.rcorners2 {
background-color: #e6e6e6;
color: #000;
}
.btn-primary {
color: #fff;
background-color: #8f9eb4;
border-color: #8f9eb4;
}
.btn-primary:hover {
color: #fff;
background-color: #829ec5;
border-color: #829ec5;
}
</style>
</head>
<body>
<div class="row" style="width: 100%;margin: 0px;padding: 20px;">
<div class="col">
<div style="font-size: larger;margin-bottom: 10px;margin-top: 20px;"><b>Input Sample</b>
<hr />
</div>
<div class="row">
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
</div>
<div class="row">
<button onclick="post_data()" class="btn btn-primary" style="margin-top: 20px;">Submit</button>
</div>
<hr />
</div>
<div style="font-size: larger;margin-bottom: 10px;margin-top: 20px;"><b>Prediction Result</b>
<hr />
</div>
<div id="result"></div>
</div>
</body>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
"html": true,
"placement": "bottom"
})
});
function post_data() {
var inputDom = document.getElementById('comment');
$.ajax({
url: "/api/predict",
type: "post",
data: {
"text": inputDom.value
}, dataType: "json",
success: function (data) {
console.log(data)
var outputDom = document.getElementById('result');
html_data = `<b>Intent:</b>`
for (var i = 0; i < data["intent"].length; i++) {
html_data += `<button type="button" class="btn btn-white">
<span class="badge text-dark btn-light">`+ data["intent"][i] + `</span>
</button>`
}
html_data += `<br /> <b>Slot:</b>`
for (var i = 0; i < data["slot"].length; i++) {
html_data += `<button type="button" class="btn btn-white">
`+ data["text"][i] + ` <span class="badge text-dark" style="background-color: rgb(255, 255, 255);
color: rgb(62 62 62);
box-shadow: 2px 2px 7px 1px rgba(210, 210, 210, 0.42);">` + data["slot"][i] + `</span>
</button>`
}
html_data += `<hr /><br />`
outputDom.innerHTML = html_data
},
error: function () {
},
complete: function () {
}
});
return
}
</script>
</html>