132 lines
6.4 KiB
HTML
132 lines
6.4 KiB
HTML
<html>
|
||
|
||
<head>
|
||
<title>Chinese Wordle Tools</title>
|
||
<!-- Required meta tags -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<!-- Bootstrap CSS -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
</head>
|
||
|
||
<body>
|
||
<form id="para" class="form-horizontal container">
|
||
<div class="form-group row">
|
||
<label class="col-sm-2 col-form-label">模式</label>
|
||
<div class="col-sm-8">
|
||
<div class="form-check form-check-inline">
|
||
<input class="form-check-input" type="radio" name="mode" id="mode0" value="0" checked>
|
||
<label class="form-check-label" for="mode0">拼音1</label>
|
||
</div>
|
||
<div class="form-check form-check-inline">
|
||
<input class="form-check-input" type="radio" name="mode" id="mode1" value="1">
|
||
<label class="form-check-label" for="mode1">拼音2</label>
|
||
</div>
|
||
<div class="form-check form-check-inline">
|
||
<input class="form-check-input" type="radio" name="mode" id="mode2" value="2">
|
||
<label class="form-check-label" for="mode2">汉兜1</label>
|
||
</div>
|
||
<div class="form-check form-check-inline">
|
||
<input class="form-check-input" type="radio" name="mode" id="mode3" value="3">
|
||
<label class="form-check-label" for="mode3">汉兜2</label>
|
||
</div>
|
||
<div class="form-check form-check-inline">
|
||
<input class="form-check-input" type="radio" name="mode" id="mode4" value="4">
|
||
<label class="form-check-label" for="mode4">文字正则</label>
|
||
</div>
|
||
<div class="form-check form-check-inline">
|
||
<input class="form-check-input" type="radio" name="mode" id="mode5" value="5">
|
||
<label class="form-check-label" for="mode5">拼音正则</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group row">
|
||
<label for="parameter" class="col-sm-2 col-form-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 row">
|
||
<label for="result" class="col-sm-2 col-form-label">结果</label>
|
||
<div class="col-sm-8">
|
||
<textarea id="result" class="form-control" rows="6" readonly></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="form-group row">
|
||
<div class="col-sm-10">
|
||
<button id="submit" type="button" class="btn btn-primary form-control">提交</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<div class="container alert alert-secondary" role="alert">
|
||
<h4 class="alert-heading">使用说明</h4>
|
||
<hr>
|
||
<p>英文逗号分割输入和命中结果,多次尝试使用分号分割;0: 未命中,1: 部分命中, 2: 精确命中</p>
|
||
<hr>
|
||
<p>参数说明: </p>
|
||
<p>拼音1： 4个数字，表示每个字的拼音位数</p>
|
||
<p>拼音2： 输入尝试状态和结果</p>
|
||
<p>汉兜1： 4个数字，表示每个字的拼音声调</p>
|
||
<p>汉兜2： 输入尝试状态和结果, 命中结果输入顺序(拼音声母韵母,汉字位置,汉字声调)</p>
|
||
</div>
|
||
<!-- Optional JavaScript -->
|
||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></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', '1243')
|
||
break
|
||
case '3':
|
||
$("#parameter").attr('placeholder', '各执一词,00 11 12 22 0010 1022')
|
||
break
|
||
case '4':
|
||
$("#parameter").attr('placeholder', '^..之急$')
|
||
break
|
||
case '5':
|
||
$("#parameter").attr('placeholder', '^.+zhi ji$')
|
||
break
|
||
}
|
||
$("#parameter").val('')
|
||
})
|
||
$('#submit').on('click', function () {
|
||
$.ajax({
|
||
url: '/predict',
|
||
data: { mode: $("input[name='mode']:checked").val(), parameter: $('#parameter').val() },
|
||
success: function (result,) {
|
||
if (result && result.status === 0) {
|
||
text = result.result.map(function (item) {
|
||
return item.word + '\t' + item.pinyin
|
||
}).join('\n')
|
||
if (!text) {
|
||
$('#result').val('无匹配结果')
|
||
}
|
||
else {
|
||
$('#result').val(text)
|
||
}
|
||
}
|
||
else {
|
||
$('#result').val(result.message)
|
||
}
|
||
},
|
||
error: function () {
|
||
$('#result').val('出错了，请检查参数')
|
||
}
|
||
});
|
||
})
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |