Modified the example sentences and add utils and pkl file for organised and clean code

app.py

@@ -17,323 +17,43 @@ import time
 import io
 from dotenv import load_dotenv
 from S3_bucket import AWS
+from utils import js, js_reload
+import pickle
 
+js=str(js)
+js_reload=str(js_reload)
 load_dotenv()
+
 TTS_secret_key=os.getenv("TTS_SECRET_KEY")
 TTS_URL=os.getenv('TTS_URL')
+
+
 aws=AWS()
 
-js = """
-function createGradioAnimation() {
-    // Create animation container
-    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';
-    container.style.color = '#ffffff';
-    
-    // Animated text creation
-    var text = '🗣️ ORI Text-to-Speech (TTS) Showcase 🎙️';
-    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.3s';
-                letter.innerText = text[i];
-                
-                container.appendChild(letter);
-                
-                setTimeout(function() {
-                    letter.style.opacity = '1';
-                }, 25);
-            }, i * 100);
-        })(i);
-    }
-    
-    // Add container to gradio
-    var gradioContainer = document.querySelector('.gradio-container');
-    gradioContainer.insertBefore(container, gradioContainer.firstChild);
-    
-    // Background styling
-    document.body.style.backgroundColor = '#1a1a1a';
-    gradioContainer.style.backgroundColor = '#1a1a1a';
-    
-    // Input containers styling
-    var inputContainers = document.querySelectorAll('.input-container');
-    inputContainers.forEach(function(container) {
-        container.style.backgroundColor = '#2a2a2a';
-        container.style.border = '1px solid #333';
-        container.style.borderRadius = '8px';
-        container.style.padding = '20px';
-        container.style.marginBottom = '20px';
-    });
-    
-    // Generate button styling
-    var generateButton = document.querySelector('.b');
-    if (generateButton) {
-        generateButton.style.backgroundColor = '#ea580c';
-        generateButton.style.color = 'white';
-        generateButton.style.border = 'none';
-        generateButton.style.borderRadius = '4px';
-        generateButton.style.padding = '10px 20px';
-        generateButton.style.width = '100%';
-        generateButton.style.cursor = 'pointer';
-        generateButton.style.transition = 'background-color 0.3s';
-        
-        generateButton.addEventListener('mouseenter', function () {
-            generateButton.style.backgroundColor = '#f9923c';
-        });
-        generateButton.addEventListener('mouseleave', function () {
-            generateButton.style.backgroundColor = '#ea580c';
-        });
-    }
-    
-    // Dropdowns styling
-    var dropdowns = document.querySelectorAll('select');
-    dropdowns.forEach(function(dropdown) {
-        dropdown.style.backgroundColor = '#2a2a2a';
-        dropdown.style.color = 'white';
-        dropdown.style.border = '1px solid #333';
-    });
-    
 
-   
-       // Rating component styling
-    var ratingContainer = document.getElementById('rating-stars');
-    if (ratingContainer) {
- 
-        
-        // Style individual radio options
-        var radioOptions = ratingContainer.querySelectorAll('label');
-        radioOptions.forEach(function(option) {
-            option.style.color = '#ffffff';
-            option.style.cursor = 'pointer';
-            option.style.transition = 'transform 0.2s';
-            option.style.flex = '1';  // Make each option take equal space
-            option.style.textAlign = 'center';  // Center the content
-            option.style.display = 'flex';
-            option.style.justifyContent = 'center';
-            option.style.alignItems = 'center';
-            option.style.padding = '10px';
-            
-            // Add hover effect
-            option.addEventListener('mouseenter', function() {
-                this.style.transform = 'scale(1.1)';
-            });
-            
-            option.addEventListener('mouseleave', function() {
-                this.style.transform = 'scale(1)';
-            });
-        });
-
-        // Style the radio inputs
-        var radioInputs = ratingContainer.querySelectorAll('input[type="radio"]');
-        radioInputs.forEach(function(input) {
-            input.style.margin = '0 8px 0 0';  // Add some space between radio button and stars
-        });
-    }
+sep='|'        
+
+
+with open('tts_data.pickle', 'rb') as f:
+    loaded_data = pickle.load(f)
     
-    return 'Animation created';
-}
-"""
-
-js_reload = """
-function reloadPage() {
-    setTimeout(function() {
-        window.location.reload();
-    }, 5000); // Reload after 5 seconds
-}
-"""
-
-# language_codes = {
-#     "English": "en",
-#     "Hindi": "hi",
-#     "Tamil": "ta",
-#     "Telugu": "te",
-#     "Marathi": "mr",
-#     "Malayalam": "ml",
-#     "Punjabi": "pa",
-#     "Odia": "or",
-#     "Bengali": "bn"
-# }
-
-language_codes = {
-    "English": "hi",
-    "Hindi": "hi",
-
-}
-
-
-language_sentences = {
-  "English": [
-        "The best time to plant a tree was 20 years ago. The second best time is now.",
-        "Strive not to be a success, but rather to be of value.",
-        "Two roads diverged in a wood, and I took the one less traveled by, and that has made all the difference.",
-        "The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle.",
-        "In three words I can sum up everything I've learned about life: it goes on.",
-        "The future belongs to those who believe in the beauty of their dreams.",
-        "It is during our darkest moments that we must focus to see the light.",
-        "Whatever you are, be a good one.",
-        "The journey of a thousand miles begins with a single step.",
-        "You miss 100% of the shots you don't take.",
-        "Change your thoughts and you change your world.",
-        "If you want to live a happy life, tie it to a goal, not to people or things.",
-        "The greatest glory in living lies not in never falling, but in rising every time we fall.",
-        "Life is really simple, but we insist on making it complicated.",
-        "The best revenge is massive success.",
-        "The journey of a thousand miles begins with a single step.",
-        "In three words I can sum up everything I've learned about life: it goes on.",
-        "The future belongs to those who believe in the beauty of their dreams.",
-        "It is during our darkest moments that we must focus to see the light.",
-        "If you want to live a happy life, tie it to a goal, not to people or things.",
-        "Believe you can and you're halfway there.",
-        "When one door of happiness closes, another opens.",
-        "The purpose of our lives is to be happy.",
-        "Life isn't about finding yourself, it's about creating yourself.",
-        "Success is not final, failure is not fatal: it is the courage to continue that counts.",
-        "Our greatest fear should not be of failure but of succeeding at things in life that don't really matter. When you realize there is nothing lacking, the whole world belongs to you. It's important to remember that we all have magic inside us, and it's important to remember that we all have magic inside us.",
-        "Life is not measured by the number of breaths we take, but by the moments that take our breath away. The purpose of life is not to be happy. It is to be useful, to be honorable, to be compassionate, to have it make some difference that you have lived and lived well.",
-        "The most difficult thing is the decision to act, the rest is merely tenacity. The fears we don't face become our limits. Happiness is not something ready-made. It comes from your own actions. You have within you right now, everything you need to deal with whatever the world can throw at you.",
-        "It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood.",
-        "Your time is limited, don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of other's opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.",
-        "There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle. For every minute you are angry you lose sixty seconds of happiness. The two most important days in your life are the day you are born and the day you find out why.",
-        "Darkness cannot drive out darkness: only light can do that. Hate cannot drive out hate: only love can do that. We must accept finite disappointment, but never lose infinite hope. In the end, we will remember not the words of our enemies, but the silence of our friends.",
-        "Education is the most powerful weapon which you can use to change the world. A good head and a good heart are always a formidable combination. It always seems impossible until it's done. For to be free is not merely to cast off one's chains, but to live in a way that respects and enhances the freedom of others."
-    ],
-    "Hindi": [
-        "कल किसने देखा है, तो आज क्यों खोएं?",
-        "खुशी एक मनोदशा है, कोई गंतव्य नहीं।",
-        "सफलता अंतिम नहीं है, असफलता घातक नहीं है: यह जारी रखने का साहस है जो मायने रखता है।",
-        "जीवन एक दर्पण है: यह आप पर तभी मुस्कुराएगा जब ���प उस पर मुस्कुराएंगे।",
-        "यदि आप चाहते हैं कि आपके सपने सच हों, तो पहली बात आपको जागना है।",
-        "आप जो कुछ भी हैं, एक अच्छे बनो।",
-        "कल से सीखें, आज के लिए जिएं, कल के लिए आशा करें।",
-        "एक हजार मील की यात्रा एक कदम से शुरू होती है।",
-        "आप उन 100% शॉट्स को याद करते हैं जिन्हें आप नहीं लेते हैं।",
-        "अपने विचारों को बदलें और आप अपनी दुनिया बदल दें।",
-        "यदि आप एक खुशहाल जीवन जीना चाहते हैं, तो इसे एक लक्ष्य से बांधें, लोगों या चीजों से नहीं।",
-        "जीने में सबसे बड़ी महिमा कभी न गिरने में नहीं है, बल्कि हर बार गिरने पर उठने में है।",
-        "जीवन वास्तव में सरल है, लेकिन हम इसे जटिल बनाने पर जोर देते हैं।",
-        "सबसे अच्छा बदला भारी सफलता है।",
-        "जो होता है अच्छे के लिए होता है।",
-        "सफलता अंतिम नहीं है, असफलता घातक नहीं है: यह जारी रखने का साहस है जो मायने रखता है। इसलिए कभी भी हार न मानें, कभी भी निराश न हों। जीवन एक संघर्ष है जिसमें हर कदम पर नई चुनौतियां आती हैं, लेकिन इन्हीं चुनौतियों से हम मजबूत होते हैं और अपने लक्ष्य की ओर बढ़ते हैं। असफलता सिर्फ एक अनुभव है जो हमें बेहतर बनाता है।",
-        "जीवन एक दर्पण है: यह आप पर तभी मुस्कुराएगा जब आप उस पर मुस्कुराएंगे। हर सुबह एक नई शुरुआत है, एक नया अवसर है कुछ नया करने का, कुछ बेहतर करने का। जीवन की खूबसूरती इसके उतार-चढ़ाव में है। दुख के बाद सुख और अंधेरे के बाद उजाला जीवन का नियम है। इसलिए हमेशा आशावादी रहें और अपने सपनों को जीवित रखें।",
-        "यदि आप चाहते हैं कि आपके सपने सच हों, तो पहली बात आपको जागना है। सपने देखना ही काफी नहीं है, उन्हें पूरा करने के लिए कड़ी मेहनत और दृढ़ संकल्प की आवश्यकता होती है। कोई भी महान कार्य एक दिन में नहीं होता, यह धीरे-धीरे छोटे-छोटे प्रयासों से बनता है। इसलिए धैर्य रखें और अपने लक्ष्य की ओर निरंतर बढ़ते रहें।",
-        "यदि आप एक खुशहाल जीवन जीना चाहते हैं, तो इसे एक लक्ष्य से बांधें, लोगों या चीजों से नहीं। वास्तविक खुशी अंदर से आती है, बाहरी चीजों से नहीं। धन, प्रसिद्धि या भौतिक वस्तुएं क्षणिक संतुष्टि दे सकती हैं, लेकिन स्थायी खुशी आत्म-संतुष्टि और दूसरों की सेवा से आती है। जीवन का मूल्य इसमें है कि आपने कितना कमाया नहीं, बल्कि आपने कितने लोगों के जीवन को प्रभावित किया।",
-        "जीने में सबसे बड़ी महिमा कभी न गिरन��� में नहीं है, बल्कि हर बार गिरने पर उठने में है। हर असफलता एक सीख है, हर गलती एक अनुभव। जो व्यक्ति अपनी गलतियों से सीखता है, वह जीवन में आगे बढ़ता है। जबकि वह जो अपनी गलतियों को दोहराता है, वहीं का वहीं रह जाता है। इसलिए कभी भी गिरने से न डरें, बल्कि गिरकर न उठने से डरें।",
-        "मनुष्य के जीवन का उद्देश्य केवल अपने स्वार्थ की पूर्ति नहीं होना चाहिए, बल्कि समाज और राष्ट्र के प्रति भी उसका कर्तव्य होना चाहिए। जीवन का सच्चा आनंद दूसरों की सेवा में है, क्योंकि जब हम दूसरों को खुशी देते हैं तो हमारी आत्मा को भी शांति मिलती है। यह संसार एक बड़ा परिवार है जिसमें हर व्यक्ति का अपना महत्व है और हर किसी को सम्मान का अधिकार है।",
-        "प्रकृति हमारी माँ है और हमें उसकी रक्षा करनी चाहिए। हमारा पर्यावरण हमारा जीवन है, और इसे संरक्षित करना हमारा कर्तव्य है। प्रकृति ने हमें हवा, पानी, भोजन और जीवन दिया है, और बदले में हमें उसकी देखभाल करनी चाहिए। पेड़-पौधे लगाएं, पानी बचाएं, प्रदूषण कम करें और पृथ्वी को एक स्वस्थ और सुरक्षित स्थान बनाएं। आने वाली पीढ़ियों के लिए एक बेहतर विश्व छोड़ना हमारा उत्तरदायित्व है।"
-    ],
-    "Tamil": [
-        "வாழ்க்கை ஒரு பயணம்.",
-        "நேரம் பொன் போன்றது.",
-        "கற்றது கைமண் அளவு, கல்லாதது உலகளவு.",
-        "தொடர்ந்து முயற்சி செய்.",
-        "வெற்றி பெற வேண்டும்."
-    ],
-    "Telugu": [
-        "జీవితం ఒక ప్రయాణం.",
-        "సమయం విలువైనది.",
-        "విజయానికి కష్టపడాలి.",
-        "నేటి పని నేడే చేయాలి.",
-        "ప్రతి సమస్యకు పరిష్కారం ఉంటుంది."
-    ],
-    "Marathi": [
-        "जीवन हे एक प्रवास आहे.",
-        "वेळ हाच खरा धन आहे.",
-        "प्रयत्ने वाळूचे कण रत्न होतात.",
-        "आजचे काम उद्यावर टाकू नका.",
-        "शिक्षणाशिवाय जीवन अपूर्ण आहे."
-    ],
-    "Malayalam": [
-        "ജീവിതം ഒരു യാത്രയാണ്.",
-        "സമയം വിലപ്പെട്ടതാണ്.",
-        "വിജയത്തിന് കഠിനാധ്വാനം ആവശ്യമാണ്.",
-        "ഇന്നത്തെ ജോലി നാളത്തേക്ക് മാറ്റരുത്.",
-        "എല്ലാ പ്രശ്നങ്ങൾക്കും പരിഹാരമുണ്ട്."
-    ],
-    "Punjabi": [
-        "ਜਿੰਦਗੀ ਇੱਕ ਸਫ਼ਰ ਹੈ।",
-        "ਸਮਾਂ ਬਹੁਤ ਕੀਮਤੀ ਹੈ।",
-        "ਮਿਹਨਤ ਸਫਲਤਾ ਦੀ ਕੁੰਜੀ ਹੈ।",
-        "ਅੱਜ ਦਾ ਕੰਮ ਕੱਲ੍ਹ ਤੇ ਨਾ ਛੱਡੋ।",
-        "ਹਰ ਮੁਸ਼ਕਿਲ ਦਾ ਹੱਲ ਹੈ।"
-    ],
-    "Odia": [
-        "ଜୀବନ ଏକ ଯାତ୍ରା।",
-        "ସମୟ ବହୁତ ମୂଲ୍ୟବାନ।",
-        "ପରିଶ୍ରମ ସଫଳତାର ଚାବିକାଠି।",
-        "ଆଜିର କାମ କାଲିକୁ ଛାଡନ୍ତୁ ନାହିଁ।",
-        "ପ୍ରତ୍ୟେକ ସମସ୍ୟାର ସମାଧାନ ଅଛି।"
-    ],
-    "Bengali": [
-        "জীবন একট�� যাত্রা।",
-        "সময় খুব মূল্যবান।",
-        "পরিশ্রম সফলতার চাবিকাঠি।",
-        "আজকের কাজ আজকেই করুন।",
-        "প্রতিটি সমস্যার সমাধান আছে।"
-    ]
-}
-
-languages = list(language_codes.keys())
-languages.sort()
-
-
-
-agents = {
-    # 'Amy': 'Amy',
-    # 'Morgan': 'Morgan',
-    # 'Amit': 'Amit',
-    'Ankur': 'Ankur',
-    'Salima': 'Salima',
-    'Sufi': 'Sufi',
-    'Aliyah': 'Aliyah',
-    'Jasmine': 'Jasmine',
-    'Fatima': 'Fatima',
-    'Harry': 'Harry',
-    'Sally': 'Sally',
-    'Neha': 'Neha',
-    'Soniya': 'Soniya_1',
-    'Dev': 'Modi',
-    # 'Alisha': 'Alisha',
-    'Sara': 'Sara',
-    'Susan': 'Susan',
-    # 'Carol': 'Carol',
-    # 'Arjun': 'Arjun',
-    'Aditi': 'Amy_neutral_1',
-    'Anshika': 'Amy_neutral_2',
-    # 'Anika': 'Amy_negative_1',
-    'Ishita': 'Amy_negative_2',
-    # 'Riya': 'Amy_positive_1',
-    # 'Priya': 'Priya',
-    'Meera': 'Amy_positive_3',
-    'Nisha': 'Amy_neutral_3',
-    'Shruti': 'Amy_negative_3',
-    # 'Pooja': 'Pooja',
-    'Amrita': 'Amy_comforting_1',
-    'Prachi': 'Amy_excited_1',
-    # 'Maria': 'Maria',
-    # 'Rashmi': 'Rashmi',
-    # 'Kavita': 'Kavita',
-    # 'Jyoti': 'Jyoti',
-    # 'Kavya': 'Kavya',
-}
+language_sentences = loaded_data["language_sentences"]
+languages = loaded_data["languages"]
+agents = loaded_data["agents"]
+language_codes=loaded_data['language_codes']
 agents_name=agents.keys()
 
