Update app.py

app.py

@@ -163,25 +163,51 @@ def transliterate_to_hk(text, lang_choice):
         print(f"Transliteration error: {e}")
         return text
 
-def transliterate_to_roman(text, lang_choice):
-    """Transliterate to more readable Roman script"""
+def transliterate_to_simple_roman(text, lang_choice):
+    """Transliterate to very simple, easy-to-read Roman letters"""
     if not text or not text.strip():
         return ""
     
-    mapping = {
-        "Tamil": sanscript.TAMIL,
-        "Malayalam": sanscript.MALAYALAM,
-        "English": None
-    }
-    
-    if mapping[lang_choice] is None:
+    if lang_choice == "English":
         return text  # Return as-is for English
     
     try:
-        # Clean the text and transliterate to IAST (more readable)
-        cleaned_text = text.strip()
-        transliterated = transliterate(cleaned_text, mapping[lang_choice], sanscript.IAST)
-        return transliterated if transliterated else text
+        # Direct character mapping to simple Roman letters
+        if lang_choice == "Tamil":
+            # Tamil to simple Roman mapping
+            tamil_map = {
+                'அ': 'a', 'ஆ': 'aa', 'இ': 'i', 'ஈ': 'ee', 'உ': 'u', 'ஊ': 'oo',
+                'எ': 'e', 'ஏ': 'e', 'ஐ': 'ai', 'ஒ': 'o', 'ஓ': 'o', 'ஔ': 'au',
+                'க': 'ka', 'ங': 'nga', 'ச': 'cha', 'ஞ': 'nya', 'ட': 'ta', 'ண': 'na',
+                'த': 'tha', 'ந': 'na', 'ப': 'pa', 'ம': 'ma', 'ய': 'ya', 'ர': 'ra',
+                'ல': 'la', 'வ': 'va', 'ழ': 'zha', 'ள': 'la', 'ற': 'ra', 'ன': 'na',
+                '்': '', 'ா': 'aa', 'ி': 'i', 'ீ': 'ee', 'ு': 'u', 'ூ': 'oo',
+                'ெ': 'e', 'ே': 'e', 'ை': 'ai', 'ொ': 'o', 'ோ': 'o', 'ௌ': 'au'
+            }
+            simple_text = ""
+            for char in text:
+                simple_text += tamil_map.get(char, char)
+            return simple_text
+            
+        elif lang_choice == "Malayalam":
+            # Malayalam to simple Roman mapping
+            malayalam_map = {
+                'അ': 'a', 'ആ': 'aa', 'ഇ': 'i', 'ഈ': 'ee', 'ഉ': 'u', 'ഊ': 'oo',
+                'എ': 'e', 'ഏ': 'e', 'ഐ': 'ai', 'ഒ': 'o', 'ഓ': 'o', 'ഔ': 'au',
+                'ക': 'ka', 'ഗ': 'ga', 'ങ': 'nga', 'ച': 'cha', 'ജ': 'ja', 'ഞ': 'nya',
+                'ട': 'ta', 'ഡ': 'da', 'ണ': 'na', 'ത': 'tha', 'ദ': 'da', 'ന': 'na',
+                'പ': 'pa', 'ബ': 'ba', 'മ': 'ma', 'യ': 'ya', 'ര': 'ra', 'ല': 'la',
+                'വ': 'va', 'ശ': 'sha', 'ഷ': 'sha', 'സ': 'sa', 'ഹ': 'ha', 'ള': 'la',
+                '്': '', 'ാ': 'aa', 'ി': 'i', 'ീ': 'ee', 'ു': 'u', 'ൂ': 'oo',
+                'െ': 'e', 'േ': 'e', 'ൈ': 'ai', 'ൊ': 'o', 'ോ': 'o', 'ൌ': 'au'
+            }
+            simple_text = ""
+            for char in text:
+                simple_text += malayalam_map.get(char, char)
+            return simple_text
+        
+        return text
+        
     except Exception as e:
         print(f"Transliteration error: {e}")
         return text
@@ -222,11 +248,11 @@ def transcribe_once(audio_path, language_choice, beam_size, temperature):
     return transcription.strip()
 
 def create_tabular_feedback(intended, actual, lang_choice):
