use Gradio Blocks for this prototype

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "python.pythonPath": "/Users/sheonhan/.pyenv/shims/python",
+    "python.analysis.extraPaths": ["~/hugging-face/language-demo"]
+
+}

app.py

@@ -1,4 +1,3 @@
-import requests
 import os
 
 import fasttext
@@ -33,48 +32,83 @@ def identify_language(text):
     model = fasttext.load_model(model_full_path)
     predictions = model.predict(text, k=1)  # e.g., (('__label__eng_Latn',), array([0.81148803]))
 
-    PREFIX_LENGTH = 9  # To strip away '__label__' from language code
-    language_code = predictions[0][0][PREFIX_LENGTH:]
+    CHAR_TO_STRIP = 9  # To strip away '__label__' from language code
+    language_code = predictions[0][0][CHAR_TO_STRIP:]
+
     return language_code
 
 
+def display(user_lang, text):
+    user_lang_code = language_code_map[user_lang]
+    language_code = identify_language(text)
+
+    translate_button_visibility = language_code != user_lang_code
+
+    detected_language_text = f"""
+    Detected Language: {language_code}\n
+    User Content Language: {user_lang_code}\n
+    {"" if translate_button_visibility else "[NOT TRANSLATABLE] Detected Language and Content Language are the same"}
+    """
+
+    return text, gr.update(value="", placeholder="Leave a comment"), gr.update(value=detected_language_text), gr.update(visible=translate_button_visibility, variant="primary")
+
+
 def translate(text, src_lang, tgt_lang):
+    CHAR_TO_STRIP = 22  # To strip away 'Detected Language: ' from language code
+    LANGUAGE_CODE_LENGTH = 8  # To strip away 'Detected Language: ' from language code
+    src_lang_code = src_lang[CHAR_TO_STRIP:CHAR_TO_STRIP + LANGUAGE_CODE_LENGTH]
+    tgt_lang_code = language_code_map[tgt_lang]
+
     translation_pipeline = pipeline(
-        "translation", model=model, tokenizer=tokenizer, src_lang=src_lang, tgt_lang=tgt_lang, device=device)
+        "translation", model=model, tokenizer=tokenizer, src_lang=src_lang_code, tgt_lang=tgt_lang_code, device=device)
     result = translation_pipeline(text)
     return result[0]['translation_text']
 
-
-def query(text, user_lang):
-    detected_lang_code = identify_language(text)
-
-    user_lang_code = language_code_map[user_lang]
-
-    translation = translate(
-        text, detected_lang_code, user_lang_code) if detected_lang_code != user_lang_code else "N/A \n(User's content language is the same as the language of the input)"
-
-    return [detected_lang_code, translation]
-
-
-examples = [
-    ["Hello, world", "English"],
-    ["Can I have a cheeseburger?", "German"],
-    ["Hasta la vista", "English"],
-    ["동경에 휴가를 간다", "Japanese"],
-]
-
-gr.Interface(
-    query,
-    [
-        gr.Textbox(lines=3, label="User Input"),
-        gr.Radio(["English", "Spanish", "Korean", "French", "German", "Japanese"],
-                 value="English", label="User Content Language Settings"),
-    ],
-    outputs=[
-        gr.Textbox(lines=1, label="Detected Language"),
-        gr.Textbox(lines=3, label="Translation")
-    ],
-    title=title,
-    description=description,
-    examples=examples
-).launch()
+with gr.Blocks() as demo:
+    gr.HTML(
+        f"""
+            <div style="text-align: center; margin: 0 auto;">
+              <div style=" display: inline-flex; align-items: center; gap: 0.8rem; font-size: 1.75rem;">
+                <h1 style="font-weight: 900; margin-bottom: 7px;margin-top:5px">
+                  {title}
+                </h1>
+              </div>
+              <p style="margin-bottom: 10px; font-size: 94%; line-height: 23px;">
+                {description}
+              </p>
+            </div>
+        """
+    )
+
+    user_langugage_radio = gr.Radio(["English", "Spanish", "Korean", "French", "German", "Japanese"],
+                                    value="English", label="User Content Language")
+
+    comment_input_textbox = gr.Textbox(
+        lines=3, label="Write a Comment", placeholder="Leave a comment")
+    comment_out_textbox = gr.Textbox(lines=3, label="Comment")
+    detected_lang_markdown = gr.Markdown("", elem_id="detect-lang-md")
+
+    comment_btn = gr.Button("Comment")
+
+    translate_btn = gr.Button("Translate", visible=False)
+    detected_language_value = gr.Textbox("", visible=False)
+
+
+    comment_btn.click(display,
+                      inputs=[user_langugage_radio, comment_input_textbox],
+                      outputs=[
+                          comment_out_textbox,
+                          comment_input_textbox,
+                          detected_lang_markdown,
+                          translate_btn
+                      ])
+
+    translate_btn.click(translate,
+                        inputs=[
+                            comment_out_textbox,
+                            detected_lang_markdown,
+                            user_langugage_radio
+                        ],
+                        outputs=comment_out_textbox)
+
+demo.launch()