feat: Streamline filter selection and enhance documentation in app.py

- Replaced categorized filter selection with a unified multiselect interface, allowing users to select and order filters more intuitively.
- Updated filter parameters for "Resize" to support higher resolutions.
- Enhanced the documentation section to provide detailed descriptions for each filter, improving user understanding and accessibility.
- Removed outdated category-based filter organization for a cleaner UI experience.

app.py

@@ -176,68 +176,42 @@ with col2:
         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
-            )
+        # List all available filters
+        all_filters = [
+            "Resize",
+            "Rotation",
+            "Blur",
+            "Sharpen",
+            "Canny",
+            "Contour",
+            "Hough Lines",
+            "Color Filter",
+            "Histogram Equalization",
+            "Color Quantization",
+            "Pencil Sketch",
+            "Morphology",
+            "Adaptive Threshold",
+            "Optical Flow",
+            "Hand Tracker",
+            "Face Tracker",
+        ]
+
+        # Use multiselect to both select and order filters
+        selected_functions = st.multiselect(
+            "Select and order filters to apply:",
+            options=all_filters,
+            default=[],
+            help="Filters will be applied in the order they appear here. Drag to reorder.",
+        )
 
-        # 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
+        # Show the currently applied filters with their order
         if selected_functions:
             st.markdown("### 📌 Applied Filters")
             for i, fn in enumerate(selected_functions):
@@ -246,13 +220,13 @@ with main_tabs[0]:  # Camera Feed Tab
             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"]):
+        if "Resize" in selected_functions:
             with st.expander("📐 Resize Parameters", expanded=True):
-                w = st.slider("Width", 320, 1280, 640)
-                h = st.slider("Height", 240, 720, 480)
+                w = st.slider("Width", 320, 1920, 1280)
+                h = st.slider("Height", 240, 1080, 720)
         else:
             # Default values if not displayed
-            w, h = 640, 480
+            w, h = 1280, 720
 
         if "Rotation" in selected_functions:
             with st.expander("🔄 Rotation Parameters", expanded=True):
@@ -280,20 +254,6 @@ with main_tabs[0]:  # Camera Feed Tab
                     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
 
@@ -315,7 +275,6 @@ with main_tabs[0]:  # Camera Feed Tab
 
     with video_col:
         st.markdown("## 📹 Live Camera Feed")
-
         # WebRTC settings for real-time video
         prev_gray = None
 
@@ -324,6 +283,7 @@ with main_tabs[0]:  # Camera Feed Tab
             img = frame.to_ndarray(format="bgr24")
             curr_gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
 
+            # Apply filters in the order they were selected
             for fn in selected_functions:
                 if fn == "Color Filter":
                     img = app.apply_color_filter(img, (lh, ls, lv), (uh, us, uv))
@@ -377,7 +337,7 @@ with main_tabs[0]:  # Camera Feed Tab
                     "border-radius": "8px",
                     "margin": "0 auto",
                     "display": "block",
-                    "border": "2px solid #AAAAAA",  # Changed border to lighter grey
+                    "border": "2px solid #AAAAAA",
                 },
             ),
         )
@@ -434,221 +394,219 @@ with main_tabs[2]:  # Documentation Tab
     )
 
     # 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 detailed description and links for each filter