-    """Create comprehensive tabular feedback with transliteration"""
+    """Create clean, readable tabular feedback without background colors"""
     
-    # Get transliterations
-    intended_roman = transliterate_to_roman(intended, lang_choice)
-    actual_roman = transliterate_to_roman(actual, lang_choice)
+    # Get simple transliterations
+    intended_roman = transliterate_to_simple_roman(intended, lang_choice)
+    actual_roman = transliterate_to_simple_roman(actual, lang_choice)
     intended_hk = transliterate_to_hk(intended, lang_choice)
     actual_hk = transliterate_to_hk(actual, lang_choice)
     
@@ -242,49 +268,49 @@ def create_tabular_feedback(intended, actual, lang_choice):
     
     # Create word-by-word comparison table
     feedback_html = """
-    <div style='font-family: Arial, sans-serif; padding: 20px; background: #f8f9fa; border-radius: 12px; margin: 10px 0;'>
+    <div style='font-family: Arial, sans-serif; padding: 20px; margin: 10px 0;'>
         <h3 style='color: #2c3e50; margin-bottom: 20px; text-align: center;'>📊 Pronunciation Analysis</h3>
     """
     
-    # Overview table
+    # Overview table - completely clean
     feedback_html += """
     <div style='margin-bottom: 25px;'>
         <h4 style='color: #34495e; margin-bottom: 15px;'>📝 Text Comparison</h4>
-        <table style='width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1);'>
+        <table style='width: 100%; border-collapse: collapse; border: 2px solid #ddd;'>
             <thead>
-                <tr style='background: #3498db; color: white;'>
-                    <th style='padding: 12px; text-align: left; font-weight: bold;'>Type</th>
-                    <th style='padding: 12px; text-align: left; font-weight: bold;'>Original Script</th>
-                    <th style='padding: 12px; text-align: left; font-weight: bold;'>Roman/IAST</th>
+                <tr style='border-bottom: 2px solid #ddd;'>
+                    <th style='padding: 15px; text-align: left; font-weight: bold; color: #2c3e50; border-right: 1px solid #ddd;'>Type</th>
+                    <th style='padding: 15px; text-align: left; font-weight: bold; color: #2c3e50; border-right: 1px solid #ddd;'>Original Text</th>
+                    <th style='padding: 15px; text-align: left; font-weight: bold; color: #2c3e50;'>Simple English Sounds</th>
                 </tr>
             </thead>
             <tbody>
-                <tr style='background: #e8f5e8;'>
-                    <td style='padding: 12px; font-weight: bold; color: #27ae60;'>🎯 Target</td>
-                    <td style='padding: 12px; font-family: monospace;'>{}</td>
-                    <td style='padding: 12px; font-family: monospace; font-style: italic;'>{}</td>
+                <tr style='border-bottom: 1px solid #ddd;'>
+                    <td style='padding: 15px; font-weight: bold; color: #27ae60; border-right: 1px solid #ddd;'>🎯 Target</td>
+                    <td style='padding: 15px; font-family: monospace; font-size: 18px; border-right: 1px solid #ddd;'>{}</td>
+                    <td style='padding: 15px; font-family: monospace; font-size: 16px; color: #555;'>{}</td>
                 </tr>
-                <tr style='background: #fff3e0;'>
-                    <td style='padding: 12px; font-weight: bold; color: #e67e22;'>🗣️ You Said</td>
-                    <td style='padding: 12px; font-family: monospace;'>{}</td>
-                    <td style='padding: 12px; font-family: monospace; font-style: italic;'>{}</td>
+                <tr>
+                    <td style='padding: 15px; font-weight: bold; color: #e67e22; border-right: 1px solid #ddd;'>🗣️ You Said</td>
+                    <td style='padding: 15px; font-family: monospace; font-size: 18px; border-right: 1px solid #ddd;'>{}</td>
+                    <td style='padding: 15px; font-family: monospace; font-size: 16px; color: #555;'>{}</td>
                 </tr>
             </tbody>
         </table>
     </div>
     """.format(intended, intended_roman, actual, actual_roman)
     
