highlighting delted words

app.py

@@ -20,17 +20,6 @@ from textattack.attack_recipes import (
 from textattack.attack_results import SuccessfulAttackResult
 from utils import SentAttacker, get_agnews_example, get_sst2_example, get_amazon_example, get_imdb_example, diff_texts
 # from utils import get_yahoo_example
-import difflib
-def render_diff(text1, text2):
-    diff = difflib.ndiff(text1.splitlines(keepends=True), text2.splitlines(keepends=True))
-    return ''.join([line.replace(' ', '&nbsp;').replace('\n', '<br>') for line in diff])
-
-def update_diff(original_example, repaired_example, adv_example):
-    ori_diff = render_diff(original_example, original_example)
-    adv_diff = render_diff(original_example, adv_example)
-    restored_diff = render_diff(original_example, repaired_example)
-    return ori_diff, adv_diff, restored_diff
-
 
 sent_attackers = {}
 tad_classifiers = {}
@@ -300,9 +289,21 @@ if __name__ == "__main__":
         gr.Markdown("""
         <p align='center'>The (+) and (-) in the boxes indicate the added and deleted characters in the adversarial example compared to the original input natural example.</p>
             """)
-        ori_text_diff = gr.HTML(label="The Original Natural Example", value="")
-        adv_text_diff = gr.HTML(label="Character Editions of Adversarial Example Compared to the Natural Example", value="")
-        restored_text_diff = gr.HTML(label="Character Editions of Repaired Adversarial Example Compared to the Natural Example", value="")
+        ori_text_diff = gr.HighlightedText(
+            label="The Original Natural Example",
+            combine_adjacent=False,
+            highlight_words=True, 
+        )
+        adv_text_diff = gr.HighlightedText(
+            label="Character Editions of Adversarial Example Compared to the Natural Example",
+            combine_adjacent=False,
+            highlight_words=True, 
+        )
+        restored_text_diff = gr.HighlightedText(
+            label="Character Editions of Repaired Adversarial Example Compared to the Natural Example",
+            combine_adjacent=False,
+            highlight_words=True, 
+        )
 
         gr.Markdown(
             "## <h2 align='center'>The Output of Reactive Perturbation Defocusing</p>"
@@ -332,28 +333,22 @@ if __name__ == "__main__":
 
         # Bind functions to buttons
         button_gen.click(
-        fn=run_demo,
-        inputs=[input_dataset, input_attacker, input_sentence, input_label],
-        outputs=[
-            output_original_example,
-            output_original_label,
-            output_repaired_example,
-            output_repaired_label,
-            output_adv_example,
-            ori_text_diff,
-            adv_text_diff,
-            restored_text_diff,
-            output_adv_label,
-            output_df,
-            output_is_adv_df,
-            msg_text
-        ],
-        _js="""
-            (original_example, original_label, repaired_example, repaired_label, adv_example, ori_diff, adv_diff, restored_diff, adv_label, df, is_adv_df, msg) => {
-                return [original_example, original_label, repaired_example, repaired_label, adv_example, ori_diff, adv_diff, restored_diff, adv_label, df, is_adv_df, msg]
-            }
-        """,
-        _fn=update_diff
-    )
+            fn=run_demo,
+            inputs=[input_dataset, input_attacker, input_sentence, input_label],
+            outputs=[
+                output_original_example,
+                output_original_label,
+                output_repaired_example,
+                output_repaired_label,
+                output_adv_example,
+                ori_text_diff,
+                adv_text_diff,
+                restored_text_diff,
+                output_adv_label,
+                output_df,
+                output_is_adv_df,
+                msg_text
+            ],
+        )
 
-    demo.queue(2).launch()
+    demo.queue(2).launch()