app

app.py

@@ -66,16 +66,16 @@ with gr.Blocks() as app:
                     )
 
             with gr.Group():
-                with gr.Row():
-                    match_box = gr.Markdown(
-                        label="Phonetic Match",
-                        value="Matching and mismatched characters visualized here..."
-                    )
                 with gr.Row():
                     score_box = gr.Textbox(
                         label="Phonetic Score",
                         placeholder="Your pronunciation score as a percentage..."
                     )
+                with gr.Row():
+                    match_box = gr.Markdown(
+                        label="Phonetic Match",
+                        value="Matching and mismatched characters visualized here..."
+                    )
 
     # Bind functions to buttons
     generate_short_btn.click(

util.py

@@ -93,9 +93,9 @@ def calculate_pronunciation_accuracy(reference_text, output_text, language_code=
         out_segment = output_ipa[j1:j2]
 
         if opcode == 'equal':  # Matching characters
-            comparison_md += f'<span style="color: green;">{ref_segment}</span>'
+            comparison_md += f'<span style="color: blue;">{ref_segment}</span>'
         elif opcode in ['replace', 'delete', 'insert']:  # Mismatched or missing
-            comparison_md += f'<span style="color: red;">{ref_segment}</span>'
+            comparison_md += f'<span style="color: black;">{ref_segment}</span>'
 
     comparison_md = f"<div>{comparison_md}</div>"