Spaces:
Runtime error
Runtime error
<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> |