Update app.py

app.py

@@ -296,28 +296,49 @@ def process_lyrics(lyrics: str, song_name: str = "", artist_name: str = ""):
     return display_html, youtube_embed, "Click on a word to get its definition."
 
 
-# Define the Gradio interface
-with gr.Blocks(js="""
-    function attach_click_listeners() {
-        const clickableWords = document.querySelectorAll('.clickable-word');
-        const hiddenInput = document.getElementById('hidden_json_input');
-        
-        clickableWords.forEach(wordSpan => {
-            wordSpan.addEventListener('click', function() {
-                const word = this.dataset.word;
-                const lang = this.dataset.lang;
-                
-                const data = { word: word, lang: lang };
-                hiddenInput.value = JSON.stringify(data);
-                
-                // Trigger the 'input' event to notify Gradio
-                const event = new Event('input', { bubbles: true });
-                hiddenInput.dispatchEvent(event);
-            });
-        });
+def welcome(name):
+    return f"Welcome to Gradio, {name}!"
+
+js = """
+function createGradioAnimation() {
+    var container = document.createElement('div');
+    container.id = 'gradio-animation';
+    container.style.fontSize = '2em';
+    container.style.fontWeight = 'bold';
+    container.style.textAlign = 'center';
+    container.style.marginBottom = '20px';
+
+    var text = 'Welcome to Gradio!';
+    for (var i = 0; i < text.length; i++) {
+        (function(i){
+            setTimeout(function(){
+                var letter = document.createElement('span');
+                letter.style.opacity = '0';
+                letter.style.transition = 'opacity 0.5s';
+                letter.innerText = text[i];
+
+                container.appendChild(letter);
+
+                setTimeout(function() {
+                    letter.style.opacity = '1';
+                }, 50);
+            }, i * 250);
+        })(i);
     }
-""") as demo:
 
+    var gradioContainer = document.querySelector('.gradio-container');
+    gradioContainer.insertBefore(container, gradioContainer.firstChild);
+
+    return 'Animation created';
+}
+"""
+
+# Define the Gradio interface
+with gr.Blocks(js=js) as demo:
+
+    inp = gr.Textbox(placeholder="What is your name?")
+    out = gr.Textbox()
+    inp.change(welcome, inp, out)
     # This is the hidden component that our JavaScript will update.
     # The `elem_id` is crucial for the JS to find it.
     hidden_json_input = gr.Textbox(visible=False, elem_id="hidden_json_input")