-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
152 lines (141 loc) · 4.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jieba wasm Demo</title>
<style type="text/css">
main{text-align: center;}
textarea{width: 62%}
.timer-area {
position: absolute;
top: 1em;
right: 1em;
-webkit-box-shadow: 5px 5px 11px 0px rgba(0,0,0,0.48);
box-shadow: 5px 5px 11px 0px rgba(0,0,0,0.48);
font-size: 0.7em;
}
.result-area{
margin: auto;
text-align: justify;
width: 62%;
}
@media only screen and (max-width: 750px) {
.result-area{width: 90%;}
textarea{width: 90%}
}
</style>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mobi.css/3.1.1/mobi.min.css" />
<script src="./script.js"></script>
</head>
<body>
<main>
<h1>结巴中文分词网页版</h1>
<textarea rows="15" name="text" id="input-text">
我不喜欢日本和服。
雷猴回归人间。
工信处女干事每月经过下属科室都要亲口交代24口交换机等技术性器件的安装工作。
我需要廉租房。
永和服装饰品有限公司。
我爱北京天安门。
abc
隐马尔可夫
雷猴是个好网站
“Microsoft”一词由“MICROcomputer（微型计算机）”和“SOFTware（软件）”两部分组成
草泥马和欺实马是今年的流行词汇
伊藤洋华堂总府店
中国科学院计算技术研究所
罗密欧与朱丽叶
我购买了道具和服装
PS: 我觉得开源有一个好处，就是能够敦促自己不断改进，避免敞帚自珍
湖北省石首市
湖北省十堰市
总经理完成了这件事情
这是一个伸手不见五指的黑夜。我叫孙悟空，我爱北京，我爱Python和C++。
电脑修好了
做好了这件事情就一了百了了
人们审美的观点是不同的。
我们买了一个美的空调
线程初始化时我们要注意
一个分子是由好多原子组织成的
祝你马到功成
他掉进了无底洞里
中国的首都是北京
孙君意
外交部发言人马朝旭
领导人会议和第四届东亚峰会
在过去的这五年
还需要很长的路要走
60周年首都阅兵
你好人们审美的观点是不同的
买水果然后来世博园
买水果然后去世博园
张晓梅去人民医院做了个B超然后去买了件T恤
AT&T是一件不错的公司，给你发offer了吗？
C++和c#是什么关系？11+122=133，是吗？
</textarea>
<br/>
<button type="button" class="btn btn-primary" onclick="myCut()">切句为词</button>
<button type="button" class="btn btn-danger" onclick="clearContent()">清扫一空</button>
<br/>
<div id="result" class="result-area"></div>
<div>
<hr>
<p>
Source code on <a href="https://github.com/cxumol/jieba-wasm-html">GitHub</a> | Powered by <a href="https://github.com/fengkx/jieba-wasm">jieba-wasm</a> | Idea from <a href="https://app.gumble.pw/jiebademo/">@gumblex</a>
</p>
</div>
</main>
<div class="timer-area">
timer:
<br/>
<div id="timer">
</div>
<button type="button" class="btn btn-danger" onclick="cleanTimer()">reset</button>
</div>
</body>
<script type="text/javascript">
/* 计时 */
class Timer {
start() {
this.startTime = Date.now();
}
stop() {
this.endTime = Date.now();
return this.endTime-this.startTime;
}
}
const putTimer = (text)=>{
document.getElementById('timer').innerText += '\n' + text
}
const cleanTimer = ()=>document.getElementById('timer').innerHTML="";
/* Other btn */
const clearContent= ()=>{
document.getElementById('result').textContent="";
document.getElementById('input-text').value="";
}
/* load wasm module */
const _load_wasm_jieba = async ()=> {
if (window.cut !== undefined) return;
/* load jieba*/
const {
default: init,
cut
} = await import("./jieba_rs_wasm.js");
const inited = await init();
window.cut = cut;
return inited;
}
const myCut = async ()=> {
const t = new Timer(); t.start();
await _load_wasm_jieba();
putTimer(`${t.stop()} ms load wasm`);
const text = document.getElementById('input-text').value
t.start();
document.getElementById('result').innerText = cut(text, true).join(" | ")
putTimer(`${t.stop()} ms cut text\n`);
}
</script>
</html>