-    # Word-by-word analysis
+    # Word-by-word analysis - clean table
     feedback_html += """
     <div style='margin-bottom: 25px;'>
-        <h4 style='color: #34495e; margin-bottom: 15px;'>🔍 Word-by-Word Analysis</h4>
-        <table style='width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1);'>
+        <h4 style='color: #34495e; margin-bottom: 15px;'>🔍 Word-by-Word Check</h4>
+        <table style='width: 100%; border-collapse: collapse; border: 2px solid #ddd;'>
             <thead>
-                <tr style='background: #9b59b6; color: white;'>
-                    <th style='padding: 12px; text-align: center; font-weight: bold;'>#</th>
-                    <th style='padding: 12px; text-align: left; font-weight: bold;'>Expected</th>
-                    <th style='padding: 12px; text-align: left; font-weight: bold;'>You Said</th>
-                    <th style='padding: 12px; text-align: center; font-weight: bold;'>Status</th>
+                <tr style='border-bottom: 2px solid #ddd;'>
+                    <th style='padding: 12px; text-align: center; font-weight: bold; color: #2c3e50; border-right: 1px solid #ddd;'>#</th>
+                    <th style='padding: 12px; text-align: left; font-weight: bold; color: #2c3e50; border-right: 1px solid #ddd;'>Expected Word</th>
+                    <th style='padding: 12px; text-align: left; font-weight: bold; color: #2c3e50; border-right: 1px solid #ddd;'>What You Said</th>
+                    <th style='padding: 12px; text-align: center; font-weight: bold; color: #2c3e50;'>Result</th>
                 </tr>
             </thead>
             <tbody>
@@ -296,7 +322,7 @@ def create_tabular_feedback(intended, actual, lang_choice):
     
     for tag, i1, i2, j1, j2 in sm.get_opcodes():
         if tag == 'equal':
-            # Correct words
+            # Correct words - clean white background
             for idx, word in enumerate(intended_words[i1:i2]):
                 word_index += 1
                 correct_words += 1
@@ -305,24 +331,25 @@ def create_tabular_feedback(intended, actual, lang_choice):
                 actual_roman_word = actual_roman_words[j1 + idx] if (j1 + idx) < len(actual_roman_words) else ""
                 
                 feedback_html += f"""
-                <tr style='background: #d4f6d4;'>
-                    <td style='padding: 10px; text-align: center; font-weight: bold;'>{word_index}</td>
-                    <td style='padding: 10px;'>
-                        <div style='font-family: monospace; font-size: 16px;'>{word}</div>
-                        <div style='font-size: 12px; color: #666; font-style: italic;'>{roman_word}</div>
+                <tr style='border-bottom: 1px solid #eee;'>
+                    <td style='padding: 12px; text-align: center; font-weight: bold; color: #666; border-right: 1px solid #ddd;'>{word_index}</td>
+                    <td style='padding: 12px; border-right: 1px solid #ddd;'>
+                        <div style='font-family: monospace; font-size: 16px; margin-bottom: 4px;'>{word}</div>
+                        <div style='font-size: 13px; color: #888;'>({roman_word})</div>
                     </td>
-                    <td style='padding: 10px;'>
-                        <div style='font-family: monospace; font-size: 16px; color: #27ae60;'>{actual_word}</div>
-                        <div style='font-size: 12px; color: #666; font-style: italic;'>{actual_roman_word}</div>
+                    <td style='padding: 12px; border-right: 1px solid #ddd;'>
+                        <div style='font-family: monospace; font-size: 16px; margin-bottom: 4px; color: #27ae60;'>{actual_word}</div>
+                        <div style='font-size: 13px; color: #888;'>({actual_roman_word})</div>
                     </td>
-                    <td style='padding: 10px; text-align: center;'>
-                        <span style='background: #27ae60; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px;'>✓ Correct</span>
+                    <td style='padding: 12px; text-align: center;'>
+                        <span style='color: #27ae60; font-weight: bold; font-size: 20px;'>✓</span>
+                        <div style='font-size: 12px; color: #27ae60; margin-top: 2px;'>Correct</div>
                     </td>
                 </tr>
                 """
         
         elif tag == 'replace':
-            # Incorrect words
+            # Incorrect words - clean white with colored text only
             max_words = max(i2-i1, j2-j1)
             for idx in range(max_words):
                 word_index += 1
@@ -332,18 +359,19 @@ def create_tabular_feedback(intended, actual, lang_choice):
                 actual_roman_word = actual_roman_words[j1 + idx] if (j1 + idx) < len(actual_roman_words) else ""
                 
                 feedback_html += f"""