+
 def generate_session_id():
     sd=str(uuid.uuid4())
     print(f"New session started with session IDs: {sd}")
     return sd
 
-session_id=None
-
 
 def get_random_sentence(language):
     return random.choice(language_sentences[language])
 
+
 def toggle_generate_button_state(choice, text_input, recording_data=None):
     if not text_input.strip():
         return gr.update(interactive=False)
@@ -354,7 +74,24 @@ def show_rating():
     return gr.Slider(visible=True)
 
 
-sep='|'        
+
+def save_generated_audio(audio_data,session_id):
+    s3_folder = "TTS_gradio/generated_audios"
+    s3_key = f"{s3_folder}/{session_id}_{uuid.uuid4()}.wav"
+        
+    try:
+        audio_byte_obj=audio_data.tobytes()
+        audio_file = io.BytesIO(audio_byte_obj)
+        aws.s3_upload_wav(obj=audio_file,s3_key=s3_key)
+        print(f"Saved generated audio to: {s3_key}")
+        return s3_key
+    except Exception as e:
+        print(f"Error saving generated audio: {e}")
+        return None
+
+
+
+
 
 def ensure_csv_exists(sep='|'):
     s3_csv_file_key = "TTS_gradio/gradio_tts_feedback.csv"
@@ -386,6 +123,7 @@ def ensure_csv_exists(sep='|'):
     print(f"TTS_feedback CSV already exists at {s3_csv_file_key}")
     return s3_csv_file_key
 
