Make languages field mandatory for Transkribus engine

Modify dropdown field and label to mark the languages input as 'required' for the Transkribus engine. Bug: T330829
wikimedia · Mar 31, 2023 · b0d3c38 · b0d3c38
1 parent bb0b51b
commit b0d3c38
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 4 deletions.
diff --git a/assets/app.js b/assets/app.js
@@ -69,13 +69,37 @@ $(function () {
         });
     });
 
+    let previousDataPlaceholder = $select2.attr('data-placeholder');
+
     // Show engine-specific options.
     $('[name=engine]').on('change',  e => {
-        updateSelect2Options(e.target.value);
+        let engine = e.target.value;
+        updateSelect2Options(engine);
         $('.engine-options').addClass('hidden');
-        $(`#${e.target.value}-options`).removeClass('hidden');
+        $(`#${engine}-options`).removeClass('hidden');
+        if(engine === 'tesseract' || engine === 'google') {
+            $select2.prop('required', false);
+            $select2.attr('data-placeholder', previousDataPlaceholder);
+            $select2.data('select2').selection.placeholder.text = previousDataPlaceholder;
+            $('#transkribus-lang-label').addClass('hidden');
+            $('#optional-lang-label').removeClass('hidden');
+        } else {
+            $select2.prop('required', true);
+            $select2.attr('data-placeholder', '');
+            $select2.data('select2').selection.placeholder.text = '';
+            $('#optional-lang-label').addClass('hidden');
+            $('#transkribus-lang-label').removeClass('hidden');
+        }
     });
 
+    // modify selected engine after loading the page with preselected engine 
+    let $engineRadioFields = $('[name=engine]:checked');
+    if($engineRadioFields.val() === 'transkribus') {
+        $select2.attr('data-placeholder', '')
+    } else {
+        $select2.attr('data-placeholder', previousDataPlaceholder);
+    }
+
     // For the result page. Makes the 'Copy' button copy the transcription to the clipboard.
     const $copyButton = $('.copy-button');
     if ($copyButton.length) {

diff --git a/i18n/en.json b/i18n/en.json
@@ -51,6 +51,7 @@
     "tesseract-psm-13": "Raw line. Treat the image as a single text line, bypassing hacks that are Tesseract-specific.",
     "tesseract-param-error": "The '$1' option with a value of $2 is not supported by Tesseract. Maximum value: $3",
     "tesseract-internal-error": "The tesseract engine returned an internal error.",
+    "transkribus-language-code": "Language Model",
     "transkribus-unauthorized-error": "Error Code '$1' :: The request is not authorized",
     "transkribus-default-error": "Error Code '$1' ::  Unable to complete request, try again!",
     "transkribus-empty-response-error": "Could not parse result from Transkribus API",

diff --git a/i18n/qqq.json b/i18n/qqq.json
@@ -58,6 +58,7 @@
 	"tesseract-psm-13": "Form option for Tesseract page segmentation mode.",
 	"tesseract-param-error": "Error message displayed when invalid values for Tesseract options are submitted.\n\nParameters:\n* $1 – the form label for the option. Currently, the only possible value here is {{msg-wm|wikimedia-ocr-tesseract-psm-label}}.\n* $2 – The value that was given.\n* $3 – the maximum value for the option (this will be an integer).",
 	"tesseract-internal-error": "Generic error message displayed when the tesseract command fails.",
+	"transkribus-language-code": "Form label for the 'Language Model' field for the Transkribus engine",
 	"transkribus-unauthorized-error": "Error message displayed when Transkribus access token has expired or login credentials are invalid.",
 	"transkribus-default-error": "Generic error message displayed when Transkribus API returns error status different from 401.",
 	"transkribus-empty-response-error": "Error message displayed when Transkribus API returns an empty response body.",

diff --git a/templates/output.html.twig b/templates/output.html.twig
@@ -31,8 +31,20 @@
                 </div>
             </div>
             <div class="form-group">
-                <label for="lang">{{ msg('language-code') }}</label>
-                <select id="lang" class="form-control" name="langs[]" multiple data-placeholder="{{ msg('langs-placeholder') }}">
+                <label id="optional-lang-label" for="lang" class="lang-label {% if engine == 'transkribus' %}hidden{% endif %}">
+                    {{ msg('language-code') }}
+                </label>
+                <label id="transkribus-lang-label" for="lang" class="lang-label {% if engine != 'transkribus' %}hidden{% endif %}">
+                    {{ msg('transkribus-language-code') }}
+                </label>
+                <select 
+                    id="lang" 
+                    class="form-control" 
+                    name="langs[]" 
+                    multiple 
+                    data-placeholder="{{ msg('langs-placeholder') }}"
+                    {% if engine == 'transkribus' %}required{% endif %}
+                >
                     {% for lang in available_langs %}
                         <option value="{{ lang }}" {% if lang in langs %}selected{% endif %}>
                             {{- lang }}{% if ocr_lang_name(lang) is not empty %} &ndash; {{ ocr_lang_name(lang) }}{% endif -%}