run.html 14.4 KB
Newer Older
achemard's avatar
achemard committed
1
2
3
4
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
Bruno Guillaume's avatar
Bruno Guillaume committed
5
6
7
8
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

achemard's avatar
   
achemard committed
9
<head>
Bruno Guillaume's avatar
Bruno Guillaume committed
10
11
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
12

Bruno Guillaume's avatar
Bruno Guillaume committed
13
	<title>Grew-match</title>
14

Bruno Guillaume's avatar
Bruno Guillaume committed
15
16
17
18
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/bootstrap.min.css">
Bruno Guillaume's avatar
Bruno Guillaume committed
19

20
21
22
23
24
25
26
27
28
	<link rel="stylesheet" href="vendor/bootflat.css">

	<script src="vendor/jquery-2.1.1.min.js"></script>

	<!-- tooltipter -->
	<link rel="stylesheet" href="vendor/tooltipter/tooltipster.css">
	<link rel="stylesheet" href="vendor/tooltipter/tooltipster-noir.css">
	<script src="vendor/tooltipter/jquery.tooltipster.min.js"></script>

Bruno Guillaume's avatar
Bruno Guillaume committed
29
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
30
31
	<script src="vendor/bootstrap/bootstrap.min.js"></script>

Bruno Guillaume's avatar
Bruno Guillaume committed
32
	<script src="vendor/sweetalert2.all.min.js"></script>
33
34

	<!-- codemirror and Grew specific syntax -->
Bruno Guillaume's avatar
Bruno Guillaume committed
35
36
37
	<script src="js/vendor/codemirror.js"></script>
	<link rel="stylesheet" href="js/vendor/codemirror.css">
	<script src="js/vendor/grew.js"></script>
Bruno Guillaume's avatar
Bruno Guillaume committed
38
39
40
41
42
43

	<!-- Audio related CSS and JS -->
	<link rel="stylesheet" href="vendor/audio/stmt_screen_v2.css">
	<script src="vendor/audio/read-along.js"></script>
	<script src="vendor/audio/read-along-main.js"></script>

44
45
	<!-- Grew-match specific CSS and JS -->
	<script src="js/main.js"></script>
Bruno Guillaume's avatar
Bruno Guillaume committed
46
47
48
49
50
51
52
53
54
55
56
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/sidebar.css">
	<link rel="stylesheet" href="css/tooltip.css">

	<!-- favicons -->
	<link rel="apple-touch-icon" sizes="180x180" href="icon/apple-touch-icon.png?v=2">
	<link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png?v=2">
	<link rel="icon" type="image/png" sizes="16x16" href="icon/favicon-16x16.png?v=2">
	<link rel="manifest" href="icon/manifest.json?v=2">
	<link rel="mask-icon" href="icon/safari-pinned-tab.svg?v=2" color="#5bbad5">
	<link rel="shortcut icon" href="icon/favicon.ico?v=2">
57

58
	<!-- Toggle button for UD/EUD -->
59
60
	<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
	<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
Bruno Guillaume's avatar
Bruno Guillaume committed
61
62
63
64
65

	<script src="https://cdn.jsdelivr.net/remarkable/1.7.1/remarkable.min.js"></script>
	<script>
		var md = new Remarkable();
	</script>
achemard's avatar
   
achemard committed
66
</head>
bguillaum's avatar
bguillaum committed
67

achemard's avatar
   
achemard committed
68
<body>
Bruno Guillaume's avatar
Bruno Guillaume committed
69
70
71
72
73
74
75
76
77
	<!-- Top Navbar -->
	<nav id="navbar-grew" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<span class="navbar-brand" id="title-grew">Grew-match</span>
				<ul class="nav navbar-nav groups">
					<li class="group" id="top-tuto"><a class="navbar-brand" id="select-tuto" href="#">Tutorial</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