-                if filter_name == "Resize":
-                    st.markdown(
-                        """
-                    Changes the dimensions (width and height) of the video frame. Useful for adjusting the output size or preparing the frame for other operations that require a specific input size.
-
-                    **Parameters:**
-                    - **Width**: Target width in pixels.
-                    - **Height**: Target height in pixels.
-
-                    **Usage**: Scaling for performance, UI fitting, preprocessing for models.
-
-                    **Docs**: [OpenCV Geometric Transformations](https://docs.opencv.org/4.x/da/d6e/tutorial_py_geometric_transformations.html) (See `cv2.resize`)
-                    """
-                    )
-                elif filter_name == "Rotation":
-                    st.markdown(
-                        """
-                    Rotates the video frame around its center by a specified angle.
-
-                    **Parameters:**
-                    - **Angle**: Rotation angle in degrees (0-360).
-
-                    **Usage**: Image orientation correction, creative effects.
-
-                    **Docs**: [OpenCV Geometric Transformations](https://docs.opencv.org/4.x/da/d6e/tutorial_py_geometric_transformations.html) (See `cv2.getRotationMatrix2D` and `cv2.warpAffine`)
-                    """
-                    )
-                elif filter_name == "Blur":
-                    st.markdown(
-                        """
-                    Applies Gaussian blur to smooth the image, reducing noise and detail. The kernel size determines the extent of blurring.
-
-                    **Parameters:**
-                    - **Kernel Size**: Size of the blurring matrix (must be an odd number). Higher values create more blur.
-
-                    **Usage**: Noise reduction, detail smoothing, pre-processing for edge detection or other algorithms.
-
-                    **Docs**: [OpenCV Smoothing Images](https://docs.opencv.org/4.x/d4/d13/tutorial_py_filtering.html) (See `cv2.GaussianBlur`)
-                    """
-                    )
-                elif filter_name == "Sharpen":
-                    st.markdown(
-                        """
-                    Enhances the edges and details in the image using a sharpening kernel. This is achieved by subtracting a blurred version of the image from the original.
-
-                    **Parameters:** None (uses a fixed kernel).
-
-                    **Usage**: Enhancing image clarity, highlighting details.
-
-                    **Docs**: [OpenCV Image Filtering Concepts](https://docs.opencv.org/4.x/d4/d13/tutorial_py_filtering.html) (Concept explanation, the implementation uses a custom kernel)
-                    """
-                    )
-                elif filter_name == "Canny":
-                    st.markdown(
-                        """
-                    Detects edges in the image using the Canny edge detection algorithm, a multi-stage process to find sharp changes in intensity.
-
-                    **Parameters:**
-                    - **Lower Threshold**: Minimum intensity gradient to be considered a potential edge.
-                    - **Upper Threshold**: Maximum intensity gradient. Edges above this are definite edges. Pixels between the thresholds are included if connected to definite edges.
-
-                    **Usage**: Edge detection, feature extraction, object boundary identification.
-
-                    **Docs**: [OpenCV Canny Edge Detection](https://docs.opencv.org/4.x/da/d22/tutorial_py_canny.html)
-                    """
-                    )
-                elif filter_name == "Contour":
-                    st.markdown(
-                        """
-                    Finds and draws contours (continuous curves joining points along a boundary with the same intensity) in the image. Usually applied after thresholding or edge detection.
-
-                    **Parameters:** None (finds contours on the processed image and draws them).
-
-                    **Usage**: Object detection, shape analysis, feature extraction.
-
-                    **Docs**: [OpenCV Contours](https://docs.opencv.org/4.x/d4/d73/tutorial_py_contours_begin.html) (See `cv2.findContours`, `cv2.drawContours`)
-                    """
-                    )
-                elif filter_name == "Hough Lines":
-                    st.markdown(
-                        """
-                    Detects straight lines in the image using the Hough Line Transform (Probabilistic variant). Works best on edge-detected images.
-
-                    **Parameters:** None (uses preset parameters for `cv2.HoughLinesP`).
-
-                    **Usage**: Line detection in images, structure identification.
-
-                    **Docs**: [OpenCV Hough Line Transform](https://docs.opencv.org/4.x/d6/d10/tutorial_py_houghlines.html) (See `cv2.HoughLinesP`)
-                    """
-                    )
-                elif filter_name == "Color Filter":
-                    st.markdown(
-                        """
-                    Isolates specific colors by converting the image to HSV (Hue, Saturation, Value) color space and applying a threshold based on the selected ranges.
-
-                    **Parameters:**
-                    - **Lower Bounds (Hue, Sat, Val)**: Minimum HSV values for the color range.
-                    - **Upper Bounds (Hue, Sat, Val)**: Maximum HSV values for the color range.
-
-                    **Usage**: Object detection based on color, color segmentation, special effects.
-
-                    **Docs**: [OpenCV Changing Colorspaces](https://docs.opencv.org/4.x/df/d9d/tutorial_py_colorspaces.html) (See `cv2.cvtColor` and `cv2.inRange`)
-                    """
-                    )
-                elif filter_name == "Histogram Equalization":
-                    st.markdown(
-                        """
-                    Improves contrast in grayscale images by redistributing pixel intensities more evenly across the histogram. Applied to the Value channel if the input is color.
-
-                    **Parameters:** None.
-
-                    **Usage**: Enhancing contrast in low-contrast images, improving visibility of details.
-
-                    **Docs**: [OpenCV Histogram Equalization](https://docs.opencv.org/4.x/d5/daf/tutorial_py_histogram_equalization.html) (See `cv2.equalizeHist`)
-                    """
-                    )
-                elif filter_name == "Color Quantization":
-                    st.markdown(
-                        """
-                    Reduces the number of distinct colors in an image using K-Means clustering in the color space. Groups similar colors together.
-
-                    **Parameters:** None (uses a fixed number of clusters, K=8).
-
-                    **Usage**: Image compression, posterization effect, simplifying color palettes.
-
-                    **Docs**: [OpenCV K-Means Clustering](https://docs.opencv.org/4.x/d1/d5c/tutorial_py_kmeans_opencv.html) (Underlying algorithm)
-                    """
-                    )
-                elif filter_name == "Pencil Sketch":
-                    st.markdown(
-                        """
-                    Creates a pencil sketch effect by converting the image to grayscale, inverting it, blurring the inverted image, and blending it with the original grayscale image using color dodge.
-
-                    **Parameters:** None.
-
-                    **Usage**: Artistic image transformation, creating sketch-like visuals.
-
-                    **Docs**: Involves multiple OpenCV steps (Grayscale, Blur, Blending). See [Color Dodge Blending](https://en.wikipedia.org/wiki/Blend_modes#Dodge_and_burn).
-                    """
-                    )
-                elif filter_name == "Morphology":
-                    st.markdown(
-                        """
-                    Applies morphological operations (Erode, Dilate, Open, Close) to modify the shape of features in the image, typically on binary images.
-
-                    **Parameters:**
-                    - **Operation**: Type of morphological operation (`erode`, `dilate`, `open`, `close`).
-                    - **Kernel Size**: Size of the structuring element used (odd number).
-
-                    **Usage**: Noise removal, joining broken parts, thinning/thickening features.
-
-                    **Docs**: [OpenCV Morphological Transformations](https://docs.opencv.org/4.x/d9/d61/tutorial_py_morphological_ops.html) (See `cv2.erode`, `cv2.dilate`, `cv2.morphologyEx`)
-                    """
-                    )
-                elif filter_name == "Adaptive Threshold":
-                    st.markdown(
-                        """
-                    Applies adaptive thresholding, where the threshold value is calculated locally for different regions of the image. Useful for images with varying illumination.
-
-                    **Parameters:** None (uses `cv2.ADAPTIVE_THRESH_GAUSSIAN_C`).
-
-                    **Usage**: Image segmentation in non-uniform lighting conditions.
-
-                    **Docs**: [OpenCV Image Thresholding](https://docs.opencv.org/4.x/d7/d4d/tutorial_py_thresholding.html) (See `cv2.adaptiveThreshold`)
-                    """
-                    )
-                elif filter_name == "Optical Flow":
-                    st.markdown(
-                        """
-                        Calculates and visualizes the apparent motion of objects between consecutive frames using the Farneback algorithm. Shows motion vectors as lines on the image.
+    for filter_name in all_filters:
+        st.markdown(f"#### {filter_name}")
+
+        # Add detailed description and links for each filter
+        if filter_name == "Resize":
+            st.markdown(
+                """
+            Changes the dimensions (width and height) of the video frame. Useful for adjusting the output size or preparing the frame for other operations that require a specific input size.
+
+            **Parameters:**
+            - **Width**: Target width in pixels.
+            - **Height**: Target height in pixels.
+
+            **Usage**: Scaling for performance, UI fitting, preprocessing for models.
+
+            **Docs**: [OpenCV Geometric Transformations](https://docs.opencv.org/4.x/da/d6e/tutorial_py_geometric_transformations.html) (See `cv2.resize`)
+            """
+            )
+        elif filter_name == "Rotation":
+            st.markdown(
+                """
+            Rotates the video frame around its center by a specified angle.
+
+            **Parameters:**
+            - **Angle**: Rotation angle in degrees (0-360).
+
+            **Usage**: Image orientation correction, creative effects.
+
+            **Docs**: [OpenCV Geometric Transformations](https://docs.opencv.org/4.x/da/d6e/tutorial_py_geometric_transformations.html) (See `cv2.getRotationMatrix2D` and `cv2.warpAffine`)
+            """
+            )
+        elif filter_name == "Blur":
+            st.markdown(
+                """
+            Applies Gaussian blur to smooth the image, reducing noise and detail. The kernel size determines the extent of blurring.
+
+            **Parameters:**
+            - **Kernel Size**: Size of the blurring matrix (must be an odd number). Higher values create more blur.
+
+            **Usage**: Noise reduction, detail smoothing, pre-processing for edge detection or other algorithms.
+
+            **Docs**: [OpenCV Smoothing Images](https://docs.opencv.org/4.x/d4/d13/tutorial_py_filtering.html) (See `cv2.GaussianBlur`)
+            """
+            )
+        elif filter_name == "Sharpen":
+            st.markdown(
+                """
+            Enhances the edges and details in the image using a sharpening kernel. This is achieved by subtracting a blurred version of the image from the original.
+
+            **Parameters:** None (uses a fixed kernel).
+
+            **Usage**: Enhancing image clarity, highlighting details.
+
+            **Docs**: [OpenCV Image Filtering Concepts](https://docs.opencv.org/4.x/d4/d13/tutorial_py_filtering.html) (Concept explanation, the implementation uses a custom kernel)
+            """
+            )
+        elif filter_name == "Canny":
+            st.markdown(
+                """
+            Detects edges in the image using the Canny edge detection algorithm, a multi-stage process to find sharp changes in intensity.
+
+            **Parameters:**
+            - **Lower Threshold**: Minimum intensity gradient to be considered a potential edge.
+            - **Upper Threshold**: Maximum intensity gradient. Edges above this are definite edges. Pixels between the thresholds are included if connected to definite edges.
+
+            **Usage**: Edge detection, feature extraction, object boundary identification.
+
+            **Docs**: [OpenCV Canny Edge Detection](https://docs.opencv.org/4.x/da/d22/tutorial_py_canny.html)
+            """
+            )
+        elif filter_name == "Contour":
+            st.markdown(
+                """
+            Finds and draws contours (continuous curves joining points along a boundary with the same intensity) in the image. Usually applied after thresholding or edge detection.
+
+            **Parameters:** None (finds contours on the processed image and draws them).
+
+            **Usage**: Object detection, shape analysis, feature extraction.
+
+            **Docs**: [OpenCV Contours](https://docs.opencv.org/4.x/d4/d73/tutorial_py_contours_begin.html) (See `cv2.findContours`, `cv2.drawContours`)
+            """
+            )
+        elif filter_name == "Hough Lines":
+            st.markdown(
+                """
+            Detects straight lines in the image using the Hough Line Transform (Probabilistic variant). Works best on edge-detected images.
+
+            **Parameters:** None (uses preset parameters for `cv2.HoughLinesP`).
+
+            **Usage**: Line detection in images, structure identification.
+
+            **Docs**: [OpenCV Hough Line Transform](https://docs.opencv.org/4.x/d6/d10/tutorial_py_houghlines.html) (See `cv2.HoughLinesP`)
+            """
+            )
+        elif filter_name == "Color Filter":
+            st.markdown(
+                """
+            Isolates specific colors by converting the image to HSV (Hue, Saturation, Value) color space and applying a threshold based on the selected ranges.
 
-                        **Parameters:** None (Requires previous frame data internally).
-
-                        **Usage**: Motion tracking, video stabilization analysis, action recognition.
-
-                        **Docs**: [OpenCV Optical Flow](https://docs.opencv.org/4.x/d4/dee/tutorial_optical_flow.html) (See `cv2.calcOpticalFlowFarneback`)
-                        """
-                    )
-                elif filter_name == "Hand Tracker":
-                    st.markdown(
-                        """
-                    Detects and tracks hand positions and landmarks (joints) in real-time using the MediaPipe Hands solution. Draws landmarks and connections on the detected hands.
+            **Parameters:**
+            - **Lower Bounds (Hue, Sat, Val)**: Minimum HSV values for the color range.
+            - **Upper Bounds (Hue, Sat, Val)**: Maximum HSV values for the color range.
 
-                    **Parameters:** None (uses pre-trained MediaPipe models).
-
-                    **Usage**: Gesture recognition, sign language interpretation, virtual object interaction, hand pose estimation.
-
-                    **Docs**: [MediaPipe Hand Landmarker](https://developers.google.com/mediapipe/solutions/vision/hand_landmarker)
-                    """
-                    )
-                elif filter_name == "Face Tracker":
-                    st.markdown(
-                        """
-                    Detects faces in the video feed using the MediaPipe Face Detection solution and draws bounding boxes around them.
+            **Usage**: Object detection based on color, color segmentation, special effects.
 
-                    **Parameters:** None (uses pre-trained MediaPipe models).
-
-                    **Usage**: Face detection, counting people, basic facial analysis applications, input for face recognition or landmark detection.
+            **Docs**: [OpenCV Changing Colorspaces](https://docs.opencv.org/4.x/df/d9d/tutorial_py_colorspaces.html) (See `cv2.cvtColor` and `cv2.inRange`)
+            """
+            )
+        elif filter_name == "Histogram Equalization":
+            st.markdown(
+                """
+            Improves contrast in grayscale images by redistributing pixel intensities more evenly across the histogram. Applied to the Value channel if the input is color.
+
+            **Parameters:** None.
+
+            **Usage**: Enhancing contrast in low-contrast images, improving visibility of details.
+
+            **Docs**: [OpenCV Histogram Equalization](https://docs.opencv.org/4.x/d5/daf/tutorial_py_histogram_equalization.html) (See `cv2.equalizeHist`)
+            """
+            )
+        elif filter_name == "Color Quantization":
+            st.markdown(
+                """
+            Reduces the number of distinct colors in an image using K-Means clustering in the color space. Groups similar colors together.
+
+            **Parameters:** None (uses a fixed number of clusters, K=8).
+
+            **Usage**: Image compression, posterization effect, simplifying color palettes.
+
+            **Docs**: [OpenCV K-Means Clustering](https://docs.opencv.org/4.x/d1/d5c/tutorial_py_kmeans_opencv.html) (Underlying algorithm)
+            """
+            )
+        elif filter_name == "Pencil Sketch":
+            st.markdown(
+                """
+            Creates a pencil sketch effect by converting the image to grayscale, inverting it, blurring the inverted image, and blending it with the original grayscale image using color dodge.
+
+            **Parameters:** None.
+
+            **Usage**: Artistic image transformation, creating sketch-like visuals.
+
+            **Docs**: Involves multiple OpenCV steps (Grayscale, Blur, Blending). See [Color Dodge Blending](https://en.wikipedia.org/wiki/Blend_modes#Dodge_and_burn).
+            """
+            )
+        elif filter_name == "Morphology":
+            st.markdown(
+                """
+            Applies morphological operations (Erode, Dilate, Open, Close) to modify the shape of features in the image, typically on binary images.
+
+            **Parameters:**
+            - **Operation**: Type of morphological operation (`erode`, `dilate`, `open`, `close`).
+            - **Kernel Size**: Size of the structuring element used (odd number).
+
+            **Usage**: Noise removal, joining broken parts, thinning/thickening features.
+
+            **Docs**: [OpenCV Morphological Transformations](https://docs.opencv.org/4.x/d9/d61/tutorial_py_morphological_ops.html) (See `cv2.erode`, `cv2.dilate`, `cv2.morphologyEx`)
+            """
+            )
+        elif filter_name == "Adaptive Threshold":
+            st.markdown(
+                """
+            Applies adaptive thresholding, where the threshold value is calculated locally for different regions of the image. Useful for images with varying illumination.
+
+            **Parameters:** None (uses `cv2.ADAPTIVE_THRESH_GAUSSIAN_C`).
+
+            **Usage**: Image segmentation in non-uniform lighting conditions.
+
+            **Docs**: [OpenCV Image Thresholding](https://docs.opencv.org/4.x/d7/d4d/tutorial_py_thresholding.html) (See `cv2.adaptiveThreshold`)
+            """
+            )
+        elif filter_name == "Optical Flow":
+            st.markdown(
+                """
+                Calculates and visualizes the apparent motion of objects between consecutive frames using the Farneback algorithm. Shows motion vectors as lines on the image.
+
+                **Parameters:** None (Requires previous frame data internally).
+
+                **Usage**: Motion tracking, video stabilization analysis, action recognition.
+
+                **Docs**: [OpenCV Optical Flow](https://docs.opencv.org/4.x/d4/dee/tutorial_optical_flow.html) (See `cv2.calcOpticalFlowFarneback`)
+                """
+            )
+        elif filter_name == "Hand Tracker":
+            st.markdown(
+                """
+            Detects and tracks hand positions and landmarks (joints) in real-time using the MediaPipe Hands solution. Draws landmarks and connections on the detected hands.
+
+            **Parameters:** None (uses pre-trained MediaPipe models).
 
-                    **Docs**: [MediaPipe Face Detector](https://developers.google.com/mediapipe/solutions/vision/face_detector)
-                    """
-                    )
-                else:
-                    # Fallback for any filters missed
-                    st.markdown(
-                        f"Detailed documentation for the **{filter_name}** filter is pending."
-                    )
+            **Usage**: Gesture recognition, sign language interpretation, virtual object interaction, hand pose estimation.
+
+            **Docs**: [MediaPipe Hand Landmarker](https://developers.google.com/mediapipe/solutions/vision/hand_landmarker)
+            """
+            )
+        elif filter_name == "Face Tracker":
+            st.markdown(
+                """
+            Detects faces in the video feed using the MediaPipe Face Detection solution and draws bounding boxes around them.
+
+            **Parameters:** None (uses pre-trained MediaPipe models).
+
+            **Usage**: Face detection, counting people, basic facial analysis applications, input for face recognition or landmark detection.
+
+            **Docs**: [MediaPipe Face Detector](https://developers.google.com/mediapipe/solutions/vision/face_detector)
+            """
+            )
+        else:
+            # Fallback for any filters missed
+            st.markdown(
+                f"Detailed documentation for the **{filter_name}** filter is pending."
+            )
 
-                st.divider()  # Add a separator between filter descriptions
+        st.divider()  # Add a separator between filter descriptions
 
     st.markdown(
         """