Gitiles
Code Review Sign In
korap.ids-mannheim.de / ids-kl / derekovecs / a0ffb39bbb5547e79b56885b6fe6ad8fd794c3fe / . / templates / index.html.ep
blob: fc4725881c871073085d71658f86767739688b94 [file] [log] [blame]
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]1<!DOCTYPE html>
2<html>
3 <head>
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]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 Kupietz58270662017-12-04 12:10:06 +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 Kupietz58270662017-12-04 12:10:06 +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 <script src = "https://cdn.datatables.net/plug-ins/1.10.16/sorting/scientific.js"></script>
Marc Kupietza0ffb392018-01-25 08:53:43 +0100[diff] [blame^]11 <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script>
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]12 <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]13 <script
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]14 src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
15 integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
16 crossorigin="anonymous"></script>
Marc Kupietz80bd7b92017-07-04 16:25:54 +0200[diff] [blame]17 <script>
Marc Kupietza0ffb392018-01-25 08:53:43 +0100[diff] [blame^]18 MathJax.Hub.Config({
19 config: ["MMLorHTML.js"],
20 jax: ["input/TeX","input/MathML","output/HTML-CSS","output/NativeMML", "output/PreviewHTML"],
21 extensions: ["tex2jax.js","mml2jax.js","MathMenu.js","MathZoom.js", "fast-preview.js", "AssistiveMML.js", "a11y/accessibility-menu.js"],
22 TeX: {
23 extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
24 }
25 });
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]26 var urlParams = new URLSearchParams(window.location.search);
Marc Kupietzb3a2e4f2017-12-08 17:25:53 +0100[diff] [blame]27 var currentWords = urlParams.get("word");
Marc Kupietza0ffb392018-01-25 08:53:43 +0100[diff] [blame^]28 var CIIsearchWords = (currentWords && currentWords.includes(" ") ? '('+currentWords.replace(/ +/g, " oder ")+')' : currentWords);
Marc Kupietz66bfd952017-12-11 09:59:45 +0100[diff] [blame]29 var collocatorTable = null;
Marc Kupietza6e08f02017-12-01 22:06:21 +0100[diff] [blame]30
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]31 $(document).ready(function() {
Marc Kupietz694610d2017-11-25 18:30:03 +0100[diff] [blame]32
Marc Kupietza0ffb392018-01-25 08:53:43 +0100[diff] [blame^]33 $('#firstable').hide();
34 //Set up a callback to hear back when MathJax is done rendering the equations
35 // it finds
36 $('#ccd').load(
37 '@Url.Action("ActionResultMethod","ControllerName",{controller parameters})',
38 function () {
39 MathJax.Hub.Queue(
40 ["Typeset",MathJax.Hub,"ccd"],
41 function () {
42 $("#lfmd_tt").attr("title",$("#lfmd_ttt").html());
43 $("#npmi_tt").attr("title",$("#npmi_ttt").html());
44 }
45 );
46 });
47
48 //set things up so that we can shove raw html into what is shown in the tooltip;
49 // in this case, we will have already put into the title attribute the html that
50 // contains the MathJax rendered equations (via what we do in the callback).
51 $(function () {
52 $(document).tooltip({
53 content: function () {
54 return $(this).prop('title');
55 }
56 });
57 });
58
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]59 $("input").bind("keydown", function(event) {
60 // track enter key
61 var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
62 if (keycode == 13) { // keycode for enter key
63 // force the 'Enter Key' to implicitly click the Update button
64 document.getElementById('SEARCH').click();
65 return false;
66 } else {
67 return true;
68 }});
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]69
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]70 $( "#tabs" ).on( "tabsactivate", function( event, ui ) {
71 if (localStorage) localStorage['tab'] = ui.newTab.index();
72 });
73
74 $(function(){
75 $("#SEARCH").click(function() {
76 window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]77 });
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]78 });
Marc Kupietz0af83e32017-11-27 09:31:37 +0100[diff] [blame]79
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]80 function changeCharColor(txt, heat, word) {
81 var newText = "";
82 for (var i=0, l=txt.length; i<l; i++) {
83 newText += (i == 5 ? txt.charAt(i) : '<a href="http://korap.ids-mannheim.de/kalamar/?ql=cosmas2&q=' +
84 CIIsearchWords + ' /' + (i > 5? '%2B' : '-') + 'w' +
85 Math.abs(i-5) + ':' + Math.abs(i-5) + ' ' + word +
86 '" target="korap"><span style="background-color:' +
87 getHeatColor(heat[i]/maxHeat)+'">'+txt.charAt(i)+'</span></a>');
Marc Kupietzb6c615d2017-12-02 10:38:20 +0100[diff] [blame]88 }
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]89 return newText;
90 }
Marc Kupietzb6c615d2017-12-02 10:38:20 +0100[diff] [blame]91
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]92 function getHeatColor(value) {
93 var hue=((1-value)*120).toString(10);
94 return ["hsl(",hue,",90%,70%)"].join("");
95 }
96
97 function bitvec2window(n, heat, word) {
98 var str = n.toString(2).padStart(10, "0")
99 .replace(/^([0-9]{5})/, '$1x')
100 .replace(/0/g, '·')
101 .replace(/1/g, '+');
102 return changeCharColor(str, heat, word);
103 }
104
105 % use Mojo::ByteStream 'b';
106 var paraResults = <%= b(Mojo::JSON::to_json($lists)) %>;
107 var urlprefix = new URLSearchParams(window.location.search);
108 if (paraResults.length > 0 && paraResults[0] != null) {
109 var nvecs = [],
110 nwords = [],
111 nranks = [],
112 nmarked = [];
113 for(var i = 0; i < paraResults.length; i++) {
114 nwords = nwords.concat(paraResults[i].map(function(a){return a.word;}));
115 nvecs = nvecs.concat(paraResults[i].map(function(a){return a.vector;}));
116 nranks = nranks.concat(paraResults[i].map(function(a){return a.rank;}));
117 nmarked = nmarked.concat(paraResults[i].map(function(a){return a.marked;}));
Marc Kupietz0d4c0ca2017-12-04 09:18:56 +0100[diff] [blame]118 }
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]119 showMap({target: " "+urlParams.get('word')+" ", mergedEnd: 0, words: nwords, vecs: nvecs, ranks: nranks, marked: nmarked} );
120 var t = $('#firsttable').DataTable({
121 data: paraResults[0],
122 "sScrollY": "780px",
123 "bScrollCollapse": true,
124 "bPaginate": false,
125 "bJQueryUI": true,
126 "dom": '<"top">rt<"bottom"flp><"clear">',
127 "columns": [
128 { "data": "rank", type: "allnumeric" },
129 { "data": "dist", render: function ( data, type, row ) {return data.toFixed(3) }},
130 { "data": "word", render: function ( data, type, row ) {urlprefix.set("word", data); return '<a href="?' + urlprefix + '">' + data + '</a>' }}
131 ],
132 "columnDefs": [
133 { className: "dt-right", "targets": [0,1] },
134 { "searchable": false,
135 "orderable": false,
136 "targets": 0
137 },
138 { "orderSequence": [ "desc" ], "targets": [ 1 ] },
139 { "orderSequence": [ "asc", "desc" ], "targets": [ 2 ] },
140 ],
141 "oLanguage": {
142 "sSearch": "Filter: "
143 },
144 "order": [[ 1, 'desc' ]],
145 } );
Marc Kupietz0d4c0ca2017-12-04 09:18:56 +0100[diff] [blame]146
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]147 t.on( 'order.dt search.dt', function () {
148 t.column(0, {order:'applied'}).nodes().each( function (cell, i) {
149 cell.innerHTML = i+1;
150 } );
151 } ).draw();
152
153 $( "#first" ).clone().prependTo( "#tabs-2" );
154
155 }
156
157
158 var collocatorData = <%= b(Mojo::JSON::to_json($collocators)) %>;
159 var maxHeat; // = Math.max.apply(Math,collocatorData.map(function(o){return o.cprob;}))
160
161 if (collocatorData != null) {
162 maxHeat = Math.max.apply(Math,collocatorData.map(function(o){return Math.max.apply(Math,o.heat);}))
163 collocatorTable = $('#secondtable').DataTable({
164 data: collocatorData,
165 "sScrollY": "780px",
166 "bScrollCollapse": true,
167 "bPaginate": false,
168 "bJQueryUI": true,
169 "dom": '<"top">rt<"bottom"flp><"clear">',
170 "columns": [
171 { "data": "rank", type: "allnumeric" },
172 { "data": "pos", width: "7%", sClass: "dt-center mono compact", render: function ( data, type, row ) {return bitvec2window(data, row.heat, row.word) }},
173 { "data": "max", render: function ( data, type, row ) {return data.toFixed(3) }},
174 { "data": "average", render: function ( data, type, row ) {return data.toFixed(3) }},
175 { "data": "prob", type: "scientific", render: function ( data, type, row ) {return data.toExponential(3) } },
176 { "data": "cprob", type: "scientific", render: function ( data, type, row ) {return data.toExponential(3) } },
177 { "data": "overall", type: "scientific", render: function ( data, type, row ) {return data.toExponential(3) } },
178 { "data": "word", sClass: "collocator" },
179 { "data": "rank", type: "allnumeric" }
180 ],
181 "columnDefs": [
182 { className: "dt-right", "targets": [0,2,3,4,5,6] },
183 { className: "dt-center", "targets": [ 1] },
184 { "searchable": false,
185 "orderable": false,
186 "targets": [0, 8]
187 },
188 { "type": "scientific", targets: [2,3,4,5,6] },
189 { "orderSequence": [ "desc" ], "targets": [ 2, 3, 4, 5, 6 ] },
190 { "orderSequence": [ "asc", "desc" ], "targets": [ 1, 7 ] },
191 { "targets": [8], "visible": false }
192 ],
193 "oLanguage": {
194 "sSearch": "Filter: "
195 },
196 "order": [[ 4, 'desc' ]],
197 } );
198 $.ajaxSetup({
199 type: 'POST',
200 timeout: 30000,
201 error: function(xhr) {
202 $('#display_error')
203 .html('Error: ' + xhr.status + ' ' + xhr.statusText);
204 }
Marc Kupietz78b434a2018-01-12 22:33:32 +0100[diff] [blame]205 });
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]206
Marc Kupietz78b434a2018-01-12 22:33:32 +0100[diff] [blame]207 classicCollocatorTable = $('#classicoloctable').DataTable({
208 ajax: {
Marc Kupietz8893dec2018-01-24 09:52:02 +0100[diff] [blame]209 method: "GET",
Marc Kupietz78b434a2018-01-12 22:33:32 +0100[diff] [blame]210 url: '/derekovecs/getClassicCollocators',
211 dataType: 'json',
212 dataSrc: "",
213 timeout: 30000,
Marc Kupietz8893dec2018-01-24 09:52:02 +0100[diff] [blame]214 data: { w: paraResults[0][0].rank }
Marc Kupietz78b434a2018-01-12 22:33:32 +0100[diff] [blame]215 },
Marc Kupietzad783722018-01-13 17:45:21 +0100[diff] [blame]216 "initComplete":function(settings, json){
217 $("td.collocator").click(function(){
218 queryKorAPCII(this.textContent + " /w5 " + CIIsearchWords);
219 });
220 },
Marc Kupietz78b434a2018-01-12 22:33:32 +0100[diff] [blame]221 "sScrollY": "780px",
222 "bScrollCollapse": true,
223 "bPaginate": false,
224 "bJQueryUI": true,
225 "dom": '<"top">rt<"bottom"flp><"clear">',
226 "columns": [
227 // { "data": "pos", width: "7%", sClass: "dt-center mono compact", render: function ( data, type, row ) {return bitvec2window(data, row.heat, row.word) }},
Marc Kupietzcfcdcfc2018-01-24 09:51:26 +0100[diff] [blame]228 { "data": "llr", render: function ( data, type, row ) {return data.toFixed(1) }},
229 { "data": "lfmd", render: function ( data, type, row ) {return data.toFixed(2) }},
230// { "data": "fpmi", type: "scientific", render: function ( data, type, row ) {return data.toExponential(2) } },
231 { "data": "npmi", type: "scientific", render: function ( data, type, row ) {return data.toExponential(2) } },
232 { "data": "llfmd", render: function ( data, type, row ) {return data.toFixed(2) }},
233 { "data": "rlfmd", render: function ( data, type, row ) {return data.toFixed(2) }},
234 { "data": "lnpmi", type: "scientific", render: function ( data, type, row ) {return data.toExponential(2) } },
235 { "data": "rnpmi", type: "scientific", render: function ( data, type, row ) {return data.toExponential(2) } },
Marc Kupietz78b434a2018-01-12 22:33:32 +0100[diff] [blame]236 { "data": "word", sClass: "collocator" }
237 ],
238 "columnDefs": [
Marc Kupietzcfcdcfc2018-01-24 09:51:26 +0100[diff] [blame]239 { className: "dt-right", "targets": [0,1,2,3,4,5,6] },
Marc Kupietz78b434a2018-01-12 22:33:32 +0100[diff] [blame]240 { "searchable": false,
241 "orderable": false,
242 "targets": []
243 },
Marc Kupietzcfcdcfc2018-01-24 09:51:26 +0100[diff] [blame]244 { "type": "scientific", targets: [2,3,4,5,6] },
245 { "orderSequence": [ "desc" ], "targets": [ 0, 1, 2, 3,4,5,6 ] },
246 { "orderSequence": [ "asc", "desc" ], "targets": [ 7 ] },
Marc Kupietz78b434a2018-01-12 22:33:32 +0100[diff] [blame]247 ],
248 "oLanguage": {
249 "sSearch": "Filter: "
250 },
251 "order": [[ 1, 'desc' ]],
252 });
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]253
Marc Kupietzad783722018-01-13 17:45:21 +0100[diff] [blame]254 $("td.collocator").click(function(){
255 queryKorAPCII(this.textContent + " /w5 " + CIIsearchWords);
256 });
257
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]258 collocatorTable.on( 'order.dt search.dt', function () {
259 collocatorTable.column(0, {order:'applied'}).nodes().each( function (cell, i) {
260 cell.innerHTML = i+1;
261 } );
Marc Kupietz78b434a2018-01-12 22:33:32 +0100[diff] [blame]262 }).draw();
263 }
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]264
Marc Kupietz78b434a2018-01-12 22:33:32 +0100[diff] [blame]265 if (localStorage && !window.location.hash) { // let's not crash if some user has IE7
266 var index = parseInt(localStorage['tab']||'0');
267 $("#tabs").tabs({ active: index });
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]268 }
269 $("#tabs").css("visibility", "visible"); // now we can show the tabs
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]270 });
271
272 $(function(){
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]273 $("#dropdownoptions").dialog({
274 title: "Options",
275 autoOpen: false,
276 modal: false,
277 draggable: false,
278 height: "auto",
279 width: "auto",
280 resizable: false,
281 buttons: {
282 "Cancel": function() {
283 $( this ).dialog( "close" );
284 },
285 "Apply": function() {
286 window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
287 }
288 }
289 });
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]290 });
291
292 $(function(){
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]293 $("#showoptions").click(function(){
294 $("#dropdownoptions").dialog("open");
295 var target = $(this);
296 $("#dropdownoptions").dialog("widget").position({
297 my: 'left bottom',
298 at: 'left bottom',
299 of: target
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]300 });
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]301 });
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]302 });
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]303
304 $( function() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]305 $( "#no_iterations" ).spinner({
306 spin: function( event, ui ) {
307 if ( ui.value < 1000 ) {
308 $( this ).spinner( "value", 1000 );
309 return false;
310 } else if ( ui.value > 10000 ) {
311 $( this ).spinner( "value", 10000 );
312 return false;
313 }
314 }
315 });
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]316 } );
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]317
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]318 $( function() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]319 $( "#neighbours" ).spinner({
320 spin: function( event, ui ) {
321 if ( ui.value < 0 ) {
322 $( this ).spinner( "value", 0 );
323 return false;
324 } else if ( ui.value > 200 ) {
325 $( this ).spinner( "value", 200 );
326 return false;
327 }
328 }
329 });
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]330 } );
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]331
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]332 $( function() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]333 $( "#cutoff" ).spinner({
334 spin: function( event, ui ) {
335 if ( ui.value < 100000 ) {
336 $( this ).spinner( "value", 100000 );
337 return false;
338 } else if ( ui.value > 2000000 ) {
339 $( this ).spinner( "value", 2000000 );
340 return false;
341 }
342 }
343 });
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]344 } );
345
346 $( function() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]347 $( "#tabs" ).tabs().addClass('tabs-min');
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]348 } );
349
350 $( function() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]351 $( ".controlgroup-vertical" ).controlgroup({
352 "direction": "vertical"
353 });
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]354 } );
355
356 $(function() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]357 $( document ).tooltip({
358 content: function() {
359 return $(this).attr('title');
360 }}
361 )
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]362 })
Marc Kupietz694610d2017-11-25 18:30:03 +0100[diff] [blame]363
Marc Kupietza0ffb392018-01-25 08:53:43 +0100[diff] [blame^]364 $(function () {
365 $(document).tooltip({
366 content: function () {
367 return $(this).prop('title');
368 },
369 show: null,
370 close: function (event, ui) {
371 ui.tooltip.hover(
372 function () {
373 $(this).stop(true).fadeTo(400, 1);
374 },
375 function () {
376 $(this).fadeOut("400", function () {
377 $(this).remove();
378 })
379 });
380 }
381 });
382 });
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]383 </script>
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]384 <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
385 <script src="/derekovecs/js/tsne.js"></script>
386 <script src="/derekovecs/js/som.js"></script>
387 <script src="/derekovecs/js/labeler.js"></script>
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]388 <style>
389 body, input {
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]390 font-family: Lato, sans-serif;
391 font-size: 11pt;
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]392 }
Marc Kupietz30ca4342017-11-22 21:21:20 +0100[diff] [blame]393
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]394 .info {
395 font-size: 8pt;
396 margin-top: 4px;
397 /* position: absolute;
398 bottom: 0;
399 left: 0;
400 right: 0; */
401 }
402
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]403 h1, h2, h3 {
404 margin: 5px 10px 0 0;
405 color: rgb(246,168,0);
406 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;
407 font-weight: bold;
408 line-height: 1.35;
409 letter-spacing: normal;
410 text-transform: uppercase;
411 text-shadow: none;
412 word-wrap: break-word;
413 }
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]414
415
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]416 showoptions, #SEARCH {
417 margin-left: 10px;
418 margin-right: 10px;
419 }
Marc Kupietz6dbadd12017-11-29 16:43:33 +0100[diff] [blame]420
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]421 .tabs-left-vertical .ui-tabs-nav {
422 position: absolute;
423 width: 21em;
424 transform: translate(-100%,0%) rotate(-90deg);
425 transform-origin: 100% 0%;
426 }
Marc Kupietz4fcda0c2017-11-29 09:00:31 +0100[diff] [blame]427
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]428 .tabs-left-vertical .ui-tabs-nav li {
429 float: right;
430 }
Marc Kupietz4fcda0c2017-11-29 09:00:31 +0100[diff] [blame]431
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]432 .tabs-left-vertical .ui-tabs-panel {
433 padding-left: 3.5em;
434 }
Marc Kupietzdab9f222017-11-29 14:22:59 +0100[diff] [blame]435
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]436 .tabs-left-vertical .ui-tabs-panel {
437 height: 20em;
438 }
Marc Kupietz4fcda0c2017-11-29 09:00:31 +0100[diff] [blame]439
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]440 .mono {
Marc Kupietzc8221182017-12-08 17:26:19 +0100[diff] [blame]441 font-family: "DejaVu Sans Mono", Inconsolata, SourceCodePro, "Courier New", Courier, monospace;
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]442 }
Marc Kupietz30ca4342017-11-22 21:21:20 +0100[diff] [blame]443
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]444 .ui-tooltip-content {
Marc Kupietz4116b432017-12-06 14:15:32 +0100[diff] [blame]445 font-size: 10pt;
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]446 color: #222222;
447 }
Marc Kupietzf4b49392016-04-28 10:49:56 +0200[diff] [blame]448
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]449 svg > .ui-tooltip-content {
450 font-size: 8pt;
451 color: #222222;
452 }
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]453
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]454 a.merged {
455 color: green;
456 fill: green;
457 }
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]458
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]459 #first a {
460 text-decoration: none;
461 }
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]462
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]463 a.marked, #first a.marked {
464 text-decoration: underline;
465 }
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]466
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]467 a.target {
468 color: red;
469 fill: red;
470 }
Marc Kupietz694610d2017-11-25 18:30:03 +0100[diff] [blame]471
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]472 table.display {
473 width: 40% important!;
474 margin: 1; /* <- works for me this way ****/
475 }
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]476
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]477 table.dataTable thead th, table.dataTable thead td, table.dataTable tbody td {
478 padding: 2px 2px;
479 // border-bottom: 1px solid #111;
480 }
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]481
Marc Kupietz8f75b1f2017-12-06 09:42:13 +0100[diff] [blame]482 td.collocator {
483 cursor: pointer;
484 }
485
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]486 #collocators {
487 margin-bottom: 15px;
488 }
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]489
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]490 #header {
491 width: 100%;
492 // border: 1px solid red;
493 overflow: hidden; /* will contain if #first is longer than #second */
494 }
Marc Kupietz81bf39c2017-11-29 17:04:35 +0100[diff] [blame]495
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]496 #topwrapper {
497 width: 100%;
498 // border: 1px solid red;
499 overflow: hidden; /* will contain if #first is longer than #second */
500 }
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]501
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]502 #wrapper {
503 // border: 1px solid red;
504 overflow: hidden; /* will contain if #first is longer than #second */
505 }
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]506
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]507 #pagetitle {
508 max-width: 460px;
509 margin-right: 20px;
510 float: left;
511 overflow: hidden; /* if you don't want #second to wrap below #first */
512 // border: 1px solid green;
513 }
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]514
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]515 #options {
516 float: left;
517 width: 800px;
518 margin: 10px;
519 overflow: hidden; /* if you don't want #second to wrap below #first */
520 }
Marc Kupietz81bf39c2017-11-29 17:04:35 +0100[diff] [blame]521
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]522 #word {
523 width: 50%;
524 }
Marc Kupietz81bf39c2017-11-29 17:04:35 +0100[diff] [blame]525
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]526 #first {
527 margin-right: 20px;
528 float: left;
529 overflow: hidden; /* if you don't want #second to wrap below #first */
530 // border: 1px solid green;
531 }
532 #tabs {
533 margin-right: 20px;
534 overflow: hidden; /* if you don't want #second to wrap below #first */
535 }
Marc Kupietzdf3d4b52017-11-29 16:57:27 +0100[diff] [blame]536
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]537 .tabs-min {
538 background: transparent;
539 border: none;
540 }
Marc Kupietzdf3d4b52017-11-29 16:57:27 +0100[diff] [blame]541
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]542 .tabs-min .ui-widget-header {
543 background: transparent;
544 border: none;
545 border-bottom: 1px solid #c0c0c0;
546 -moz-border-radius: 0px;
547 -webkit-border-radius: 0px;
548 border-radius: 0px;
549 }
Marc Kupietzdf3d4b52017-11-29 16:57:27 +0100[diff] [blame]550
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]551 .tabs-min .ui-tabs-nav .ui-state-default {
552 background: transparent;
553 border: none;
554 }
Marc Kupietzdf3d4b52017-11-29 16:57:27 +0100[diff] [blame]555
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]556 .tabs-min .ui-tabs-nav .ui-state-active {
557 background: transparent url(derekovecs/img/uiTabsArrow.png) no-repeat bottom center;
558 border: none;
559 }
Marc Kupietzdf3d4b52017-11-29 16:57:27 +0100[diff] [blame]560
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]561 .tabs-min .ui-tabs-nav .ui-state-default a {
562 color: #c0c0c0;
563 }
Marc Kupietzdf3d4b52017-11-29 16:57:27 +0100[diff] [blame]564
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]565 .tabs-min .ui-tabs-nav .ui-state-active a {
566 color: rgb(246,168,0);
567 }
Marc Kupietzdf3d4b52017-11-29 16:57:27 +0100[diff] [blame]568
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]569 #embed {
570 max-width: 802px;
571 border: 1px solid #333;
572 }
Marc Kupietz4abcd682017-11-28 20:51:08 +0100[diff] [blame]573
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]574 #second {
575 min-width: 800px;
576 // border: 1px solid #333;
577 overflow: hidden; /* if you don't want #second to wrap below #first */
578 }
579 #som2 svg {
580 border: 1px solid #333;
581 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]582
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]583 #cost {
584 font-size: 8pt;
585 color: #222222;
586 margin-top: 4px;
587 margin-bottom: 12px;
588 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]589
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]590 #sominfo1, #sominfo {
591 font-size: 8pt;
592 color: #222222;
593 margin-top: 0px;
594 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]595
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]596 #somcolor1, #somcolor2, #somcolor3 {
597 display: inline-block;
598 height: 10px;
599 width: 10px;
600 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]601
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]602 #third {
603 border: 1px solid #333;
604 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]605
Marc Kupietza0ffb392018-01-25 08:53:43 +0100[diff] [blame^]606 th {
607 color: rgb(246,168,0);
608 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;
609 }
610
611 p.citation {
612 font-size: 8pt;
613 color: #999999;
614 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]615 </style>
616 <script>
617
618 var opt = {epsilon: <%= $epsilon %>, perplexity: <%= $perplexity %>},
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]619 mapWidth = 800, // width map
620 mapHeight = 800,
621 jitterRadius = 7;
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]622
623 var T = new tsnejs.tSNE(opt); // create a tSNE instance
624
625 var Y;
626
627 var data;
628 var labeler;
629
630 function applyJitter() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]631 svg.selectAll('.tsnet')
632 .data(labels)
633 .transition()
634 .duration(50)
635 .attr("transform", function(d, i) {
636 T.Y[i][0] = (d.x - mapWidth/2 - tx)/ss/20;
637 T.Y[i][1] = (d.y - mapHeight/2 - ty)/ss/20;
638 return "translate(" +
639 (d.x) + "," +
640 (d.y) + ")";
641 });
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]642 }
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]643
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]644 function updateEmbedding() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]645 var Y = T.getSolution();
646 svg.selectAll('.tsnet')
647 .data(data.words)
648 .attr("transform", function(d, i) {
649 return "translate(" +
650 ((Y[i][0]*20*ss + tx) + mapWidth/2) + "," +
651 ((Y[i][1]*20*ss + ty) + mapHeight/2) + ")"; });
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]652 }
653
654 var svg;
655 var labels = [];
656 var anchor_array = [];
657 var text;
658
659 function drawEmbedding() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]660 var urlprefix = new URLSearchParams(window.location.search);
661 urlprefix.delete("word");
662 urlprefix.append("word","");
Marc Kupietz8f9c86a2017-12-04 17:17:13 +0100[diff] [blame]663
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]664 $("#embed").empty();
665 var div = d3.select("#embed");
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]666
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]667 // get min and max in each column of Y
668 var Y = T.Y;
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]669
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]670 svg = div.append("svg") // svg is global
671 .attr("width", mapWidth)
672 .attr("height", mapHeight);
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]673
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]674 var g = svg.selectAll(".b")
675 .data(data.words)
676 .enter().append("g")
677 .attr("class", "tsnet");
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]678
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]679 g.append("a")
680 .attr("xlink:href", function(word) {
681 return "?"+urlprefix+word; })
682 .attr("class", function(d, i) {
683 var res="";
684 if(data.marked[i]) {
685 res="marked ";
686 }
687 if(data.target.indexOf(" "+d+" ") >= 0) {
688 return res+"target";
689 } else if(data.ranks[i] < data.mergedEnd) {
690 return res+"merged";
691 } else {
692 return res;
693 }
694 })
695 .attr("title", function(d, i) {
696 if(data.mergedEnd > 0) {
697 if(data.ranks[i] >= data.mergedEnd) {
698 return "rank: "+i +" "+"freq. rank: "+(data.ranks[i]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
699 } else {
700 return "rank: "+i +" "+"freq. rank: "+data.ranks[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " (merged vocab)";
701 }
702 } else {
703 return "rank: "+i +" "+"freq. rank: "+data.ranks[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
704 }
705 })
706 .append("text")
707 .attr("text-anchor", "top")
708 .attr("font-size", 12)
709 .text(function(d) { return d; });
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]710
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]711 var zoomListener = d3.behavior.zoom()
712 .scaleExtent([0.1, 10])
713 .center([0,0])
714 .on("zoom", zoomHandler);
715 zoomListener(svg);
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]716 }
717
718 var tx=0, ty=0;
719 var ss=1;
720 var iter_id=-1;
721
722 function zoomHandler() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]723 tx = d3.event.translate[0];
724 ty = d3.event.translate[1];
725 ss = d3.event.scale;
726 updateEmbedding();
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]727 }
728
729 var stepnum = 0;
730
731 function stopStep() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]732 clearInterval(iter_id);
733 text = svg.selectAll("text");
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]734
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]735 // jitter function needs different data and co-ordinate representation
736 labels = d3.range(data.words.length).map(function(i) {
737 var x = (T.Y[i][0]*20*ss + tx) + mapWidth/2;
738 var y = (T.Y[i][1]*20*ss + ty) + mapHeight/2;
739 anchor_array.push({x: x, y: y, r: jitterRadius});
740 return {
741 x: x,
742 y: y,
743 name: data.words[i]
744 };
745 });
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]746
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]747 // get the actual label bounding boxes for the jitter function
748 var index = 0;
749 text.each(function() {
750 labels[index].width = this.getBBox().width;
751 labels[index].height = this.getBBox().height;
752 index += 1;
753 });
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]754
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]755
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]756 // setTimeout(updateEmbedding, 1);
757 // setTimeout(
758 labeler = d3.labeler()
759 .label(labels)
760 .anchor(anchor_array)
761 .width(mapWidth)
762 .height(mapHeight)
763 .update(applyJitter);
764 // .start(1000);
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]765
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]766 iter_id = setInterval(jitterStep, 1);
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]767 }
768
769 var jitter_i=0;
770
771 function jitterStep() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]772 if(jitter_i++ > 100) {
773 clearInterval(iter_id);
774 } else {
775 labeler.start2(10);
776 applyJitter();
777 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]778 }
779
780 var last_cost=1000;
781
782 function step() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]783 var i = T.iter;
Marc Kupietz34c08172017-11-29 17:08:47 +0100[diff] [blame]784
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]785 if(i > <%= $no_iterations %>) {
786 stopStep();
787 } else {
788 var cost = Math.round(T.step() * 100000) / 100000; // do a few steps
789 $("#cost").html("tsne iteration " + i + ", cost: " + cost.toFixed(5));
790 if(i % 250 == 0 && cost >= last_cost) {
791 stopStep();
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]792 } else {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]793 last_cost = cost;
794 updateEmbedding();
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]795 }
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]796 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]797 }
798
799 function showMap(j) {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]800 data=j;
801 T.iter=0;
802 iter_id = -1;
803 last_cost=1000;
804 T.initDataRaw(data.vecs); // init embedding
805 drawEmbedding(); // draw initial embedding
Marc Kupietz78114532017-11-29 17:00:16 +0100[diff] [blame]806
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]807 if(iter_id >= 0) {
808 clearInterval(iter_id);
809 }
810 //T.debugGrad();
811 iter_id = setInterval(step, 1);
812 if(true) { // (<%= $show_som %>) {
813 makeSOM(j, <%= $no_iterations %>);
814 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]815 }
Marc Kupietz39179ab2017-07-04 16:28:06 +0200[diff] [blame]816 var queryword;
817
Marc Kupietz66bfd952017-12-11 09:59:45 +0100[diff] [blame]818 function showCollocatorSOM() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]819 if (collocatorTable) {
820 var ctableData = collocatorTable.rows().data();
821 var nwords = [],
822 nranks = [];
823 for (var i=0; i < ctableData.length && i < 100; i++) {
824 nranks.push(ctableData[i].rank);
825 nwords.push(ctableData[i].word);
Marc Kupietz66bfd952017-12-11 09:59:45 +0100[diff] [blame]826 }
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]827 $.post('/derekovecs/getVecsByRanks',
828 JSON.stringify(nranks),
829 function(data, status){
830 showMap({target: " "+urlParams.get('word')+" ", mergedEnd: 0, words: nwords, vecs: data, ranks: nranks, marked: Array(100).fill(false)} );
831 }, 'json');
832 }
Marc Kupietz66bfd952017-12-11 09:59:45 +0100[diff] [blame]833 }
834
Marc Kupietz39179ab2017-07-04 16:28:06 +0200[diff] [blame]835 function onload() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]836 queryword = document.getElementById('word');
Marc Kupietz39179ab2017-07-04 16:28:06 +0200[diff] [blame]837 }
838
839 function queryKorAP() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]840 window.open('http://korap.ids-mannheim.de/kalamar/?q='+queryword.value, 'KorAP');
Marc Kupietz39179ab2017-07-04 16:28:06 +0200[diff] [blame]841 }
Marc Kupietz4dc270c2017-11-24 10:17:12 +0100[diff] [blame]842
843 function queryKorAPCII(query) {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]844 window.open('http://korap.ids-mannheim.de/kalamar/?ql=cosmas2&q='+query, 'KorAP');
Marc Kupietz4dc270c2017-11-24 10:17:12 +0100[diff] [blame]845 }
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]846 </script>
847 </head>
Marc Kupietz39179ab2017-07-04 16:28:06 +0200[diff] [blame]848 <body onload="onload()">
Marc Kupietza0ffb392018-01-25 08:53:43 +0100[diff] [blame^]849 <div style="display:none;" id="lfmd_ttt">Log-frequency biased mutual dependency: $$log_2\frac{p^3(w_1,w_2)}{p(w_1) p(w_2)}$$<p class="citation">Thanopoulos, A., Fakotakis, N., Kokkinakis, G. (2002): <a href="http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.11.8101&rep=rep1&type=pdf">Comparative evaluation of collocation extraction metrics</a>. In: Proc. of LREC 2002: 620–625.</p></div>
850 <div style="display:none;" id="npmi_ttt">Normalized pointwise mutual information: $$\frac{log_2\frac{p(w_1,w_2)}{p(w_1)p(w_2)}}{-log_2(p(w_1,w_2))}$$<p class="citation">Bouma, Gerlof (2009): <a href="https://svn.spraakdata.gu.se/repos/gerlof/pub/www/Docs/npmi-pfd.pdf">Normalized (pointwise) mutual information in collocation extraction</a>. In Proceedings of GSCL.</p></div>
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]851 <div id="header">
852 <div id="pagetitle">
853 <h1>DeReKo-Vectors</h1>
Marc Kupietz4fcda0c2017-11-29 09:00:31 +0100[diff] [blame]854 </div>
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]855 <div id="options" class="widget">
856 <form id="queryform">
857 <input id="word" type="text" name="word" placeholder="Word(s) to be searched" value="<%= $word %>"
858 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."/>
859 <input id="SEARCH" type="button" value="SEARCH">
860 <input type="button" id="showoptions" name="showoptions" value="Options" />
861 </form>
862 <div id="dropdownoptions" style="display: none">
863 <form id="optionsform">
864 <div class="controlgroup-vertical">
865 <label for="cutoff">cut-off</label>
866 <input id="cutoff" type="text" name="cutoff" size="10" value="<%= $cutoff %>" title="Only consider the most frequent x word forms.">
867 <label for="dedupe">dedupe</label>
868 <input id="dedupe" type="checkbox" name="dedupe" value="1" <%= ($dedupe ? "checked" : "") %> title="radically filter out any near-duplicates">
869 % if($mergedEnd > 0) {
870 <label for="sbf">backw.</label>
871 <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.">
872 % }
873 <label for="neighbours">max. neighbours:</label>
874 <input id="neighbours" size="4" name="n" value="<%= $no_nbs %>">
875 <label for="no_iterations">max. iterations</label>
876 <input id="no_iterations" name="N" size="4" value="<%= $no_iterations %>">
877 <!-- <label for="dosom">SOM</label>
878 <input id="dosom" type="checkbox" name="som" value="1" <%= ($show_som ? "checked" : "") %>> -->
879 % if($collocators) {
880 <label for="sortby">window/sort</label>
881 <select id="sortby" name="sort">
882 <option value="0" <%= ($sort!=1 && $sort!=2? "selected":"") %>>auto focus</option>
883 <!-- <option value="1" <%= ($sort==1? "selected":"") %>>any single position</option>
884 <option value="2" <%= ($sort==2? "selected":"") %>>whole window</option> -->
885 </select>
886 % }
887 <input type="button" value="→ KorAP" onclick="queryKorAP();" title="query word with KorAP"/>
888 </div>
889 </form>
890 </div>
891 </div>
892 </div>
893 <div id="topwrapper">
894 <div style="visibility: hidden;" id="tabs">
895 <ul>
896 <li><a href="#tabs-1">Semantics (TSNE-map)</a></li>
897 <li><a href="#tabs-2">Semantics (SOM)</a></li>
898 <li><a href="#tabs-3">Syntagmatic (collocators)</a></li>
899 </ul>
900 <div id="tabs-1">
901 % if($lists && (@$lists) > 0 && (@$lists)[0]) {
902 <div id="wrapper">
903 <div id="first" style="width: 320px">
904 <table class="display compact nowrap" id="firsttable">
905 <thead>
906 <tr>
907 <th align="right">#</th><th align="right">cos</th><th align="left">similars</th>
908 </tr>
909 </thead>
910 <tbody>
911 <tr>
912 <td align="right">
913 </td>
914 <td align="right">
915 </td>
916 <td></td>
917 </tr>
918 </tbody>
919 </table>
920 </div>
921 <script>
922 </script>
923 <div id="second">
924 <div id="embed">
925 </div>
926 <div id="cost">
927 </div>
928 </div>
929 </div>
930 % } elsif($word !~ /^\s*$/) {
931 <div id="wrapper">
932 <div id="not-found-dialog" title="Not found">
933 <p>ERROR: "<%= $word %>" not found in vocabluary.</p>
934 <p>If you are sure you have spelled the word as intended, you can try to increase the cutoff parameter in the options menu.</p>
935 </div>
936 <script>
937 $( function() {
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]938 $( "#not-found-dialog" ).dialog({
939 autoOpen: true,
940 modal: true,
941 draggable: false,
942 height: "auto",
943 width: "auto",
944 resizable: false,
945 buttons: {
946 "OK": function() {
947 $( this ).dialog( "close" );
948 },
949 "Apply": function() {
950 window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
951 }
952 }
953 });
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]954 });
955 </script>
956 </div>
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]957 % }
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]958 </div>
959 <div id="tabs-2">
Marc Kupietz66bfd952017-12-11 09:59:45 +0100[diff] [blame]960 <div id="som2" style="width: 800;">
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]961 </div>
962 <div id="sominfo1"><span id="somcolor1"> </span> <span id="somword1"> </span> <span id="somcolor2"> </span> <span id="somword2"> </span> <span id="somcolor3"> </span></div>
963 <div id="sominfo">SOM iteration <span id="iterations">0</span></div>
964 </div>
Marc Kupietzcfcdcfc2018-01-24 09:51:26 +0100[diff] [blame]965 <div id="tabs-3" style="width:1500px">
966 <div style="width: 55%; float: left;" id="secondt">
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]967 <table class="display compact nowrap" id="secondtable">
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]968 <thead>
969 <tr>
970 % if($collocators) {
971 <th>#</th>
Marc Kupietz4116b432017-12-06 14:15:32 +0100[diff] [blame]972 <th align="center" title="Activation of the respective collocator in the columns around the target normalized by its maximum (red). Columns selected by the auto-focus funtion (which window of all possible column-combinations maximizes ⊥(a/c)?) are marked with +. Click on the column postions to lauch a KorAP query with target word and collocator in the respective position.">w'</th>
973 <th align="right" title="Maximum activation of the collocator anywhere in the output layer.">max(a)</th>
974 <th title="Average raw activation of the collocator in the columns selected by auto-focus." align="right">⟨a⟩</th>
975 <th title="Sum of activations over the selected colunns normalized by the total activation sum of the selected columns." align="right">Σa/Σw'</th>
976 <th title="Co-norm of the column-normalized activations over the colunns selected by the auto-focus." align="right">⊥(a/c)</th>
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]977 <th title="Sum of the activations over the whole window normalized by the total window sum (no auto-focus)." align="right">Σa/Σw</th>
978 <th align="left">collocator</th>
979 % }
980 </tr>
981 </thead>
982 <tbody>
983 <tr>
984 <td align="right">
985 </td>
986 <td align="right">
987 </td>
988 <td align="right">
989 </td>
990 <td align="right">
991 </td>
992 <td align="right">
993 </td>
994 <td align="right">
995 </td>
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]996 </tr>
997 </tbody>
998 </table>
Marc Kupietz66bfd952017-12-11 09:59:45 +0100[diff] [blame]999 </div>
Marc Kupietza0ffb392018-01-25 08:53:43 +0100[diff] [blame^]1000 <div id="ccd" style="margin-left:0px; float:right; width:800px;">
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]1001 <table class="display compact nowrap" id="classicoloctable">
1002 <thead>
1003 <tr>
Marc Kupietza0ffb392018-01-25 08:53:43 +0100[diff] [blame^]1004 <th>LLR</th>
1005 <th id="lfmd_tt">LFMD</th>
Marc Kupietzcfcdcfc2018-01-24 09:51:26 +0100[diff] [blame]1006 <!-- <th title="frequency biased pointwise mutual information">fpmi</th>-->
Marc Kupietza0ffb392018-01-25 08:53:43 +0100[diff] [blame^]1007 <th id="npmi_tt">nPMI</th>
1008 <th title="log-frequency biased mutual dependency - left neighbour only">l-LFMD</th>
1009 <th title="log-frequency biased mutual dependency - right neighbour only">r-LFMD</th>
1010 <th title="normalized pointwise mutual information - left neighbour only">l-nPMI</th>
1011 <th title="normalized pointwise mutual information - right neighbour only">r-nPMI</th>
1012 <th title="raw max frequency of collocation within window">raw</th>
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]1013 <th>collocator</th>
1014 </tr>
1015 </thead>
1016 <tbody>
1017 <tr>
1018 <td align="right">
1019 </td>
1020 <td align="right">
1021 </td>
1022 <td align="right">
1023 </td>
1024 <td align="right">
1025 </td>
Marc Kupietzcfcdcfc2018-01-24 09:51:26 +0100[diff] [blame]1026 <td align="right">
1027 </td>
1028 <td align="right">
1029 </td>
1030 <td align="right">
1031 </td>
1032 <td align="right">
1033 </td>
Marc Kupietze6a7a732018-01-12 09:21:08 +0100[diff] [blame]1034 </tr>
1035 </tbody>
1036 </table>
1037 </div>
1038 <div style="clear:both" ></div>
Marc Kupietz66bfd952017-12-11 09:59:45 +0100[diff] [blame]1039 <div style="float: right; overflow: hidden" id="extra"><button onClick="showCollocatorSOM()"> </button></div>
Marc Kupietz66bfd952017-12-11 09:59:45 +0100[diff] [blame]1040 </div>
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]1041 </div>
1042 </div> <!-- topwrapper -->
1043 <div style="clear: both;"></div>
1044 </div>
Marc Kupietzebea4702018-01-12 09:16:09 +0100[diff] [blame]1045 % if($training_args && (@$lists)[0]) {
1046 <div class="info">
1047 % if($training_args =~ /-type\s*3/) {
1048 Calculations are based on a word embedding model trained with an extension of <a href="https://github.com/wlin12/wang2vec/">wang2vec</a> using the following parameters: <%= $training_args %>
1049 % } else {
1050 Calculations are based on a word embedding model trained with <a href="https://code.google.com/p/word2vec/">word2vec</a> using the following parameters: <%= $training_args %>
1051 % }
1052 </div>
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]1053 % }
Marc Kupietz58270662017-12-04 12:10:06 +0100[diff] [blame]1054 </body>
Marc Kupietz83305222016-04-28 09:57:22 +0200[diff] [blame]1055</html>