-                <tr style='background: #ffebee;'>
-                    <td style='padding: 10px; text-align: center; font-weight: bold;'>{word_index}</td>
-                    <td style='padding: 10px;'>
-                        <div style='font-family: monospace; font-size: 16px;'>{expected_word}</div>
-                        <div style='font-size: 12px; color: #666; font-style: italic;'>{expected_roman}</div>
+                <tr style='border-bottom: 1px solid #eee;'>
+                    <td style='padding: 12px; text-align: center; font-weight: bold; color: #666; border-right: 1px solid #ddd;'>{word_index}</td>
+                    <td style='padding: 12px; border-right: 1px solid #ddd;'>
+                        <div style='font-family: monospace; font-size: 16px; margin-bottom: 4px;'>{expected_word}</div>
+                        <div style='font-size: 13px; color: #888;'>({expected_roman})</div>
                     </td>
-                    <td style='padding: 10px;'>
-                        <div style='font-family: monospace; font-size: 16px; color: #e74c3c;'>{actual_word}</div>
-                        <div style='font-size: 12px; color: #666; font-style: italic;'>{actual_roman_word}</div>
+                    <td style='padding: 12px; border-right: 1px solid #ddd;'>
+                        <div style='font-family: monospace; font-size: 16px; margin-bottom: 4px; color: #e74c3c;'>{actual_word}</div>
+                        <div style='font-size: 13px; color: #888;'>({actual_roman_word})</div>
                     </td>
-                    <td style='padding: 10px; text-align: center;'>
-                        <span style='background: #e74c3c; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px;'>✗ Different</span>
+                    <td style='padding: 12px; text-align: center;'>
+                        <span style='color: #e74c3c; font-weight: bold; font-size: 20px;'>✗</span>
+                        <div style='font-size: 12px; color: #e74c3c; margin-top: 2px;'>Different</div>
                     </td>
                 </tr>
                 """
@@ -354,17 +382,18 @@ def create_tabular_feedback(intended, actual, lang_choice):
                 word_index += 1
                 roman_word = intended_roman_words[i1 + idx] if (i1 + idx) < len(intended_roman_words) else ""
                 feedback_html += f"""
-                <tr style='background: #ffeaa7;'>
-                    <td style='padding: 10px; text-align: center; font-weight: bold;'>{word_index}</td>
-                    <td style='padding: 10px;'>
-                        <div style='font-family: monospace; font-size: 16px;'>{word}</div>
-                        <div style='font-size: 12px; color: #666; font-style: italic;'>{roman_word}</div>
+                <tr style='border-bottom: 1px solid #eee;'>
+                    <td style='padding: 12px; text-align: center; font-weight: bold; color: #666; border-right: 1px solid #ddd;'>{word_index}</td>
+                    <td style='padding: 12px; border-right: 1px solid #ddd;'>
+                        <div style='font-family: monospace; font-size: 16px; margin-bottom: 4px;'>{word}</div>
+                        <div style='font-size: 13px; color: #888;'>({roman_word})</div>
                     </td>
-                    <td style='padding: 10px; color: #e17055; font-style: italic;'>
+                    <td style='padding: 12px; color: #f39c12; font-style: italic; border-right: 1px solid #ddd;'>
                         <em>Not spoken</em>
                     </td>
-                    <td style='padding: 10px; text-align: center;'>
-                        <span style='background: #fdcb6e; color: #2d3436; padding: 4px 8px; border-radius: 12px; font-size: 12px;'>⚠ Missing</span>
+                    <td style='padding: 12px; text-align: center;'>
+                        <span style='color: #f39c12; font-weight: bold; font-size: 20px;'>⚠</span>
+                        <div style='font-size: 12px; color: #f39c12; margin-top: 2px;'>Missing</div>
                     </td>
                 </tr>
                 """
@@ -374,17 +403,18 @@ def create_tabular_feedback(intended, actual, lang_choice):
             for idx, word in enumerate(actual_words[j1:j2]):
                 actual_roman_word = actual_roman_words[j1 + idx] if (j1 + idx) < len(actual_roman_words) else ""
                 feedback_html += f"""