Bruno Guillaume's avatar
Bruno Guillaume committed
78
79
80
					<li><a class="navbar-brand" href="https://grew.fr/grew_match/help">Help</a></li>
					<li><a class="navbar-brand" href="https://gitlab.inria.fr/grew/grew_match/issues">Report</a></li>
					<li><a class="navbar-brand" href="https://grew.fr">Grew website</a></li>
Bruno Guillaume's avatar
Bruno Guillaume committed
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
				</ul>
			</div>
		</div>
	</nav>

	<!-- wrapper: left menu for corpus selection -->
	<div class="wrapper" id="wrap">
		<nav id="sidebar" class="active">
			<div class="panel-group" id="accordion">
		</nav>

		<div id="grew-main" class="container-fluid">
			<div class="row">

				<!-- Main jumbotron for a primary marketing message or call to action -->
Bruno Guillaume's avatar
Bruno Guillaume committed
96
				<div class="jumbotron" id="jumbo-grew" style="margin-bottom: 0">
Bruno Guillaume's avatar
Bruno Guillaume committed
97
98
99
100
101
					<div class="container-fluid">
						<div class="row">

							<!-- Upper-left part: corpus selector, textarea, buttons -->
							<div class="col-md-8" id="console">
102
								<h4 id="warning" style="display: none;">
103
104
105
									<span id="warning-text" style="color: red"></span>
									<span href="" class="glyphicon glyphicon-question-sign tooltip-desc" id="warning-tooltip"></span>
								</h4>
Bruno Guillaume's avatar
Bruno Guillaume committed
106
107
108
109
110
								<h2 id="corpus">
									<button type="button" id="sidebarCollapse" class="btn btn-primary">
										<span id="but-text">Hide corpora list</span>
									</button>
									<span id="corpus-fixed"></span>
111
112
113
									<span id="eud-span">
										<input type="checkbox" id="eud-box" data-size="mini" checked data-toggle="toggle" data-on="EUD" data-off="UD" data-onstyle="primary" data-offstyle="primary">
									</span>
Bruno Guillaume's avatar
Bruno Guillaume committed
114
115
116
117
									<span style="font-size: 66%" id="corpus-desc"></span>
									<button type="button" id="logs" class="btn btn-danger" style="float: right; display: none;">
										Errors
									</button>
Bruno Guillaume's avatar
Bruno Guillaume committed
118
119
120
									<button type="button" id="validation" class="btn btn-primary" style="float: right; display: none;">
										Validation
									</button>
Bruno Guillaume's avatar
Bruno Guillaume committed
121
122
123
124
125
									<button type="button" id="tables" class="btn btn-primary" style="float: right;">
										Relation tables
									</button>
								</h2>
								<textarea id="pattern-input"></textarea>
126
127
128
129
130
131
132
133
								<h4 id="warning-misc" style="display: none; color: red">
									⚠️ prefixes _MISC_ and _UD_ are deprecated.
									See
									<a href="http://grew.fr/match_doc/#deprecated-misc-and-ud-prefixes">
										<button class="btn btn-primary btn-results btn-sm">doc</button>
									</a>
									for more info.
								</h4>
Bruno Guillaume's avatar
Bruno Guillaume committed
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
								<p>
									<label id="lemma-option">
										<input type="checkbox" id="lemma-box" checked> lemma
									</label>
									<label id="upos-option">
										&nbsp;&nbsp;
										<input type="checkbox" id="upos-box" checked> upos
									</label>
									<label id="xpos-option">
										&nbsp;&nbsp;
										<input type="checkbox" id="xpos-box"> xpos
									</label>
									<label>
										&nbsp;&nbsp;
										<input type="checkbox" id="features-box" checked> features </input>
									</label>
Bruno Guillaume's avatar
Bruno Guillaume committed
150
									<label>
Bruno Guillaume's avatar
Bruno Guillaume committed
151
										&nbsp;&nbsp;
Bruno Guillaume's avatar
Bruno Guillaume committed
152
										<input type="checkbox" id="tf-wf-box"> textform/wordform </input>
153
										<span href="" class="glyphicon glyphicon-question-sign tooltip-desc" id="tf-wf-tooltip"></span>
