Update app.py

app.py

@@ -73,63 +73,62 @@ css = """
 .required {background-color: #FFCCCB !important, font-size: 24px !important}
 """
 
+with gr.Blocks(title="Start and stop times", css=css) as app:
+    gr.Markdown(
+        """# Start and stop times generator
+    Please, fill the Video URL and Clip texts textboxes and click the Run button"""
+    )
+    with gr.Row():
+        with gr.Column(scale=3):
+            text1 = gr.Textbox(
+                lines=1,
+                placeholder="Video URL...",
+                label="Video URL",
+                elem_classes=["required"],
+            )
+            text2 = gr.Textbox(
+                lines=5,
+                max_lines=10,
+                placeholder="List of clip texts...",
+                label="Clip texts",
+                elem_classes=["required"],
+            )
+            slider1 = gr.Slider(
+                minimum=0,
+                maximum=1000,
+                step=50,
+                value=0,
+                label="Milliseconds BEFORE each clip",
+            )
+            slider2 = gr.Slider(
+                minimum=0,
+                maximum=1000,
+                step=50,
+                value=500,
+                label="Milliseconds AFTER each clip",
+            )
+            btn_submit = gr.Button(value="Run", variant="primary", size="sm")
+            video = gr.Video(
+                format="mp4", label="Video file", show_label=True, interactive=False
+            )
+        with gr.Column(scale=5):
+            file = gr.File(
+                label="Clips", show_label=True, interactive=False, file_count="single"
+            )
+            lines = gr.Textbox(
+                lines=10, label="Clips", interactive=False, show_copy_button=True
+            )
+            data = gr.Dataframe(
+                label="Clips",
+                headers=["text", "start", "stop", "file"],
+                datatype=["str", "str", "str", "str"],
+                row_count=0,
+            )
+    btn_submit.click(
+        calculate_times,
+        inputs=[text1, text2, slider1, slider2],
+        outputs=[lines, file, data],
+    )
+    text1.blur(load_video, inputs=[text1], outputs=[video])
 
-# Define the Gradio interface
-#         gr.Markdown(
-#             """# Start and stop times generator
-#         Please, fill the Video URL and Clip texts textboxes and click the Run button"""
-#         ),
-iface = gr.Interface(
-    fn=calculate_times,
-    inputs=[
-        gr.Textbox(
-            lines=1,
-            placeholder="Video URL...",
-            label="Video URL",
-            elem_classes=["required"],
-        ),
-        gr.Textbox(
-            lines=5,
-            max_lines=10,
-            placeholder="List of clip texts...",
-            label="Clip texts",
-            elem_classes=["required"],
-        ),
-        gr.Slider(
-            minimum=0,
-            maximum=1000,
-            step=50,
-            value=0,
-            label="Milliseconds BEFORE each clip",
-        ),
-        gr.Slider(
-            minimum=0,
-            maximum=1000,
-            step=50,
-            value=500,
-            label="Milliseconds AFTER each clip",
-        ),
-        # gr.Button(value="Run", variant="primary", size="sm"),
-        # gr.Video(
-        #     format="mp4", label="Video file", show_label=True, interactive=False
-        # )        
-    ],
-    outputs=[
-        gr.File(
-            label="Clips", show_label=True, interactive=False, file_count="single"
-        ),
-        gr.Textbox(
-            lines=10, label="Clips", interactive=False, show_copy_button=True
-        ),
-        gr.Dataframe(
-            label="Clips",
-            headers=["text", "start", "stop", "file"],
-            datatype=["str", "str", "str", "str"],
-            row_count=0,
-        )
-    ],
-    description="# Start and stop times",
-    css=css
-)
-
-iface.launch()
+app.queue().launch()