Update pages/video.py

pages/video.py

@@ -3,27 +3,57 @@ import numpy as np
 import matplotlib.pyplot as plt
 import seaborn as sns
 
-
-# Title of the app
-st.title("Dynamic Grid Generator")
+    # Title
+    st.title("Understanding Video Data and Processing with OpenCV")
     
-    # Add a slider to control grid size
-    grid_size = st.slider("Select the grid size", min_value=2, max_value=50, value=10, step=1)
+    # Subheader 1: What is Video Data?
+    st.markdown("### What is Video Data?")
+    st.markdown("""
+    - **Video** is a collection of images known as **frames**.
+    - Frames are visualized sequentially, creating the perception of motion.
+    - **Frame Rate (FPS)** determines smoothness:
+      - **30 FPS**: 30 frames per second.
+      - **60 FPS**: 60 frames per second.
+      - More FPS = smoother video.
+    """)
     
-    # Create the grid
-    fig, ax = plt.subplots(figsize=(5, 5))
+    # Subheader 2: How to Play a Video Using OpenCV
+    st.markdown("### :blue[How to Play a Video Using OpenCV]")
+    st.markdown("""
+    1. **Break the Video into Frames**:
+       - A video is essentially a sequence of images (frames).
+       - Use a `while` loop to iterate through frames, as the total frame count may not be known.
+    2. **Key Functions**:
+       - `cv2.VideoCapture(path)`: Captures the video and extracts frames.
+       - `cv2.imshow()`: Displays a frame in a pop-up window.
+       - `cv2.waitKey(1)`: Waits for 1 millisecond before moving to the next frame.
+    3. **Exit Condition**:
+       - Exit the loop when frames are exhausted or a specific key is pressed.
+    """)
     
-    # Draw the grid
-    for x in np.linspace(0, 1, grid_size + 1):
-        ax.axhline(x, color='black', linewidth=0.5)
-        ax.axvline(x, color='black', linewidth=0.5)
+    # Subheader 3: Frame Handling Details
+    st.markdown("### Frame Handling Details")
+    st.markdown("""
+    - Each frame contains:
+      1. **Images**: Represented as 3D arrays (height, width, and color channels).
+      2. **Boolean Values**: 
+        - `True`: Frame is present.
+        - `False`: No frame, signaling the loop to terminate.
+    """)
     
-    # Adjust plot settings
-    ax.set_xticks([])
-    ax.set_yticks([])
-    ax.set_xlim(0, 1)
-    ax.set_ylim(0, 1)
-    ax.set_aspect('equal', adjustable='box')
+    # Subheader 4: Converting Video to Tabular Data
+    st.markdown("### :green[Converting Video to Tabular Data]")
+    st.markdown("""
+    1. Use `cv2.VideoCapture()` to capture frames.
+    2. Convert the frames into tabular data, where each frame's pixel values are rows or columns.
+    """)
     
-    # Display the grid
-    st.pyplot(fig)
+    # Subheader 5: Color Space Conversion
+    st.markdown("### Color Space Conversion")
+    st.markdown("""
+    - OpenCV allows color space changes with `cv2.cvtColor()`.
+    - **Syntax**: `cv2.cvtColor(img, cv2.COLOR_<source>2<destination>)`
+    - Example:
+      ```python
+      img = cv2.imread("path/to/image")
+      gray_img = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)