|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta property="og:title" content="MIRACL πππ"> |
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> |
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> |
|
|
|
<script> |
|
$SCRIPT_ROOT = {{ request.script_root|tojson }}; |
|
|
|
$( document ).ready(function() { |
|
$("#loading").hide(); |
|
$('#language').val("{{lang}}"); |
|
}); |
|
|
|
$(function() { |
|
$('#language').on('change', function() { |
|
$.getJSON($SCRIPT_ROOT + '/lang', { |
|
new_lang: this.value, |
|
}, function(data) { |
|
$("#language").removeAttr('disabled'); |
|
$("#loading").hide(); |
|
}); |
|
|
|
$(this).attr('disabled','disabled'); |
|
$("#loading").show(); |
|
|
|
return false; |
|
}); |
|
}); |
|
</script> |
|
<title>MIRACL πππ Demo</title> |
|
</head> |
|
<body> |
|
<h2>MIRACL πππ Demo</h2> |
|
<h4>Multilingual Information Retrieval Across a Continuum of Languages</h4> |
|
|
|
<br/> |
|
|
|
<p class="lead"> |
|
<a href="http://miracl.ai/">MIRACL</a> is a multilingual dataset for ad hoc retrieval that consists of 18 different languages, collectively encompassing over three billion native speakers around the world. |
|
</p> |
|
|
|
<div class="row g-3 align-items-center"> |
|
<label class="col-auto" for="language">This demo running on the language</label> |
|
<div class="col-auto"> |
|
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="language"> |
|
<option value="ar">Arabic</option> |
|
<option value="bn">Bengali</option> |
|
<option value="en">English</option> |
|
<option value="es">Spanish</option> |
|
<option value="fa">Persian</option> |
|
<option value="fi">Finnish</option> |
|
<option value="fr">French</option> |
|
<option value="hi">Hindi</option> |
|
<option value="id">Indonesian</option> |
|
<option value="ja">Japanese</option> |
|
<option value="ko">Korean</option> |
|
<option value="ru">Russian</option> |
|
<option value="sw">Swahili</option> |
|
<option value="te">Telugu</option> |
|
<option value="th">Thai</option> |
|
<option value="zh">Chinese</option> |
|
</select> |
|
</div> |
|
<div class="col-auto"> |
|
<div class="spinner-border text-secondary" role="status" id="loading"> |
|
<span class="visually-hidden">Loading...</span> |
|
</div> |
|
</div> |
|
<div class="col-auto"> |
|
<span> |
|
retrieves passages using <em>{{retriever}}</em>. |
|
</span> |
|
</div> |
|
</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">Title</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>{{res["title"]}}</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> |