Refactor UI layout: Simplify proportions, update audio input sections, and adjust container width for improved responsiveness and usability.

app.py

@@ -93,7 +93,7 @@ body {
 }
 
 .container {
-    max-width: 1200px;
+    max-width: 100%;
     margin: 0 auto;
     padding: calc(20px * var(--golden-ratio));
     background-color: var(--main-bg-color);
@@ -255,7 +255,7 @@ with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="indigo", secondary_hue
     with gr.Column(elem_classes="container"):
         # Logo section
         with gr.Row(elem_classes="logo-container"):
-            logo = gr.Image("logo.png", elem_id="logo")
+            gr.HTML('<img src="file/logo.png" class="logo" alt="Logo">')
 
         # Header section
         with gr.Column(elem_classes="header"):
@@ -267,23 +267,36 @@ with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="indigo", secondary_hue
                 </p>
             """)
 
-        # Main content with Golden ratio proportions
-        with gr.Row():
-            # Input section (larger according to Golden ratio)
-            with gr.Column(scale=1.618, elem_classes="input-section"):
+        # Main content with specified layout
+        # First Row: Half Original Audio Input, Half Dubbed Audio Input
+        with gr.Row(elem_classes="input-section"):
+            with gr.Column(scale=1):
                 original_audio = gr.Audio(type="filepath", label="Original .wav file")
+            with gr.Column(scale=1):
                 dubbed_audio = gr.Audio(type="filepath", label="Dubbed .wav file")
+
+        # Second Row: 2/3 Email Input 1/3 Company Name Input
+        with gr.Row(elem_classes="input-section"):
+            with gr.Column(scale=2):
                 email = gr.Textbox(label="Email")
+            with gr.Column(scale=1):
                 company_name = gr.Textbox(label="Company Name")
-                tolerance = gr.Slider(0, 100, value=5, label="Tolerance Percentage", 
-                                     info="Set the tolerance for audio comparison.")
-                submit_btn = gr.Button("Process Audio", variant="primary")
-
-            # Output section (smaller according to Golden ratio)
-            with gr.Column(scale=1, elem_classes="output-section"):
-                output = gr.Text(label="Processing Status")
-                gr.Markdown("### Results")
-                gr.Markdown("Once processing is complete, results will be emailed to the address provided.")
+
+        # Third Row: Tolerance Percentage
+        with gr.Row(elem_classes="input-section"):
+            tolerance = gr.Slider(0, 100, value=5, label="Tolerance Percentage", 
+                                 info="Set the tolerance for audio comparison.")
+
+        # Fourth Row: Processing Status
+        with gr.Row(elem_classes="output-section"):
+            output = gr.Text(label="Processing Status")
+
+        with gr.Row():
+            submit_btn = gr.Button("Process Audio", variant="primary")
+
+        with gr.Row():
+            gr.Markdown("### Results")
+            gr.Markdown("Once processing is complete, results will be emailed to the address provided.")
 
         # Footer
         with gr.Row(elem_classes="footer"):