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