-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
447 lines (425 loc) · 17.2 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Tool for ranking moe attributes." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="favicon.ico" />
<title>MoeRanker</title>
<link rel="preload" href="assets/img/akarin.jpg" as="image" />
<link rel="preload" href="assets/img/omedetou.gif" as="image" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css"
integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<style>
@media (min-width: 1600px) {
.container {
max-width: 1520px !important;
}
}
@media (max-width: 992px) {
.subset-list {
max-height: initial !important;
overflow: initial !important;
}
#tab-predict > div {
width: 680px !important;
}
#tab-predict .subset-panel {
flex-basis: 100% !important;
}
}
@media (max-width: 1200px) {
#result-panel {
max-height: initial !important;
overflow: initial !important;
}
}
@media (max-width: 1200px) {
#update-history {
display: none;
}
}
@media (pointer: none), (pointer: coarse) {
#prediction-panel {
overflow-x: auto;
}
#prediction-table {
min-width: 680px;
}
#tab-predict > div {
width: initial !important;
}
}
span.number-green {
font-weight: bold;
color: #00aa00;
}
span.number-red {
font-weight: bold;
color: #cc0000;
}
.tab-btn-div {
line-height: 40px;
text-align: center;
flex-basis: 150px;
transition-duration: 0.15s;
font-weight: bold;
}
.tab-btn {
transition-duration: 0.15s;
width: 100%;
}
.btn-check:checked + .tab-btn-div > .tab-btn {
background-color: #0d6efd;
color: #fff;
}
.btn-check:checked + .tab-btn-div > .tab-btn:hover {
background-color: #0b5ed7;
}
.tab-btn:hover {
background-color: #6199ec;
color: #fff;
cursor: pointer;
}
.btn {
padding: 0.25rem;
}
.form-check-label:hover,
.input-group label:hover {
cursor: pointer;
}
</style>
</head>
<body style="min-width: 350px">
<div class="container" style="margin-top: 50px">
<div style="display: flex; justify-content: space-between">
<div style="flex-basis: 800px">
<h1>
<ruby
><b>MoeRanker</b>
<rp>(</rp>
<rt>X P检测器</rt>
<rp>)</rp> </ruby
><sup>1.5.3</sup>
</h1>
<p>
by Zzzyt 2023-2024, Github@<a href="https://github.com/Zzzzzzyt/MoeRanker" target="_blank">Zzzzzzyt/MoeRanker</a
><br />
<a href="https://zh.moegirl.org.cn/Mainpage" target="_blank">萌娘百科</a>数据截止至2024/12/1
<a href="https://bgm.tv/" target="_blank">Bangumi</a>数据截止至2024/12/1 <br />感谢广大词条编辑者的付出ヾ(•ω•`)o
</p>
<p>
使用说明： 选择熟悉的作品，点击启动，开始评分。随时可以点击刷新结果。<br />
在<span class="number-red">0</span>到<span class="number-green">10</span>之间为人物评分，
结果表格中评分为正则该<ruby
>属性<rp>(</rp>
<rt>X P</rt>
<rp>)</rp> </ruby
>为正面，反之为反面，绝对值代表确信度。
</p>
<p>
图片来自bangumi自动映射，
<span style="font-weight: bold; color: #ff0000"
>可能出现无图，多图，错图现象，仅供参考，请以人名（萌百URL）为准。</span
>
启用<i>必须有图像</i>将保证至少有一张备选图片。 提高前k张设置可以看到更多候选图片。<br />
如果你对指定的<ruby
>子集有充分了解<rp>(</rp>
<rt>二次元浓度极高</rt>
<rp>)</rp> </ruby
>，请尽量关闭该选项以提高样本数。子集名称后标注了(映射数/总人数)，可供参考。<br />
有图片映射错误现象或任何问题，欢迎在GitHub上<a
href="https://github.com/Zzzzzzyt/MoeRanker/issues/new"
target="_blank"
>
发Issue</a
>（<a
href="https://github.com/Zzzzzzyt/MoeRanker/issues/new?labels=mismatch&template=mismatch_report.yml&title=人物映射错误%3A+"
target="_blank"
>映射错误专区</a
>）。
</p>
</div>
<div
id="update-history"
style="max-width: 400px; flex-grow: 1; overflow-y: auto; max-height: 360px; padding-left: 20px"
>
<h2>更新日志</h2>
<p>
v1.5.3<br />
- 添加<b>XP统一检测全国甲&乙卷</b> - 屏蔽部分属性<br />
</p>
<p>
v1.5.2<br />
- 保存设置<br />
- UI微调
</p>
<p>
<b>v1.5.1</b><br />
- <b>数据集更新：萌娘百科数据截止至2024/12/1 Bangumi数据截止至2024/12/1</b><br />
- 用户自定义自动计算<br />
- UI微调
</p>
<p>
<b>v1.5.0</b><br />
- <b>算法重置：评分改为0-10，自适应加权</b><br />
- <b>UI适配优化</b><br />
- 显示属性萌百页面链接
</p>
<p>
v1.4.1 (2024-6-24)<br />
- 优化评分性能<br />
- 计算改为手动<br />
- UI微调
</p>
<p>
<b>v1.4.0 (2024-6-22)</b><br />
- <b>数据集更新：萌娘百科数据截止至2024/6/21 Bangumi数据截止至2024/6/21</b><br />
- 加入子集：阴阳师，进击的巨人，炼金工房系列，死神， 弹丸论破，咒术回战，假面骑士，魔法少女小圆，女神异闻录<br />
- 导入导出进度<br />
- UI微调
</p>
<p>
v1.3.1 (2023-8-10)<br />
- 调整权重数据
</p>
<p>
<b>v1.3.0 (2023-8-9)</b><br />
- <b>数据集更新：萌娘百科数据截止至2023/8/3 Bangumi数据截止至2023/7/30</b><br />
- 加入子集：崩坏3，崩坏：星穹铁道，BanG Dream!系列，少女☆歌剧，少女前线，少女与战车<br />
- 更稳定的自动保存<br />
- 前k张设置<br />
- 压缩图像预加载列表<br />
- UI微调
</p>
<p>
v1.2.1 (2023-2-18)<br />
- 完整版Bangumi 120k数据集<br />
- <b>调整按钮权重显示</b><br />
- 子集人物按萌百默认排序(拼音)<br />
- 优化图像预加载<br />
- UI微调
</p>
<p>
<b>v1.2.0 (2023-2-14)</b><br />
- <b>全局自动保存进度</b><br />
- UI微调
</p>
<p>
v1.1.1 (2023-2-13)<br />
- Bangumi 120k数据集(无subject)<br />
- 顺序做题
</p>
<p>
<b>v1.1.0 (2023-2-12)</b><br />
- <b>加入预测功能</b><br />
- <b>使用Bangumi 120k数据集(未完成)</b><br />
- 优化数据集<br />
- UI微调
</p>
<p>
v1.0.3 (2023-2-8)<br />
-
加入子集：超炮Only，英雄联盟LOL，虚拟歌姬，名侦探柯南，赛马娘，舰队Collection(舰C)，战舰少女(舰R)，碧蓝航线(舰B)，蔚蓝档案，Key社三部曲，宝可梦系列角色，宝可梦，彩虹小马，偶像大师系列，偶像梦幻祭，公主连结Re:Dive，RWBY
<br />
- 加入子集映射百分比背景色提示
</p>
<p>
v1.0.2 (2023-2-7)<br />
- 计算结果添加滚动条<br />
- 加入结果位置提示文本<br />
- 加入更新日志一栏<br />
- 改善文字对比度<br />
- 移除长门大<span style="font-weight: bold; color: #11bb11">萌</span>神(太悲惨了) <del>长门有希的消失</del>
</p>
<p>
v1.0.1 (2023-2-6)<br />
- 修正了Bangumi top N子集大小≠N的问题<br />
- 修正了对雷姆的映射，并稍微优化了映射算法<br />
</p>
<p>
<b>v1.0.0 (2023-2-5)</b><br />
- <b>公测开始！</b><br />
- 添加长门大<span style="font-weight: bold; color: #11bb11">萌</span>神
</p>
</div>
</div>
</div>
<div style="border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; margin-top: 10px; margin-bottom: 10px">
<div id="tab-list" class="container" style="display: flex">
<input type="radio" class="btn-check" name="tab-select" id="tab1-radio" onchange="changeTab()" checked />
<div class="tab-btn-div">
<label class="tab-btn" for="tab1-radio">问卷</label>
</div>
<input type="radio" class="btn-check" name="tab-select" id="tab2-radio" onchange="changeTab()" />
<div class="tab-btn-div">
<label class="tab-btn" for="tab2-radio">预测</label>
</div>
</div>
</div>
<div id="tab-score" class="container">
<div id="score-panel" style="display: flex; flex-wrap: wrap">
<div style="flex-grow: 1; width: 600px">
<p style="font-size: max(min(8vw, 36pt), 22pt); height: 3em">
<a href="https://zh.moegirl.org.cn/不要停下来啊！" id="name" target="_blank">加载中</a>
</p>
<div class="input-group" style="max-width: 300px">
<div class="input-group-text" style="background-color: #fff"><span id="progress-text">这里是进度</span></div>
<button class="form-control btn btn-primary" onclick="onRevert();">撤销</button>
<button class="form-control btn btn-primary" onclick="onSkip();">跳过</button>
</div>
<br />
<button class="btn btn-danger" style="width: 50px; margin-bottom: 8px" onclick="onScore(0);">0</button>
<button class="btn btn-danger" style="width: 50px; margin-bottom: 8px" onclick="onScore(1);">1</button>
<button class="btn btn-danger" style="width: 50px; margin-bottom: 8px" onclick="onScore(2);">2</button>
<button class="btn btn-warning" style="width: 50px; margin-bottom: 8px" onclick="onScore(3);">3</button>
<button class="btn btn-warning" style="width: 50px; margin-bottom: 8px" onclick="onScore(4);">4</button>
<button class="btn btn-warning" style="width: 50px; margin-bottom: 8px" onclick="onScore(5);">5</button>
<button class="btn btn-warning" style="width: 50px; margin-bottom: 8px" onclick="onScore(6);">6</button>
<button class="btn btn-success" style="width: 50px; margin-bottom: 8px" onclick="onScore(7);">7</button>
<button class="btn btn-success" style="width: 50px; margin-bottom: 8px" onclick="onScore(8);">8</button>
<button class="btn btn-success" style="width: 50px; margin-bottom: 8px" onclick="onScore(9);">9</button>
<button class="btn btn-success" style="width: 50px; margin-bottom: 8px" onclick="onScore(10);">10</button>
<div id="loading-output" style="margin-top: 20px"></div>
<div
id="images"
style="
width: 100%;
margin-bottom: 20px;
margin-top: 20px;
max-width: 600px;
min-height: 60vh;
display: flex;
flex-wrap: wrap;
"
></div>
</div>
<div
id="result-panel"
style="
padding: 10px;
flex-basis: 360px;
flex-grow: 1;
max-width: max-content;
max-height: 90vh;
overflow: auto auto;
display: none;
"
>
<button
id="compute-button"
class="btn btn-success"
style="margin-bottom: 10px; height: 68px; width: 100%"
onclick="scheduleCompute();"
>
刷新结果
</button>
<p
id="ranking-hint"
style="
min-width: 300px;
text-align: center;
font-size: 20pt;
white-space: nowrap;
color: #ccc;
border: 2px #ccc solid;
"
>
数据不足，给我做题
</p>
<table id="ranking-table" class="table table-bordered table-sm" style="min-width: 300px; display: none">
<thead>
<th scope="col">No.</th>
<th scope="col">属性</th>
<th scope="col">评分</th>
<th scope="col">debug</th>
</thead>
<tbody></tbody>
</table>
</div>
<div class="subset-panel" style="flex-basis: 320px; padding: 10px; display: none">
<div style="max-width: 320px">
<div class="input-group" style="margin-bottom: 10px">
<div class="input-group-text">
<input id="tab-score-force-mapping" type="checkbox" class="form-check-input mt-0" />
<span> <label for="tab-score-force-mapping">有图像</label></span>
</div>
<div class="input-group-text">
<input id="tab-score-random" type="checkbox" class="form-check-input mt-0" checked />
<span> <label for="tab-score-random">乱序</label></span>
</div>
<div class="input-group-text">
<input class="form-check-input" type="checkbox" id="auto-compute" />
<span> <label for="auto-compute">自动刷新</label></span>
</div>
</div>
<div class="input-group" style="margin-bottom: 10px; max-width: 170px">
<span class="input-group-text"><label for="tab-score-k-image">显示前</label></span>
<input
id="tab-score-k-image"
type="number"
min="0"
max="20"
class="form-control"
value="1"
onchange="refresh();"
/>
<span class="input-group-text"><label for="tab-score-k-image">张</label></span>
</div>
</div>
<button
id="start-button"
class="form-control btn btn-success"
style="margin-bottom: 10px; height: 68px"
onclick="reset();"
>
启动！！
</button>
<button class="form-control btn btn-primary" style="margin-bottom: 10px" onclick="downloadState();">
下载当前进度
</button>
<label class="form-control btn btn-primary" style="margin-bottom: 10px" for="upload_state">上传保存的进度</label>
<input type="file" accept="application/json" id="upload_state" onchange="uploadState();" style="display: none" />
<div class="subset-list" style="padding-left: 5px; max-height: 60vh; overflow: hidden auto"></div>
</div>
</div>
</div>
<div id="tab-predict" class="container" style="display: none">
<div style="display: flex; flex-wrap: wrap">
<div class="subset-panel" style="flex-basis: 300px; padding: 10px; display: none">
<div style="max-width: 300px">
<div class="input-group" style="margin-bottom: 10px">
<div class="input-group-text">
<input id="tab-predict-force-mapping" type="checkbox" class="form-check-input mt-0" checked />
<span> <label for="tab-predict-force-mapping">必须有图像</label></span>
</div>
</div>
<button class="form-control btn btn-primary" style="margin-bottom: 10px" onclick="resetPrediction();">预测</button>
</div>
<div class="subset-list" style="padding-left: 5px"></div>
</div>
<div
id="prediction-panel"
style="padding: 10px; flex-basis: 360px; flex-grow: 1; overflow-x: visible; overflow-y: auto"
>
<table id="prediction-table" class="table table-bordered table-sm">
<thead>
<th scope="col">No.</th>
<th scope="col" width="100">名称</th>
<th scope="col">评分</th>
<th scope="col">属性</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
<script src="assets/js/main.js"></script>
</html>