Gitiles
Code Review Sign In
korap.ids-mannheim.de / ids-kl / derekovecs / 4dc270c90638feaf005dbfe0c4cc07087f62011e / . / templates / index.html.ep
blob: c4e0d9f0e8cb2bfb1ad30aabb43d1384350b0048 [file] [log] [blame]
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]1<!DOCTYPE html>
2<html>
3 <head>
4 <title>DeReKo-Word-Vector-Distances: <%= $word %></title>
Marc Kupietz80bd7b92017-07-04 16:25:54 +0200[diff] [blame]5 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
6 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
7 <script
8 src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
9 integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
10 crossorigin="anonymous"></script>
11 <script>
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]12 $(function() {
13 $( document ).tooltip({
14 content: function() {
15 return $(this).attr('title');
16 }}
17 )
18 })
19 </script>
20 <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
Marc Kupietz554aff52017-11-09 14:42:09 +0100[diff] [blame]21 <script src="/derekovecs/js/tsne.js"></script>
22 <script src="/derekovecs/js/som.js"></script>
23 <script src="/derekovecs/js/labeler.js"></script>
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]24 <style>
25 body, input {
26 font-family: Arial, sans-serif;
27 font-size: 11pt;
28 }
Marc Kupietz30ca4342017-11-22 21:21:20 +0100[diff] [blame]29
30 .mono {
31 font-family: "DejaVu Sans Mono", Inconsolata, SourceCodePro, Courier;
32 }
33
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]34 .ui-tooltip-content {
35 font-size: 9pt;
36 color: #222222;
37 }
38
39 svg > .ui-tooltip-content {
40 font-size: 8pt;
41 color: #222222;
42 }
43
44 a.merged {
45 color: green;
46 fill: green;
47 }
48
49 #first a {
50 text-decoration: none;
51 }
52
53 a.marked, #first a.marked {
54 text-decoration: underline;
55 }
Marc Kupietzf4b49392016-04-28 10:49:56 +0200[diff] [blame]56
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]57 a.target {
58 color: red;
59 fill: red;
60 }
61
62 #collocators {
63 margin-bottom: 15px;
64 }
65
66 #wrapper {
67 width: 100%;
68 // border: 1px solid red;
69 overflow: hidden; /* will contain if #first is longer than #second */
70 }
71 #first {
72 margin-right: 20px;
73 float: left;
74 // border: 1px solid green;
75 }
76 #second {
77 border: 1px solid #333;
78 overflow: hidden; /* if you don't want #second to wrap below #first */
79 }
80 #som2 svg {
81 border: 1px solid #333;
82 }
83
84 #cost {
85 font-size: 8pt;
86 color: #222222;
87 margin-top: 4px;
88 margin-bottom: 12px;
89 }
90
91 #sominfo1, #sominfo {
92 font-size: 8pt;
93 color: #222222;
94 margin-top: 0px;
95 }
96
97 #somcolor1, #somcolor2, #somcolor3 {
98 display: inline-block;
99 height: 10px;
100 width: 10px;
101 }
102
103 #third {
104 border: 1px solid #333;
105 }
106
107 </style>
108 <script>
109
110 var opt = {epsilon: <%= $epsilon %>, perplexity: <%= $perplexity %>},
111 mapWidth = 800, // width map
112 mapHeight = 800,
113 jitterRadius = 7;
114
115 var T = new tsnejs.tSNE(opt); // create a tSNE instance
116
117 var Y;
118
119 var data;
120 var labeler;
121
122 function applyJitter() {
123 svg.selectAll('.tsnet')
124 .data(labels)
125 .transition()
126 .duration(50)
127 .attr("transform", function(d, i) {
128 T.Y[i][0] = (d.x - mapWidth/2 - tx)/ss/20;
129 T.Y[i][1] = (d.y - mapHeight/2 - ty)/ss/20;
130 return "translate(" +
131 (d.x) + "," +
132 (d.y) + ")";
133 });
134 }
135
136 function updateEmbedding() {
137 var Y = T.getSolution();
138 svg.selectAll('.tsnet')
139 .data(data.words)
140 .attr("transform", function(d, i) {
141 return "translate(" +
142 ((Y[i][0]*20*ss + tx) + mapWidth/2) + "," +
143 ((Y[i][1]*20*ss + ty) + mapHeight/2) + ")"; });
144 }
145
146 var svg;
147 var labels = [];
148 var anchor_array = [];
149 var text;
150
151 function drawEmbedding() {
152 $("#embed").empty();
153 var div = d3.select("#embed");
154
155 // get min and max in each column of Y
156 var Y = T.Y;
157
158 svg = div.append("svg") // svg is global
159 .attr("width", mapWidth)
160 .attr("height", mapHeight);
161
162 var g = svg.selectAll(".b")
163 .data(data.words)
164 .enter().append("g")
165 .attr("class", "tsnet");
166
167 g.append("a")
Marc Kupietzf4b49392016-04-28 10:49:56 +0200[diff] [blame]168 .attr("xlink:href", function(word) {
169 return (data.urlprefix+word);})
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]170 .attr("class", function(d, i) {
171 var res="";
172 if(data.marked[i]) {
173 res="marked ";
174 }
175 if(data.target.indexOf(" "+d+" ") >= 0) {
176 return res+"target";
177 } else if(data.ranks[i] < data.mergedEnd) {
178 return res+"merged";
179 } else {
180 return res;
181 }
182 })
183 .attr("title", function(d, i) {
184 if(data.mergedEnd > 0) {
185 if(data.ranks[i] >= data.mergedEnd) {
186 return "rank: "+i +" "+"freq. rank: "+(data.ranks[i]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
187 } else {
188 return "rank: "+i +" "+"freq. rank: "+data.ranks[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " (merged vocab)";
189 }
190 } else {
191 return "rank: "+i +" "+"freq. rank: "+data.ranks[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
192 }
193 })
194 .append("text")
195 .attr("text-anchor", "top")
196 .attr("font-size", 12)
197 .text(function(d) { return d; });
198
199 var zoomListener = d3.behavior.zoom()
200 .scaleExtent([0.1, 10])
201 .center([0,0])
202 .on("zoom", zoomHandler);
203 zoomListener(svg);
204 }
205
206 var tx=0, ty=0;
207 var ss=1;
208 var iter_id=-1;
209
210 function zoomHandler() {
211 tx = d3.event.translate[0];
212 ty = d3.event.translate[1];
213 ss = d3.event.scale;
214 updateEmbedding();
215 }
216
217 var stepnum = 0;
218
219 function stopStep() {
220 clearInterval(iter_id);
221 text = svg.selectAll("text");
222
223 // jitter function needs different data and co-ordinate representation
224 labels = d3.range(data.words.length).map(function(i) {
225 var x = (T.Y[i][0]*20*ss + tx) + mapWidth/2;
226 var y = (T.Y[i][1]*20*ss + ty) + mapHeight/2;
227 anchor_array.push({x: x, y: y, r: jitterRadius});
228 return {
229 x: x,
230 y: y,
231 name: data.words[i]
232 };
233 });
234
235 // get the actual label bounding boxes for the jitter function
236 var index = 0;
237 text.each(function() {
238 labels[index].width = this.getBBox().width;
239 labels[index].height = this.getBBox().height;
240 index += 1;
241 });
242
243
244 // setTimeout(updateEmbedding, 1);
245 // setTimeout(
246 labeler = d3.labeler()
247 .label(labels)
248 .anchor(anchor_array)
249 .width(mapWidth)
250 .height(mapHeight)
251 .update(applyJitter);
252 // .start(1000);
253
254 iter_id = setInterval(jitterStep, 1);
255 }
256
257 var jitter_i=0;
258
259 function jitterStep() {
260 if(jitter_i++ > 100) {
261 clearInterval(iter_id);
262 } else {
263 labeler.start2(10);
264 applyJitter();
265 }
266 }
267
268 var last_cost=1000;
269
270 function step() {
271 var i = T.iter;
272
273 if(i > <%= $no_iterations %>) {
274 stopStep();
275 } else {
276 var cost = Math.round(T.step() * 100000) / 100000; // do a few steps
277 $("#cost").html("tsne iteration " + i + ", cost: " + cost.toFixed(5));
278 if(i % 250 == 0 && cost >= last_cost) {
279 stopStep();
280 } else {
281 last_cost = cost;
282 updateEmbedding();
283 }
284 }
285 }
286
287 function showMap(j) {
288 data=j;
289 T.iter=0;
290 T.initDataRaw(data.vecs); // init embedding
291 drawEmbedding(); // draw initial embedding
292
293 if(iter_id >= 0) {
294 clearInterval(iter_id);
295 }
296 //T.debugGrad();
297 iter_id = setInterval(step, 1);
298 if(<%= $show_som %>) {
299 makeSOM(j, <%= $no_iterations %>);
300 }
301 }
Marc Kupietz39179ab2017-07-04 16:28:06 +0200[diff] [blame]302 var queryword;
303
304 function onload() {
305 queryword = document.getElementById('word');
306 }
307
308 function queryKorAP() {
309 window.open('http://korap.ids-mannheim.de/kalamar/?q='+queryword.value, 'KorAP');
310 }
Marc Kupietz4dc270c2017-11-24 10:17:12 +0100[diff] [blame^]311
312 function queryKorAPCII(query) {
313 window.open('http://korap.ids-mannheim.de/kalamar/?ql=cosmas2&q='+query, 'KorAP');
314 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]315 </script>
316 </head>
Marc Kupietz39179ab2017-07-04 16:28:06 +0200[diff] [blame]317 <body onload="onload()">
Marc Kupietzb3422c12017-07-04 14:12:11 +0200[diff] [blame]318 <form method="GET">
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]319 word(s):
Marc Kupietz39179ab2017-07-04 16:28:06 +0200[diff] [blame]320 <input id="word" type="text" name="word" size="20" value="<%= $word %>" title="When looking for multiple words use spaces as separators to search around the average vector and | as separator to get the neighbours for each word.">
Marc Kupietz2c79c5e2017-11-09 16:18:40 +0100[diff] [blame]321 cut-off:
322 <input id="cutoff" type="text" name="cutoff" size="10" value="<%= $cutoff %>" title="Only consider the most frequent x word forms.">
Marc Kupietz4ccb4892017-11-21 09:33:08 +0100[diff] [blame]323 dedupe <input type="checkbox" name="dedupe" value="1" <%= ($dedupe ? "checked" : "") %> title="radically filter out any near-duplicates">
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]324 % if($mergedEnd > 0) {
325 backw. <input type="checkbox" name="sbf" value="1" <%= ($searchBaseVocabFirst ? "checked" : "") %> title="If checkecked base vocabulary will be searched first. Otherwise merged vocabulray will be searched first.">
326 % }
Marc Kupietz2c79c5e2017-11-09 16:18:40 +0100[diff] [blame]327 max. neighbours: <input type="text" size="4" name="n" value="<%= $no_nbs %>">
328 max. iterations: <input type="text" name="N" size="4" value="<%= $no_iterations %>">
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]329 SOM <input type="checkbox" name="som" value="1" <%= ($show_som ? "checked" : "") %>>
330 % if($collocators) {
Marc Kupietz30ca4342017-11-22 21:21:20 +0100[diff] [blame]331 <span> </span>window/sort
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]332 <select name="sort">
Marc Kupietz30ca4342017-11-22 21:21:20 +0100[diff] [blame]333 <option value="0" <%= ($sort!=1 && $sort!=2? "selected":"") %>>auto focus</option>
334 <option value="1" <%= ($sort==1? "selected":"") %>>any single position</option>
335 <option value="2" <%= ($sort==2? "selected":"") %>>whole window</option>
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]336 </select>
337 % }
Marc Kupietz39179ab2017-07-04 16:28:06 +0200[diff] [blame]338 <span> </span><input type="submit" value="Show">
339 <span> </span><input type="button" value="→ KorAP" onclick="queryKorAP();" title="query word with KorAP"/>
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]340 </form>
341 <br>
Marc Kupietzf9ac54e2017-11-21 09:22:29 +0100[diff] [blame]342 % if($lists && (@$lists) > 0 && (@$lists)[0]) {
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]343 <div id="wrapper">
344 <table id="first">
345 <tr>
346 <th align="right">#</th><th align="right">cos</th><th align="left">paradigmatic</th>
347 % if($collocators) {
Marc Kupietze7ffaf22017-11-24 10:13:08 +0100[diff] [blame]348 <th title="The window around the target word that is considered for summation.">w'</th>
349 <th align="center" title="Raw (max.) activation of the collocator in the output layers.">a</th>
350 <th title="Σp(c<sub><small>@</small></sub>) – Sum of the probability approximations that the combination of the target word and the collocator at the relative position @ come from the training corpus. Single approximations can be distorted because of sub-sampling frequent words and the sum cannot itself be interpreted as probability."align="center">Σp</th>
Marc Kupietz6fe7f392017-11-24 10:15:30 +0100[diff] [blame]351<!--
Marc Kupietze7ffaf22017-11-24 10:13:08 +0100[diff] [blame]352 <th align="right">Σp/|w|</th>
Marc Kupietz6fe7f392017-11-24 10:15:30 +0100[diff] [blame]353-->
Marc Kupietze7ffaf22017-11-24 10:13:08 +0100[diff] [blame]354 <th title="c" align="left">collocator</th>
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]355 % }
356 </tr>
357 % my $j=0; my @words; my @vecs; my @ranks; my @marked;
358 % for my $list (@$lists) {
359 % my $i=0; while($list) {
360 % my $item = (@$list)[$i];
361 % my $c = ($collocators? (@$collocators)[$i] : 0);
362 % last if(!$c && !$item);
363 <tr>
364 <td align="right">
365 <%= ++$i %>.
366 </td>
367 % if($item) {
368 % if(!grep{$_ eq $item->{word}} @words) {
369 % push @vecs, $item->{vector};
370 % push @words, $item->{word};
371 % push @ranks, $item->{rank};
372 % push @marked, ($marked->{$item->{word}}? 1 : 0);
373 % }
374 <td align="right">
375 <%= sprintf("%.3f", $item->{dist}) %>
376 </td>
377 <td>
378 % my $class = ($marked->{$item->{word}}? "marked " : "");
379 % my $r = $item->{rank};
380 % if($r < $mergedEnd) {
381 % $class .= "merged";
382 % $r .= " (merged vocab)";
383 % } elsif($mergedEnd!=0 && $r > $mergedEnd) {
384 % $r -= $mergedEnd;
385 % }
Marc Kupietzf4b49392016-04-28 10:49:56 +0200[diff] [blame]386 <a class="<%= $class =%>"
387 title="freq. rank: <%= $r =%>"
388 href="<%= url_with->query([word => $item->{word}]) =%>">
389 <%= $item->{word} =%>
390 </a>
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]391 </td>
392 % } else {
393 <td colspan="2"/>
394 % }
395 % if($c) {
396 <td align="right">
Marc Kupietz30ca4342017-11-22 21:21:20 +0100[diff] [blame]397 <span class="mono"><%= bitvec2window($c->{pos}) %></span>
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]398 </td>
399 <td align="right">
400 <%= sprintf("%.3f", $c->{dist}) %>
401 </td>
402 <td align="right">
403 <%= sprintf("%.3e", $c->{norm}) %>
404 </td>
Marc Kupietz6fe7f392017-11-24 10:15:30 +0100[diff] [blame]405<!--
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]406 <td align="right">
407 <%= sprintf("%.3e", $c->{sum}) %>
408 </td>
Marc Kupietz6fe7f392017-11-24 10:15:30 +0100[diff] [blame]409-->
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]410 <td align="left">
Marc Kupietz4dc270c2017-11-24 10:17:12 +0100[diff] [blame^]411<!-- <a href="<%= url_with->query([word => $c->{word}]) =%>" -->
412 <a onclick="<%= sprintf("queryKorAPCII('%s /w5 %s')", $c->{word}, $word) =%>"
Marc Kupietzb18978b2017-11-09 14:51:17 +0100[diff] [blame]413 title="freq. rank: <%= $c->{rank} =%>">
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]414 <%= $c->{word} %>
415 </td>
416 % } else {
417 <td colspan="5"/>
418 % }
419 </tr>
420 % }
421 % }
422 </table>
423 <script>
424 % use Mojo::ByteStream 'b';
Marc Kupietzf4b49392016-04-28 10:49:56 +0200[diff] [blame]425 % my $urlprefix = url_with->query([word=>'']);
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]426 $(window).load(function() {
Marc Kupietzf4b49392016-04-28 10:49:56 +0200[diff] [blame]427 showMap(<%= b(Mojo::JSON::to_json({target => " $word ", mergedEnd=> $mergedEnd, words => \@words, vecs => \@vecs, ranks => \@ranks, marked => \@marked, urlprefix => $urlprefix})); %>);
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]428 });
429 </script>
Marc Kupietzf9ac54e2017-11-21 09:22:29 +0100[diff] [blame]430 % } else { # ($word && $word !~ /^\s*$/)
431 <div id="wrapper">
432 <p>
433 ERROR: "<%= $word %>" not found in vocabluary.
434 </p>
435 </div>
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]436 % }
437 <div id="second" style="width:800px; height:800px; font-family: arial;">
438 <div id="embed">
439 </div>
440 </div>
441 <div id="cost"></div>
442 % if($show_som) {
443 <div id="som2">
444 </div>
445 <div id="sominfo1"><span id="somcolor1"> </span> <span id="somword1"> </span> <span id="somcolor2"> </span> <span id="somword2"> </span> <span id="somcolor3"> </span></div>
446 <div id="sominfo">SOM iteration <span id="iterations">0</span></div>
447 % }
448 </div>
449 % if($training_args) {
450 <p>
451 Word vector model trained with <a href="https://code.google.com/p/word2vec/">word2vec</a> using the following parameters: <pre><%= $training_args %></pre>
452 </p>
453 % }
454 </body>
455</html>