Spaces:
Runtime error
Runtime error
<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> |