Confirmation fades out

app.py

@@ -10,6 +10,7 @@ from uuid import uuid4
 import os
 from pathlib import Path
 from huggingface_hub import CommitScheduler
+from utils import hide_code, hide_css
 
 # TODO make it so that feedback is only saved on prev. example if user makes another obfuscation
 # and changes slider but doesn't hit obfuscate
@@ -244,6 +245,7 @@ demo = gr.Blocks()
 with demo:
     latest_obfuscation = gr.State({})
     gr.Markdown(DESCRIPTION)
+    gr.HTML(hide_css)
     with gr.Row():
         with gr.Column(variant="panel"):
             gr.Markdown("# 1) Input Text\n### Enter the text to be obfuscated.")
@@ -354,14 +356,6 @@ with demo:
                 outputs=[feedback_rating, feedback_text, confirmation_message]
             )
 
-            hide_code = """
-            () => {
-                document.getElementById('confirmation-message').style.display = 'block';
-                setTimeout(() => {
-                    document.getElementById('confirmation-message').style.display = 'none';
-                }, 5000);
-            }
-            """ # Hides the message after 5 seconds
             save_feedback_button.click(
                 fn=None,
                 inputs=[],

utils.py

@@ -0,0 +1,23 @@
+hide_code = """
+() => {
+    const confirmationMessage = document.getElementById('confirmation-message');
+    confirmationMessage.style.display = 'block';
+    confirmationMessage.style.opacity = 1;
+    setTimeout(() => {
+        confirmationMessage.style.transition = 'opacity 8s';
+        confirmationMessage.style.opacity = 0;
+    }, 1000);
+    setTimeout(() => {
+        confirmationMessage.style.display = 'none';
+    }, 9200); // 2000ms for transition
+}
+"""
+
+# Add CSS for the fade-out effect
+hide_css = """
+<style>
+#confirmation-message {
+    opacity: 1;
+}
+</style>
+"""