layout

app.py

@@ -18,7 +18,7 @@ The text is preprocessed, tokenized and rearranged and then each token is mapped
 TITLE = "Concatenative Synthesis: Rule Based Text to Sign Language Translator"
 
 CUSTOM_JS = """<script>
-const rtlLanguages = ["ur", "ar"];
+const rtlLanguages = ["urdu", "arabic"];
 
 function updateTextareaDir(language) {
     const sourceTextarea = document.getElementById("source-textbox").querySelector("textarea");
@@ -31,8 +31,12 @@ function updateTextareaDir(language) {
 }
 </script>"""
 # todo: add dropdown keyboard custom component with key mapping
+# todo: output full height
 
 CUSTOM_CSS = """
+.reverse-row {
+    flex-direction: row-reverse;
+}
 #auto-complete-button {
     border-color: var(--button-primary-border-color-hover);
 }
@@ -75,6 +79,13 @@ except Exception as e:
 translation_model = slt.models.ConcatenativeSynthesis("ur", "pk-sl", "video")
 language_models: Dict[str, slt.models.BeamSampling] = {}
 
+full_to_short = {
+    "english": "en",
+    "urdu": "ur",
+    "hindi": "hi",
+}
+short_to_full = {s: f for f, s in full_to_short.items()}
+
 
 def auto_complete_text(model_code: str, text: str):
     if model_code not in language_models:
@@ -115,9 +126,9 @@ def text_to_video(
 
     sign = translation_model.translate(text)
     if isinstance(sign, slt.Landmarks):
-        sign.data[:, 33:     ] *= 3
+        sign.data[:, 33:] *= 2
         sign.data[:, 33:54, 0] += 0.25
-        sign.data[:, 54:  , 0] -= 0.25
+        sign.data[:, 54:, 0] -= 0.25
 
         sign.save_animation(output_path, overwrite=True)
     else:
@@ -127,6 +138,7 @@ def text_to_video(
 
 
 def translate(text: str, text_lang: str, sign_lang: str, sign_format: str):
+    text_lang = full_to_short.get(text_lang, text_lang)
     log = [
         text,
         text_lang,
@@ -160,13 +172,29 @@ with gradio.Blocks(title=TITLE, head=CUSTOM_JS, css=CUSTOM_CSS) as gradio_app:
         if not isinstance(request_logger, gradio.HuggingFaceDatasetSaver)
         else ""
     )
-    with gradio.Row():  # Inputs and Outputs
+    with gradio.Row(elem_classes=["reverse-row"]):  # Inputs and Outputs
+        with gradio.Column():  # Outputs
+            gradio.Markdown("## Output Sign Language")
+            output_video = gradio.Video(
+                format="mp4",
+                label="Synthesized Sign Language Video",
+                autoplay=True,
+                show_download_button=True,
+                include_audio=False,
+            )
+
         with gradio.Column():  # Inputs
             gradio.Markdown("## Select Languages")
             with gradio.Row():
                 text_lang_dropdown = gradio.Dropdown(
-                    choices=[code.value for code in slt.TextLanguageCodes],
-                    value=slt.TextLanguageCodes.URDU.value,
+                    choices=[
+                        short_to_full.get(code.value, code.value)
+                        for code in slt.TextLanguageCodes
+                    ],
+                    value=short_to_full.get(
+                        slt.TextLanguageCodes.URDU.value,
+                        slt.TextLanguageCodes.URDU.value,
+                    ),
                     label="Text Language",
                     elem_id="text-lang-dropdown",
                 )
@@ -189,73 +217,62 @@ with gradio.Blocks(title=TITLE, head=CUSTOM_JS, css=CUSTOM_CSS) as gradio_app:
                 # todo: sign format: video/landmarks (tabs?)
 
             gradio.Markdown("## Input Text")
-            with gradio.Row():
-                with gradio.Column():  # Source TextArea
-                    gradio.Markdown("Write here (in selected language):")
-                    source_textbox = gradio.Textbox(
-                        lines=2,
-                        placeholder="Enter Text Here...",
-                        label="Spoken Language Sentence",
-                        show_copy_button=True,
-                        elem_id="source-textbox",
-                    )
-                with gradio.Column():  # Language Model
-                    gradio.Markdown("Generate sample text instead:")
-                    with gradio.Row():
-                        language_model_dropdown = gradio.Dropdown(
-                            choices=[
-                                slt.ModelCodes.MIXER_LM_NGRAM_URDU.value,
-                                slt.ModelCodes.TRANSFORMER_LM_UR_SUPPORTED.value,
-                            ],
-                            value=slt.ModelCodes.MIXER_LM_NGRAM_URDU.value,
-                            label="Language Model for auto-complete",
-                        )
-                    with gradio.Row():
-                        clear_button = gradio.ClearButton(
-                            source_textbox, api_name=False
-                        )
-                        auto_complete_button = gradio.Button(
-                            "Auto-Complete", elem_id="auto-complete-button"
-                        )
-                        auto_complete_button.click(
-                            auto_complete_text,
-                            inputs=[language_model_dropdown, source_textbox],
-                            outputs=[source_textbox],
-                            api_name=False,
-                        )
+            with gradio.Row():  # Source TextArea
+                source_textbox = gradio.Textbox(
+                    lines=3,
+                    placeholder="Enter Text Here...",
+                    label="Spoken Language Sentence",
+                    show_copy_button=True,
+                    elem_id="source-textbox",
+                )
+            with gradio.Row():  # clear/auto-complete/Language Model
+                language_model_dropdown = gradio.Dropdown(
+                    choices=[
+                        slt.ModelCodes.MIXER_LM_NGRAM_URDU.value,
+                        slt.ModelCodes.TRANSFORMER_LM_UR_SUPPORTED.value,
+                    ],
+                    value=slt.ModelCodes.MIXER_LM_NGRAM_URDU.value,
+                    label="Select language model to Generate sample text",
+                )
 
-        with gradio.Column():  # Outputs
-            gradio.Markdown("## Output Sign Language")
-            output_video = gradio.Video(
-                format="mp4",
-                label="Synthesized Sign Language Video",
-                autoplay=True,
-                show_download_button=True,
-                include_audio=False,
-            )
+                auto_complete_button = gradio.Button(
+                    "Auto-Complete", elem_id="auto-complete-button"
+                )
+                auto_complete_button.click(
+                    auto_complete_text,
+                    inputs=[language_model_dropdown, source_textbox],
+                    outputs=[source_textbox],
+                    api_name=False,
+                )
+                clear_button = gradio.ClearButton(source_textbox, api_name=False)
 
-    with gradio.Row():  # Translate Button
-        translate_button = gradio.Button("Translate", variant="primary")
-        translate_button.click(
-            translate,
-            inputs=[
-                source_textbox,
-                text_lang_dropdown,
-                sign_lang_dropdown,
-                output_format_dropdown,
-            ],
-            outputs=[output_video],
-            api_name="translate",
-        )
+            with gradio.Row():  # Translate Button
+                translate_button = gradio.Button("Translate", variant="primary")
+                translate_button.click(
+                    translate,
+                    inputs=[
+                        source_textbox,
+                        text_lang_dropdown,
+                        sign_lang_dropdown,
+                        output_format_dropdown,
+                    ],
+                    outputs=[output_video],
+                    api_name="translate",
+                )
 
     gradio.Examples(
         [
-            ["یہ بہت اچھا ہے۔", "ur", "pakistan-sign-language", "video"],
-            ["وہ کام آسان تھا۔", "ur", "pakistan-sign-language", "landmarks"],
-            ["पाँच घंटे।", "hi", "pakistan-sign-language", "video"],
-            ["कैसे हैं आप?", "hi", "pakistan-sign-language", "landmarks"],
+            ["یہ بہت اچھا ہے۔", "urdu", "pakistan-sign-language", "video"],
+            ["وہ کام آسان تھا۔", "urdu", "pakistan-sign-language", "landmarks"],
+            ["पाँच घंटे।", "hindi", "pakistan-sign-language", "video"],
+            ["कैसे हैं आप?", "hindi", "pakistan-sign-language", "landmarks"],
+        ],
+        inputs=[
+            source_textbox,
+            text_lang_dropdown,
+            sign_lang_dropdown,
+            output_format_dropdown,
         ],
-        inputs=[source_textbox, text_lang_dropdown, sign_lang_dropdown, output_format_dropdown],
         outputs=output_video,
     )
     request_logger.setup(