Bruno Guillaume's avatar
Bruno Guillaume committed
154
155
156
157
158
159
160
161
162
163
164
165
166
167
									</label>
									<label>
										&nbsp;&nbsp;
										sentences order:
									</label>
									<select id="sentences-order">
										<option value="init">initial</option>
										<option value="length">by length</option>
										<option value="shuffle">shuffle</option>
									</select>

									<label>
										&nbsp;&nbsp;
										<input type="checkbox" id="context-box"> context
168
									</label>
Bruno Guillaume's avatar
Bruno Guillaume committed
169
170
								</p>
								<p>
171
									<button class="btn btn-primary" id="submit-pattern" onclick="javascript:search_pattern()" style="margin-right:10px">Search</button>
Bruno Guillaume's avatar
Bruno Guillaume committed
172
									<button class="btn btn-primary tooltip-desc" id="save-button" onclick="javascript:save_pattern()" style="margin-right:10px">Save</button>
Bruno Guillaume's avatar
Bruno Guillaume committed
173
									<button class="btn btn-primary tooltip-desc" id="export-button" onclick="javascript:run_export()" style="margin-right:10px">Export</button>
174
175
176
177
178
									<label>
										<input type="checkbox" id="cluster-box">Clustering</input>
										<span style="display: none;" id="cluster-span">
											key: <input type="entry" id="cluster-key" />
										</span>
Bruno Guillaume's avatar
Bruno Guillaume committed
179
									</label>
180

Bruno Guillaume's avatar
Bruno Guillaume committed
181
182
								</p>
								<p>
Bruno Guillaume's avatar
Bruno Guillaume committed
183
									<span id='custom-display'>Your pattern URL:
Bruno Guillaume's avatar
Bruno Guillaume committed
184
185
186
187
188
189
190
191
192
193
194
195
196
197
										<span id="custom-url"></span>
									</span>
								</p>
							</div>

							<!-- Upper-right part: navbar Snippets/Examples -->
							<div class="col-md-4">
								<span id="right-pane"></span> <!-- Dynamically loaded code, depending of the corpus -->
							</div>
						</div>
					</div>
				</div>
			</div>

Bruno Guillaume's avatar
Bruno Guillaume committed
198
			<!-- Middle part: clusters buttons -->
Bruno Guillaume's avatar
Bruno Guillaume committed
199
			<div class="row">
Bruno Guillaume's avatar
Bruno Guillaume committed
200
				<div class="jumbotron" id="jumbo-clust">
Bruno Guillaume's avatar
Bruno Guillaume committed
201
202
					<div class="container-fluid" id="cluster-block">
						<h3 id="progress-txt"></h3>
Bruno Guillaume's avatar
Bruno Guillaume committed
203
						<div class="row" id="cluster-buttons">
Bruno Guillaume's avatar
Bruno Guillaume committed
204
205
206
207
208
						</div>
					</div>
				</div>
			</div>

Bruno Guillaume's avatar
Bruno Guillaume committed
209
210
			<!-- Lower part: Display the results -->
			<div class="row">
Bruno Guillaume's avatar
Bruno Guillaume committed
211
				<div class="container-fluid" id="results-block">
Bruno Guillaume's avatar
Bruno Guillaume committed
212
					<div class="row">
Bruno Guillaume's avatar
Bruno Guillaume committed
213
214
						<div class="col-md-3">
							<div id="results-navig">
215
								<button class="btn btn-primary btn-results" id="next-results" onclick="javascript:next_results()">More results</button>
Bruno Guillaume's avatar
Bruno Guillaume committed
216
217
218
219
220
221
								<br />
								<button class="btn btn-primary btn-results" onclick="javascript:first_svg()"></button>
								<button class="btn btn-primary btn-results" onclick="javascript:previous_svg()"></button>
								<span class="btn-results" style="font-size: 150%" id="progress-num"></span>
								<button class="btn btn-primary btn-results" onclick="javascript:next_svg()"></button>
								<button class="btn btn-primary btn-results" onclick="javascript:last_svg()"></button>
