updated app.py

app.py

@@ -234,20 +234,36 @@ def process_video_interface(video_file, points):
 
 
 # Gradio Interface.
-with gr.Blocks(title="Lane Detection using OpenCV") as demo:
-    gr.Markdown("# Lane Detection using OpenCV")
-    gr.Markdown("Upload your video, select the four region points to make the ROI yo want to track. Click process video to get the output.")
-    with gr.Row(equal_height=True):
-        video_input = gr.Video(label="Input Video")
-        extract_frame_button = gr.Button("Extract First Frame")
-    with gr.Row(equal_height=True):
-        first_frame_image = gr.Image(label="Click to select ROI points")
-        original_frame_state = gr.State(None)
-        points_state = gr.State([])
-        with gr.Row(equal_height=True):
+with gr.Blocks(title="Lane Detection using OpenCV", theme=gr.themes.Soft()) as demo:
+    gr.HTML(
+        """
+    <h1 style='text-align: center'>
+    Lane Detection using OpenCV
+    </h1>
+    """
+    )
+    gr.HTML(
+        """
+        <h3 style='text-align: center'>
+        <a href='https://opencv.org/university/' target='_blank'>OpenCV Courses</a> | <a href='https://github.com/OpenCV-University' target='_blank'>Github</a>
+        </h3>
+        """
+    )
+    gr.Markdown(
+        "Upload your video, select the four region points to make the ROI yo want to track. Click process video to get the output."
+    )
+    with gr.Row():
+        with gr.Column(scale=1, min_width=300):
+            video_input = gr.Video(label="Input Video")
+            extract_frame_button = gr.Button("Extract First Frame")
+        with gr.Column(scale=1, min_width=300):
+            first_frame_image = gr.Image(label="Click to select ROI points")
+            original_frame_state = gr.State(None)
+            points_state = gr.State([])
             process_button = gr.Button("Process Video")
             clear_points_button = gr.Button("Clear Points")
-    output_video = gr.Video(label="Processed Video", width=640, height=360)
+        with gr.Column(scale=1, min_width=300):
+            output_video = gr.Video(label="Processed Video")
 
     # Extract the first frame and store it
     extract_frame_button.click(
@@ -268,15 +284,17 @@ with gr.Blocks(title="Lane Detection using OpenCV") as demo:
 
     # Process the video using the selected ROI
     process_button.click(fn=process_video_interface, inputs=[video_input, points_state], outputs=output_video)
-   
+
     # Adding examples
-    gr.Examples(
-        examples=[
-            "./lane.mp4"
-        ],
-        inputs=video_input
-    )    
-    
-    
-
-demo.launch()
+    gr.Examples(examples=["./lane.mp4"], inputs=video_input)
+    gr.HTML(
+        """
+        <h3 style='text-align: center'>
+        Developed with ❤️ by OpenCV
+        </h3>
+        """
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()

requirements.txt

@@ -1,2 +1,2 @@
 opencv-python==4.10.0.84 
-gradio==5.5.0
+gradio==5.23.3