|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta property="og:title" content="ACL 🌍🙌🌏"> |
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" |
|
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> |
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" |
|
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" |
|
crossorigin="anonymous"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script> |
|
|
|
<script> |
|
$SCRIPT_ROOT = {{ request.script_root|tojson }}; |
|
</script> |
|
<title>ACL 🌍🙌🌏 Demo</title> |
|
</head> |
|
<body> |
|
|
|
<div style="display: flex; align-items: center; gap: 10px;"> |
|
<h2>ACL</h2> |
|
<img src="https://aclanthology.org/images/acl-logo.svg" alt="acl logo" width="50px"> |
|
<h2>Demo</h2> |
|
</div> |
|
<br/> |
|
|
|
<div class="container text-center"> |
|
{% for message in get_flashed_messages() %} |
|
<div class="alert">{{ message }}</div> |
|
{% endfor %} |
|
|
|
<form action="/search" method="post"> |
|
<div class="row-cols-3"> |
|
<div class="input-group mb-3"> |
|
<input type="text" class="form-control" placeholder="Enter a Question" aria-label="Question" name="q" |
|
aria-describedby="button-addon2" value="{{ query if query else '' }}"> |
|
<button class="btn btn-outline-secondary" type="submit" id="button-addon2"><i class="bi bi-search"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</form> |
|
|
|
{% if search_results %} |
|
<div class="row"> |
|
<table class="table"> |
|
<thead> |
|
<tr> |
|
<th scope="col">#</th> |
|
<th scope="col">Score</th> |
|
<th scope="col">Passage ID</th> |
|
<th scope="col">Content</th> |
|
</tr> |
|
</thead> |
|
<tbody class="table-group-divider"> |
|
{% for res in search_results %} |
|
<tr class="{{ 'table-secondary' if res['rank'] % 2 else 'table-light' }}"> |
|
<th scope="row">{{ res["rank"] }}</th> |
|
<td>{{ "%.2f"|format(res["score"]) }}</td> |
|
<td>{{ res["docid"] }}</td> |
|
|
|
<td style="word-wrap: break-word;min-width: 600px;max-width: 600px;" |
|
class="text-{{ 'end' if lang in ('ar', 'fa') else 'start' }}"> |
|
<small>{{ res["doc"] }}</small> |
|
</td> |
|
</tr> |
|
{% endfor %} |
|
</tbody> |
|
</table> |
|
</div> |
|
{% endif %} |
|
</div> |
|
</body> |
|
</html> |