Bruno Guillaume's avatar
Bruno Guillaume committed
222
								<ul id="results-list"></ul>
Bruno Guillaume's avatar
Bruno Guillaume committed
223
224
225
							</div>
						</div>
						<div class="col-md-9">
Bruno Guillaume's avatar
Bruno Guillaume committed
226
227
228
229
230
231
232
233


							<div id="audio">
								<p class="loading">
									<em>Loading audio…</em>
								</p>
								<p class="passage-audio">
									<audio id="passage-audio" class="passage" controls>
234
										<source id="source-audio" type="audio/wav">
Bruno Guillaume's avatar
Bruno Guillaume committed
235
236
237
238
										<em class="error"><strong>Error:</strong> Your browser does not appear to support HTML5 Audio.</em>
									</audio>
								</p>
								<p class="passage-audio-unavailable" hidden>
Bruno Guillaume's avatar
Bruno Guillaume committed
239
									<em class="error"><strong>Error:</strong> You will not be able to do the read-along audio because your browser is not able to play MP3, Ogg, or WAV audio formats.</em>
Bruno Guillaume's avatar
Bruno Guillaume committed
240
241
								</p>
								<p class="playback-rate" title="Note that increaseing the reading rate will decrease accuracy of word highlights">
Bruno Guillaume's avatar
Bruno Guillaume committed
242
243
									<input id="playback-rate" type="range" min="0.5" max="2.0" value="1.0" step="0.1" disabled onchange='this.nextElementSibling.textContent = "Speech rate: " +  String(Math.round(this.valueAsNumber * 10) / 10) + "×";'>
									<output>Speech rate: 1×</output>
Bruno Guillaume's avatar
Bruno Guillaume committed
244
245
								</p>
								<p class="playback-rate-unavailable" hidden>
Bruno Guillaume's avatar
Bruno Guillaume committed
246
									<em>(It seems your browser does not support <code>HTMLMediaElement.playbackRate</code>, so you will not be able to change the speech rate.)</em>
Bruno Guillaume's avatar
Bruno Guillaume committed
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
								</p>
							</div>
							<script>
								window.addEventListener('scroll', function() {
									var audio = document.querySelector('.passage-audio');
									var audioPosition = audio.getBoundingClientRect().top;
									if (window.pageYOffset >= audioPosition) {
										audio.style.position = 'fixed';
										audio.style.right = '2%';
										audio.style.top = '10%';
										audio.style.width = '8%';
									} else {
										audio.style.position = 'static';
										audio.style.width = '100%';
									}
								});
							</script>

Bruno Guillaume's avatar
Bruno Guillaume committed
265
							<div id="display-sentence" style="display: none;">
Bruno Guillaume's avatar
Bruno Guillaume committed
266
								<div id="passage-text" class="passage">
267
268
269
270


									<div id="meta-panel" class="panel panel-default" style="margin-bottom:4px;">

Bruno Guillaume's avatar
Bruno Guillaume committed
271
										<a id="md" onclick="toggle_metadata_icon()" data-toggle="collapse" href="#meta-collapse" class="collapsed">
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
											<button class="btn btn-primary btn-sm">Metadata
												<span id="md-icon" class="glyphicon glyphicon-chevron-right"> </span>
											</button>
										</a>
										<button type="button" id="conll-button" class="btn btn-primary btn-sm tooltip-desc" onclick="javascript:one_conll()">
											CoNLL
											<span href="" class="glyphicon glyphicon-export"></span>
										</button>
										<a id="svg-link" target="_blank" href = "">
										<button type="button" class="btn btn-sm btn-primary tooltip-desc">
											SVG
											<span href="" class="glyphicon glyphicon-export"></span>
										</button>
									</a>
									</div>
Bruno Guillaume's avatar
Bruno Guillaume committed
287
288

									<div id="meta-collapse" class="panel-collapse collapse">
289
290
291
292
293
294
295
296
										<div id="metadata" class="panel-body">
										</div>
									</div>





