app

app.py

@@ -76,8 +76,7 @@ with gr.Blocks() as app:
                     )
                 with gr.Row():
                     match_box = gr.Markdown(
-                        """### Pronunciation Feedback
-                        
+                        """<h4>Pronunciation Feedback</h4>\n
                         Matching and mismatched characters will be visualized here...
                         """
                     )

util.py

@@ -102,10 +102,9 @@ def calculate_pronunciation_accuracy(reference_text, output_text, script):
     # Convert reference back to original script for feedback output
     if script == 'Uyghur Latin':
         reference_text_clean = ug_arab_to_latn(reference_text_clean) 
-    # Generate Markdown-compatible styled text
-    comparison_md = """### Pronunciation Feedback
-                        
-                    """
+     # Generate Markdown-compatible styled text
+    comparison_md = "<h4>Pronunciation Feedback</h4>\n"  # Small header
+    comparison_md += "<div style='margin-top: 10px;'>\n"  # Add some spacing
     for opcode, i1, i2, j1, j2 in matcher.get_opcodes():
         ref_segment = reference_text_clean[i1:i2]
         out_segment = output_text_clean[j1:j2]
@@ -114,8 +113,7 @@ def calculate_pronunciation_accuracy(reference_text, output_text, script):
             comparison_md += f'<span style="color: blue; font-size: 20px;">{ref_segment}</span>'
         elif opcode in ['replace', 'delete', 'insert']:  # Mismatched or missing
             comparison_md += f'<span style="color: red; font-size: 20px;">{ref_segment}</span>'
-
-    comparison_md = f"<div>{comparison_md}</div>"
+    comparison_md += "</div>"
 
     return reference_ipa, output_ipa, comparison_md, pronunciation_accuracy