+
 def ensure_error_logs_csv_exists(sep='|'):
     s3_csv_file_key = "TTS_gradio/gradio_tts_error_logs.csv"
     exists = aws.check_if_exists(object_key=s3_csv_file_key)
@@ -415,6 +153,7 @@ def ensure_error_logs_csv_exists(sep='|'):
     print(f"TTS_error_log CSV already exists at {s3_csv_file_key}")
     return s3_csv_file_key
 
+
 def log_initial_submission(code:int, session_id, language, input_method, agent_used, voice_path, text_input, 
                            expressiveness=1.0, stability=100, clarity=1.0, speech_rate=1.0, 
                            loudness=1.0, refine_generation=False, err_code=None, err_msg=None, sep='|'):
@@ -503,6 +242,7 @@ def log_initial_submission(code:int, session_id, language, input_method, agent_u
         except Exception as e:
             print(f"Error saving Error logging: {e}")
             return f"Error: Could not save error data - {str(e)}"
+        
 
 def update_rating(session_id, rating, sep='|'):
     try:
@@ -527,7 +267,7 @@ def update_rating(session_id, rating, sep='|'):
             aws.s3.put_object(Key=s3_csv_file, Bucket=aws.bucket_name, Body=csv_buffer.getvalue())
             
             print(f"Updated rating for session {session_id} to {star_dict[rating]}")
-            return f"Your rating of {star_dict[rating]} submitted successfully!!"
+            return f"Your rating of {star_dict[rating]} submitted successfully!!\nThank you for your feedback!!"
         else:
             print(f"Session {session_id} not found in the CSV file")
             return "Error: Session not found"
@@ -538,20 +278,6 @@ def update_rating(session_id, rating, sep='|'):
 
 
 
-
-def save_generated_audio(audio_data,session_id):
-    s3_folder = "TTS_gradio/generated_audios"
-    s3_key = f"{s3_folder}/{session_id}_{uuid.uuid4()}.wav"
-        
-    try:
-        audio_byte_obj=audio_data.tobytes()
-        audio_file = io.BytesIO(audio_byte_obj)
-        aws.s3_upload_wav(obj=audio_file,s3_key=s3_key)
-        print(f"Saved generated audio to: {s3_key}")
-        return s3_key
-    except Exception as e:
-        print(f"Error saving generated audio: {e}")
-        return None
     
 def increase_volume(audio_array, factor=10):
     """
@@ -1016,12 +742,12 @@ def tts_tab():
                     visible=False,
                     interactive=True,
                     container=True,
-                    elem_id="rating-stars"      
+                    elem_id="rating-stars",      
                     )
                 with gr.Column():
                     submit_button = gr.Button("📤 Submit Rating", elem_classes='button', visible=False, variant='primary')
                     
-    rating_message = gr.Textbox(label="", visible=False)
+    rating_message = gr.Textbox(label="", visible=False,lines=2)
 
 
     # Function to validate text length and update character count
@@ -1101,10 +827,9 @@ def tts_tab():
             outputs=rating_message,
             show_progress='full'
         ).then(
-            fn=lambda: gr.Textbox(visible=True, lines=1),
-            outputs=rating_message
-        ).then(
-            fn=None,
+            fn=lambda: gr.Textbox(visible=True, lines=2),
+            outputs=rating_message,
+            show_progress='full'
             
         )
 
@@ -1117,13 +842,14 @@ def tts_tab():
 
 def about_tab():
     with gr.Column(elem_classes="container"):
+        gr.Markdown('<div style="text-align: center; font-size: 2.4em;"> 🚀 Welcome to ORI Text-to-Speech </div>')
+
         return gr.Markdown("""
-        # 🚀 Welcome to ORI Text-to-Speech
 
-        ## 🌟 About Our Technology
+        ## 🌟 About Our Technology :
         Welcome to the next generation of Text-to-Speech technology! Our cutting-edge system combines advanced AI with neural voice synthesis to deliver unprecedented quality and naturalness in speech generation.
 
-        ### ✨ Key Features
+        ## ✨ Key Features :
         
         #### 🎯 Core Capabilities
         *  Enterprise-grade voice models

tts_data.pickle

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9a54cb2ee276e0adf0e4a8a7eaa7a368998c8d3969d766f3c8b9ce86ab4df716
+size 16738

utils.py

@@ -0,0 +1,124 @@
+js = """
+function createGradioAnimation() {
+    // Create animation container
+    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';
+    container.style.color = '#ffffff';
+    
+    // Animated text creation
+    var text = '🗣️ ORI Text-to-Speech (TTS) Showcase 🎙️';
+    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.3s';
+                letter.innerText = text[i];
+                
+                container.appendChild(letter);
+                
+                setTimeout(function() {
+                    letter.style.opacity = '1';
+                }, 25);
+            }, i * 100);
+        })(i);
+    }
+    
+    // Add container to gradio
+    var gradioContainer = document.querySelector('.gradio-container');
+    gradioContainer.insertBefore(container, gradioContainer.firstChild);
+    
+    // Background styling
+    document.body.style.backgroundColor = '#1a1a1a';
+    gradioContainer.style.backgroundColor = '#1a1a1a';
+    
+    // Input containers styling
+    var inputContainers = document.querySelectorAll('.input-container');
+    inputContainers.forEach(function(container) {
+        container.style.backgroundColor = '#2a2a2a';
+        container.style.border = '1px solid #333';
+        container.style.borderRadius = '8px';
+        container.style.padding = '20px';
+        container.style.marginBottom = '20px';
+    });
+    
+    // Generate button styling
+    var generateButton = document.querySelector('.b');
+    if (generateButton) {
+        generateButton.style.backgroundColor = '#ea580c';
+        generateButton.style.color = 'white';
+        generateButton.style.border = 'none';
+        generateButton.style.borderRadius = '4px';
+        generateButton.style.padding = '10px 20px';
+        generateButton.style.width = '100%';
+        generateButton.style.cursor = 'pointer';
+        generateButton.style.transition = 'background-color 0.3s';
+        
+        generateButton.addEventListener('mouseenter', function () {
+            generateButton.style.backgroundColor = '#f9923c';
+        });
+        generateButton.addEventListener('mouseleave', function () {
+            generateButton.style.backgroundColor = '#ea580c';
+        });
+    }
+    
+    // Dropdowns styling
+    var dropdowns = document.querySelectorAll('select');
+    dropdowns.forEach(function(dropdown) {
+        dropdown.style.backgroundColor = '#2a2a2a';
+        dropdown.style.color = 'white';
+        dropdown.style.border = '1px solid #333';
+    });
+    
+
+   
+       // Rating component styling
+    var ratingContainer = document.getElementById('rating-stars');
+    if (ratingContainer) {
+ 
+        
+        // Style individual radio options
+        var radioOptions = ratingContainer.querySelectorAll('label');
+        radioOptions.forEach(function(option) {
+            option.style.color = '#ffffff';
+            option.style.cursor = 'pointer';
+            option.style.transition = 'transform 0.2s';
+            option.style.flex = '1';  // Make each option take equal space
+            option.style.textAlign = 'center';  // Center the content
+            option.style.display = 'flex';
+            option.style.justifyContent = 'center';
+            option.style.alignItems = 'center';
+            option.style.padding = '10px';
+            
+            // Add hover effect
+            option.addEventListener('mouseenter', function() {
+                this.style.transform = 'scale(1.1)';
+            });
+            
+            option.addEventListener('mouseleave', function() {
+                this.style.transform = 'scale(1)';
+            });
+        });
+
+        // Style the radio inputs
+        var radioInputs = ratingContainer.querySelectorAll('input[type="radio"]');
+        radioInputs.forEach(function(input) {
+            input.style.margin = '0 8px 0 0';  // Add some space between radio button and stars
+        });
+    }
+    
+    return 'Animation created';
+}
+"""
+
+js_reload = """
+function reloadPage() {
+    setTimeout(function() {
+        window.location.reload();
+    }, 5000); // Reload after 5 seconds
+}
+"""