updated app.py

app.py

@@ -7,7 +7,7 @@ from pathlib import Path
 from billboard import apply_homography_and_warp
 
 
-# Define a function to select points on the image (similar to your `get_point_interface`)
+# Function to select points on the image 
 def get_point_interface(original_frame, points, evt: gr.SelectData):
     x, y = evt.index
     if points is None:
@@ -16,14 +16,14 @@ def get_point_interface(original_frame, points, evt: gr.SelectData):
     points.append((x, y))
 
     # Draw the points and lines on the image
-    image = original_frame.copy()
+    roi_image = original_frame.copy()
     for pt in points:
-        cv2.circle(image, pt, 5, (255, 0, 0), -1)
+        cv2.circle(roi_image, pt, 5, (255, 0, 0), -1)
     if len(points) > 1:
         for i in range(len(points) - 1):
-            cv2.line(image, points[i], points[i + 1], (255, 0, 0), 2)
+            cv2.line(roi_image, points[i], points[i + 1], (255, 0, 0), 2)
 
-    return image, points
+    return roi_image, points
 
 
 # Function to process and apply homography (this will call your existing function)
@@ -44,25 +44,39 @@ def process_images(source_image, dest_image, roi_points):
 
 
 # Gradio interface setup
-with gr.Blocks(title="Homography Warping App") as demo:
-    gr.Markdown("# Homography Warping App")
+with gr.Blocks(title="Homography Warping App", theme=gr.themes.Soft()) as demo:
+    
+    gr.HTML(
+        """
+    <h1 style='text-align: center'>
+    Homography Warping App
+    </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 two images (source and destination), select the four points for ROI on the destination image, and click 'Process Images' to warp the source image onto the destination."
     )
-
-    with gr.Row(equal_height=True):
-        source_image_input = gr.Image(label="Upload Source Image")
-        dest_image_input = gr.Image(label="Upload Destination Image")
-
-    with gr.Column():
-        dest_image_roi = gr.Image(label="Click to select ROI points on destination image")
-        original_frame_state = gr.State(None)
-        selected_points = gr.State([])
-        clear_points_button = gr.Button("Clear Points")
-        process_button = gr.Button("Process Images")
-
+    
     with gr.Row():
-        output_image = gr.Image(label="Wrapped Image")
+        with gr.Column(scale=1):
+            with gr.Column():
+                source_image_input = gr.Image(label="Upload Source Image")
+                dest_image_input = gr.Image(label="Upload Destination Image")
+        with gr.Column(scale=1):
+            dest_image_copy = gr.Image(label="Select ROI points on destination image")
+            original_frame_state = gr.State(None)
+            selected_points = gr.State([])
+            clear_points_button = gr.Button("Clear Points")
+            process_button = gr.Button("Process Images")
+        with gr.Column(scale=1):
+            output_image = gr.Image(label="Wrapped Image")
 
     examples = [
         ["./images/Apollo-8-Launch.png", "./images/times_square.jpg"],
@@ -71,29 +85,27 @@ with gr.Blocks(title="Homography Warping App") as demo:
     with gr.Row():
         gr.Examples(
             examples=examples,
-            inputs=[source_image_input, dest_image_roi],
+            inputs=[source_image_input, dest_image_input],
             label="Load Example Images",
         )
 
     dest_image_input.upload(
-        lambda img: img, inputs=dest_image_input, outputs=dest_image_roi  # Simply return the uploaded image
+        lambda img:img, inputs=dest_image_input, outputs=dest_image_copy  # Simply return the uploaded image
     )
 
     # Adding the ROI point selection functionality
-    dest_image_roi.select(
-        get_point_interface, inputs=[dest_image_roi, selected_points], outputs=[dest_image_roi, selected_points]
-    )
+    dest_image_copy.select(get_point_interface, inputs=[dest_image_copy, selected_points], outputs=[dest_image_copy, selected_points])
 
     # Clear the selected points
     clear_points_button.click(
         fn=lambda original_frame: (original_frame, []),
         inputs=dest_image_input,
-        outputs=[dest_image_roi, selected_points],
+        outputs=[dest_image_input, selected_points],
     )
 
     # Callback for processing the images
     process_button.click(
-        process_images, inputs=[source_image_input, dest_image_roi, selected_points], outputs=output_image
+        process_images, inputs=[source_image_input, dest_image_input, selected_points], outputs=output_image
     )