-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
135 lines (129 loc) · 5.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!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>手写生成 - KAGA</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">
</head>
<body id="app" @vue:mounted="mounted()">
<div class="container">
<div class="container mb-5 mt-5">
<div v-for="(item, index) in imgdatas">
<img class="img-fluid img-thumbnail me-2 shadow-sm" v-bind:src="item">
</div>
</div>
<form action="##" onsubmit="return false" class="row">
<div class="mb-4">
<textarea class="form-control shadow-sm" rows="4" v-model="text" spellcheck="false"></textarea>
</div>
<div class="mb-4">
<div class="col-12">
<input type="button" class="btn btn-outline-primary shadow-sm" value="计算中……" disabled
v-if="iscalculating" />
<input type="button" class="btn btn-outline-primary shadow-sm" value="生成" id="create"
@click="calculate()" v-else />
</div>
</div>
<div class=""></div>
<div class="col-md-6 col-sm-12 mb-3" v-for="(item, index) in attributes">
<div class="input-group col-12">
<span class="input-group-text">{{item.name}}</span>
<input class="form-control" type="number" v-model:value="item.val">
</div>
</div>
<div class="col-12 mb-3">
<div class="input-group col-12">
<label class="input-group-text">{{attributesText.name}}</label>
<input class="form-control" type="text" v-model:value="attributesText.val">
</div>
</div>
</form>
</div>
<div class="position-fixed top-0 start-50 translate-middle-x p-3" style="z-index: 11">
<div class="toast align-items-center text-white" role="alert" aria-live="assertive" aria-atomic="true"
id="toast">
<div class="d-flex">
<div class="toast-body"></div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">参数错误</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{{servererror}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/petite-vue.iife.min.js"></script>
<script>
const attributeNames = [
'width', 'height', 'font_size', 'line_spacing', 'word_spacing',
'top_margin', 'bottom_margin', 'left_margin', 'right_margin',
'line_spacing_sigma', 'font_size_sigma', 'word_spacing_sigma',
'perturb_x_sigma', 'perturb_y_sigma', 'perturb_theta_sigma'
]
const attributeNamesChinese = [
'宽度', '高度', '字体大小', '行间距', '字间距',
'上边距', '底边距', '左边距', '右边距',
'行间距扰动', '字体大小扰动', '字间距扰动',
'笔画水平扰动', '笔画垂直扰动', '字型角度扰动'
]
PetiteVue.createApp({
text: "WebHandRight - 手写字体生成",
attributes: attributeNames.map((v, i) => PetiteVue.reactive({ name: attributeNamesChinese[i], key: v, val: 0 })),
attributesText: PetiteVue.reactive({ name: '句末字符', key: 'end_chars', val: '' }),
iscalculating: false,
imgdatas: PetiteVue.reactive(['data/default.webp']),
servererror: '114514',
mymodel: new bootstrap.Modal(document.querySelector('#myModel')),
calculate() {
this.iscalculating = true;
const _data = Object.fromEntries([...this.attributes, this.attributesText].map(a => [a.key, a.val]));
const text = this.text;
axios({
method: 'post',
url: '/api/run',
data: {
text,
..._data
}
}).then((resp) => {
this.imgdatas.length = resp.data.length;
resp.data.forEach((v, i) => {
this.imgdatas[i] = "data:image/webp;base64," + v;
})
}).catch((error) => {
this.servererror = error.response.data;
this.mymodel.show();
}).finally(() => {
this.iscalculating = false;
})
},
mounted() {
[1000, 160, 50, 60, 10, 50, 50, 50, 50, 5, 4, 4, 2, 2, 0.05].forEach((value, index) => {
this.attributes[index].val = value
});
this.attributesText.val = ',。';
}
}).mount('#app')
</script>
</body>
</html>