highlighting delted words

app.py

@@ -25,6 +25,13 @@ 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 = {}
 
@@ -293,9 +300,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.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")
+        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="")
 
         gr.Markdown(
             "## <h2 align='center'>The Output of Reactive Perturbation Defocusing</p>"
@@ -333,8 +340,8 @@ if __name__ == "__main__":
             output_repaired_example,
             output_repaired_label,
             output_adv_example,
-            ori_text_diff, 
-            adv_text_diff,  
+            ori_text_diff,
+            adv_text_diff,
             restored_text_diff,
             output_adv_label,
             output_df,
@@ -343,12 +350,10 @@ if __name__ == "__main__":
         ],
         _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]
             }
-        """
+        """,
+        _fn=update_diff
     )
 
     demo.queue(2).launch()