Skip to content

Commit a7350e1

Browse files
committed
feat(*): added missing languages, and a fancy example
1 parent 11e1f8f commit a7350e1

File tree

6 files changed

+542
-0
lines changed

6 files changed

+542
-0
lines changed

examples/browser/tree/d3-selection-multi.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

examples/browser/tree/d3.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

examples/browser/tree/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>CoreNLP Workshop</title>
4+
<link href="tree.css" media="all" rel="stylesheet" />
5+
<body>
6+
<h1>CoreNLP <small>Sentence Tree Inpsector</small></h1>
7+
<p>
8+
<label>
9+
<small>choose your language</small>
10+
<select id="lang" name="language">
11+
<option value="es" selected>Spanish</option>
12+
<option value="en">English</option>
13+
<option value="fr">French</option>
14+
<option value="de">German</option>
15+
<option value="zh">Chinese</option>
16+
<option value="ar">Arabic</option>
17+
</select>
18+
</label>
19+
<small>/ if you're using Google Chrome, allow audio input so you can speak and see.</small>
20+
</p>
21+
<label>Sentence: <input type="text" id="input-sentence" onchange="loadSentenceTree(this.value)"></label>
22+
<hr />
23+
<div id="canvas">loading...</div>
24+
<div class="info-container">
25+
<div id="info"></div>
26+
<small>This is an example of <a target="_blank" href="https://github.com/gerardobort/node-corenlp">NodeJS Corenlp</a> library. It uses <code>http://corenlp.run/</code> as API server for annotations.</small>
27+
</div>
28+
<script src="../corenlp.min.js"></script>
29+
<script src="d3.min.js"></script>
30+
<script src="d3-selection-multi.min.js"></script>
31+
<script src="tree.js"></script>
32+
<script>
33+
loadSentenceTree();
34+
focusInput();
35+
initializeSpeech2Text()
36+
</script>
37+
</body>
38+
</html>

examples/browser/tree/tree.css

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
body {
2+
font-weight: 300;
3+
font-family: 'Helvetica Neue';
4+
}
5+
6+
label {
7+
font-size: 22px;
8+
}
9+
10+
input {
11+
width: 50%;
12+
font-size: 22px;
13+
font-weight: 300;
14+
padding: 6px 12px;
15+
border: 0;
16+
border-bottom: 1px solid #ededed;
17+
}
18+
19+
.node.hide rect {
20+
fill-opacity: .01;
21+
}
22+
23+
.node.hide text {
24+
fill-opacity: .03;
25+
}
26+
27+
.node.ROOT rect {
28+
fill: #aaa;
29+
}
30+
31+
.node.S rect {
32+
fill: #bbb;
33+
}
34+
35+
.node text {
36+
fill: #000;
37+
font-weight: 300;
38+
font-family: 'Helvetica Neue';
39+
cursor: pointer;
40+
text-anchor: middle;
41+
font-size: 22px;
42+
}
43+
44+
.node text.highlighted {
45+
font-weight: 500;
46+
}
47+
48+
.node rect {
49+
fill: #ededed;
50+
fill.opacity: .9;
51+
}
52+
53+
.node rect.hover {
54+
fill: #fee;
55+
}
56+
57+
.node rect.expandable {
58+
fill: #777;
59+
}
60+
61+
.node rect.token {
62+
fill: lightsteelblue;
63+
fill-opacity: .3;
64+
}
65+
66+
.link {
67+
fill: none;
68+
stroke: #ccc;
69+
stroke-width: 2px;
70+
}
71+
72+
.link-tokens {
73+
fill: none;
74+
stroke: #cac;
75+
stroke-opacity: 0.6;
76+
stroke-width: 24px;
77+
}
78+
79+
.link-govs {
80+
fill: none;
81+
stroke: #acc;
82+
stroke-opacity: 0.8;
83+
stroke-width: 4px;
84+
}
85+
86+
.label-govs {
87+
fill: #caa;
88+
text-anchor: middle;
89+
font: 300 16px 'Helvetica Neue';
90+
}
91+
92+
.info-container {
93+
position: fixed;
94+
bottom: 0;
95+
left: 0;
96+
width: 100%;
97+
padding: 20px;
98+
color: #555;
99+
}
100+
101+
.info-container table {
102+
min-width: 800px;
103+
opacity: 0.8;
104+
pointer-events: none;
105+
padding: 0 0 20px;
106+
}
107+
108+
.info-container table th {
109+
text-align: left;
110+
}

0 commit comments

Comments
 (0)