SegJS/index.html at master · gitforziio/SegJS · GitHub

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
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 上一条代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame. -->
    <!-- https://blog.csdn.net/oJingZhiYuan12/article/details/88015130 -->
    <!-- 不过现在都什么年代了，IE我们就别考虑了吧，哈哈哈。 -->

    <title>SegJS</title>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="css/style.css" rel="stylesheet" type="text/css"> -->
    <style type="text/css">
        body{background: #eee;}
        .bodywrap{min-height: 100vh;}
        .container.page{background: #fff;}
        .span-nav-desc{font-size: 0.6em;}
        .hidden{display: none;}
        /*#footer{padding-bottom: 5rem;}*/

        /*#box-editing{max-height: 80vh; overflow: auto;}*/

        .card-wrap{background: #fafafa; border: 1px solid #eee; margin: 1rem 0;}
        .btn_stc_wrap{margin: 0 0 1rem 0;}
        .textarea-editing,.xml-wrap{margin: 1rem 0;}
        .xml-area-wrap{background: #fff; /*border-bottom: 1px solid #eee;*/}
        .cxn-ctrol>.col>*{margin: 0.5rem 0; min-height: calc(1.5em + .5rem + 2px);}
        .cxn-ctrol.selected{background: #ff0}

        /*#page-ctrl{background: #fafafa;border: 1px solid #343a40; border-radius: 6px;}*/
        /*#page-ctrl>.container>.row>.col>*{margin: 0.25rem 0;}*/
        .outputbox{font-size: 10px;}
        #the-textarea{font-size: 10px;}
        #output .form-control{font-size: 10px;}
        #output textarea.wordlist{height: 40vh;}
        /*#page-chartpad{max-height: 80vh;}*/
        #page-chartpad #chartpad {margin: 0 auto; text-align: center;}
        #chartpad svg {margin: 0 auto;}
        #chartpad svg {max-height: 90vh;}
    </style>


</head>

<body>

<div class="bodywrap">

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">SegJS</a><!--
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#the_navbar_toggler" aria-controls="the_navbar_toggler" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="the_navbar_toggler">
        </div> -->
    </nav>

    <div class="container my-5 page hiddent" id="page-text"><div class="container py-5">
        <div class="row">
            <div class="col">
                <p>高凝固度高自由度字符串抽取（不一定是词）。参考：<a target="_blank" href="http://www.matrix67.com/blog/archives/5044">互联网时代的社会语言学：基于SNS的文本数据挖掘</a>。仅供试玩，文件建议在30万字以内（需要跑十几分钟）。运行速度与电脑性能有关。</p>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div id="the-textarea-wrap">
                    <textarea class="form-control" id="the-textarea" rows="10">
背影

作者: 朱自清

　　我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”
　　回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。
　　到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说：“不要紧，他们去不好！”
　　我们过了江，进了车站。我买票，他忙着照看行李。行李太多了，得向脚夫行些小费，才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分，总觉他说话不大漂亮，非自己插嘴不可。但他终于讲定了价钱；就送我上车。他给我拣定了靠车门的一张椅子；我将他给我做的紫毛大衣铺好坐位。他嘱我路上小心，夜里警醒些，不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂；他们只认得钱，托他们直是白托！而且我这样大年纪的人，难道还不能料理自己么？唉，我现在想想，那时真是太聪明了！
　　我说道：“爸爸，你走吧。”他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。这时我看见他的背影，我的泪很快地流下来了。我赶紧拭干了泪，怕他看见，也怕别人看见。我再向外看时，他已抱了朱红的橘子望回走了。过铁道时，他先将橘子散放在地上，自己慢慢爬下，再抱起橘子走。到这边时，我赶紧去搀他。他和我走到车上，将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土，心里很轻松似的，过一会说：“我走了；到那边来信！”我望着他走出去。他走了几步，回过头看见我，说：“进去吧，里边没人。”等他的背影混入来来往往的人里，再找不着了，我便进来坐下，我的眼泪又来了。
　　近几年来，父亲和我都是东奔西走，家中光景是一日不如一日。他少年出外谋生，独力支持，做了许多大事。那知老境却如此颓唐！他触目伤怀，自然情不能自已。情郁于中，自然要发之于外；家庭琐屑便往往触他之怒。他待我渐渐不同往日。但最近两年的不见，他终于忘却我的不好，只是惦记着我，惦记着我的儿子。我北来后，他写了一信给我，信中说道：“我身体平安，惟膀子疼痛利害，举箸提笔，诸多不便，大约大去之期不远矣。”我读到此处，在晶莹的泪光中，又看见那肥胖的，青布棉袍，黑布马褂的背影。唉！我不知何时再能与他相见！


　　1925年10月在北京。
                    </textarea>
<!--                     <textarea class="form-control" id="the-textarea" rows="10">
今年上半年，我在人人网实习了一段时间，期间得到了很多宝贵的数据，并做了一些还算有意义的事情，在这里和大家一块儿分享。感谢人人网提供的数据与工作环境，感谢赵继承博士、詹卫东老师的支持和建议。在这项工作中，我得到了很多与众人交流的机会，特别感谢 OpenParty 、 TEDxBeijing 提供的平台。本文已发表在了《程序员》杂志，分上下两部分刊于 2012 年 7 月刊和 8 月刊，在此感谢卢鸫翔编辑的辛勤工作。由于众所周知的原因，《程序员》刊出的文章被和谐过（看到后面大家就自动地知道被和谐的内容是什么了），因而我决定把完整版发在 Blog 上，同时与更多的人一同分享。对此感兴趣的朋友可以给我发邮件继续交流。好了，开始说正文吧。

作为中文系应用语言学专业的学生以及一名数学 Geek ，我非常热衷于用计算的方法去分析汉语资料。汉语是一种独特而神奇的语言。对汉语资料进行自然语言处理时，我们会遇到很多其他语言不会有的困难，比如分词——汉语的词与词之间没有空格，那计算机怎么才知道，“已结婚的和尚未结婚的青年都要实行计划生育”究竟说的是“已／结婚／的／和／尚未／结婚／的／青年”，还是“已／结婚／的／和尚／未／结婚／的／青年”呢？这就是所谓的分词歧义难题。不过，现在很多语言模型已经能比较漂亮地解决这一问题了。但在中文分词领域里，还有一个比分词歧义更令人头疼的东西——未登录词。中文没有首字母大写，专名号也被取消了，这叫计算机如何辨认人名地名之类的东西？更惨的则是机构名、品牌名、专业名词、缩略语、网络新词等等，它们的产生机制似乎完全无规律可寻。最近十年来，中文分词领域都在集中攻克这一难关。自动发现新词成为了关键的环节。
                    </textarea> -->
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <button type="button" name="do_statistics" id="do_statistics" class="btn btn-primary">统计</button>
            </div>
        </div>
    </div></div>

    <!-- <div class="container my-5 page hiddent" id="page-import"><div class="container py-2">
        <div class="row">
            <div class="col">
                <form name="file-form" class="container">
                    <div class="row" id="filePicker">
                        <label for="file-input" class="col-md-2 my-2 col-form-label text-md-right">选择文件：</label>
                        <div class="col-md-8 my-2">
                            <input type="file" class="form-control" name="file-input" id="file-input" name="file" multiple="multiple" accept=".xml" />
                        </div>
                        <div class="col-md-2 my-2">
                            <button type="button" name="do_import" id="do_import" class="btn btn-primary">导入</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div></div> -->

    <div class="container my-5 page hiddent" id="page-chartpad"><div class="container py-5">
        <!-- <div class="row"><div class="col"> -->
            <div id="chartpad"></div>
        <!-- </div></div> -->
    </div></div>

    <div class="container my-5 page hiddent" id="page-output"><div class="container py-5">
        <div class="row">
            <div class="col">
                <div id="output"></div>
            </div>
        </div>
    </div></div>

    <div class="container my-5 page hiddent" id="page-seggededed"><div class="container py-5">
        <div class="row"><div class="col">
            <div id="seggededed"></div>
        </div></div>
    </div></div>

    <!-- <div class="container my-5 page hiddent" id="page-editing"><div class="container py-5"><div id="box-editing"><sentence-control v-for="S in Ss" :key="S.id" :S="S"></sentence-control>
    </div></div></div>

    <div class="container my-5 page hiddent" id="page-main"><div class="container py-5">
        <div class="row">
            <div class="col">
                <div id="xml"></div>
            </div>
        </div>
    </div></div> -->

</div>

<footer class="pt-4 pb-2 bg-dark text-white" id="footer">
    <div class="container text-center">
        <p>Github: <a href="https://github.com/gitforziio/SegJS" target="_blank">@gitforziio/SegJS</a></p>
    </div>
</footer>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
    <!-- <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> -->
    <script src="https://cdn.bootcss.com/d3/5.12.0/d3.min.js"></script>
    <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.js"></script>

    <!-- <script src="lodash.js"></script> -->

    <script type="text/javascript" src="js/FileSaver.js"></script>
    <!-- <script type="text/javascript" src="js/seg.js"></script> -->
    <!-- <script type="text/javascript" src="js/main.js"></script> -->

    <script type="text/javascript" src="js/draw.js"></script>

    <script type="text/javascript">
        // "use strict";
        var the_text = '';
        var statistics_log;
        var data;
        var time_start;
        var time_end;
        var time_show_start;
        var time_show_end;
        var msg1, msg2, msg3, msg4;
        d3.select("#do_statistics").on('click',()=>{
            d3.select(`#the-textarea`).each(function(e, i) {the_text = this.value;});
            console.log(" ");

            if(typeof(myWorker)=="undefined") {
                myWorker = new Worker("js/seg.js");
            };

            myWorker.postMessage({txt:the_text, minwidth:1, maxwidth:4, expwin:2, dict:null});
            // myWorker.postMessage({txt:the_text, minwidth:1, maxwidth:6, expwin:4, dict:null});
            time_start = _.now();
            var the_text_len = the_text.replace(/([\n\r\s\t]+)/g,' ').trim().length;
            var msg1 = `文本长度：【${the_text_len}】；开始统计，请耐心等待……`;
            console.log(msg1);
            d3.selectAll(`#output *`).remove();
            d3.select(`#output`).append("p").text(`${msg1}`);
            myWorker.onmessage = function (event) {
                if (event.data.stage=='result') {
                    time_end = _.now();
                    // console.log(time_end);
                    d3.selectAll(`#output *`).remove();
                    msg2 = `统计完毕！文本长度：【${the_text_len}】；共耗时：【${_.ceil((time_end-time_start)/1000,0)}】秒；均耗时：【${_.ceil(the_text_len/(time_end-time_start)*1000,2)}】字符/秒`;
                    console.log(msg2);
                    d3.select(`#output`).append("p").text(msg2);
                    // time_show_start = _.now();
                    // msg3 = `现在是【${time_show_start}】；开始读取数据并呈现，请耐心等待……`;
                    // console.log(msg3);
                    data = event.data.data;
                    dottedChart(data.wordDict, "chartpad");
                    console.log(data);
                    var jjj = JSON.stringify(data, null, 2);
                    var wD = _.cloneDeep(data.wordDict);
                    var jjjjj = _.forEach(wD,(d,i)=>{wD[i]=`| ${wD[i]['str']} | ${wD[i]['str_frq']} | ${wD[i]['s_l']}${wD[i]['str']}${wD[i]['s_r']} | ${wD[i]['sxl_frq']} | ${wD[i]['sxr_frq']} | ${wD[i]['a_pct']} |`}).join('\n');
                    d3.selectAll(`#output *`).remove();
                    d3.select(`#output`).append("p").text(msg2);
                    d3.select(`#output`).append("textarea").classed("form-control",true).classed("wordlist",true).text(jjjjj);
                    d3.select(`#output`).append("textarea").classed("form-control",true).attr("rows","10").text(jjj);
                    // time_show_end = _.now();
                    // msg4 = `读取并呈现完毕！现在是【${time_show_end}】；耗时：【${_.ceil((time_show_end-time_show_start)/1000,0)}】秒`;
                    // console.log(msg4);
                    // myWorker.terminate();
                } else if (event.data.stage=='SEG!!!') {
                    // d3.selectAll(`#output *`).remove();
                    console.log(`【stage: ${event.data.stage}】`);
                    // var sedded_box = d3.select(`#seggededed`).append("div").attr("id","sedded_box");
                    // var tvts = event.data.data;
                    // console.log(tvts);
                    // var ps = sedded_box.selectAll('p.tvt').data(tvts);
                    // ps.exit().remove();
                    // ps = ps.enter().append("p").merge(ps)
                    //     .classed("tvt",true)
                    //     ;
                    // ps.nodes().forEach((node,i)=>{
                    //     the_node = d3.select(node);
                    //     spans = the_node.selectAll("span.str").data(tvts[i]);
                    //     spans.exit().remove();
                    //     spans = spans.enter().append("span").merge(spans)
                    //     .classed("span",true)
                    //     .text(d=>d.str)
                    //     .style("margin-left", d=>{return d.pl>0?`0.25em`:`0`})
                    //     .style("margin-right", d=>{return d.pr>0?`0.25em`:`0`})
                    //     .style("border-top-left-radius", d=>{return d.pl>0?`0.5em`:`0`})
                    //     .style("border-top-right-radius", d=>{return d.pr>0?`0.5em`:`0`})
                    //     .style("border-bottom-left-radius", d=>{return d.pl>0?`0.5em`:`0`})
                    //     .style("border-bottom-right-radius", d=>{return d.pr>0?`0.5em`:`0`})
                    //     .style("border-left", d=>{return d.pl>0?`2px solid rgba(0,119,255,${d.pr*2/10+0.2})`:`none`})
                    //     .style("border-right", d=>{return d.pr>0?`2px solid rgba(0,119,255,${d.pr*2/10+0.2})`:`none`})
                    //     .style("opacity", d=>_.max([d.pl,d.pr])/5+0.2)
                    //     ;
                    // });
                } else {
                    // d3.selectAll(`#output *`).remove();
                    console.log(`【stage: ${event.data.stage}】`);
                    d3.select(`#output`).append("p").text(`【当前阶段】：【${event.data.stage}】；请耐心等待……`);
                    data = event.data.data;
                    console.log(data);
                    // d3.select(`#output`).append("p").text(`【内容】：【${data}】`);
                }
            };
            myWorker.onerror = function (e) {
                console.log(`ERROR: Line ${e.lineno} in ${e.filename}: ${e.message}`);
            };
        });
    </script>

</body>

</html>