Render test 4

app.py

@@ -133,113 +133,113 @@ with gr.Blocks() as main_page:
         if logged_in_user is None:
             gr.Markdown("## Please log in via Hugging Face")
         else:
-            with gr.Blocks(css=css, head=yt_init_js) as editor_page:
-                with gr.Row():
-                    with gr.Column(scale=2, min_width=600):
-                        # Video player and "next video button
-                        video_embed = gr.HTML(value=get_youtube_player_html())
-                        next_video_button = gr.Button("Next")
-                    with gr.Column(scale=1, min_width=200):
-                        # Read-only DataFrame with add button
-                        caption_editor = gr.DataFrame(interactive=False,
-                                                      elem_id="tbl",
-                                                      value=start_captions,
-                                                      datatype=["number", "str", "number"],
-                                                      col_count=(3, "fixed"),
-                                                      column_widths=["20%", "60%", "20%"],
-                                                      headers=["Start", "Text", "End"],
-                                                      wrap=True)
-                        add_entry_button = gr.Button("Add Entry", variant="secondary")
-
-                with gr.Row():
-                    # Editing panel (initially hidden) - spans full width
-                    with gr.Group(visible=False) as editing_panel:
-                        gr.Markdown("### Edit Caption Entry")
-                        with gr.Row(equal_height=False):
-                            with gr.Column():
-                                start_time_input = gr.Textbox(label="Start Time (seconds)", value="0.000", interactive=False)
-                                insert_start_time_button = gr.Button("Insert Current Time")
-                            with gr.Column():
-                                text_input = gr.Textbox(label="Caption Text", placeholder="Enter caption text...")
-
-                            with gr.Column():
-                                end_time_input = gr.Textbox(label="End Time (seconds)", value="0.000", interactive=False)
-                                insert_end_time_button = gr.Button("Insert Current Time")
-
-                        with gr.Row(equal_height=False):
-                            save_entry_button = gr.Button("Save Entry", variant="primary")
-                            cancel_button = gr.Button("Cancel", variant="secondary")
-
-                save_result = gr.Markdown()
-
-                # Event handlers
-                next_video_button.click(
-                    fn=get_next_components,
-                    outputs=[caption_editor, current_video_id]
-                )
-
-                # Load video when current_video_id changes
-                current_video_id.change(
-                    fn=None,
-                    inputs=current_video_id,
-                    outputs=None,
-                    js="""(videoId) => {
+            with gr.Row(key="row1"):
+                with gr.Column(scale=2, min_width=600, key="video_col"):
+                    # Video player and "next video button
+                    video_embed = gr.HTML(value=get_youtube_player_html(), key="video")
+                    next_video_button = gr.Button("Next", key="next_video")
+                with gr.Column(scale=1, min_width=200, key="editor_col"):
+                    # Read-only DataFrame with add button
+                    caption_editor = gr.DataFrame(interactive=False,
+                                                  elem_id="tbl",
+                                                  value=start_captions,
+                                                  datatype=["number", "str", "number"],
+                                                  col_count=(3, "fixed"),
+                                                  column_widths=["20%", "60%", "20%"],
+                                                  headers=["Start", "Text", "End"],
+                                                  wrap=True,
+                                                  key="editor")
+                    add_entry_button = gr.Button("Add Entry", variant="secondary", key="add_entry")
+
+            with gr.Row(key="row2"):
+                # Editing panel (initially hidden) - spans full width
+                with gr.Group(visible=False) as editing_panel:
+                    gr.Markdown("### Edit Caption Entry")
+                    with gr.Row(equal_height=False):
+                        with gr.Column():
+                            start_time_input = gr.Textbox(label="Start Time (seconds)", value="0.000", interactive=False)
+                            insert_start_time_button = gr.Button("Insert Current Time")
+                        with gr.Column():
+                            text_input = gr.Textbox(label="Caption Text", placeholder="Enter caption text...")
+
+                        with gr.Column():
+                            end_time_input = gr.Textbox(label="End Time (seconds)", value="0.000", interactive=False)
+                            insert_end_time_button = gr.Button("Insert Current Time")
+
+                    with gr.Row(equal_height=False):
+                        save_entry_button = gr.Button("Save Entry", variant="primary")
+                        cancel_button = gr.Button("Cancel", variant="secondary")
+
+            save_result = gr.Markdown()
+
+            # Event handlers
+            next_video_button.click(
+                fn=get_next_components,
+                outputs=[caption_editor, current_video_id]
+            )
+
+            # Load video when current_video_id changes
+            current_video_id.change(
+                fn=None,
+                inputs=current_video_id,
+                outputs=None,
+                js="""(videoId) => {
+                    if (window.ytPlayer && window.ytPlayer.cueVideoById) {
+                        console.log('[Video Load] Calling cueVideoById with:', videoId);
+                        window.ytPlayer.cueVideoById(videoId);
+                    } else {
+                        console.error('[Video Load] Player not ready yet');
+                    }
+                }"""
+            )
+
+            # Handle row selection in DataFrame
+            caption_editor.select(
+                fn=on_row_select,
+                inputs=[caption_editor],
+                outputs=[editing_panel, start_time_input, text_input, end_time_input, selected_row_idx, save_entry_button]
+            )
+
+            # Handle add entry button
+            add_entry_button.click(
+                fn=show_add_entry_form,
+                outputs=[editing_panel, start_time_input, text_input, end_time_input, selected_row_idx, save_entry_button]
+            )
+
+            # Handle save entry
+            save_entry_button.click(
+                fn=save_entry,
+                inputs=[caption_editor, start_time_input, text_input, end_time_input,
+                        selected_row_idx, current_video_id],
+                outputs=[caption_editor, editing_panel, save_result]
+            )
+
+            insert_start_time_button.click(fn=None, inputs=None, outputs=start_time_input,
+              js="() => window.ytPlayer ? +window.ytPlayer.getCurrentTime().toFixed(3) : 0")
+
+            insert_end_time_button.click(fn=None, inputs=None, outputs=end_time_input,
+              js="() => window.ytPlayer ? +window.ytPlayer.getCurrentTime().toFixed(3) : 0")
+
+
+            # Handle cancel
+            cancel_button.click(
+                fn=cancel_edit,
+                outputs=[editing_panel]
+            )
+
+            # Load initial video on page load
+            main_page.load(
+                fn=None,
+                inputs=current_video_id,
+                outputs=None,
+                js="""(videoId) => {
+                    const checkPlayer = setInterval(() => {
                         if (window.ytPlayer && window.ytPlayer.cueVideoById) {
-                            console.log('[Video Load] Calling cueVideoById with:', videoId);
+                            clearInterval(checkPlayer);
                             window.ytPlayer.cueVideoById(videoId);
-                        } else {
-                            console.error('[Video Load] Player not ready yet');
                         }
-                    }"""
-                )
-
-                # Handle row selection in DataFrame
-                caption_editor.select(
-                    fn=on_row_select,
-                    inputs=[caption_editor],
-                    outputs=[editing_panel, start_time_input, text_input, end_time_input, selected_row_idx, save_entry_button]
-                )
-
-                # Handle add entry button
-                add_entry_button.click(
-                    fn=show_add_entry_form,
-                    outputs=[editing_panel, start_time_input, text_input, end_time_input, selected_row_idx, save_entry_button]
-                )
-
-                # Handle save entry
-                save_entry_button.click(
-                    fn=save_entry,
-                    inputs=[caption_editor, start_time_input, text_input, end_time_input,
-                            selected_row_idx, current_video_id],
-                    outputs=[caption_editor, editing_panel, save_result]
-                )
-
-                insert_start_time_button.click(fn=None, inputs=None, outputs=start_time_input,
-                  js="() => window.ytPlayer ? +window.ytPlayer.getCurrentTime().toFixed(3) : 0")
-
-                insert_end_time_button.click(fn=None, inputs=None, outputs=end_time_input,
-                  js="() => window.ytPlayer ? +window.ytPlayer.getCurrentTime().toFixed(3) : 0")
-
-
-                # Handle cancel
-                cancel_button.click(
-                    fn=cancel_edit,
-                    outputs=[editing_panel]
-                )
-
-                # Load initial video on page load
-                editor_page.load(
-                    fn=None,
-                    inputs=current_video_id,
-                    outputs=None,
-                    js="""(videoId) => {
-                        const checkPlayer = setInterval(() => {
-                            if (window.ytPlayer && window.ytPlayer.cueVideoById) {
-                                clearInterval(checkPlayer);
-                                window.ytPlayer.cueVideoById(videoId);
-                            }
-                        }, 100);
-                    }"""
-                )
+                    }, 100);
+                }"""
+            )
 
 main_page.launch(share=True)