import gradio as gr import cv2 import numpy as np def apply_four_filters(frame): # Gradio sends the frame as an RGB numpy array. # We shrink it by 50% so the 4-way grid doesn't lag your browser. frame = cv2.resize(frame, (0, 0), fx=0.5, fy=0.5) # --- 1. Original --- original = frame.copy() cv2.putText(original, "1. Original", (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 0.8, (0, 255, 0), 2) # --- 2. Grayscale --- # Convert from RGB (Gradio format) to Grayscale gray_image = cv2.cvtColor(frame, cv2.COLOR_RGB2GRAY) # Convert back to a 3-channel image so it can be stacked with the original gray_3ch = cv2.cvtColor(gray_image, cv2.COLOR_GRAY2RGB) cv2.putText(gray_3ch, "2. Grayscale", (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 0.8, (0, 255, 0), 2) # --- 3. Blurred --- blurred_image = cv2.GaussianBlur(gray_image, (3, 3), 0) # Convert back to 3-channels blur_3ch = cv2.cvtColor(blurred_image, cv2.COLOR_GRAY2RGB) cv2.putText(blur_3ch, "3. Blurred", (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 0.8, (0, 255, 0), 2) # --- 4. Edges --- edges = cv2.Canny(blurred_image, 100, 200) # Convert back to 3-channels edges_3ch = cv2.cvtColor(edges, cv2.COLOR_GRAY2RGB) cv2.putText(edges_3ch, "4. Edges", (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 0.8, (0, 255, 0), 2) # --- STACKING THE IMAGES --- # np.hstack tapes them side-by-side (Original | Grayscale) top_row = np.hstack((original, gray_3ch)) bottom_row = np.hstack((blur_3ch, edges_3ch)) # np.vstack tapes the top row and bottom row together final_grid = np.vstack((top_row, bottom_row)) return final_grid # Build the Gradio interface demo = gr.Interface( fn=apply_four_filters, inputs=gr.Image(sources=["webcam"], streaming=True), # 'streaming=True' creates the live feed outputs="image", title="Live 4-Way Computer Vision Feed", description="Original, Grayscale, Gaussian Blur, and Canny Edge Detection running in real-time.", live=True # Tells Gradio to continuously loop the function ) if __name__ == "__main__": demo.launch()