improve layout

app.py

@@ -258,20 +258,45 @@ def process_and_display(ref_file, hyp_file):
 
 def main():
     with gr.Blocks() as demo:
-        gr.Markdown("# ASR Metrics")
-
-        with gr.Row():
-            reference_file = gr.File(label="Upload Reference File")
-            hypothesis_file = gr.File(label="Upload Model Output File")
-
-        with gr.Row():
-            reference_preview = gr.Textbox(label="Reference Preview", lines=3)
-            hypothesis_preview = gr.Textbox(label="Hypothesis Preview", lines=3)
-
-        with gr.Row():
-            compute_button = gr.Button("Compute Metrics")
-            results_output = gr.JSON(label="Results")
-            metrics_output = gr.Markdown(label="Metrics")
+        gr.Markdown("# ASR Metrics Analysis")
+
+        with gr.Columns() as cols:
+            with gr.Column():
+                gr.Markdown("### Instructions")
+                gr.Markdown("* Upload your reference and hypothesis files")
+                gr.Markdown("* The interface will automatically analyze and display metrics")
+                gr.Markdown("* Results include overall metrics, sentence-level metrics, and misaligned sentences")
+
+            with gr.Column():
+                with gr.Row():
+                    reference_file = gr.File(label="Upload Reference File")
+                    hypothesis_file = gr.File(label="Upload Model Output File")
+
+                with gr.Row():
+                    reference_preview = gr.Textbox(label="Reference Preview", lines=3)
+                    hypothesis_preview = gr.Textbox(label="Hypothesis Preview", lines=3)
+
+                with gr.Row():
+                    compute_button = gr.Button("Compute Metrics", variant="primary")
+                    results_output = gr.JSON(label="Results", visible=False)
+                    metrics_output = gr.Markdown(label="Metrics")
+                    misaligned_output = gr.Markdown(label="Misaligned Sentences")
+
+        gr.Markdown("---")
+        gr.Markdown("### Results")
+
+        with gr.Columns() as results_cols:
+            with gr.Column():
+                gr.Markdown("#### Overall Metrics")
+                gr.JSON(label="Results", source="results_output")
+
+            with gr.Column():
+                gr.Markdown("#### Sentence-level Metrics")
+                gr.Markdown(label="Metrics", source="metrics_output")
+
+            with gr.Column():
+                gr.Markdown("#### Misaligned Sentences")
+                gr.Markdown(label="Misaligned Sentences", source="misaligned_output")
 
         # Update previews when files are uploaded
         def update_previews(ref_file, hyp_file):
@@ -301,11 +326,10 @@ def main():
         compute_button.click(
             fn=process_and_display,
             inputs=[reference_file, hypothesis_file],
-            outputs=[results_output, metrics_output]
+            outputs=[results_output, metrics_output, misaligned_output]
         )
 
     demo.launch()
 
-
 if __name__ == "__main__":
     main()