Bruno Guillaume's avatar
Bruno Guillaume committed
297
298
									<h4 id="sentence-txt"></h4>
								</div>
Bruno Guillaume's avatar
Bruno Guillaume committed
299
							</div>
Bruno Guillaume's avatar
Bruno Guillaume committed
300

Bruno Guillaume's avatar
Bruno Guillaume committed
301
							<div id="display-svg">
Bruno Guillaume's avatar
Bruno Guillaume committed
302
303
304
305
306
307
308
309
310
								<object id="result-pic" type="image/svg+xml" class="logo"></object>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div> <!-- container -->
	</div> <!-- wrapper -->

311
312
	<!-- tooltip content -->
	<div id="warning-tip" style="display: none;">
Bruno Guillaume's avatar
Bruno Guillaume committed
313
314
315
316
317
		<p>No corpus found with the requested name, the closest one (wrt Levenshtein distance) is chosen.</p>
	</div>

	<!-- tooltip content -->
	<div id="export-tip" style="display: none;">
Bruno Guillaume's avatar
Bruno Guillaume committed
318
319
320
321
322
323
324
325
326
327
328
		<p>Export the sentence text of each occurrence like in a concordancer.</p>
	</div>

	<!-- tooltip content -->
	<div id="conll-tip" style="display: none;">
		<p>Show the CoNLL code of the current dependency tree.</p>
	</div>

	<!-- tooltip content -->
	<div id="save-tip" style="display: none;">
		<p>Build a permanent URL with the current request.</p>
329
330
	</div>

331
332
333
334
	<!-- tooltip content -->
	<div id="tf-wf-tip" style="display: none;">
		<p>Show the two special features <b>wordform</b> and <b>textform</b>.
			See
Bruno Guillaume's avatar
Bruno Guillaume committed
335
			<a href="http://grew.fr/match_doc/#additional-features-textform-and-wordform" target="_blank">
336
337
338
339
340
341
				<button class="btn btn-primary btn-results btn-sm">doc</button>
			</a>
			for more info.
		</p>
	</div>

Bruno Guillaume's avatar
Bruno Guillaume committed
342
343
344
345
346
347
348
349
350
351
352
353
354
	<!-- modal for pivot choice -->
	<div id="pivot-modal" class="modal">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<p>Chose the pivot</p>
				</div>
				<div id="pivot-list" class="modal-body" style="text-align: center; padding-bottom: 15px">
				</div>
			</div>
		</div>
	</div>
355

Bruno Guillaume's avatar
Bruno Guillaume committed
356
	<!-- modal for tsvs export -->
Bruno Guillaume's avatar
Bruno Guillaume committed
357
358
	<div id="export-modal" class="modal fade">
		<div class="modal-dialog modal-lg modal-dialog-scrollable">
Bruno Guillaume's avatar
Bruno Guillaume committed
359
360
361
362
363
364
365
366
367
368
369
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<button type="button" class="btn btn-primary" onclick="javascript:download()">Download TSV file&nbsp;&nbsp;</button>
				</div>
				<div class="modal-body">
					<div id="exportResult"></div>
				</div>
			</div>
		</div>
	</div>
Bruno Guillaume's avatar
tooltip    
Bruno Guillaume committed
370

371
372
373
374
375
376
377
378
379
380
381
	<!-- modal for conll export -->
	<div id="conllModal" class="modal">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<button type="button" class="btn btn-primary" style="width:100%" onclick="javascript:copy_conll()">Copy in clipboard</button>
				</div>
				<div class="modal-body">
					<textarea id="conllResult" rows="25" readonly="" />
					</div>
Bruno Guillaume's avatar
Bruno Guillaume committed
382
383
384
      </div>
    </div>
</div>
Bruno Guillaume's avatar
Bruno Guillaume committed
385
386


bguillaum's avatar
bguillaum committed
387
</body>
Bruno Guillaume's avatar
Bruno Guillaume committed
388
389

</html>