forked from spyysalo/annodoc
-
Notifications
You must be signed in to change notification settings - Fork 1
/
ccg-render.html
161 lines (143 loc) · 6.36 KB
/
ccg-render.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/parse/static/css/style.css">
<link rel="stylesheet" href="css/ccgvis.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="lib/local/ccgvis.js" type="text/javascript"></script>
<title>CCG Markup Renderer</title>
<script type="text/javascript">
function renderAction() {
try {
// clear containers
$('#output h2 + div,#output h3 + p + pre').html('');
$('#error').html('');
var markup = $('#sentence').val();
if ($('#chars').prop('checked')) {
markup = CCGMarkup.smartSymbols(markup);
if ($('#inputchars').prop('checked'))
$('#sentence').val(markup);
}
var parse = CCGMarkup.parseCCGMarkup(markup);
CCGMarkup.renderHTML(parse, $('#htmlvis + div'), $('input[name=wordsat]:checked', '#frmInput').val());
CCGMarkup.renderJSON(parse.toTree(), $('#json1 + p + pre'));
CCGMarkup.renderJSON(parse.toFlatList(), $('#json2 + p + pre'));
CCGMarkup.renderJSON(parse.toTable(), $('#json3 + p + pre'));
$('#output').show();
} catch (e) {
$('#error').text(e.message);
$('#output').hide();
console.log(e.stack);
}
}
</script>
</head>
<body>
<div id="content">
<script type="text/javascript">
$(function () {
$('#output').hide();
$('#chars').change(function (e) {
$('#inputchars').prop('disabled',!$('#inputchars').prop('disabled'));
});
});
</script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
<style type="text/css">
body,tbody { font-family: verdana,tahoma,helvetica,sans-serif; }
body { margin: 0px; }
#intro { max-width: 600px; margin-left: auto; margin-right: auto; }
#output { margin-left: 50px; margin-right: 50px; }
#coverimg,#spinner { text-align: center; }
#coverimg { margin-top: 50px; margin-bottom: 50px; }
h1 { text-align: center; }
form { background-color: #555; width: 100%; padding: 0.5em 0 0.5em 0; margin: 0px; }
form > div { /*width: 50%;*/ margin-left: auto; margin-right: auto; /*position: relative;*/ }
/*form > div > p { text-align: center; display: inline-block; }*/
form table { margin-left: auto; margin-right: auto; }
form table td { border: none; padding: 0; }
form #options,form #options ul { color: #eee; padding-left: 10px; list-style-type: none; font-size: 10pt; /*display: inline-block; position: absolute; width: inherit;*/ }
form #options input:disabled + label { color: #aaa; }
form #options > li { margin-bottom: 10px; }
form #options ul { padding-left: 20px; }
form #options a { color: #eee; text-decoration: none; }
form #options a:hover { color: #eee; text-decoration: underline; }
input[type=button] { width: 100%; height: 2em; font-weight: bold; font-size: 14pt; background-color: #0ae; color: #fff; }
input[type=button]:hover { background-color: #ea0; color: #fff; }
input,textarea { border: solid 1px #000; }
textarea { font-size: 12pt; }
#details { font-size: 10pt; }
footer { width: 100%; background-color: #ddd; padding: 0.5em 0 0.5em 0; color: #777; margin-top: 2em; text-align: center; font-size: 9pt; }
a { color: #0ae; }
#credits { max-width: 800px; margin-left: auto; margin-right: auto; }
#credits a { color: #777; }
#error:not(:empty) { text-align: center; border: solid 4px #c33; padding: 10px; }
#output pre { border: solid 1px #ccc; margin: 10px auto; width: 80%; height: 15em; overflow: scroll; }
</style>
<div id="intro">
<h1>CCG Markup Renderer</h1>
<p>This page produces an HTML-based display of a CCG derivation
specified with <a href="ccg-markup.html">CCG Markup</a>.
It also provides machine-readable data structures in JSON.</p>
<p>Caveat: This tool does not check the details of the derivation for well-formedness.
(E.g., it is not required to be a tree,
and no interpretation of the categories, semantics, or combinators is performed.)
</p>
</div>
<form id="frmInput" method="GET">
<div>
<table><tr><td><p>
<textarea cols="80" rows="15" id="sentence" name="sentence" placeholder="Enter a sentence's derivation in CCG Markup.">the dog bit John
the : NP/N
dog : N
bit : (S\NP)/NP
John : NP[+proper]
the dog : the > dog => NP
: T> => S/(S\NP) : !p . !y. %x. dog'(x) && p(x,y)
the dog bit : the dog B> bit => S/NP
the dog bit John : the dog bit > John => S</textarea>
<br/>
<input type="button" value="Render!" onclick="renderAction();"/>
</p></td>
<td><ul id="options">
<li><input type="checkbox" name="chars" id="chars" checked="checked"/><label for="chars">Convert symbols to Unicode</label>
<ul>
<li><input type="checkbox" name="inputchars" id="inputchars" checked="checked"/><label for="inputchars">Replace in input box</label></li>
</ul>
</li>
<li>Display words at
<input type="radio" name="wordsat" id="wordsattop" value="wordsabove" checked="checked">top</input>
<input type="radio" name="wordsat" id="wordsatbottom" value="wordsbelow">bottom</input>
</li>
</ul></td></tr></table>
</div>
</form>
<div id="error"></div>
<div id="output">
<h2 id="htmlvis">HTML Visualization</h2><div></div>
<h2 id="json">JSON</h2>
<p>Three JSON alternatives are provided. They contain equivalent information
but are structured differently.</p>
<p>Every constituent is associated with a unique index, stored under <tt>"i"</tt>.
A constituent’s <tt>"name"</tt> is the substring of the sentence that it spans.
In the second and third alternatives, constituents refer to other constituents
by index.</p>
<h3 id="json1">Tree</h3><p>This captures constituency via nesting, forming a tree structure.
It should only be used if the derivation forms a full tree over the sentence.</p><pre></pre>
<h3 id="json2">Flat List</h3><p>This structures the derivation as a list of constituents.
They are ordered according to the input markup.</p><pre></pre>
<h3 id="json3">Table</h3><p>This organizes the constituents into rows for rendering
in a table.</p><pre></pre>
</div>
</div>
</div>
<footer>
<p id="credits">
<span style="font-variant: small-caps">This page and the CCG Markup parser</a></span>
were created by <a href="http://nathan.cl/">Nathan Schneider</a>.<br/>
The <span style="font-variant: small-caps"><a href="ccg-markup.html">CCG Markup specification</a></span>
was created with <a href="http://tsarfaty.com/">Reut Tsarfaty</a>.
</p>
</footer>
</body>