Work-in-progress

Oqaasileriffik · Dec 20, 2023 · 042b6d4 · 042b6d4
1 parent 1323ffb
commit 042b6d4
Show file tree

Hide file tree

Showing 12 changed files with 1,045 additions and 470 deletions.
diff --git a/.htaccess b/.htaccess
@@ -1 +1,8 @@
-FallbackResource ./
+php_value display_errors 1
+php_value error_reporting -1
+
+RewriteEngine on
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_FILENAME} !-l
+RewriteRule ^ index.php [L]
diff --git a/_inc/lib.php b/_inc/lib.php
@@ -1,6 +1,7 @@
 <?php
 declare(strict_types=1);
 putenv('LC_ALL=C.UTF-8');
+putenv('PERL_UNICODE=SDA');
 setlocale(LC_ALL, 'C.UTF-8');
 require_once __DIR__.'/../_vendor/autoload.php';
 
@@ -85,6 +86,43 @@ function handle_via_port($input, $port) {
 	return $output;
 }
 
+function handle_via_nmt($hash, $pair, $input) {
+	$ps = explode('-', $pair);
+	if ($ps[0] === 'h') {
+		$input = "<s1>\n{$input}\n</s1>";
+	}
+	file_put_contents("/tmp/{$pair}-{$hash}.in.txt", $input);
+
+	shell_exec("cat '/tmp/{$pair}-{$hash}.in.txt' | /opt/nutserut/models/{$ps[0]}/tok-{$ps[1]}.sh > '/tmp/{$pair}-{$hash}.in.bpe'");
+	shell_exec("/opt/nutserut/models/{$ps[0]}/trx.sh '{$ps[1]}' '/tmp/{$pair}-{$hash}.in.bpe' '/tmp/{$pair}-{$hash}.out.bpe' >'/tmp/{$pair}-{$hash}.log' 2>&1");
+
+	$output = file_get_contents("/tmp/{$pair}-{$hash}.out.bpe");
+	$output = preg_replace('~@@( |$)~', '', $output);
+	$output = trim($output);
+
+	/*
+	$output = explode("\n", $output);
+	for ($i=0,$e=count($output) ; $i<$e ; ++$i) {
+		$output[$i] = (($i%5)+1).': '.$output[$i];
+	}
+	$output = implode("\n\n", $output);
+	//*/
+
+	return $output;
+}
+
+function handle_via_gloss($hash, $pair, $input) {
+	$ps = explode('-', $pair);
+	file_put_contents("/tmp/{$pair}-{$hash}.in.txt", $input);
+
+	shell_exec("cat '/tmp/{$pair}-{$hash}.in.txt' | /opt/nutserut/gloss/{$ps[1]}/public.pl | grep -v '¶' >'/tmp/{$pair}-{$hash}.out' 2>'/tmp/{$pair}-{$hash}.log'");
+
+	$output = file_get_contents("/tmp/{$pair}-{$hash}.out");
+	$output = trim($output);
+
+	return $output;
+}
+
 function b64_slug($rv) {
 	$rv = base64_encode($rv);
 	$rv = trim($rv, '=');
@@ -140,3 +178,57 @@ function load_translation($hash) {
 function hashify(&$rv) {
 	$rv['hash'] = strtolower(substr(b64_slug(hash('sha256', "{$rv['action']}:{$rv['input']}", true)), 0, 40));
 }
+
+function page_header($title='SITE_TITLE') {
+?>
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title data-l10n="<?=$title;?>">Nutserut - Greenlandic-Danish Machine Translation</title>
+
+	<link rel="shortcut icon" href="https://oqaasileriffik.gl/favicon.ico">
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gudea%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&#038;ver=5.5.3" type="text/css" media="all" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+	<link rel="stylesheet" href="_static/nutserut.css?<?=filemtime(__DIR__.'/../_static/nutserut.css');?>">
+	<link rel="alternate" hreflang="da" href="https://nutserut.gl/da">
+	<link rel="alternate" hreflang="kl" href="https://nutserut.gl/kl">
+	<link rel="alternate" hreflang="en" href="https://nutserut.gl/en">
+	<link rel="alternate" hreflang="x-default" href="https://nutserut.gl/">
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+	<script src="_static/l10n.js?<?=filemtime(__DIR__.'/../_static/l10n.js');?>"></script>
+	<script src="_static/nutserut.js?<?=filemtime(__DIR__.'/../_static/nutserut.js');?>"></script>
+</head>
+<body class="d-flex flex-column">
+
+<header>
+	<div class="container">
+	<div class="logo">
+		<a href="https://oqaasileriffik.gl/" class="text-decoration-none">
+		<h1 data-l10n="HDR_TITLE">Oqaasileriffik</h1>
+		<h3 data-l10n="HDR_SUBTITLE">The Language Secretariat of Greenland</h3>
+		</a>
+	</div>
+	</div>
+
+	<div class="menu">
+	<div class="container">
+		<div class="lang-select">
+			<a class="dropdown text-decoration-none fs-5" id="dropLanguages" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"><i class="bi bi-globe2"></i></a>
+			<ul class="dropdown-menu" aria-labelledby="dropLanguages">
+				<li><a href="./kl" class="item l10n" data-which="kl" title="Kalaallisut"><tt>KAL</tt> <span>Kalaallisut</span></a></li>
+				<li><a href="./da" class="item l10n" data-which="da" title="Dansk"><tt>DAN</tt> <span>Dansk</span></a></li>
+				<li><a href="./en" class="item l10n" data-which="en" title="English"><tt>ENG</tt> <span>English</span></a></li>
+			</ul>
+		</div>
+	</div>
+	</div>
+</header>
+
+<div class="container flex-grow-1">
+
+<?php
+}
diff --git a/_pages/.htaccess b/_pages/.htaccess
@@ -0,0 +1 @@
+Require all denied
diff --git a/_pages/garbage.php b/_pages/garbage.php
@@ -0,0 +1,12 @@
+<div class="row my-3" id="garbage" style="display: none;">
+<div class="col">
+	<div class="card text-white bg-danger mb-3">
+	<div class="card-header"><h5 class="text-white" data-l10n="HDR_GARBAGE">Garbage in, garbage out!</h5></div>
+	<div class="card-body">
+	<p class="card-text" data-l10n="TXT_GARBAGE_010">Some words didn't get a proper analysis, which impairs the quality of the translation. Check your input and correct any errors.</p>
+	<p class="card-text" id="garbage-body"></p>
+	<p class="card-text" data-l10n="TXT_GARBAGE_020">If you feel the service is mistaken, you can give us feedback about a given word with the button after it.</p>
+	</div>
+	</div>
+</div>
+</div>
diff --git a/_pages/gloss.php b/_pages/gloss.php
@@ -0,0 +1,93 @@
+<?php
+declare(strict_types=1);
+
+page_header('SITE_TITLE_GLOSS');
+
+?>
+<div class="row">
+<div class="col text-center">
+<h1 class="my-3 title">Nutserut</h1>
+<h2 class="my-3 subtitle"><i class="bi bi-highlighter"></i> <span data-l10n="LBL_METHOD_GLOSS">Educational Annotation</span></h2>
+<p><button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#whatis_gloss"><i class="bi bi-info-square"></i> <span data-l10n="LBL_WHATIS_GLOSS">What is educational annotation?</span></button></p>
+</div>
+</div>
+
+<div class="modal fade showFirstLoad" id="whatis_gloss" tabindex="-1" aria-labelledby="whatisLabel" aria-hidden="true">
+<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+	<div class="modal-content">
+		<div class="modal-header">
+			<h5 class="modal-title text-blue" id="whatisLabel"><i class="bi bi-info-square-fill"></i> <span data-l10n="LBL_WHATIS_GLOSS">What is educational annotation?</span></h5>
+			<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+		</div>
+		<div class="modal-body">
+			<h3 data-l10n="HDR_GLOSS_ITIS">Educational annotation is …</h3>
+			<ul>
+				<li data-l10n="TXT_GLOSS_IS_010">TODO</li>
+			</ul>
+
+			<hr>
+			<h3 data-l10n="HDR_GLOSS_ITISNOT">Educational annotation is <em>not</em> …</h3>
+			<ul>
+				<li data-l10n="TXT_GLOSS_ISNOT_010">TODO</li>
+			</ul>
+		</div>
+		<div class="modal-footer text-center">
+			<button type="button" class="btn btn-primary" data-bs-dismiss="modal"><i class="bi bi-check2"></i> <span data-l10n="BTN_WHATIS_CLOSE">Understood</span></button>
+		</div>
+	</div>
+</div>
+</div>
+
+<div class="row my-5">
+<div class="col">
+	<div class="text-center">
+		<div class="btn-group" role="group" aria-label="Toggle translation direction">
+		<input type="radio" class="btn-check" name="optPair" id="g-kal2eng" value="g-kal2eng" autocomplete="off" checked>
+		<label class="btn btn-outline-primary" for="g-kal2eng" data-l10n="BTN_KAL2ENG">Kalaallisut<i class="bi bi-arrow-right-short"></i>English</label>
+		<!--
+		<input type="radio" class="btn-check" name="optPair" id="g-kal2dan" value="g-kal2dan" autocomplete="off">
+		<label class="btn btn-outline-primary" for="g-kal2dan" data-l10n="BTN_KAL2DAN">Kalaallisut<i class="bi bi-arrow-right-short"></i>Danish</label>
+		-->
+		</div>
+	</div>
+</div>
+</div>
+
+<div class="row my-5">
+<div class="col">
+	<div class="mb-3">
+	<label for="input" class="form-label d-flex"><h5 class="text-blue me-auto" data-l10n="HDR_INPUT_KAL_GLOSS">Greenlandic sentence to be annotated</h5><div class="small ms-3" id="inputCount"></div></label>
+	<textarea class="form-control" id="input" rows="3" spellcheck="false"></textarea>
+	</div>
+	<div class="text-center">
+	<button class="btn btn-primary btnTranslate"><span class="g-kal2eng" style="display: none;"><i class="bi bi-translate"></i> <span data-l10n="BTN_GLOSS_ENG">Annotate with English</span></span><span class="g-kal2dan" style="display: none;"><i class="bi bi-translate"></i> <span data-l10n="BTN_GLOSS_DAN">Annotate with Danish</span></span></button>
+	</div>
+</div>
+</div>
+
+<?php
+require_once __DIR__.'/garbage.php';
+?>
+
+<div class="row my-3" id="output" style="display: none;">
+<div class="col">
+	<div class="card mb-3">
+	<div class="card-header d-flex"><h5 class="me-auto" data-l10n="HDR_ANNOTATION">Annotation</h5><div><a href="#" class="ms-3 text-nowrap btnShare"><i class="bi bi-share-fill"></i> <span data-l10n="LBL_SHARE">Share</span></a></div></div>
+	<div class="card-body">
+	<pre><code class="card-text"></code></pre>
+	</div>
+	</div>
+</div>
+</div>
+
+<div class="row my-5">
+<div class="col">
+	<div class="text-center">
+		<hr>
+		<a href="./" class="btn btn-outline-primary m-1"><span data-l10n="BTN_FRONTPAGE">Front page</span></a>
+		<a href="./hybrid" class="btn btn-outline-primary m-1"><i class="bi bi-boxes"></i> <span data-l10n="LBL_METHOD_HYBRID">Hybrid Artificial Intelligence</span></a>
+		<a href="./machine" class="btn btn-outline-primary m-1"><i class="bi bi-cpu"></i> <span data-l10n="LBL_METHOD_MACHINE">Artificial Intelligence</span></a>
+		<a href="./pre" class="btn btn-outline-primary m-1"><i class="bi bi-diagram-3"></i> <span data-l10n="LBL_METHOD_PRE">Pre-2023 Method</span></a>
+	</div>
+</div>
+</div>
diff --git a/_pages/hybrid.php b/_pages/hybrid.php
@@ -0,0 +1,93 @@
+<?php
+declare(strict_types=1);
+
+page_header('SITE_TITLE_HYBRID');
+
+?>
+<div class="row">
+<div class="col text-center">
+<h1 class="my-3 title">Nutserut</h1>
+<h2 class="my-3 subtitle"><i class="bi bi-boxes"></i> <span data-l10n="LBL_METHOD_HYBRID">Hybrid Artificial Intelligence</span></h2>
+<p><button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#whatis_hybrid"><i class="bi bi-info-square"></i> <span data-l10n="LBL_WHATIS_HYBRID">What is hybrid artificial intelligence?</span></button></p>
+</div>
+</div>
+
+<div class="modal fade showFirstLoad" id="whatis_hybrid" tabindex="-1" aria-labelledby="whatisLabel" aria-hidden="true">
+<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+	<div class="modal-content">
+		<div class="modal-header">
+			<h5 class="modal-title text-blue" id="whatisLabel"><i class="bi bi-info-square-fill"></i> <span data-l10n="LBL_WHATIS_HYBRID">What is hybrid artificial intelligence?</span></h5>
+			<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+		</div>
+		<div class="modal-body">
+			<h3 data-l10n="HDR_HYB_ITIS">Hybrid artificial intelligence is …</h3>
+			<ul>
+				<li data-l10n="TXT_HYB_IS_010">a trained machine translation model from augmented parallel human-authored texts. See <a href="https://en.wikipedia.org/wiki/Machine_learning" target="_blank">https://en.wikipedia.org/wiki/Machine_learning</a></li>
+			</ul>
+
+			<hr>
+			<h3 data-l10n="HDR_HYB_ITISNOT">Hybrid artificial intelligence is <em>not</em> …</h3>
+			<ul>
+				<li data-l10n="TXT_ISNOT_010">a human; the service does not understand spelling or grammatical errors, and these will greatly impair the quality of the translation.</li>
+				<li data-l10n="TXT_ISNOT_020">a dictionary; this service expects whole sentences, not fragments or single words.</li>
+				<li data-l10n="TXT_HYB_ISNOT_030">intelligent; despite the media commonly referring to machine learning models as artificial intelligence, this is a misnomer. There is no intelligence or independent thought expressed by learned models. This is true even for large language models like ChatGPT.</li>
+			</ul>
+		</div>
+		<div class="modal-footer text-center">
+			<button type="button" class="btn btn-primary" data-bs-dismiss="modal"><i class="bi bi-check2"></i> <span data-l10n="BTN_WHATIS_CLOSE">Understood</span></button>
+		</div>
+	</div>
+</div>
+</div>
+
+<div class="row my-5">
+<div class="col">
+	<div class="text-center">
+		<div class="btn-group" role="group" aria-label="Toggle translation direction">
+		<input type="radio" class="btn-check" name="optPair" id="h-kal2dan" value="h-kal2dan" autocomplete="off" checked>
+		<label class="btn btn-outline-primary" for="h-kal2dan" data-l10n="BTN_KAL2DAN">Kalaallisut<i class="bi bi-arrow-right-short"></i>Danish</label>
+		<input type="radio" class="btn-check" name="optPair" id="m-dan2kal" value="m-dan2kal" autocomplete="off">
+		<label class="btn btn-outline-primary" for="m-dan2kal" data-l10n="BTN_DAN2KAL">Danish<i class="bi bi-arrow-right-short"></i>Kalaallisut</label>
+		</div>
+	</div>
+</div>
+</div>
+
+<div class="row my-5">
+<div class="col">
+	<div class="mb-3">
+	<label for="input" class="form-label d-flex"><h5 class="text-blue me-auto"><span class="h-kal2dan" style="display: none;" data-l10n="HDR_INPUT_KAL">Greenlandic sentence to be translated</span><span class="m-dan2kal" style="display: none;" data-l10n="HDR_INPUT_DAN">Danish sentence to be translated</span></h5><div class="small ms-3" id="inputCount"></div></label>
+	<textarea class="form-control" id="input" rows="3" spellcheck="false"></textarea>
+	</div>
+	<div class="text-center">
+	<button class="btn btn-primary btnTranslate"><span class="h-kal2dan" style="display: none;"><i class="bi bi-translate"></i> <span data-l10n="BTN_XLATE_DAN">Translate to Danish</span></span><span class="m-dan2kal" style="display: none;"><i class="bi bi-translate"></i> <span data-l10n="BTN_XLATE_KAL">Translate to Greenlandic</span></span></button>
+	</div>
+</div>
+</div>
+
+<?php
+require_once __DIR__.'/garbage.php';
+?>
+
+<div class="row my-3" id="output" style="display: none;">
+<div class="col">
+	<div class="card mb-3">
+	<div class="card-header d-flex"><h5 class="me-auto" data-l10n="HDR_TRANSLATION">Translation</h5><div><a href="#" class="ms-3 text-nowrap btnShare"><i class="bi bi-share-fill"></i> <span data-l10n="LBL_SHARE">Share</span></a></div></div>
+	<div class="card-body">
+	<p class="card-text"></p>
+	</div>
+	</div>
+</div>
+</div>
+
+<div class="row my-5">
+<div class="col">
+	<div class="text-center">
+		<hr>
+		<a href="./" class="btn btn-outline-primary m-1"><span data-l10n="BTN_FRONTPAGE">Front page</span></a>
+		<a href="./gloss" class="btn btn-outline-primary m-1"><i class="bi bi-highlighter"></i> <span data-l10n="LBL_METHOD_GLOSS">Educational Annotation</span></a>
+		<a href="./machine" class="btn btn-outline-primary m-1"><i class="bi bi-cpu"></i> <span data-l10n="LBL_METHOD_MACHINE">Artificial Intelligence</span></a>
+		<a href="./pre" class="btn btn-outline-primary m-1"><i class="bi bi-diagram-3"></i> <span data-l10n="LBL_METHOD_PRE">Pre-2023 Method</span></a>
+	</div>
+</div>
+</div>
diff --git a/_pages/index.php b/_pages/index.php
@@ -0,0 +1,31 @@
+<?php
+declare(strict_types=1);
+
+page_header();
+
+?>
+<div class="row">
+<div class="col text-center">
+<h1 class="my-3 title">Nutserut</h1>
+<h2 class="my-3 subtitle" data-l10n="HDR_INDEX_SUBTITLE">Translation aids</h2>
+</div>
+</div>
+
+<div class="row my-5">
+<div class="col">
+	<div class="text-center">
+		TODO: Some text that very briefly explains the differences and purposes.
+	</div>
+</div>
+</div>
+
+<div class="row my-5">
+<div class="col">
+	<div class="text-center">
+		<a href="./gloss" class="btn btn-outline-primary btn-lg m-3"><i class="bi bi-highlighter"></i> <span data-l10n="LBL_METHOD_GLOSS">Educational Annotation</span></a>
+		<a href="./hybrid" class="btn btn-outline-primary btn-lg m-3"><i class="bi bi-boxes"></i> <span data-l10n="LBL_METHOD_HYBRID">Hybrid Artificial Intelligence</span></a>
+		<a href="./machine" class="btn btn-outline-primary btn-lg m-3"><i class="bi bi-cpu"></i> <span data-l10n="LBL_METHOD_MACHINE">Artificial Intelligence</span></a>
+		<a href="./pre" class="btn btn-outline-primary btn-lg m-3"><i class="bi bi-diagram-3"></i> <span data-l10n="LBL_METHOD_PRE">Pre-2023 Method</span></a>
+	</div>
+</div>
+</div>