highlighting deleted/added words

app.py

@@ -20,6 +20,10 @@ 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])
 
 sent_attackers = {}
 tad_classifiers = {}
@@ -289,21 +293,9 @@ 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.HighlightedText(
-        label="The Original Natural Example",
-        combine_adjacent=True,
-        highlight_words=True, 
-    )
-    adv_text_diff = gr.HighlightedText(
-        label="Character Editions of Adversarial Example Compared to the Natural Example",
-        combine_adjacent=True,
-        highlight_words=True, 
-    )
-    restored_text_diff = gr.HighlightedText(
-        label="Character Editions of Repaired Adversarial Example Compared to the Natural Example",
-        combine_adjacent=True,
-        highlight_words=True, 
-    )
+        ori_text_diff = gr.HTML(label="The Original Natural Example")
+        adv_text_diff = gr.HTML(label="Character Editions of Adversarial Example Compared to the Natural Example")
+        restored_text_diff = gr.HTML(label="Character Editions of Repaired Adversarial Example Compared to the Natural Example")
 
         gr.Markdown(
             "## <h2 align='center'>The Output of Reactive Perturbation Defocusing</p>"
@@ -333,22 +325,30 @@ 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
-            ],
-        )
+        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) => {
+                ori_diff.value = render_diff(original_example, original_example);
+                adv_diff.value = render_diff(original_example, adv_example);
+                restored_diff.value = render_diff(original_example, repaired_example);
+                return [original_example, original_label, repaired_example, repaired_label, adv_example, ori_diff, adv_diff, restored_diff, adv_label, df, is_adv_df, msg]
+            }
+        """
+    )
 
     demo.queue(2).launch()