chinese-wordle-tool/templates/index.html

85 lines
3.4 KiB
HTML

<html>
<head>
<title>Chinese Wordle Tools</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<form id="para" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">模式</label>
<div class="col-sm-8">
<label class="radio-inline">
<input type="radio" name="mode" value="0" checked> 0
</label>
<label class="radio-inline">
<input type="radio" name="mode" value="1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="mode" value="2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="mode" value="3"> 3
</label>
</div>
</div>
<div class="form-group">
<label for="parameter" class="col-sm-2 control-label">参数</label>
<div class="col-sm-8">
<input type="text" id="parameter" name="parameter" class="form-control" placeholder="4234">
</div>
</div>
<div class="form-group">
<label for="result" class="col-sm-2 control-label">结果</label>
<div class="col-sm-8">
<textarea id="result" class="form-control" rows="6" readonly></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button id="submit" type="button" class="btn btn-default">提交</button>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('input[name=mode]').on('click', function (e) {
switch ($(e.currentTarget).val()) {
case '0':
$("#parameter").attr('placeholder', '4324')
break
case '1':
$("#parameter").attr('placeholder', 'bai tou er xin,012 010 10 001')
break
case '2':
$("#parameter").attr('placeholder', '2134')
break
case '3':
$("#parameter").attr('placeholder', '各执一词 4212,00 11 12 22 0010 1022')
break
}
$("#parameter").val('')
})
$('#submit').on('click', function () {
$.get('/predict', { mode: $("input[name='mode']:checked").val(), parameter: $('#parameter').val() }, function (result) {
if(result && result.status === 0){
text = result.result.map(function(item){
return item.word + '\t' + item.pinyin
}).join('\n')
$('#result').val(text)
}
else {
$('#result').val(result)
}
})
})
});
</script>
</body>
</html>