<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background: rgb(255, 253, 253);
padding-top: 100px;
font-size: 20px;
}
textarea {
max-width: 800px;
height: 300px;
color: black;
font-weight: 40;
font-size: 18px;
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
width: 100%;
background: #fff;
border-radius: 3px;
line-height: 2em;
border: 3px black double;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
padding: 30px;
display: block;
}
button {
margin: 10px;
padding: 10px;
}
.container {
justify-content: center;
align-items: center;
display: flex;
}
.container2 {
justify-content: center;
align-items: center;
/* display: flex; */
padding-left: '120px';
padding-right:'120px';
margin: 100px;
}
p#correction{
margin:100px;
}
* {
-webkit-font-smoothing: antialiased !important;
}
</style>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function sendd() {
var x = document.getElementById("textarea").value;
document.getElementById("correction1").innerHTML = '等待...'
var data = JSON.stringify({
"text": x
});
var config = {
method: 'post',
url: 'http://localhost:8000/api/punc_tagger/',
headers: {
'content-type': 'application/json'
},
data: data
};
axios(config)
.then(function (response) {
console.log(response.data)
document.getElementById("correction1").innerHTML = 'version1: ' + response.data.result.v7
document.getElementById("correction2").innerHTML = 'version2: ' + response.data.result.v9
document.getElementById("correction3").innerHTML = 'version3: ' + response.data.result.j8
})
.catch(function (error) {
console.log(error);
});
}
</script>
<body>
<div class='container'>
<textarea id="textarea"></textarea>
<button onclick="sendd()">送出</button>
</div>
<div class="container2">
<p id="correction1">
</p>
<br/>
<p id="correction2">
</p>
<br/>
<p id="correction3">
</p>
</div>
</body>
</html>