-                <tr style='background: #fab1a0;'>
-                    <td style='padding: 10px; text-align: center; font-weight: bold;'>+</td>
-                    <td style='padding: 10px; color: #636e72; font-style: italic;'>
+                <tr style='border-bottom: 1px solid #eee;'>
+                    <td style='padding: 12px; text-align: center; font-weight: bold; color: #666; border-right: 1px solid #ddd;'>+</td>
+                    <td style='padding: 12px; color: #9b59b6; font-style: italic; border-right: 1px solid #ddd;'>
                         <em>Not expected</em>
                     </td>
-                    <td style='padding: 10px;'>
-                        <div style='font-family: monospace; font-size: 16px; color: #e17055;'>{word}</div>
-                        <div style='font-size: 12px; color: #666; font-style: italic;'>{actual_roman_word}</div>
+                    <td style='padding: 12px; border-right: 1px solid #ddd;'>
+                        <div style='font-family: monospace; font-size: 16px; margin-bottom: 4px; color: #9b59b6;'>{word}</div>
+                        <div style='font-size: 13px; color: #888;'>({actual_roman_word})</div>
                     </td>
-                    <td style='padding: 10px; text-align: center;'>
-                        <span style='background: #fd79a8; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px;'>+ Extra</span>
+                    <td style='padding: 12px; text-align: center;'>
+                        <span style='color: #9b59b6; font-weight: bold; font-size: 20px;'>+</span>
+                        <div style='font-size: 12px; color: #9b59b6; margin-top: 2px;'>Extra</div>
                     </td>
                 </tr>
                 """
@@ -398,32 +428,32 @@ def create_tabular_feedback(intended, actual, lang_choice):
     # Calculate accuracy
     accuracy = (correct_words / total_words * 100) if total_words > 0 else 0
     
-    # Summary section
+    # Clean summary section
     feedback_html += f"""
-    <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 12px; text-align: center;'>
-        <h4 style='margin: 0 0 15px 0; font-size: 24px;'>🎯 Performance Summary</h4>
-        <div style='display: flex; justify-content: space-around; flex-wrap: wrap; gap: 15px;'>
-            <div style='background: rgba(255,255,255,0.2); padding: 15px; border-radius: 8px; min-width: 150px;'>
-                <div style='font-size: 32px; font-weight: bold;'>{accuracy:.1f}%</div>
-                <div style='font-size: 14px; opacity: 0.9;'>Word Accuracy</div>
+    <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px; border-radius: 12px; text-align: center; margin-top: 20px;'>
+        <h4 style='margin: 0 0 20px 0; font-size: 24px;'>🎯 Your Score</h4>
+        <div style='display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px;'>
+            <div style='background: rgba(255,255,255,0.15); padding: 20px; border-radius: 12px; min-width: 160px;'>
+                <div style='font-size: 40px; font-weight: bold; margin-bottom: 8px;'>{accuracy:.0f}%</div>
+                <div style='font-size: 16px; opacity: 0.9;'>Accuracy</div>
             </div>
-            <div style='background: rgba(255,255,255,0.2); padding: 15px; border-radius: 8px; min-width: 150px;'>
-                <div style='font-size: 32px; font-weight: bold;'>{correct_words}/{total_words}</div>
-                <div style='font-size: 14px; opacity: 0.9;'>Correct Words</div>
+            <div style='background: rgba(255,255,255,0.15); padding: 20px; border-radius: 12px; min-width: 160px;'>
+                <div style='font-size: 40px; font-weight: bold; margin-bottom: 8px;'>{correct_words}/{total_words}</div>
+                <div style='font-size: 16px; opacity: 0.9;'>Words Correct</div>
             </div>
         </div>
