w2v-server: move search field and options right
diff --git a/templates/index.html.ep b/templates/index.html.ep
index 1a2aa10..0cb9f63 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -4,59 +4,108 @@
<title>DeReKo-Word-Vector-Distances: <%= $word %></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
- <script src = "https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
- <script src = "https://cdn.datatables.net/fixedcolumns/3.2.3/js/dataTables.fixedColumns.min.js"></script>
- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
+ <script src = "https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
+ <script src = "https://cdn.datatables.net/fixedcolumns/3.2.3/js/dataTables.fixedColumns.min.js"></script>
+ <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script
- src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
- integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
- crossorigin="anonymous"></script>
+src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
+integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
+crossorigin="anonymous"></script>
<script>
-$(document).ready(function() {
- $("#xxxtabs").tabs( {
- "show": function(event, ui) {
- var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
- if ( oTable.length > 0 ) {
- oTable.fnAdjustColumnSizing();
- }
- }
- } );
+ $('#firstable').hide();
+ $(document).ready(function() {
+ $("#xxxtabs").tabs( {
+ "show": function(event, ui) {
+ var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
+ if ( oTable.length > 0 ) {
+ oTable.fnAdjustColumnSizing();
+ }
+ }
+ } );
-$(".selector").tabs({ active: 1 });
- $('#firsttable').DataTable({
- "sScrollY": "760px",
- "bScrollCollapse": true,
- "bPaginate": false,
- "bJQueryUI": true,
- "dom": '<"top">rt<"bottom"flp><"clear">',
- "aoColumnDefs": [
- { "sWidth": "10%", "aTargets": [ -1 ] }
- ]
- } );
+ $(".selector").tabs({ active: 1 });
+ $('#firsttable').DataTable({
+ "sScrollY": "780px",
+ "bScrollCollapse": true,
+ "bPaginate": false,
+ "bJQueryUI": true,
+ "dom": '<"top">rt<"bottom"flp><"clear">',
+ "aoColumnDefs": [
+ { "sWidth": "10%", "aTargets": [ -1 ] }
+ ]
+ } );
$('#secondtable').DataTable({
- "sScrollY": "800px",
- "bScrollCollapse": true,
- "bPaginate": false,
- "bJQueryUI": true,
- "dom": '<"top">rt<"bottom"flp><"clear">',
- "aoColumnDefs": [
- { "sWidth": "10%", "aTargets": [ -1 ] }
- ]
- } );
-});
+ "sScrollY": "800px",
+ "bScrollCollapse": true,
+ "bPaginate": false,
+ "bJQueryUI": true,
+ "dom": '<"top">rt<"bottom"flp><"clear">',
+ "aoColumnDefs": [
+ { "sWidth": "10%", "aTargets": [ -1 ] }
+ ]
+ } );
+ });
- $( function() {
- $( "#tabs" ).tabs();
- } );
+ $( function() {
+ $( "#iterations" ).spinner({
+ spin: function( event, ui ) {
+ if ( ui.value < 1000 ) {
+ $( this ).spinner( "value", 1000 );
+ return false;
+ } else if ( ui.value > 10000 ) {
+ $( this ).spinner( "value", 10000 );
+ return false;
+ }
+ }
+ });
+ } );
-$(function() {
- $( document ).tooltip({
- content: function() {
- return $(this).attr('title');
- }}
- )
+ $( function() {
+ $( "#neighbours" ).spinner({
+ spin: function( event, ui ) {
+ if ( ui.value < 0 ) {
+ $( this ).spinner( "value", 0 );
+ return false;
+ } else if ( ui.value > 200 ) {
+ $( this ).spinner( "value", 200 );
+ return false;
+ }
+ }
+ });
+ } );
+
+ $( function() {
+ $( "#cutoff" ).spinner({
+ spin: function( event, ui ) {
+ if ( ui.value < 100000 ) {
+ $( this ).spinner( "value", 100000 );
+ return false;
+ } else if ( ui.value > 2000000 ) {
+ $( this ).spinner( "value", 2000000 );
+ return false;
+ }
+ }
+ });
+ } );
+
+ $( function() {
+ $( "#tabs" ).tabs();
+ } );
+
+ $( function() {
+ $( ".controlgroup-vertical" ).controlgroup({
+ "direction": "vertical"
+ });
+ } );
+
+ $(function() {
+ $( document ).tooltip({
+ content: function() {
+ return $(this).attr('title');
+ }}
+ )
})
</script>
@@ -102,30 +151,55 @@
fill: red;
}
-table.display {
- width: 40% important!;
- margin: 0; /* <- works for me this way ****/
-}
-table.dataTable thead th, table.dataTable thead td, table.dataTable tbody td {
- padding: 2px 2px;
-// border-bottom: 1px solid #111;
-}
+ table.display {
+ width: 40% important!;
+ margin: 1; /* <- works for me this way ****/
+ }
+ table.dataTable thead th, table.dataTable thead td, table.dataTable tbody td {
+ padding: 2px 2px;
+ // border-bottom: 1px solid #111;
+ }
#collocators {
margin-bottom: 15px;
}
- #wrapper {
+ #topwrapper {
width: 100%;
// border: 1px solid red;
overflow: hidden; /* will contain if #first is longer than #second */
}
+
+ #wrapper {
+ width: 1200px;
+ // border: 1px solid red;
+ overflow: hidden; /* will contain if #first is longer than #second */
+ }
+
+ #options {
+ float: right;
+ margin: 20px;
+ max-width: 280px;
+ overflow: hidden; /* if you don't want #second to wrap below #first */
+ }
+
#first {
margin-right: 20px;
float: left;
+ overflow: hidden; /* if you don't want #second to wrap below #first */
// border: 1px solid green;
}
+ #tabs {
+ margin-right: 20px;
+ overflow: hidden; /* if you don't want #second to wrap below #first */
+ }
+
+ #embed {
+ max-width: 802px;
+ border: 1px solid #333;
+ }
+
#second {
- border: 1px solid #333;
+// border: 1px solid #333;
overflow: hidden; /* if you don't want #second to wrap below #first */
}
#som2 svg {
@@ -171,27 +245,27 @@
var labeler;
function applyJitter() {
- svg.selectAll('.tsnet')
- .data(labels)
- .transition()
- .duration(50)
- .attr("transform", function(d, i) {
- T.Y[i][0] = (d.x - mapWidth/2 - tx)/ss/20;
- T.Y[i][1] = (d.y - mapHeight/2 - ty)/ss/20;
- return "translate(" +
- (d.x) + "," +
- (d.y) + ")";
- });
+ svg.selectAll('.tsnet')
+ .data(labels)
+ .transition()
+ .duration(50)
+ .attr("transform", function(d, i) {
+ T.Y[i][0] = (d.x - mapWidth/2 - tx)/ss/20;
+ T.Y[i][1] = (d.y - mapHeight/2 - ty)/ss/20;
+ return "translate(" +
+ (d.x) + "," +
+ (d.y) + ")";
+ });
}
function updateEmbedding() {
- var Y = T.getSolution();
- svg.selectAll('.tsnet')
- .data(data.words)
- .attr("transform", function(d, i) {
- return "translate(" +
- ((Y[i][0]*20*ss + tx) + mapWidth/2) + "," +
- ((Y[i][1]*20*ss + ty) + mapHeight/2) + ")"; });
+ var Y = T.getSolution();
+ svg.selectAll('.tsnet')
+ .data(data.words)
+ .attr("transform", function(d, i) {
+ return "translate(" +
+ ((Y[i][0]*20*ss + tx) + mapWidth/2) + "," +
+ ((Y[i][1]*20*ss + ty) + mapHeight/2) + ")"; });
}
var svg;
@@ -200,58 +274,58 @@
var text;
function drawEmbedding() {
- $("#embed").empty();
- var div = d3.select("#embed");
-
- // get min and max in each column of Y
- var Y = T.Y;
-
- svg = div.append("svg") // svg is global
- .attr("width", mapWidth)
- .attr("height", mapHeight);
-
- var g = svg.selectAll(".b")
- .data(data.words)
- .enter().append("g")
- .attr("class", "tsnet");
-
- g.append("a")
- .attr("xlink:href", function(word) {
- return (data.urlprefix+word);})
- .attr("class", function(d, i) {
- var res="";
- if(data.marked[i]) {
- res="marked ";
- }
- if(data.target.indexOf(" "+d+" ") >= 0) {
- return res+"target";
- } else if(data.ranks[i] < data.mergedEnd) {
- return res+"merged";
- } else {
- return res;
- }
- })
- .attr("title", function(d, i) {
- if(data.mergedEnd > 0) {
- if(data.ranks[i] >= data.mergedEnd) {
- return "rank: "+i +" "+"freq. rank: "+(data.ranks[i]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
- } else {
- return "rank: "+i +" "+"freq. rank: "+data.ranks[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " (merged vocab)";
- }
- } else {
- return "rank: "+i +" "+"freq. rank: "+data.ranks[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
- }
- })
- .append("text")
- .attr("text-anchor", "top")
- .attr("font-size", 12)
- .text(function(d) { return d; });
-
- var zoomListener = d3.behavior.zoom()
- .scaleExtent([0.1, 10])
- .center([0,0])
- .on("zoom", zoomHandler);
- zoomListener(svg);
+ $("#embed").empty();
+ var div = d3.select("#embed");
+
+ // get min and max in each column of Y
+ var Y = T.Y;
+
+ svg = div.append("svg") // svg is global
+ .attr("width", mapWidth)
+ .attr("height", mapHeight);
+
+ var g = svg.selectAll(".b")
+ .data(data.words)
+ .enter().append("g")
+ .attr("class", "tsnet");
+
+ g.append("a")
+ .attr("xlink:href", function(word) {
+ return (data.urlprefix+word);})
+ .attr("class", function(d, i) {
+ var res="";
+ if(data.marked[i]) {
+ res="marked ";
+ }
+ if(data.target.indexOf(" "+d+" ") >= 0) {
+ return res+"target";
+ } else if(data.ranks[i] < data.mergedEnd) {
+ return res+"merged";
+ } else {
+ return res;
+ }
+ })
+ .attr("title", function(d, i) {
+ if(data.mergedEnd > 0) {
+ if(data.ranks[i] >= data.mergedEnd) {
+ return "rank: "+i +" "+"freq. rank: "+(data.ranks[i]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+ } else {
+ return "rank: "+i +" "+"freq. rank: "+data.ranks[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " (merged vocab)";
+ }
+ } else {
+ return "rank: "+i +" "+"freq. rank: "+data.ranks[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+ }
+ })
+ .append("text")
+ .attr("text-anchor", "top")
+ .attr("font-size", 12)
+ .text(function(d) { return d; });
+
+ var zoomListener = d3.behavior.zoom()
+ .scaleExtent([0.1, 10])
+ .center([0,0])
+ .on("zoom", zoomHandler);
+ zoomListener(svg);
}
var tx=0, ty=0;
@@ -259,101 +333,101 @@
var iter_id=-1;
function zoomHandler() {
- tx = d3.event.translate[0];
- ty = d3.event.translate[1];
- ss = d3.event.scale;
- updateEmbedding();
+ tx = d3.event.translate[0];
+ ty = d3.event.translate[1];
+ ss = d3.event.scale;
+ updateEmbedding();
}
var stepnum = 0;
function stopStep() {
- clearInterval(iter_id);
- text = svg.selectAll("text");
-
- // jitter function needs different data and co-ordinate representation
- labels = d3.range(data.words.length).map(function(i) {
- var x = (T.Y[i][0]*20*ss + tx) + mapWidth/2;
- var y = (T.Y[i][1]*20*ss + ty) + mapHeight/2;
- anchor_array.push({x: x, y: y, r: jitterRadius});
- return {
- x: x,
- y: y,
- name: data.words[i]
- };
- });
-
- // get the actual label bounding boxes for the jitter function
- var index = 0;
- text.each(function() {
- labels[index].width = this.getBBox().width;
- labels[index].height = this.getBBox().height;
- index += 1;
- });
+ clearInterval(iter_id);
+ text = svg.selectAll("text");
+
+ // jitter function needs different data and co-ordinate representation
+ labels = d3.range(data.words.length).map(function(i) {
+ var x = (T.Y[i][0]*20*ss + tx) + mapWidth/2;
+ var y = (T.Y[i][1]*20*ss + ty) + mapHeight/2;
+ anchor_array.push({x: x, y: y, r: jitterRadius});
+ return {
+ x: x,
+ y: y,
+ name: data.words[i]
+ };
+ });
+
+ // get the actual label bounding boxes for the jitter function
+ var index = 0;
+ text.each(function() {
+ labels[index].width = this.getBBox().width;
+ labels[index].height = this.getBBox().height;
+ index += 1;
+ });
-
- // setTimeout(updateEmbedding, 1);
- // setTimeout(
- labeler = d3.labeler()
- .label(labels)
- .anchor(anchor_array)
- .width(mapWidth)
- .height(mapHeight)
- .update(applyJitter);
- // .start(1000);
+
+ // setTimeout(updateEmbedding, 1);
+ // setTimeout(
+ labeler = d3.labeler()
+ .label(labels)
+ .anchor(anchor_array)
+ .width(mapWidth)
+ .height(mapHeight)
+ .update(applyJitter);
+ // .start(1000);
- iter_id = setInterval(jitterStep, 1);
+ iter_id = setInterval(jitterStep, 1);
}
var jitter_i=0;
function jitterStep() {
- if(jitter_i++ > 100) {
- clearInterval(iter_id);
- } else {
- labeler.start2(10);
- applyJitter();
- }
+ if(jitter_i++ > 100) {
+ clearInterval(iter_id);
+ } else {
+ labeler.start2(10);
+ applyJitter();
+ }
}
var last_cost=1000;
function step() {
- var i = T.iter;
-
- if(i > <%= $no_iterations %>) {
- stopStep();
- } else {
- var cost = Math.round(T.step() * 100000) / 100000; // do a few steps
- $("#cost").html("tsne iteration " + i + ", cost: " + cost.toFixed(5));
- if(i % 250 == 0 && cost >= last_cost) {
- stopStep();
- } else {
- last_cost = cost;
- updateEmbedding();
- }
- }
+ var i = T.iter;
+
+ if(i > <%= $no_iterations %>) {
+ stopStep();
+ } else {
+ var cost = Math.round(T.step() * 100000) / 100000; // do a few steps
+ $("#cost").html("tsne iteration " + i + ", cost: " + cost.toFixed(5));
+ if(i % 250 == 0 && cost >= last_cost) {
+ stopStep();
+ } else {
+ last_cost = cost;
+ updateEmbedding();
+ }
+ }
}
function showMap(j) {
- data=j;
- T.iter=0;
- T.initDataRaw(data.vecs); // init embedding
- drawEmbedding(); // draw initial embedding
-
- if(iter_id >= 0) {
- clearInterval(iter_id);
- }
- //T.debugGrad();
- iter_id = setInterval(step, 1);
- if(<%= $show_som %>) {
- makeSOM(j, <%= $no_iterations %>);
- }
+ data=j;
+ T.iter=0;
+ T.initDataRaw(data.vecs); // init embedding
+ drawEmbedding(); // draw initial embedding
+
+ if(iter_id >= 0) {
+ clearInterval(iter_id);
+ }
+ //T.debugGrad();
+ iter_id = setInterval(step, 1);
+ if(<%= $show_som %>) {
+ makeSOM(j, <%= $no_iterations %>);
+ }
}
var queryword;
function onload() {
- queryword = document.getElementById('word');
+ queryword = document.getElementById('word');
}
function queryKorAP() {
@@ -366,175 +440,189 @@
</script>
</head>
<body onload="onload()">
- <form method="GET">
- word(s):
- <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.">
- cut-off:
- <input id="cutoff" type="text" name="cutoff" size="10" value="<%= $cutoff %>" title="Only consider the most frequent x word forms.">
- dedupe <input type="checkbox" name="dedupe" value="1" <%= ($dedupe ? "checked" : "") %> title="radically filter out any near-duplicates">
- % if($mergedEnd > 0) {
- 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.">
- % }
- max. neighbours: <input type="text" size="4" name="n" value="<%= $no_nbs %>">
- max. iterations: <input type="text" name="N" size="4" value="<%= $no_iterations %>">
- SOM <input type="checkbox" name="som" value="1" <%= ($show_som ? "checked" : "") %>>
- % if($collocators) {
- <span> </span>window/sort
- <select name="sort">
- <option value="0" <%= ($sort!=1 && $sort!=2? "selected":"") %>>auto focus</option>
- <option value="1" <%= ($sort==1? "selected":"") %>>any single position</option>
- <option value="2" <%= ($sort==2? "selected":"") %>>whole window</option>
- </select>
- % }
- <span> </span><input type="submit" value="Show">
- <span> </span><input type="button" value="→ KorAP" onclick="queryKorAP();" title="query word with KorAP"/>
- </form>
- <br>
- <div id="tabs">
- <ul>
- <li><a href="#tabs-1">Semantics</a></li>
- <li><a href="#tabs-2">Syntagmatic (collocators)</a></li>
- </ul>
- <div id="tabs-1">
- <div id="mytable"/>
- % if($lists && (@$lists) > 0 && (@$lists)[0]) {
- <div id="wrapper">
- <div id="first" style="width:220px">
- <table class="display compact nowrap" id="firsttable">
- <thead>
- <tr>
- <th align="right">#</th><th align="right">cos</th><th align="left">paradigmatic</th>
- </tr>
- </thead>
- <tbody>
- % my $j=0; my @words; my @vecs; my @ranks; my @marked;
- % for my $list (@$lists) {
- % my $i=0; while($list) {
- % my $item = (@$list)[$i];
- % my $c = ($collocators? (@$collocators)[$i] : 0);
- % last if(!$c && !$item);
- <tr>
- <td align="right">
- <%= ++$i %>.
- </td>
- % if($item) {
- % if(!grep{$_ eq $item->{word}} @words) {
- % push @vecs, $item->{vector};
- % push @words, $item->{word};
- % push @ranks, $item->{rank};
- % push @marked, ($marked->{$item->{word}}? 1 : 0);
- % }
- <td align="right">
- <%= sprintf("%.3f", $item->{dist}) %>
- </td>
- <td>
- % my $class = ($marked->{$item->{word}}? "marked " : "");
- % my $r = $item->{rank};
- % if($r < $mergedEnd) {
- % $class .= "merged";
- % $r .= " (merged vocab)";
- % } elsif($mergedEnd!=0 && $r > $mergedEnd) {
- % $r -= $mergedEnd;
- % }
- <a class="<%= $class =%>"
- title="freq. rank: <%= $r =%>"
- href="<%= url_with->query([word => $item->{word}]) =%>">
- <%= $item->{word} =%>
- </a>
- </td>
- % } else {
- <td colspan="2"/>
- % }
- </tr>
- % last if($i >= 100);
- % }
- % }
- </tbody>
- </table>
-</div>
- <script>
- % use Mojo::ByteStream 'b';
- % my $urlprefix = url_with->query([word=>'']);
- $(window).load(function() {
- showMap(<%= b(Mojo::JSON::to_json({target => " $word ", mergedEnd=> $mergedEnd, words => \@words, vecs => \@vecs, ranks => \@ranks, marked => \@marked, urlprefix => $urlprefix})); %>);
- });
- </script>
- % } else { # ($word && $word !~ /^\s*$/)
- <div id="wrapper">
- <p>
- ERROR: "<%= $word %>" not found in vocabluary.
- </p>
- </div>
- % }
- <div id="second" style="width:800px; height:800px; font-family: arial;">
- <div id="embed">
+ <div id="topwrapper">
+ <div id="options" class="widget">
+ <form>
+ <input id="word" type="text" name="word" size="20" placeholder="Word(s) to be searched" 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."/>
+ <input type="submit" value="SEARCH">
+ <fieldset>
+ <legend>Settings</legend>
+ <div class="controlgroup-vertical">
+ <label for="cutoff">cut-off</label>
+ <input id="cutoff" type="text" name="cutoff" size="10" value="<%= $cutoff %>" title="Only consider the most frequent x word forms.">
+ <label for="dedupe">dedupe</label>
+ <input id="dedupe" type="checkbox" name="dedupe" value="1" <%= ($dedupe ? "checked" : "") %> title="radically filter out any near-duplicates">
+ % if($mergedEnd > 0) {
+ <label for="sbf">backw.</label>
+ <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.">
+ % }
+ <label for="neighbours">max. neighbours:</label>
+ <input id="neighbours" size="4" name="n" value="<%= $no_nbs %>">
+ <label for="iterations">max. iterations</label>
+ <input id="iterations" name="N" size="4" value="<%= $no_iterations %>">
+ <label for="dosom">SOM</label>
+ <input id="dosom" type="checkbox" name="som" value="1" <%= ($show_som ? "checked" : "") %>>
+ % if($collocators) {
+ <label for="sortby">window/sort</label>
+ <select id="sortby" name="sort">
+ <option value="0" <%= ($sort!=1 && $sort!=2? "selected":"") %>>auto focus</option>
+ <option value="1" <%= ($sort==1? "selected":"") %>>any single position</option>
+ <option value="2" <%= ($sort==2? "selected":"") %>>whole window</option>
+ </select>
+ % }
+ <span> </span><input type="button" value="→ KorAP" onclick="queryKorAP();" title="query word with KorAP"/>
+ <br>
+ </div>
+ </fieldset>
+ </form>
</div>
+ <div id="tabs">
+ <ul>
+ <li><a href="#tabs-1">Semantics</a></li>
+ <li><a href="#tabs-2">Syntagmatic (collocators)</a></li>
+ </ul>
+ <div id="tabs-1">
+ % if($lists && (@$lists) > 0 && (@$lists)[0]) {
+ <div id="wrapper">
+ <div id="first" style="width:220px">
+ <table class="display compact nowrap" id="firsttable">
+ <thead>
+ <tr>
+ <th align="right">#</th><th align="right">cos</th><th align="left">paradigmatic</th>
+ </tr>
+ </thead>
+ <tbody>
+ % my $j=0; my @words; my @vecs; my @ranks; my @marked;
+ % for my $list (@$lists) {
+ % my $i=0; while($list) {
+ % my $item = (@$list)[$i];
+ % my $c = ($collocators? (@$collocators)[$i] : 0);
+ % last if(!$c && !$item);
+ <tr>
+ <td align="right">
+ <%= ++$i %>.
+ </td>
+ % if($item) {
+ % if(!grep{$_ eq $item->{word}} @words) {
+ % push @vecs, $item->{vector};
+ % push @words, $item->{word};
+ % push @ranks, $item->{rank};
+ % push @marked, ($marked->{$item->{word}}? 1 : 0);
+ % }
+ <td align="right">
+ <%= sprintf("%.3f", $item->{dist}) %>
+ </td>
+ <td>
+ % my $class = ($marked->{$item->{word}}? "marked " : "");
+ % my $r = $item->{rank};
+ % if($r < $mergedEnd) {
+ % $class .= "merged";
+ % $r .= " (merged vocab)";
+ % } elsif($mergedEnd!=0 && $r > $mergedEnd) {
+ % $r -= $mergedEnd;
+ % }
+ <a class="<%= $class =%>"
+ title="freq. rank: <%= $r =%>"
+ href="<%= url_with->query([word => $item->{word}]) =%>">
+ <%= $item->{word} =%>
+ </a>
+ </td>
+ % } else {
+ <td colspan="2"/>
+ % }
+ </tr>
+ % last if($i >= 100);
+ % }
+ % }
+ </tbody>
+ </table>
+ </div>
+ <script>
+ % use Mojo::ByteStream 'b';
+ % my $urlprefix = url_with->query([word=>'']);
+ $(window).load(function() {
+ showMap(<%= b(Mojo::JSON::to_json({target => " $word ", mergedEnd=> $mergedEnd, words => \@words, vecs => \@vecs, ranks => \@ranks, marked => \@marked, urlprefix => $urlprefix})); %>);
+ });
+ </script>
+ % } else {
+ <div id="wrapper">
+ <p>
+ ERROR: "<%= $word %>" not found in vocabluary.
+ </p>
+ </div>
+ % }
+ <div id="second">
+ <div id="embed">
+ </div>
+ <div id="cost">
+ </div>
+ % if($show_som) {
+ <div id="som2">
+ </div>
+ <div id="sominfo1"><span id="somcolor1"> </span> <span id="somword1"> </span> <span id="somcolor2"> </span> <span id="somword2"> </span> <span id="somcolor3"> </span></div>
+ <div id="sominfo">SOM iteration <span id="iterations">0</span></div>
+ % }
+ </div>
+ </div>
+ </div>
+ <div id="tabs-2">
+ <div id="second" style="width:500px">
+ <table class="display compact nowrap" id="secondtable">
+ <thead>
+ <tr>
+ % if($collocators) {
+ <th>#</th>
+ <th align="right" title="The window around the target word that is considered for summation.">w'</th>
+ <th align="right" title="Raw (max.) activation of the collocator in the output layers.">a</th>
+ <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>
+ <th align="right">Σp/|w|</th>
+ <th title="c" align="left">collocator</th>
+ % }
+ </tr>
+ </thead>
+ <tbody>
+ % for(my $i=0; $i < 100; $i++) {
+ % my $c = ($collocators? (@$collocators)[$i] : 0);
+ <tr>
+ <td align="right">
+ <%= $i %>
+ </td>
+ % if($c) {
+ <td align="right">
+ <span class="mono"><%= bitvec2window( $c->{pos} ) %></span>
+ </td>
+ <td align="right">
+ <%= sprintf("%.3f", $c->{dist}) %>
+ </td>
+ <td align="right">
+ <%= sprintf("%.3e", $c->{norm}) %>
+ </td>
+ <td align="right">
+ <%= sprintf("%.3e", $c->{sum}) %>
+ </td>
+ <td align="left">
+ <a onclick="<%= sprintf("queryKorAPCII('%s /w5 %s')", $c->{word}, $word) =%>"
+ title="freq. rank: <%= $c->{rank} =%>">
+ <%= $c->{word} %>
+ </a>
+ </td>
+ % } else {
+ <td colspan="5"/>
+ % }
+ </tr>
+ % }
+ </tbody>
+ </table>
+ </div> <!-- - tab2 -->
+ </div> <!-- tabs -->
+ </div> <!-- topwrapper -->
+ <div style="clear: both;"></div>
</div>
-</div>
- <div id="cost"></div>
-</div>
-</div>
-<div id="tabs-2">
- <div id="second" style="width:500px">
- <table class="display compact nowrap" id="secondtable">
- <thead>
- <tr>
- % if($collocators) {
- <th>#</th>
- <th align="right" title="The window around the target word that is considered for summation.">w'</th>
- <th align="right" title="Raw (max.) activation of the collocator in the output layers.">a</th>
- <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>
- <th align="right">Σp/|w|</th>
- <th title="c" align="left">collocator</th>
- % }
- </tr>
- </thead>
- <tbody>
- % for(my $i=0; $i < 100; $i++) {
- % my $c = ($collocators? (@$collocators)[$i] : 0);
- <tr>
- <td align="right">
- <%= ++$i %>.
- </td>
- % if($c) {
- <td align="right">
- <span class="mono"><%= bitvec2window($c->{pos}) %></span>
- </td>
- <td align="right">
- <%= sprintf("%.3f", $c->{dist}) %>
- </td>
- <td align="right">
- <%= sprintf("%.3e", $c->{norm}) %>
- </td>
- <td align="right">
- <%= sprintf("%.3e", $c->{sum}) %>
- </td>
- <td align="left">
- <a onclick="<%= sprintf("queryKorAPCII('%s /w5 %s')", $c->{word}, $word) =%>"
- title="freq. rank: <%= $c->{rank} =%>">
- <%= $c->{word} %>
- </td>
- % } else {
- <td colspan="5"/>
- % }
- </tr>
- % }
- </tbody>
- </table>
-</div>
-</div>
-</div>
- % if($show_som) {
- <div id="som2">
- </div>
- <div id="sominfo1"><span id="somcolor1"> </span> <span id="somword1"> </span> <span id="somcolor2"> </span> <span id="somword2"> </span> <span id="somcolor3"> </span></div>
- <div id="sominfo">SOM iteration <span id="iterations">0</span></div>
+ % if($training_args) {
+ <p>
+ Word vector model trained with <a href="https://code.google.com/p/word2vec/">word2vec</a> using the following parameters: <pre><%= $training_args %></pre>
+ </p>
% }
- </div>
- % if($training_args) {
- <p>
- Word vector model trained with <a href="https://code.google.com/p/word2vec/">word2vec</a> using the following parameters: <pre><%= $training_args %></pre>
- </p>
- % }
- </body>
+ </body>
</html>