Update app.py

app.py

@@ -1,6 +1,40 @@
 from huggingface_hub import InferenceClient
 import gradio as gr
 
+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 = 'Hi 👋, I'm Rishiraj Acharya (ঋষিরাজ আচার্য্য)';
+    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);
+    }
+
+    var gradioContainer = document.querySelector('.gradio-container');
+    gradioContainer.insertBefore(container, gradioContainer.firstChild);
+
+    return 'Animation created';
+}
+"""
+
 client = InferenceClient(
     "mistralai/Mixtral-8x7B-Instruct-v0.1"
 )
@@ -19,13 +53,13 @@ def show_info(section):
         return "Select a section to display information."
 
 # Creating Gradio Interface
-with gr.Blocks() as app:
+with gr.Blocks(js=js) as app:
     with gr.Row():
         with gr.Column():
             gr.Markdown("# Hi 👋, I'm Rishiraj Acharya (ঋষিরাজ আচার্য্য)")
             gr.Markdown("## Google Developer Expert in ML ✨ | Hugging Face Fellow 🤗 | GSoC '22 at TensorFlow 👨🏻‍🔬 | TFUG Kolkata Organizer 🎙️ | Kaggle Master 🧠 | Dynopii ML Engineer 👨🏻‍💻")
             gr.Markdown("### I work with natural language understanding, machine translation, named entity recognition, question answering, topic segmentation, and automatic speech recognition. My work typically relies on very large quantities of data and innovative methods in deep learning to tackle user challenges around the world — in languages from around the world. My areas of work include Natural Language Engineering, Language Modeling, Text-to-Speech Software Engineering, Speech Frameworks Engineering, Data Science, and Research.")
-            gr.HTML(value='<h3 align="left">Connect with me:</h3> <p align="center"> <a href="https://twitter.com/rishirajacharya" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/twitter.svg" alt="rishirajacharya" height="30" width="40" /></a> <a href="https://linkedin.com/in/rishirajacharya" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/linked-in-alt.svg" alt="rishirajacharya" height="30" width="40" /></a> <a href="https://kaggle.com/rishirajacharya" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/kaggle.svg" alt="rishirajacharya" height="30" width="40" /></a> <a href="https://fb.com/acharyarishiraj" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/facebook.svg" alt="acharyarishiraj" height="30" width="40" /></a> <a href="https://instagram.com/rishirajacharya" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/instagram.svg" alt="rishirajacharya" height="30" width="40" /></a> </p>')
+            gr.HTML(value='<a href="https://twitter.com/rishirajacharya" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/twitter.svg" alt="rishirajacharya" height="30" width="40" /></a><a href="https://linkedin.com/in/rishirajacharya" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/linked-in-alt.svg" alt="rishirajacharya" height="30" width="40" /></a><a href="https://instagram.com/rishirajacharya" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/instagram.svg" alt="rishirajacharya" height="30" width="40" /></a>')
         with gr.Column():
             gr.Image("profile.png")
     
@@ -125,6 +159,7 @@ llm = gr.ChatInterface(
     title="Hi 👋, I'm Rishiraj Acharya (ঋষিরাজ আচার্য্য)",
     examples=examples,
     concurrency_limit=20,
+    js=js,
 )
 
 demo = gr.TabbedInterface([app, llm], ["About", "Chat"])