-        <div style='margin-top: 15px; font-size: 18px;'>
+        <div style='margin-top: 20px; font-size: 18px;'>
     """
     
-    # Motivational message
+    # Simple motivational message
     if accuracy >= 95:
-        feedback_html += "<span>🎉 Outstanding! Perfect pronunciation!</span>"
+        feedback_html += "<span>🎉 Perfect! Outstanding pronunciation!</span>"
     elif accuracy >= 85:
-        feedback_html += "<span>🌟 Excellent work! Very clear pronunciation!</span>"
+        feedback_html += "<span>🌟 Excellent! Very clear speaking!</span>"
     elif accuracy >= 70:
-        feedback_html += "<span>👍 Good job! Keep practicing those tricky words!</span>"
+        feedback_html += "<span>👍 Good job! Keep practicing!</span>"
     elif accuracy >= 50:
-        feedback_html += "<span>📚 Making progress! Focus on the highlighted words!</span>"
+        feedback_html += "<span>📚 Getting better! Focus on the red words!</span>"
     else:
         feedback_html += "<span>💪 Keep going! Practice makes perfect!</span>"
     
@@ -432,22 +462,22 @@ def create_tabular_feedback(intended, actual, lang_choice):
     </div>
     """
     
-    # Add HK transliteration section for reference
+    # Optional technical section (collapsed)
     if lang_choice in ["Tamil", "Malayalam"]:
         feedback_html += f"""
-        <div style='margin-top: 20px; padding: 15px; background: #ecf0f1; border-radius: 8px;'>
-            <h4 style='color: #2c3e50; margin-bottom: 10px;'>🔤 Harvard-Kyoto Transliteration (for reference)</h4>
-            <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 15px;'>
+        <details style='margin-top: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 8px;'>
+            <summary style='cursor: pointer; font-weight: bold; color: #2c3e50; padding: 5px;'>🔧 Technical Details (for experts)</summary>
+            <div style='margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px;'>
                 <div>
-                    <strong>Expected:</strong><br>
-                    <span style='font-family: monospace; background: white; padding: 8px; border-radius: 4px; display: block; margin-top: 5px;'>{intended_hk}</span>
+                    <strong>Expected (Harvard-Kyoto):</strong><br>
+                    <span style='font-family: monospace; background: #f5f5f5; padding: 8px; border-radius: 4px; display: block; margin-top: 5px;'>{intended_hk}</span>
                 </div>
                 <div>
-                    <strong>You said:</strong><br>
-                    <span style='font-family: monospace; background: white; padding: 8px; border-radius: 4px; display: block; margin-top: 5px;'>{actual_hk}</span>
+                    <strong>You said (Harvard-Kyoto):</strong><br>
+                    <span style='font-family: monospace; background: #f5f5f5; padding: 8px; border-radius: 4px; display: block; margin-top: 5px;'>{actual_hk}</span>
                 </div>
             </div>
-        </div>
+        </details>
         """
     
     feedback_html += "</div>"
@@ -474,8 +504,8 @@ def compare_pronunciation(audio, lang_choice, intended_sentence, pass1_beam, pas
         cer_val = jiwer.cer(intended_sentence, actual_text)
 
         # Get transliterations for both texts
-        intended_roman = transliterate_to_roman(intended_sentence, lang_choice)
-        actual_roman = transliterate_to_roman(actual_text, lang_choice)
+        intended_roman = transliterate_to_simple_roman(intended_sentence, lang_choice)
+        actual_roman = transliterate_to_simple_roman(actual_text, lang_choice)
 
         # Create comprehensive tabular feedback
         feedback_html, accuracy = create_tabular_feedback(intended_sentence, actual_text, lang_choice)
@@ -539,7 +569,7 @@ with gr.Blocks(title="Pronunciation Comparator", theme=gr.themes.Soft()) as demo
     with gr.Row():
         with gr.Column():
             pass1_out = gr.Textbox(label="🗣️ What You Said", interactive=False)
-            actual_roman_out = gr.Textbox(label="🔤 Your Pronunciation (Roman)", interactive=False)
+            actual_roman_out = gr.Textbox(label="🔤 Your Pronunciation (Simple Sounds)", interactive=False)
         with gr.Column():
             wer_out = gr.Textbox(label="📊 Word Error Rate", interactive=False)
             cer_out = gr.Textbox(label="📈 Character Error Rate", interactive=False)