Spaces:
Running
Running
| import av | |
| import cv2 | |
| import numpy as np | |
| import streamlit as st | |
| import os | |
| import time | |
| from streamlit_webrtc import webrtc_streamer, WebRtcMode, VideoHTMLAttributes | |
| from src.opencv_utils import OpenCVUtils | |
| from twilio.rest import Client | |
| # Custom theme settings | |
| st.set_page_config( | |
| page_title="OpenCV Explorer", | |
| page_icon="⚫", # Changed icon for minimalism | |
| layout="wide", | |
| initial_sidebar_state="expanded", | |
| ) | |
| # Create a custom theme | |
| def create_custom_theme(): | |
| # Create a .streamlit directory if it doesn't exist | |
| os.makedirs(".streamlit", exist_ok=True) | |
| # Create a config.toml file with custom theme settings | |
| with open(".streamlit/config.toml", "w") as f: | |
| f.write( | |
| """ | |
| [theme] | |
| base = "dark" # Use Streamlit's dark theme as a base | |
| primaryColor = "#CCCCCC" # Light Grey accent | |
| backgroundColor = "#0E1117" # Default Streamlit dark bg | |
| secondaryBackgroundColor = "#262730" # Slightly lighter dark grey | |
| textColor = "#FAFAFA" # Light text | |
| font = "sans serif" | |
| """ | |
| ) | |
| # Apply custom theme | |
| create_custom_theme() | |
| def get_ice_servers(): | |
| """ | |
| Get ICE servers configuration. | |
| For Streamlit Cloud deployment, a TURN server is required in addition to STUN. | |
| This function will try to use Twilio's TURN server service if credentials are available, | |
| otherwise it falls back to a free STUN server from Google. | |
| """ | |
| try: | |
| # Try to get Twilio credentials from environment variables | |
| account_sid = os.environ.get("TWILIO_ACCOUNT_SID") | |
| auth_token = os.environ.get("TWILIO_AUTH_TOKEN") | |
| if account_sid and auth_token: | |
| client = Client(account_sid, auth_token) | |
| token = client.tokens.create() | |
| return token.ice_servers | |
| else: | |
| st.warning( | |
| "Twilio credentials not found. Using free STUN server only, which may not work reliably." # Removed Streamlit Cloud mention for generality | |
| ) | |
| except Exception as e: | |
| st.error(f"Error setting up Twilio TURN servers: {e}") | |
| # Fallback to Google's free STUN server | |
| return [{"urls": ["stun:stun.l.google.com:19302"]}] | |
| def get_app(): | |
| return OpenCVUtils() | |
| app = get_app() | |
| # --- HIDE STREAMLIT STYLE --- | |
| hide_st_style = """ | |
| <style> | |
| #MainMenu {visibility: hidden;} | |
| footer {visibility: hidden;} | |
| header {visibility: hidden;} | |
| /* Body background - Already set by theme config */ | |
| /* .stApp { | |
| background-color: #0E1117; | |
| } */ | |
| /* Tab styling */ | |
| .stTabs [data-baseweb="tab-list"] { | |
| gap: 8px; /* Slightly reduced gap */ | |
| border-bottom: 1px solid #333333; /* Darker border */ | |
| } | |
| .stTabs [data-baseweb="tab"] { | |
| background-color: transparent; /* Make tabs transparent */ | |
| border-radius: 0; /* Remove border radius */ | |
| padding: 10px 15px; | |
| color: #AAAAAA; /* Lighter Grey text */ | |
| border-bottom: 2px solid transparent; /* Prepare for selected indicator */ | |
| transition: all 0.3s ease; | |
| } | |
| .stTabs [data-baseweb="tab"]:hover { | |
| background-color: #262730; /* Dark grey hover */ | |
| color: #FAFAFA; /* White text on hover */ | |
| } | |
| .stTabs [aria-selected="true"] { | |
| background-color: transparent !important; | |
| color: #FAFAFA !important; /* White text for selected */ | |
| border-bottom: 2px solid #CCCCCC !important; /* Light grey underline for selected */ | |
| font-weight: 600; /* Make selected tab bold */ | |
| } | |
| /* Sidebar styling - Mostly handled by theme config */ | |
| /* .css-1d391kg { | |
| background-color: #262730 !important; | |
| } */ | |
| /* Ensure sidebar text is readable - Mostly handled by theme config */ | |
| /* .css-1d391kg .stMarkdown, .css-1d391kg .stCheckbox, .css-1d391kg .stExpander, .css-1d391kg .stText, .css-1d391kg .stButton > button { | |
| color: #FAFAFA !important; | |
| } */ | |
| /* Button styling */ | |
| .stButton>button { | |
| background-color: #262730 !important; /* Dark grey background */ | |
| color: #FAFAFA !important; /* Light text */ | |
| border: 1px solid #444444 !important; /* Slightly lighter border */ | |
| transition: all 0.3s ease !important; | |
| box-shadow: none !important; /* Remove default shadow */ | |
| } | |
| .stButton>button:hover { | |
| background-color: #3a3c44 !important; /* Lighter grey on hover */ | |
| border-color: #666666 !important; | |
| transform: none !important; /* Remove hover transform */ | |
| box-shadow: none !important; | |
| } | |
| .stButton>button:active { | |
| background-color: #444444 !important; /* Slightly darker grey on click */ | |
| } | |
| /* Expander header styling */ | |
| .stExpander > div:first-child { | |
| background-color: #262730; /* Dark grey background for expander header */ | |
| border-radius: 4px; | |
| } | |
| .stExpander header { /* Target expander header specifically */ | |
| color: #FAFAFA !important; /* Light text for expander header */ | |
| font-weight: 600; | |
| } | |
| /* General adjustments for minimalist feel */ | |
| h1, h2, h3, h4, h5, h6 { | |
| color: #FAFAFA; /* Ensure headers are light */ | |
| } | |
| .stMarkdown p { | |
| color: #CCCCCC; /* Slightly darker light color for paragraph text */ | |
| } | |
| /* Color Preview Text */ | |
| .color-preview-text { | |
| color: #1E1E1E !important; /* Ensure text is visible on light/dark previews */ | |
| text-shadow: 0 0 2px #FFFFFF; /* Add a subtle white shadow for contrast */ | |
| } | |
| </style> | |
| """ | |
| st.markdown(hide_st_style, unsafe_allow_html=True) | |
| # --------------------------- | |
| # Top header with logo and title | |
| col1, col2 = st.columns([1, 5]) | |
| with col1: | |
| st.image( | |
| "https://opencv.org/wp-content/uploads/2020/07/OpenCV_logo_black-2.png", | |
| width=100, | |
| ) | |
| with col2: | |
| st.title("OpenCV Explorer") | |
| st.markdown( | |
| """ | |
| <p style='font-size: 18px; margin-top: -10px;'> | |
| Explore computer vision filters and transformations in real-time using your webcam. | |
| </p> | |
| """, | |
| unsafe_allow_html=True, | |
| ) | |
| # Create main layout | |
| main_tabs = st.tabs(["📹 Camera Feed", "ℹ️ About", "📋 Documentation"]) | |
| with main_tabs[0]: # Camera Feed Tab | |
| # Create columns for camera and controls | |
| video_col, control_col = st.columns([3, 1]) | |
| with control_col: | |
| st.markdown("## 🎛️ Controls") | |
| # Organize filters into categories | |
| filter_categories = { | |
| "Basic Transformations": ["Resize", "Rotation", "Blur", "Sharpen"], | |
| "Edge & Contour Detection": ["Canny", "Contour", "Hough Lines"], | |
| "Color Operations": [ | |
| "Color Filter", | |
| "Histogram Equalization", | |
| "Color Quantization", | |
| ], | |
| "Artistic Effects": ["Pencil Sketch", "Morphology", "Adaptive Threshold"], | |
| "Advanced Features": ["Optical Flow", "Hand Tracker", "Face Tracker"], | |
| } | |
| # Use a dictionary to store the expanded state of each category | |
| if "expanded" not in st.session_state: | |
| st.session_state.expanded = {cat: False for cat in filter_categories} | |
| st.session_state.expanded["Basic Transformations"] = ( | |
| True # Expand the first one by default | |
| ) | |
| # Create filter selection UI with categories | |
| selected_functions = [] | |
| for category, filters in filter_categories.items(): | |
| with st.expander( | |
| f"**{category}**", expanded=st.session_state.expanded[category] | |
| ): | |
| # Show checkboxes for each filter in this category | |
| selected_in_category = [] | |
| for filter_name in filters: | |
| if st.checkbox(filter_name, key=f"check_{filter_name}"): | |
| selected_in_category.append(filter_name) | |
| # If any filters selected in this category, add a reorder section | |
| if selected_in_category: | |
| st.markdown("**Order within category:**") | |
| for i, filter_name in enumerate(selected_in_category): | |
| col1, col2 = st.columns([4, 1]) | |
| with col1: | |
| st.text(f"{i+1}. {filter_name}") | |
| with col2: | |
| if i > 0 and st.button("↑", key=f"up_{filter_name}"): | |
| # Move filter up in the list | |
| selected_in_category[i], selected_in_category[i - 1] = ( | |
| selected_in_category[i - 1], | |
| selected_in_category[i], | |
| ) | |
| st.rerun() | |
| # Add selected filters to the main list | |
| selected_functions.extend(selected_in_category) | |
| # Show the currently applied filters | |
| if selected_functions: | |
| st.markdown("### 📌 Applied Filters") | |
| for i, fn in enumerate(selected_functions): | |
| st.markdown(f"**{i+1}.** {fn}") | |
| else: | |
| st.info("Select filters to apply to the camera feed") | |
| # Filter parameters - using expanders for cleaner UI | |
| if any(f in selected_functions for f in ["Resize"]): | |
| with st.expander("📐 Resize Parameters", expanded=True): | |
| w = st.slider("Width", 320, 1280, 640) | |
| h = st.slider("Height", 240, 720, 480) | |
| else: | |
| # Default values if not displayed | |
| w, h = 640, 480 | |
| if "Rotation" in selected_functions: | |
| with st.expander("🔄 Rotation Parameters", expanded=True): | |
| ang = st.slider("Angle", 0, 360, 0) | |
| else: | |
| ang = 0 | |
| if "Blur" in selected_functions: | |
| with st.expander("🌫️ Blur Parameters", expanded=True): | |
| bk = st.slider("Kernel Size (odd)", 1, 15, 5, step=2) | |
| else: | |
| bk = 5 | |
| if "Color Filter" in selected_functions: | |
| with st.expander("🎨 Color Filter Parameters", expanded=True): | |
| col1, col2 = st.columns(2) | |
| with col1: | |
| st.markdown("**Lower Bounds**") | |
| lh = st.slider("Hue (L)", 0, 180, 0) | |
| ls = st.slider("Sat (L)", 0, 255, 0) | |
| lv = st.slider("Val (L)", 0, 255, 0) | |
| with col2: | |
| st.markdown("**Upper Bounds**") | |
| uh = st.slider("Hue (U)", 0, 180, 180) | |
| us = st.slider("Sat (U)", 0, 255, 255) | |
| uv = st.slider("Val (U)", 0, 255, 255) | |
| # Color preview - Make it dynamic again | |
| # Use the lower bound HSV values to generate an HSL color for CSS | |
| preview_color_hsl = f"hsl({lh * 2}, {ls / 2.55}%, {lv / 2.55}%)" | |
| st.markdown( | |
| f""" | |
| <div style="background-color: {preview_color_hsl}; width: 100%; height: 30px; | |
| border: 1px solid #555555; border-radius: 5px; margin-top: 10px;"> | |
| <p class='color-preview-text' style='text-align: center; line-height: 30px; font-size: 12px; font-weight: bold;'> | |
| Preview (Lower Bound) | |
| </p> | |
| </div> | |
| """, | |
| unsafe_allow_html=True, | |
| ) | |
| else: | |
| lh, ls, lv, uh, us, uv = 0, 0, 0, 180, 255, 255 | |
| if "Canny" in selected_functions: | |
| with st.expander("📊 Canny Edge Parameters", expanded=True): | |
| lc = st.slider("Lower Threshold", 0, 255, 100) | |
| uc = st.slider("Upper Threshold", 0, 255, 200) | |
| else: | |
| lc, uc = 100, 200 | |
| if "Morphology" in selected_functions: | |
| with st.expander("🧩 Morphology Parameters", expanded=True): | |
| morph_op = st.selectbox( | |
| "Operation", ["erode", "dilate", "open", "close"] | |
| ) | |
| morph_ks = st.slider("Kernel Size", 1, 31, 5, step=2) | |
| else: | |
| morph_op, morph_ks = "erode", 5 | |
| with video_col: | |
| st.markdown("## 📹 Live Camera Feed") | |
| # WebRTC settings for real-time video | |
| prev_gray = None | |
| def video_frame_callback(frame: av.VideoFrame) -> av.VideoFrame: | |
| global prev_gray | |
| img = frame.to_ndarray(format="bgr24") | |
| curr_gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) | |
| for fn in selected_functions: | |
| if fn == "Color Filter": | |
| img = app.apply_color_filter(img, (lh, ls, lv), (uh, us, uv)) | |
| elif fn == "Canny": | |
| img = app.apply_edge_detection(img, lc, uc) | |
| elif fn == "Blur": | |
| img = app.blur_image(img, bk) | |
| elif fn == "Rotation": | |
| img = app.rotate_image(img, ang) | |
| elif fn == "Resize": | |
| img = app.resize_image(img, w, h) | |
| elif fn == "Contour": | |
| img = app.apply_contour_detection(img) | |
| elif fn == "Histogram Equalization": | |
| img = app.equalize_histogram(img) | |
| elif fn == "Adaptive Threshold": | |
| img = app.adaptive_threshold(img) | |
| elif fn == "Morphology": | |
| img = app.morphology(img, morph_op, morph_ks) | |
| elif fn == "Sharpen": | |
| img = app.sharpen(img) | |
| elif fn == "Hough Lines": | |
| img = app.hough_lines(img) | |
| elif fn == "Optical Flow" and prev_gray is not None: | |
| img = app.optical_flow(prev_gray, curr_gray, img) | |
| elif fn == "Pencil Sketch": | |
| img = app.pencil_sketch(img) | |
| elif fn == "Color Quantization": | |
| img = app.color_quantization(img) | |
| elif fn == "Hand Tracker": | |
| img = app.detect_hands(img) | |
| elif fn == "Face Tracker": | |
| img = app.detect_faces(img) | |
| prev_gray = curr_gray | |
| return av.VideoFrame.from_ndarray(img, format="bgr24") | |
| webrtc_streamer( | |
| key="opencv-explorer", | |
| mode=WebRtcMode.SENDRECV, | |
| rtc_configuration={"iceServers": get_ice_servers()}, | |
| video_frame_callback=video_frame_callback, | |
| media_stream_constraints={"video": True, "audio": False}, | |
| async_processing=True, | |
| video_html_attrs=VideoHTMLAttributes( | |
| autoPlay=True, | |
| controls=False, | |
| style={ | |
| "width": f"{w}px", | |
| "height": f"{h}px", | |
| "border-radius": "8px", | |
| "margin": "0 auto", | |
| "display": "block", | |
| "border": "2px solid #AAAAAA", # Changed border to lighter grey | |
| }, | |
| ), | |
| ) | |
| # Performance metrics | |
| with st.expander("📊 Performance Metrics", expanded=False): | |
| col1, col2, col3 = st.columns(3) | |
| col1.metric("Resolution", f"{w}x{h} px") | |
| col2.metric("Filters Applied", len(selected_functions)) | |
| col3.metric("Frame Processing", f"{time.time():.2f} ms", delta=None) | |
| with main_tabs[1]: # About Tab | |
| st.markdown( | |
| """ | |
| ## About OpenCV Explorer | |
| OpenCV Explorer is an interactive web application that allows you to experiment with various computer vision techniques in real-time using your webcam. This application is built with: | |
| - **OpenCV**: Open Source Computer Vision Library | |
| - **Streamlit**: An open-source app framework for Machine Learning and Data Science | |
| - **WebRTC**: Web Real-Time Communication for live video streaming | |
| ### Features | |
| - Apply multiple filters and transformations to your webcam feed | |
| - Adjust parameters in real-time | |
| - Experiment with advanced computer vision techniques | |
| - Learn about image processing concepts | |
| ### How to Use | |
| 1. Select one or more filters from the categories in the control panel | |
| 2. Adjust the parameters for each selected filter | |
| 3. See the results in real-time through your webcam | |
| 4. Reorder filters to create different effects | |
| ### Privacy Note | |
| All processing is done in your browser. No video data is sent to any server except for the WebRTC connection. | |
| """ | |
| ) | |
| with main_tabs[2]: # Documentation Tab | |
| st.markdown( | |
| """ | |
| ## Documentation | |
| ### Available Filters | |
| """ | |
| ) | |
| # Create documentation for each filter category | |
| for category, filters in filter_categories.items(): | |
| with st.expander(f"**{category}**", expanded=False): | |
| for filter_name in filters: | |
| st.markdown(f"#### {filter_name}") | |
| # Add description for each filter | |
| if filter_name == "Color Filter": | |
| st.markdown( | |
| """ | |
| Isolates specific colors in the HSV (Hue, Saturation, Value) color space. | |
| **Parameters:** | |
| - **Hue**: Color type (0-180) | |
| - **Saturation**: Color intensity (0-255) | |
| - **Value**: Brightness (0-255) | |
| **Usage**: Object detection based on color, creative effects, background removal. | |
| """ | |
| ) | |
| elif filter_name == "Canny": | |
| st.markdown( | |
| """ | |
| Detects edges in the image using the Canny edge detection algorithm. | |
| **Parameters:** | |
| - **Lower Threshold**: Minimum gradient value to consider as an edge | |
| - **Upper Threshold**: Maximum gradient value to consider as an edge | |
| **Usage**: Edge detection, feature extraction, line detection. | |
| """ | |
| ) | |
| elif filter_name == "Blur": | |
| st.markdown( | |
| """ | |
| Applies Gaussian blur to smooth the image. | |
| **Parameters:** | |
| - **Kernel Size**: Size of the blurring matrix (higher values create more blur) | |
| **Usage**: Noise reduction, detail smoothing, pre-processing for other algorithms. | |
| """ | |
| ) | |
| elif filter_name == "Rotation": | |
| st.markdown( | |
| """ | |
| Rotates the image by a specified angle. | |
| **Parameters:** | |
| - **Angle**: Rotation angle in degrees (0-360) | |
| **Usage**: Image orientation correction, creative effects. | |
| """ | |
| ) | |
| elif filter_name == "Resize": | |
| st.markdown( | |
| """ | |
| Changes the dimensions of the image. | |
| **Parameters:** | |
| - **Width**: Output width in pixels | |
| - **Height**: Output height in pixels | |
| **Usage**: Scaling for performance, UI fitting, preprocessing. | |
| """ | |
| ) | |
| elif filter_name == "Hand Tracker": | |
| st.markdown( | |
| """ | |
| Detects and tracks hand positions and landmarks using MediaPipe. | |
| **Parameters:** None (uses pre-trained models) | |
| **Usage**: Gesture recognition, hand pose estimation, interactive applications. | |
| """ | |
| ) | |
| elif filter_name == "Face Tracker": | |
| st.markdown( | |
| """ | |
| Detects and tracks facial landmarks using MediaPipe. | |
| **Parameters:** None (uses pre-trained models) | |
| **Usage**: Face detection, facial expression analysis, AR effects. | |
| """ | |
| ) | |
| else: | |
| st.markdown(f"Documentation for {filter_name} filter.") | |
| st.markdown( | |
| """ | |
| ### Technical Details | |
| For more information about the algorithms and techniques used in this application, refer to: | |
| - [OpenCV Documentation](https://docs.opencv.org/4.x/d6/d00/tutorial_py_root.html) | |
| - [MediaPipe Documentation](https://ai.google.dev/edge/mediapipe/solutions/guide?hl=pt-br) | |
| - [Streamlit Documentation](https://docs.streamlit.io/) | |
| """ | |
| ) | |
| st.markdown( | |
| """ | |
| <div style="position: fixed; bottom: 0; width: 100%; background-color: #0E1117; | |
| padding: 8px; text-align: center; border-top: 1px solid #262730;"> | |
| <p style="margin: 0; font-size: 13px; color: #AAAAAA;"> | |
| OpenCV Explorer | Built with Streamlit | © 2024 | |
| </p> | |
| </div> | |
| """, | |
| unsafe_allow_html=True, | |
| ) | |