Update app.py

app.py

@@ -136,47 +136,61 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
     gr.Markdown("# 📄 Document AI Assistant")
 
     with gr.Row():
-        toggle_left = gr.Checkbox(label="📄 Show Document Panel", value=True)
-        toggle_right = gr.Checkbox(label="🎙️ Show Voice Panel", value=True)
+        toggle_left = gr.Button("📄 Toggle Document Panel", elem_id="toggle-left")
+        toggle_right = gr.Button("🎙️ Toggle Voice Panel", elem_id="toggle-right")
 
     chat_state = gr.State([])
     thread_state = gr.State()
     image_state = gr.State()
     client_id = gr.State()
 
-    with gr.Row(equal_height=True) as layout_row:
-        left_col = gr.Column(visible=True)
-        with left_col:
-            image_display = gr.Image(label="🖼️ Document", type="filepath", show_download_button=False, height=480)
-
-        center_col = gr.Column(scale=2)
-        with center_col:
-            chat = gr.Chatbot(label="💬 Chat", height=480)
-            with gr.Row():
-                user_prompt = gr.Textbox(placeholder="Ask your question...", show_label=False, scale=8)
-                send_btn = gr.Button("Send", variant="primary", scale=2)
-            with gr.Row():
-                clear_chat_btn = gr.Button("🗑️ Clear Chat")
-
-        right_col = gr.Column(visible=True)
-        with right_col:
-            gr.Markdown("### 🎙️ Voice Input")
-            voice_input = gr.Audio(label="Tap to Record", streaming=True, type="numpy", show_label=True)
-            voice_transcript = gr.Textbox(label="Transcript", lines=2, interactive=False)
-            with gr.Row():
-                voice_send_btn = gr.Button("🟢 Send Voice to Assistant")
-                clear_transcript_btn = gr.Button("🧹 Clear Transcript")
-
-    def update_layout(show_left, show_right):
-        new_layout = {
-            left_col: gr.update(visible=show_left),
-            right_col: gr.update(visible=show_right),
-            center_col: gr.update(scale=2 if (show_left and show_right) else (3 if (show_left or show_right) else 4))
-        }
-        return new_layout
-
-    toggle_left.change(fn=update_layout, inputs=[toggle_left, toggle_right], outputs=[left_col, right_col, center_col])
-    toggle_right.change(fn=update_layout, inputs=[toggle_left, toggle_right], outputs=[left_col, right_col, center_col])
+    left_col = gr.Column(visible=True, scale=1)
+    with left_col:
+        image_display = gr.Image(label="🖼️ Document", type="filepath", show_download_button=False, height=600)
+
+    center_col = gr.Column(scale=2)
+    with center_col:
+        chat = gr.Chatbot(label="💬 Chat", height=600)
+        with gr.Row():
+            user_prompt = gr.Textbox(placeholder="Ask your question...", show_label=False, scale=8)
+            send_btn = gr.Button("Send", variant="primary", scale=2)
+        with gr.Row():
+            clear_chat_btn = gr.Button("🗑️ Clear Chat")
+
+    right_col = gr.Column(visible=True, scale=1)
+    with right_col:
+        gr.Markdown("### 🎙️ Voice Input")
+        voice_input = gr.Audio(label="Tap to Record", streaming=True, type="numpy", show_label=True)
+        voice_transcript = gr.Textbox(label="Transcript", lines=2, interactive=False)
+        with gr.Row():
+            voice_send_btn = gr.Button("🟢 Send Voice to Assistant")
+            clear_transcript_btn = gr.Button("🧹 Clear Transcript")
+
+    layout = gr.Row([left_col, center_col, right_col])
+
+    def toggle_columns(left_visible, right_visible):
+        center_scale = 2
+        if not left_visible and not right_visible:
+            center_scale = 4
+        elif not left_visible or not right_visible:
+            center_scale = 3
+        return (
+            gr.update(visible=not left_visible),
+            gr.update(scale=center_scale),
+            gr.update(visible=not right_visible),
+        )
+
+    toggle_left.click(
+        fn=lambda: toggle_columns(left_col.visible, right_col.visible),
+        inputs=[],
+        outputs=[left_col, center_col, right_col]
+    )
+
+    toggle_right.click(
+        fn=lambda: toggle_columns(left_col.visible, right_col.visible),
+        inputs=[],
+        outputs=[left_col, center_col, right_col]
+    )
 
     send_btn.click(fn=handle_chat, inputs=[user_prompt, chat_state, thread_state, image_state],
                    outputs=[user_prompt, chat, thread_state, image_state])
@@ -189,4 +203,4 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
     image_state.change(fn=update_image_display, inputs=image_state, outputs=image_display)
     app.load(fn=create_ws, outputs=[client_id])
 
-app.launch()
+app.launch()