Gitiles
Code Review Sign In
korap.ids-mannheim.de / ids-kl / derekovecs / c1e42c3959351e76c32654dc446ee0526e75a413 / . / templates / index.html.ep
blob: b344a28292a0e7c40a89c5d91be61a798ab608a3 [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">
Marc Kupietz6dbadd12017-11-29 16:43:33 +0100[diff] [blame]6 <link href="https://fonts.googleapis.com/css?family=Lato|Roboto+Condensed" rel="stylesheet">
Marc Kupietz80bd7b92017-07-04 16:25:54 +0200[diff] [blame]7 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]8 <script src = "https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
9 <script src = "https://cdn.datatables.net/fixedcolumns/3.2.3/js/dataTables.fixedColumns.min.js"></script>
10 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
Marc Kupietz80bd7b92017-07-04 16:25:54 +0200[diff] [blame]11 <script
Marc Kupietz6dbadd12017-11-29 16:43:33 +0100[diff] [blame]12 src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
13 integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
14 crossorigin="anonymous"></script>
Marc Kupietz80bd7b92017-07-04 16:25:54 +0200[diff] [blame]15 <script>
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]16 $('#firstable').hide();
17 $(document).ready(function() {
18 $("#xxxtabs").tabs( {
19 "show": function(event, ui) {
20 var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
21 if ( oTable.length > 0 ) {
22 oTable.fnAdjustColumnSizing();
23 }
24 }
25 } );
Marc Kupietz694610d2017-11-25 18:30:03 +0100[diff] [blame]26
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]27 $("input").bind("keydown", function(event) {
28 // track enter key
29 var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
30 if (keycode == 13) { // keycode for enter key
31 // force the 'Enter Key' to implicitly click the Update button
32 document.getElementById('SEARCH').click();
33 return false;
34 } else {
35 return true;
36 }});
37
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]38 $(".selector").tabs({ active: 1 });
Marc Kupietz0af83e32017-11-27 09:31:37 +0100[diff] [blame]39
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]40 $('#firsttable').DataTable({
41 "sScrollY": "780px",
42 "bScrollCollapse": true,
43 "bPaginate": false,
44 "bJQueryUI": true,
45 "dom": '<"top">rt<"bottom"flp><"clear">',
46 "aoColumnDefs": [
47 { "sWidth": "10%", "aTargets": [ -1 ] }
48 ]
49 } );
Marc Kupietz0af83e32017-11-27 09:31:37 +0100[diff] [blame]50
51 $('#secondtable').DataTable({
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]52 "sScrollY": "800px",
53 "bScrollCollapse": true,
54 "bPaginate": false,
55 "bJQueryUI": true,
56 "dom": '<"top">rt<"bottom"flp><"clear">',
57 "aoColumnDefs": [
58 { "sWidth": "10%", "aTargets": [ -1 ] }
59 ]
60 } );
61 });
Marc Kupietz0af83e32017-11-27 09:31:37 +0100[diff] [blame]62
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]63 $(function(){
64 $("#dropdownoptions").dialog({
65 title: "Options",
66 autoOpen: false,
67 modal: false,
68 draggable: false,
69 height: "auto",
70 width: "auto",
71 resizable: false,
72 buttons: {
73 "Cancel": function() {
74 $( this ).dialog( "close" );
75 },
76 "Apply": function() {
77 window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
78 }
79 }
80 });
81 });
82
83 $(function(){
84 $("#SEARCH").click(function() {
85 window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
86 });
87 });
88
89 $(function(){
90 $("#showoptions").click(function(){
91 $("#dropdownoptions").dialog("open");
92 var target = $(this);
93 $("#dropdownoptions").dialog("widget").position({
94 my: 'left bottom',
95 at: 'left bottom',
96 of: target
97 });
98 });
99 });
100
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]101 $( function() {
Marc Kupietzc1e42c32017-11-29 16:47:56 +0100[diff] [blame^]102 $( "#no_iterations" ).spinner({
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]103 spin: function( event, ui ) {
104 if ( ui.value < 1000 ) {
105 $( this ).spinner( "value", 1000 );
106 return false;
107 } else if ( ui.value > 10000 ) {
108 $( this ).spinner( "value", 10000 );
109 return false;
110 }
111 }
112 });
113 } );
Marc Kupietz3305b0a2017-11-27 10:46:20 +0100[diff] [blame]114
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]115 $( function() {
116 $( "#neighbours" ).spinner({
117 spin: function( event, ui ) {
118 if ( ui.value < 0 ) {
119 $( this ).spinner( "value", 0 );
120 return false;
121 } else if ( ui.value > 200 ) {
122 $( this ).spinner( "value", 200 );
123 return false;
124 }
125 }
126 });
127 } );
128
129 $( function() {
130 $( "#cutoff" ).spinner({
131 spin: function( event, ui ) {
132 if ( ui.value < 100000 ) {
133 $( this ).spinner( "value", 100000 );
134 return false;
135 } else if ( ui.value > 2000000 ) {
136 $( this ).spinner( "value", 2000000 );
137 return false;
138 }
139 }
140 });
141 } );
142
143 $( function() {
Marc Kupietz4fcda0c2017-11-29 09:00:31 +0100[diff] [blame]144 $( "#tabs" ).tabs(); // .addClass('ui-helper-clearfix tabs-left-vertical');
145 } );
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]146
147 $( function() {
148 $( ".controlgroup-vertical" ).controlgroup({
149 "direction": "vertical"
150 });
151 } );
152
153 $(function() {
154 $( document ).tooltip({
155 content: function() {
156 return $(this).attr('title');
157 }}
158 )
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]159 })
Marc Kupietz694610d2017-11-25 18:30:03 +0100[diff] [blame]160
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]161 </script>
162 <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
Marc Kupietz554aff52017-11-09 14:42:09 +0100[diff] [blame]163 <script src="/derekovecs/js/tsne.js"></script>
164 <script src="/derekovecs/js/som.js"></script>
165 <script src="/derekovecs/js/labeler.js"></script>
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]166 <style>
167 body, input {
Marc Kupietz6dbadd12017-11-29 16:43:33 +0100[diff] [blame]168 font-family: Lato, sans-serif;
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]169 font-size: 11pt;
170 }
Marc Kupietz30ca4342017-11-22 21:21:20 +0100[diff] [blame]171
Marc Kupietz6dbadd12017-11-29 16:43:33 +0100[diff] [blame]172 h1, h2, h3 {
173 margin: 5px 10px 0 0;
174 color: rgb(246,168,0);
175 font-family: "Univers LT Std 47 Cn Lt", "Univers LT Std 67 Cn Lt", "Roboto Condensed", "Univers LT Std 67 Cn Bold", "UniversLTStd-BoldCn", "Times", 'League Gothic', Impact, sans-serif;
176 font-weight: bold;
177 line-height: 1.35;
178 letter-spacing: normal;
179 text-transform: uppercase;
180 text-shadow: none;
181 word-wrap: break-word;
182 }
183
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]184 .tabs-left-vertical .ui-tabs-nav {
185 position: absolute;
186 width: 21em;
187 transform: translate(-100%,0%) rotate(-90deg);
188 transform-origin: 100% 0%;
189 }
Marc Kupietz4fcda0c2017-11-29 09:00:31 +0100[diff] [blame]190
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]191 .tabs-left-vertical .ui-tabs-nav li {
192 float: right;
193 }
Marc Kupietz4fcda0c2017-11-29 09:00:31 +0100[diff] [blame]194
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]195 .tabs-left-vertical .ui-tabs-panel {
196 padding-left: 3.5em;
197 }
198
199 .tabs-left-vertical .ui-tabs-panel {
200 height: 20em;
Marc Kupietz4fcda0c2017-11-29 09:00:31 +0100[diff] [blame]201 }
202
Marc Kupietz30ca4342017-11-22 21:21:20 +0100[diff] [blame]203 .mono {
204 font-family: "DejaVu Sans Mono", Inconsolata, SourceCodePro, Courier;
205 }
206
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]207 .ui-tooltip-content {
208 font-size: 9pt;
209 color: #222222;
210 }
211
212 svg > .ui-tooltip-content {
213 font-size: 8pt;
214 color: #222222;
215 }
216
217 a.merged {
218 color: green;
219 fill: green;
220 }
221
222 #first a {
223 text-decoration: none;
224 }
225
226 a.marked, #first a.marked {
227 text-decoration: underline;
228 }
Marc Kupietzf4b49392016-04-28 10:49:56 +0200[diff] [blame]229
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]230 a.target {
231 color: red;
232 fill: red;
233 }
Marc Kupietz694610d2017-11-25 18:30:03 +0100[diff] [blame]234
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]235 table.display {
236 width: 40% important!;
237 margin: 1; /* <- works for me this way ****/
238 }
239 table.dataTable thead th, table.dataTable thead td, table.dataTable tbody td {
240 padding: 2px 2px;
241 // border-bottom: 1px solid #111;
242 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]243 #collocators {
244 margin-bottom: 15px;
245 }
246
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]247 #topwrapper {
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]248 width: 100%;
249 // border: 1px solid red;
250 overflow: hidden; /* will contain if #first is longer than #second */
251 }
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]252
253 #wrapper {
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]254 // border: 1px solid red;
255 overflow: hidden; /* will contain if #first is longer than #second */
256 }
257
258 #options {
259 float: right;
260 margin: 20px;
261 max-width: 280px;
262 overflow: hidden; /* if you don't want #second to wrap below #first */
263 }
264
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]265 #first {
266 margin-right: 20px;
267 float: left;
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]268 overflow: hidden; /* if you don't want #second to wrap below #first */
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]269 // border: 1px solid green;
270 }
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]271 #tabs {
272 margin-right: 20px;
273 overflow: hidden; /* if you don't want #second to wrap below #first */
274 }
275
276 #embed {
277 max-width: 802px;
278 border: 1px solid #333;
279 }
280
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]281 #second {
Marc Kupietzb0173f12017-11-29 10:00:23 +0100[diff] [blame]282 min-width: 800px;
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]283 // border: 1px solid #333;
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]284 overflow: hidden; /* if you don't want #second to wrap below #first */
285 }
286 #som2 svg {
287 border: 1px solid #333;
288 }
289
290 #cost {
291 font-size: 8pt;
292 color: #222222;
293 margin-top: 4px;
294 margin-bottom: 12px;
295 }
296
297 #sominfo1, #sominfo {
298 font-size: 8pt;
299 color: #222222;
300 margin-top: 0px;
301 }
302
303 #somcolor1, #somcolor2, #somcolor3 {
304 display: inline-block;
305 height: 10px;
306 width: 10px;
307 }
308
309 #third {
310 border: 1px solid #333;
311 }
312
313 </style>
314 <script>
315
316 var opt = {epsilon: <%= $epsilon %>, perplexity: <%= $perplexity %>},
317 mapWidth = 800, // width map
318 mapHeight = 800,
319 jitterRadius = 7;
320
321 var T = new tsnejs.tSNE(opt); // create a tSNE instance
322
323 var Y;
324
325 var data;
326 var labeler;
327
328 function applyJitter() {
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]329 svg.selectAll('.tsnet')
330 .data(labels)
331 .transition()
332 .duration(50)
333 .attr("transform", function(d, i) {
334 T.Y[i][0] = (d.x - mapWidth/2 - tx)/ss/20;
335 T.Y[i][1] = (d.y - mapHeight/2 - ty)/ss/20;
336 return "translate(" +
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]337 (d.x) + "," +
338 (d.y) + ")";
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]339 });
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]340 }
341
342 function updateEmbedding() {
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]343 var Y = T.getSolution();
344 svg.selectAll('.tsnet')
345 .data(data.words)
346 .attr("transform", function(d, i) {
347 return "translate(" +
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]348 ((Y[i][0]*20*ss + tx) + mapWidth/2) + "," +
349 ((Y[i][1]*20*ss + ty) + mapHeight/2) + ")"; });
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]350 }
351
352 var svg;
353 var labels = [];
354 var anchor_array = [];
355 var text;
356
357 function drawEmbedding() {
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]358 $("#embed").empty();
359 var div = d3.select("#embed");
360
361 // get min and max in each column of Y
362 var Y = T.Y;
363
364 svg = div.append("svg") // svg is global
365 .attr("width", mapWidth)
366 .attr("height", mapHeight);
367
368 var g = svg.selectAll(".b")
369 .data(data.words)
370 .enter().append("g")
371 .attr("class", "tsnet");
372
373 g.append("a")
374 .attr("xlink:href", function(word) {
375 return (data.urlprefix+word);})
376 .attr("class", function(d, i) {
377 var res="";
378 if(data.marked[i]) {
379 res="marked ";
380 }
381 if(data.target.indexOf(" "+d+" ") >= 0) {
382 return res+"target";
383 } else if(data.ranks[i] < data.mergedEnd) {
384 return res+"merged";
385 } else {
386 return res;
387 }
388 })
389 .attr("title", function(d, i) {
390 if(data.mergedEnd > 0) {
391 if(data.ranks[i] >= data.mergedEnd) {
392 return "rank: "+i +" "+"freq. rank: "+(data.ranks[i]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
393 } else {
394 return "rank: "+i +" "+"freq. rank: "+data.ranks[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " (merged vocab)";
395 }
396 } else {
397 return "rank: "+i +" "+"freq. rank: "+data.ranks[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
398 }
399 })
400 .append("text")
401 .attr("text-anchor", "top")
402 .attr("font-size", 12)
403 .text(function(d) { return d; });
404
405 var zoomListener = d3.behavior.zoom()
406 .scaleExtent([0.1, 10])
407 .center([0,0])
408 .on("zoom", zoomHandler);
409 zoomListener(svg);
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]410 }
411
412 var tx=0, ty=0;
413 var ss=1;
414 var iter_id=-1;
415
416 function zoomHandler() {
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]417 tx = d3.event.translate[0];
418 ty = d3.event.translate[1];
419 ss = d3.event.scale;
420 updateEmbedding();
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]421 }
422
423 var stepnum = 0;
424
425 function stopStep() {
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]426 clearInterval(iter_id);
427 text = svg.selectAll("text");
428
429 // jitter function needs different data and co-ordinate representation
430 labels = d3.range(data.words.length).map(function(i) {
431 var x = (T.Y[i][0]*20*ss + tx) + mapWidth/2;
432 var y = (T.Y[i][1]*20*ss + ty) + mapHeight/2;
433 anchor_array.push({x: x, y: y, r: jitterRadius});
434 return {
435 x: x,
436 y: y,
437 name: data.words[i]
438 };
439 });
440
441 // get the actual label bounding boxes for the jitter function
442 var index = 0;
443 text.each(function() {
444 labels[index].width = this.getBBox().width;
445 labels[index].height = this.getBBox().height;
446 index += 1;
447 });
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]448
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]449
450 // setTimeout(updateEmbedding, 1);
451 // setTimeout(
452 labeler = d3.labeler()
453 .label(labels)
454 .anchor(anchor_array)
455 .width(mapWidth)
456 .height(mapHeight)
457 .update(applyJitter);
458 // .start(1000);
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]459
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]460 iter_id = setInterval(jitterStep, 1);
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]461 }
462
463 var jitter_i=0;
464
465 function jitterStep() {
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]466 if(jitter_i++ > 100) {
467 clearInterval(iter_id);
468 } else {
469 labeler.start2(10);
470 applyJitter();
471 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]472 }
473
474 var last_cost=1000;
475
476 function step() {
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]477 var i = T.iter;
478
479 if(i > <%= $no_iterations %>) {
480 stopStep();
481 } else {
482 var cost = Math.round(T.step() * 100000) / 100000; // do a few steps
483 $("#cost").html("tsne iteration " + i + ", cost: " + cost.toFixed(5));
484 if(i % 250 == 0 && cost >= last_cost) {
485 stopStep();
486 } else {
487 last_cost = cost;
488 updateEmbedding();
489 }
490 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]491 }
492
493 function showMap(j) {
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]494 data=j;
495 T.iter=0;
496 T.initDataRaw(data.vecs); // init embedding
497 drawEmbedding(); // draw initial embedding
498
499 if(iter_id >= 0) {
500 clearInterval(iter_id);
501 }
502 //T.debugGrad();
503 iter_id = setInterval(step, 1);
504 if(<%= $show_som %>) {
505 makeSOM(j, <%= $no_iterations %>);
506 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]507 }
Marc Kupietz39179ab2017-07-04 16:28:06 +0200[diff] [blame]508 var queryword;
509
510 function onload() {
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]511 queryword = document.getElementById('word');
Marc Kupietz39179ab2017-07-04 16:28:06 +0200[diff] [blame]512 }
513
514 function queryKorAP() {
515 window.open('http://korap.ids-mannheim.de/kalamar/?q='+queryword.value, 'KorAP');
516 }
Marc Kupietz4dc270c2017-11-24 10:17:12 +0100[diff] [blame]517
518 function queryKorAPCII(query) {
519 window.open('http://korap.ids-mannheim.de/kalamar/?ql=cosmas2&q='+query, 'KorAP');
520 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]521 </script>
522 </head>
Marc Kupietz39179ab2017-07-04 16:28:06 +0200[diff] [blame]523 <body onload="onload()">
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]524 <div id="topwrapper">
525 <div id="options" class="widget">
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]526 <form id="queryform">
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]527 <input id="word" type="text" name="word" size="20" placeholder="Word(s) to be searched" value="<%= $word %>"
528 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 Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]529 <input id="SEARCH" type="button" value="SEARCH">
530 <input type="button" id="showoptions" name="showoptions" value="Options" />
531 </form>
532 <div id="dropdownoptions" style="display: hidden">
533 <form id="optionsform">
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]534 <div class="controlgroup-vertical">
535 <label for="cutoff">cut-off</label>
536 <input id="cutoff" type="text" name="cutoff" size="10" value="<%= $cutoff %>" title="Only consider the most frequent x word forms.">
537 <label for="dedupe">dedupe</label>
538 <input id="dedupe" type="checkbox" name="dedupe" value="1" <%= ($dedupe ? "checked" : "") %> title="radically filter out any near-duplicates">
539 % if($mergedEnd > 0) {
540 <label for="sbf">backw.</label>
541 <input id="sbf" type="checkbox" name="sbf" value="1" <%= ($searchBaseVocabFirst ? "checked" : "") %> title="If checkecked base vocabulary will be searched first. Otherwise merged vocabulray will be searched first.">
542 % }
543 <label for="neighbours">max. neighbours:</label>
544 <input id="neighbours" size="4" name="n" value="<%= $no_nbs %>">
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]545 <label for="dosom">SOM</label>
546 <input id="dosom" type="checkbox" name="som" value="1" <%= ($show_som ? "checked" : "") %>>
Marc Kupietzc1e42c32017-11-29 16:47:56 +0100[diff] [blame^]547 <label for="no_iterations">max. iterations</label>
548 <input id="no_iterations" name="N" size="4" value="<%= $no_iterations %>">
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]549 % if($collocators) {
550 <label for="sortby">window/sort</label>
551 <select id="sortby" name="sort">
552 <option value="0" <%= ($sort!=1 && $sort!=2? "selected":"") %>>auto focus</option>
553 <option value="1" <%= ($sort==1? "selected":"") %>>any single position</option>
554 <option value="2" <%= ($sort==2? "selected":"") %>>whole window</option>
555 </select>
556 % }
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]557 <input type="button" value="→ KorAP" onclick="queryKorAP();" title="query word with KorAP"/>
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]558 </div>
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]559 </form>
560 </div>
Marc Kupietz0af83e32017-11-27 09:31:37 +0100[diff] [blame]561 </div>
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]562 <div id="tabs">
563 <ul>
Marc Kupietz4fcda0c2017-11-29 09:00:31 +0100[diff] [blame]564 <li><a href="#tabs-1">Semantics (TSNE-map)</a></li>
565 <li><a href="#tabs-2">Semantics (SOM)</a></li>
566 <li><a href="#tabs-3">Syntagmatic (collocators)</a></li>
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]567 </ul>
568 <div id="tabs-1">
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]569 % if($lists && (@$lists) > 0 && (@$lists)[0]) {
570 <div id="wrapper">
571 <div id="first" style="width:220px">
572 <table class="display compact nowrap" id="firsttable">
573 <thead>
574 <tr>
575 <th align="right">#</th><th align="right">cos</th><th align="left">paradigmatic</th>
576 </tr>
577 </thead>
578 <tbody>
579 % my $j=0; my @words; my @vecs; my @ranks; my @marked;
580 % for my $list (@$lists) {
581 % my $i=0; while($list) {
582 % my $item = (@$list)[$i];
583 % my $c = ($collocators? (@$collocators)[$i] : 0);
584 % last if(!$c && !$item);
585 <tr>
586 <td align="right">
587 <%= ++$i %>.
588 </td>
589 % if($item) {
590 % if(!grep{$_ eq $item->{word}} @words) {
591 % push @vecs, $item->{vector};
592 % push @words, $item->{word};
593 % push @ranks, $item->{rank};
594 % push @marked, ($marked->{$item->{word}}? 1 : 0);
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]595 % }
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]596 <td align="right">
597 <%= sprintf("%.3f", $item->{dist}) %>
598 </td>
599 <td>
600 % my $class = ($marked->{$item->{word}}? "marked " : "");
601 % my $r = $item->{rank};
602 % if($r < $mergedEnd) {
603 % $class .= "merged";
604 % $r .= " (merged vocab)";
605 % } elsif($mergedEnd!=0 && $r > $mergedEnd) {
606 % $r -= $mergedEnd;
607 % }
608 <a class="<%= $class =%>"
609 title="freq. rank: <%= $r =%>"
610 href="<%= url_with->query([word => $item->{word}]) =%>">
611 <%= $item->{word} =%>
612 </a>
613 </td>
614 % } else {
615 <td colspan="2"/>
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]616 % }
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]617 </tr>
618 % last if($i >= 100);
619 % }
620 % }
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]621 </tbody>
622 </table>
623 </div>
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]624 <script>
625 % use Mojo::ByteStream 'b';
626 % my $urlprefix = url_with->query([word=>'']);
627 $(window).load(function() {
628 showMap(<%= b(Mojo::JSON::to_json({target => " $word ", mergedEnd=> $mergedEnd, words => \@words, vecs => \@vecs, ranks => \@ranks, marked => \@marked, urlprefix => $urlprefix})); %>);
629 });
630 </script>
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]631 % } else {
632 <div id="wrapper">
633 <p>
634 ERROR: "<%= $word %>" not found in vocabluary.
635 </p>
636 </div>
637 % }
638 <div id="second">
639 <div id="embed">
640 </div>
641 <div id="cost">
642 </div>
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]643 </div>
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]644 </div>
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]645 </div>
Marc Kupietz4fcda0c2017-11-29 09:00:31 +0100[diff] [blame]646 <div id="tabs-2">
647 <div id="som2" style="width: 800; height: 800px">
648 </div>
649 <div id="sominfo1"><span id="somcolor1"> </span> <span id="somword1"> </span> <span id="somcolor2"> </span> <span id="somword2"> </span> <span id="somcolor3"> </span></div>
650 <div id="sominfo">SOM iteration <span id="iterations">0</span></div>
651 </div>
652 <div id="tabs-3">
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]653 <div id="second" style="width:500px">
654 <table class="display compact nowrap" id="secondtable">
655 <thead>
656 <tr>
657 % if($collocators) {
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]658 <th>#</th>
659 <th align="right" title="The window around the target word that is considered for summation.">w'</th>
660 <th align="right" title="Raw (max.) activation of the collocator in the output layers.">a</th>
661 <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="right">Σp</th>
662 <th align="right">Σp/|w|</th>
663 <th title="c" align="left">collocator</th>
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]664 % }
665 </tr>
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]666 </thead>
667 <tbody>
668 % for(my $i=0; $i < 100; $i++) {
669 % my $c = ($collocators? (@$collocators)[$i] : 0);
670 <tr>
671 <td align="right">
672 <%= $i %>
673 </td>
674 % if($c) {
675 <td align="right">
676 <span class="mono"><%= bitvec2window( $c->{pos} ) %></span>
677 </td>
678 <td align="right">
679 <%= sprintf("%.3f", $c->{dist}) %>
680 </td>
681 <td align="right">
682 <%= sprintf("%.3e", $c->{norm}) %>
683 </td>
684 <td align="right">
685 <%= sprintf("%.3e", $c->{sum}) %>
686 </td>
687 <td align="left">
688 <a onclick="<%= sprintf("queryKorAPCII('%s /w5 %s')", $c->{word}, $word) =%>"
689 title="freq. rank: <%= $c->{rank} =%>">
690 <%= $c->{word} %>
691 </a>
692 </td>
693 % } else {
694 <td colspan="5"/>
695 % }
696 </tr>
697 % }
698 </tbody>
699 </table>
700 </div> <!-- - tab2 -->
Marc Kupietz4fcda0c2017-11-29 09:00:31 +0100[diff] [blame]701 </div> <!-- tabs -->
702 </div>
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]703 </div> <!-- topwrapper -->
704 <div style="clear: both;"></div>
Marc Kupietz0af83e32017-11-27 09:31:37 +0100[diff] [blame]705 </div>
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]706 % if($training_args) {
707 <p>
708 Word vector model trained with <a href="https://code.google.com/p/word2vec/">word2vec</a> using the following parameters: <pre><%= $training_args %></pre>
709 </p>
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]710 % }
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]711 </body>
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]712</html>