Update pages/3_Life Cycle Of ML Project.py

pages/3_Life Cycle Of ML Project.py

@@ -181,68 +181,491 @@ elif st.session_state.page == "unstructured_data":
 #gray_image.show()
   #  """, language='python')
 
-if st.button("Introduction to Image"):
+  # Button to Navigate to Introduction to Image
+    if st.button("Introduction to Image"):
         st.session_state.page = "introduction_to_image"
-# ----------------- Introduction to Image ----------------- 
-def introduction_to_image_page(): 
-    st.header("🖼️ What is Image") 
-    st.markdown(""" An image is a two-dimensional visual representation of objects, people, scenes, or concepts. 
-    It can be captured using devices like cameras, scanners, or created digitally. 
-    Images are composed of individual units called pixels, which contain information about brightness and color.
-    **Types of Images:** - **Raster Images (Bitmap)**: Composed of a grid of pixels. 
-    Common formats include: - JPEG 
-    - PNG 
+
+# ----------------- Introduction to Image -----------------
+def introduction_to_image_page():
+    st.header("🖼️ What is Image")
+    st.markdown("""
+   An image is a two-dimensional visual representation of objects, people, scenes, or concepts. It can be captured using devices like cameras, scanners, or created digitally. Images are composed of individual units called pixels, which contain information about brightness and color.
+Types of Images:
+- **Raster Images (Bitmap)**: Composed of a grid of pixels. Common formats include:
+    - JPEG
+    - PNG
     - GIF
-    - **Vector Images**: Defined by mathematical equations and geometric shapes like lines and curves.
-    Common format: 
-    - SVG (Scalable Vector Graphics) 
-    - **3D Images**: Represent objects or scenes in three dimensions, often used for rendering and modeling. 
-    **Image Representation:** 
-    - **Grayscale Image**: Each pixel has a single intensity value, typically ranging from 0 (black) to 255 (white), representing different shades of gray. 
-    - **Color Image**: Usually represented in the RGB color space, where each pixel consists of three values indicating the intensity of Red, Green, and Blue. 
-    **Applications of Images:** 
-    - **Photography & Visual Media**: Capturing moments and storytelling. 
-    - **Medical Imaging**: Diagnosing conditions using X-rays, MRIs, etc. 
-    - **Machine Learning & AI**: Tasks like image classification, object detection, and facial recognition.
-    - **Remote Sensing**: Analyzing geographic and environmental data using satellite imagery. 
-    - **Graphic Design & Art**: Creating creative visual content for marketing and design. """) 
-    st.code(""" from PIL import Image import numpy as np import matplotlib.pyplot as plt 
-    # Open an image file 
-    image = Image.open('sample_image.jpg') 
-    image.show()
-    # Convert image to grayscale 
-    gray_image = image.convert('L') 
-    gray_image.show() 
-    # Resize the image 
-    resized_image = image.resize((200, 200)) 
-    resized_image.show() 
-    # Rotate the image by 90 degrees 
-    rotated_image = image.rotate(90) r
-    otated_image.show() 
-    # Convert the image to a NumPy array and display its shape 
-    image_array = np.array(image) 
-    print(image_array.shape) 
-    # Display the image array as a plot 
-    plt.imshow(image) 
-    plt.title("Original Image") 
-    plt.axis('off') 
-    plt.show() """, language='python') 
-    st.header("Color Spaces in Machine Learning") 
-    st.markdown(""" A color space is a mathematical model for representing colors. 
-    In machine learning, different color spaces can be used for preprocessing and analyzing image data, depending on the task. 
-    **Common Color Spaces:** 
-    - **RGB (Red, Green, Blue)**: The most common color space for digital images. Each pixel is represented by a combination of three values corresponding to the red, green, and blue channels. 
-    - **Use Cases**: Image classification, general-purpose image analysis. 
-    - **HSV (Hue, Saturation, Value)**: Separates color information (hue) from intensity (value), making it useful for tasks where distinguishing between color variations and intensity is important. 
-    - **Use Cases**: Color-based object detection, image segmentation, color tracking. 
-    - **CMYK (Cyan, Magenta, Yellow, Black)**: Primarily used for printing, not commonly used in machine learning, but useful for preparing images for printers.
-    - **Use Cases**: Printing applications. 
-    - **LAB (Lightness, A, B)**: Designed to be perceptually uniform, meaning that the perceptual difference between colors is consistent across the space. 
-    - **Use Cases**: Color correction, image processing tasks requiring color consistency. """) 
-    # Button to Navigate to Operations Using OpenCV 
-    if st.button("Operations Using OpenCV"): 
-        st.session_state.page = "operations_using_opencv" 
-        # Navigation Button 
+- **Vector Images**: Defined by mathematical equations and geometric shapes like lines and curves. Common format:
+    - SVG (Scalable Vector Graphics)
+- **3D Images**: Represent objects or scenes in three dimensions, often used for rendering and modeling.
+Image Representation:
+- **Grayscale Image**: Each pixel has a single intensity value, typically ranging from 0 (black) to 255 (white), representing different shades of gray.
+- **Color Image**: Usually represented in the RGB color space, where each pixel consists of three values indicating the intensity of Red, Green, and Blue.
+Applications of Images:
+- **Photography & Visual Media**: Capturing moments and storytelling.
+- **Medical Imaging**: Diagnosing conditions using X-rays, MRIs, etc.
+- **Machine Learning & AI**: Tasks like image classification, object detection, and facial recognition.
+- **Remote Sensing**: Analyzing geographic and environmental data using satellite imagery.
+- **Graphic Design & Art**: Creating creative visual content for marketing and design.
+""")
+
+    st.code("""
+from PIL import Image
+import numpy as np
+import matplotlib.pyplot as plt
+# Open an image file
+image = Image.open('sample_image.jpg')
+image.show()
+# Convert image to grayscale
+gray_image = image.convert('L')
+gray_image.show()
+# Resize the image
+resized_image = image.resize((200, 200))
+resized_image.show()
+# Rotate the image by 90 degrees
+rotated_image = image.rotate(90)
+rotated_image.show()
+# Convert the image to a NumPy array and display its shape
+image_array = np.array(image)
+print(image_array.shape)
+# Display the image array as a plot
+plt.imshow(image)
+plt.title("Original Image")
+plt.axis('off')
+plt.show()
+    """, language='python')
+
+    st.header("Color Spaces in Machine Learning")
+    st.markdown("""
+    A color space is a mathematical model for representing colors. In machine learning, different color spaces can be used for preprocessing and analyzing image data, depending on the task.
+Common Color Spaces:
+- **RGB (Red, Green, Blue)**: The most common color space for digital images. Each pixel is represented by a combination of three values corresponding to the red, green, and blue channels.
+  - **Use Cases**: Image classification, general-purpose image analysis.
+- **HSV (Hue, Saturation, Value)**: Separates color information (hue) from intensity (value), making it useful for tasks where distinguishing between color variations and intensity is important.
+  - **Use Cases**: Color-based object detection, image segmentation, color tracking.
+- **CMYK (Cyan, Magenta, Yellow, Black)**: Primarily used for printing, not commonly used in machine learning, but useful for preparing images for printers.
+  - **Use Cases**: Printing applications.
+- **LAB (Lightness, A, B)**: Designed to be perceptually uniform, meaning that the perceptual difference between colors is consistent across the space.
+  - **Use Cases**: Color correction, image processing tasks requiring color consistency.
+""")
+
+    # Button to Navigate to Operations Using OpenCV
+    if st.button("Operations Using OpenCV"):
+        st.session_state.page = "operations_using_opencv"
+
+     # Navigation Button
+    if st.button("Back to Data Collection"):
+        st.session_state.page = "data_collection"  
+        
+ #       ---------- OPERATIONS USING OPENCV --------------------------------
+
+
+def  operations_using_opencv_page():
+    # Header and description for cv2.imread
+    st.header("🗂️ Reading an Image with cv2.imread()")
+    st.markdown("""
+    **`cv2.imread()` - Read an Image**
+    **Purpose:** Load an image from a file and convert it to a NumPy array.
+    **Syntax:**
+    ```python
+    image = cv2.imread(filename, flags)
+    ```
+    **Common Flags:**
+    - `cv2.IMREAD_COLOR` (default, loads a color image).
+    - `cv2.IMREAD_GRAYSCALE` (loads the image in grayscale).
+    - `cv2.IMREAD_UNCHANGED` (loads the image as is, with alpha transparency if available).
+    **Return:**
+    - A NumPy array representing the image.
+    - Returns `None` if the image cannot be loaded.
+    **Example:**
+    ```python
+    import cv2
+    image = cv2.imread('image.jpg', cv2.IMREAD_COLOR)
+    ```
+    """)
+
+    # Header and description for cv2.imshow
+    st.header("🖼️ Displaying an Image with cv2.imshow()")
+    st.markdown("""
+    **`cv2.imshow()` - Display an Image**
+    **Purpose:** Show an image in a window.
+    **Syntax:**
+    ```python
+    cv2.imshow(window_name, image)
+    ```
+    **Requirements:**
+    - Call `cv2.waitKey()` to keep the window open until a key is pressed.
+    - Call `cv2.destroyAllWindows()` to close the window(s).
+    **Behavior:**
+    - Displays the image in a resizable window.
+    - The image must be a NumPy array.
+    **Example:**
+    ```python
+    import cv2
+    cv2.imshow('Image Window', image)
+    cv2.waitKey(0)  # Wait for a key press
+    cv2.destroyAllWindows()  # Close the window
+    ```
+    """)
+
+    # Header and description for cv2.imwrite
+    st.header("💾 Saving an Image with cv2.imwrite()")
+    st.markdown("""
+    **`cv2.imwrite()` - Write/Save an Image**
+    **Purpose:** Save an image to a file.
+    **Syntax:**
+    ```python
+    cv2.imwrite(filename, image)
+    ```
+    **File Format:**  
+    Determined by the file extension (`.jpg`, `.png`, etc.).
+    **Return:**  
+    - `True` if the image is saved successfully, `False` otherwise.
+    **Optional Parameters:**
+    - **JPEG Quality:** `cv2.IMWRITE_JPEG_QUALITY` (0 to 100, default is 95).
+    - **PNG Compression:** `cv2.IMWRITE_PNG_COMPRESSION` (0 to 9, default is 3).
+    **Example:**
+    ```python
+    import cv2
+    cv2.imwrite('output.jpg', image)
+    ```
+    """)
+
+    ##Navigation Button 
+    if st.button("Conversion of Images"):
+        st.session_state.page = "Conversion_of_Images"
+
+      # Navigation Button
+    if st.button("Back to Data Collection"):
+        st.session_state.page = "data_collection"  
+
+ 
+
+##------------CONVERSION OF IMAGE-----------------
+
+
+def Conversion_of_Images_page():
+    # Header for Image Conversion
+    st.header("🔄 Converting Images Between Different Color Spaces")
+
+    st.markdown("""
+    **OpenCV supports many color spaces for image processing.**
+    **Common Conversions:**
+    
+    - **BGR to Grayscale:** Converts a color image to grayscale.
+    - **BGR to RGB:** Converts from OpenCV's default BGR format to the standard RGB format.
+    - **BGR to HSV:** Converts the image to the HSV (Hue, Saturation, Value) color space.
+    **Examples of Conversions:**
+    ```python
+    import cv2
+    # Load the image
+    image = cv2.imread('image.jpg')
+    # Convert BGR to Grayscale
+    gray_image = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+    # Convert BGR to RGB
+    rgb_image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+    # Convert BGR to HSV
+    hsv_image = cv2.cvtColor(image, cv2.COLOR_BGR2HSV)
+    ```
+    **Why Convert Color Spaces?**
+    - **Grayscale:** Useful for reducing image complexity in tasks like edge detection.
+    - **RGB:** Standard format for visualization in libraries like `matplotlib`.
+    - **HSV:** Useful for color-based segmentation, as it separates color information from brightness.
+    """)
+
+    # Header for Splitting Channels
+    st.header("🔹 Splitting Color Channels in an Image")
+
+    st.markdown("""
+    **Splitting an image into its individual color channels (B, G, R) allows you to analyze or modify each channel independently.**
+    **Syntax:**
+    ```python
+    b, g, r = cv2.split(image)
+    ```
+    **Example:**
+    ```python
+    import cv2
+    # Load the image
+    image = cv2.imread('image.jpg')
+    # Split the image into Blue, Green, and Red channels
+    blue_channel, green_channel, red_channel = cv2.split(image)
+    # Display the channels separately (Optional)
+    cv2.imshow('Blue Channel', blue_channel)
+    cv2.imshow('Green Channel', green_channel)
+    cv2.imshow('Red Channel', red_channel)
+    cv2.waitKey(0)
+    cv2.destroyAllWindows()
+    ```
+    **Explanation:**
+    - The `cv2.split()` function returns the Blue, Green, and Red channels as separate images (grayscale format).
+    """)
+
+    # Header for Merging Channels
+    st.header("🔹 Merging Color Channels in an Image")
+
+    st.markdown("""
+    **You can merge the individual channels back into a color image using `cv2.merge()`.**
+    **Syntax:**
+    ```python
+    merged_image = cv2.merge((b, g, r))
+    ```
+    **Example:**
+    ```python
+    import cv2
+    # Load the image
+    image = cv2.imread('image.jpg')
+    # Split the image into channels
+    b, g, r = cv2.split(image)
+    # Merge the channels back into a color image
+    merged_image = cv2.merge((b, g, r))
+    # Display the merged image
+    cv2.imshow('Merged Image', merged_image)
+    cv2.waitKey(0)
+    cv2.destroyAllWindows()
+    ```
+    **Explanation:**
+    - The `cv2.merge()` function takes a tuple of channels `(b, g, r)` and combines them back into a single color image.
+    - You can manipulate the individual channels before merging to achieve different effects.
+    """)
+
+    # Header for Combining with Modifications
+    st.header("🎨 Modifying Channels Before Merging")
+
+    st.markdown("""
+    **You can modify each channel (e.g., increase brightness in the red channel) before merging them back together.**
+    **Example:**
+    ```python
+    import cv2
+    # Load the image
+    image = cv2.imread('image.jpg')
+    # Split channels
+    b, g, r = cv2.split(image)
+    # Increase the intensity of the red channel
+    r = cv2.add(r, 50)
+    # Merge the modified channels
+    modified_image = cv2.merge((b, g, r))
+    # Display the modified image                            
+    cv2.imshow('Modified Image', modified_image)
+    cv2.waitKey(0)
+    cv2.destroyAllWindows()
+    ```
+    **Explanation:**
+    - In this example, `cv2.add(r, 50)` increases the intensity of the red channel by 50.
+    - After modification, the channels are merged back to create the final image.
+    """)
+
+  
+
+
+     # Navigation Button
+    if st.button("Video capture and explanation"):
+        st.session_state.page = "Video_capture_and_explanation"
+
+       # Navigation Button
+    if st.button("Back to Data Collection"):
+        st.session_state.page = "data_collection"  
+
+
+#---------VIDEO CAPTURE AND EXPLANATION OF CV2.WAITKEY-----------
+
+def Video_capture_and_explanation_page():
+    st.header("🎥 Video Capture with `cv2.VideoCapture()`")
+
+    st.markdown("""
+    **Purpose**: Captures live video from a webcam or reads a video file using OpenCV.
+    ### Syntax
+    ```python
+    cap = cv2.VideoCapture(source)
+    source:
+    0: Refers to the default webcam (if you have one connected).
+    'video.mp4': The path to a video file (can be any supported video format like .mp4, .avi).
+    ```
+    Key Methods:
+    - cap.read(): Captures a frame-by-frame video from the source.
+    Returns:
+    - ret: A Boolean indicating whether the frame was read correctly (True if successful).
+    - frame: The captured frame, represented as a NumPy array (this can be processed or displayed).
+    - cap.release(): Releases the video source when you are done capturing. It frees up system resources and allows you to safely close the video capture device or file.
+    Example:
+    Here’s an example that captures video from the default webcam and displays it:
+    ```python
+    import cv2
+    # Open the default webcam (0)
+    cap = cv2.VideoCapture(0)
+    while cap.isOpened():
+        ret, frame = cap.read()  # Capture frame-by-frame
+        if not ret:
+            break  # Exit if frame not read correctly
+        cv2.imshow('Live Video', frame)  # Display the frame
+        # Wait for 1 ms and exit if 'q' is pressed
+        if cv2.waitKey(1) & 0xFF == ord('q'):
+            break
+    cap.release()  # Release the webcam
+    cv2.destroyAllWindows()  # Close all OpenCV windows
+    ```
+    How it Works:
+    - cv2.VideoCapture(0): Opens the default webcam (if available).
+    - cap.read(): Reads each frame from the video source.
+    - cv2.imshow('Live Video', frame): Displays each captured frame in a window.
+    - cap.release(): Releases the video capture object when done capturing frames.
+    - cv2.destroyAllWindows(): Closes all OpenCV windows to free up resources.
+    """)
+
+    
+
+    ##----------##
+    
+    st.header("⏱️ cv2.waitKey() for Key Event Handling")
+    st.markdown(""" 
+    Purpose:
+    cv2.waitKey() is a key function used to handle keyboard events in OpenCV. It is commonly used to display images or video frames and wait for a user input.
+    Syntax:
+    ```python
+    cv2.waitKey(delay)
+    ```
+    delay:
+    - 0: Waits indefinitely until a key is pressed. This is useful when displaying images or video and you want to hold the display open until a key is pressed.
+    - 1: Waits for 1 millisecond. This is commonly used in real-time video streaming where the program keeps checking for user input every 1 millisecond.
+    How it Works:
+    - cv2.waitKey(1): This line waits for a key press for 1 millisecond before checking if the user has pressed any key. If no key is pressed within that time, it proceeds to the next frame.
+    - Key Event: The function returns an integer value representing the ASCII code of the key pressed. For example, pressing the 'q' key returns 113 (the ASCII value for 'q').
+    Example:
+    Here’s an example using cv2.waitKey() to exit the video capture loop when the 'q' key is pressed:
+    ```python
+    if cv2.waitKey(1) & 0xFF == ord('q'):
+        break
+    ```
+    Explanation:
+    - ord('q'): Converts the 'q' character to its ASCII value (113).
+    - & 0xFF: Masks the higher bits of the returned value to only check for the lower 8 bits, ensuring correct handling of the key press.
+    Why is cv2.waitKey() Important?
+    - It helps manage user input while displaying images or videos.
+    - Without cv2.waitKey(), the OpenCV window would immediately close after displaying the image/video, and you would not be able to interact with it.
+    - It enables frame-by-frame processing in real-time video processing (such as live video capture or webcam feeds).
+    Example in Context:
+    ```python
+    import cv2
+    # Open the default webcam (0)
+    cap = cv2.VideoCapture(0)
+    while cap.isOpened():
+        ret, frame = cap.read()  # Capture frame-by-frame
+        if not ret:
+            break  # Exit if frame not read correctly
+        cv2.imshow('Webcam Feed', frame)  # Display the frame
+        # Wait for 1 ms and exit if 'q' is pressed
+        if cv2.waitKey(1) & 0xFF == ord('q'):
+            break
+    cap.release()  # Release the webcam
+    cv2.destroyAllWindows()  # Close all OpenCV windows
+    ```
+    Explanation:
+    - cv2.VideoCapture(0): Initializes the webcam.
+    - cap.read(): Captures each frame from the webcam.
+    - cv2.imshow('Webcam Feed', frame): Displays the captured frame.
+    - cv2.waitKey(1): Checks for key press every 1 millisecond. If the 'q' key is pressed, the loop breaks, and the webcam feed stops.
+    - cap.release(): Releases the webcam when done.
+    - cv2.destroyAllWindows(): Closes the OpenCV windows and cleans up resources.
+    """)
+
+###------KEY POINTS -----###
+
+    st.markdown("""
+1. **Video Capture (`cv2.VideoCapture`)**: Opens and reads video either from the webcam or from a video file.
+   - **Method `cap.read()`**: Captures individual frames from the video source.
+   - **Releasing the capture (`cap.release()`)**: Ensures that the resources are freed once done.
+2. **Key Handling (`cv2.waitKey`)**: Waits for user key input and processes it:
+   - **`cv2.waitKey(1)`**: Checks for key presses every 1 millisecond.
+   - **Exiting the loop**: Pressing the `'q'` key exits the video capture loop.
+This explanation provides both the purpose and practical use cases of `cv2.VideoCapture()` and `cv2.waitKey()` in video capture scenarios, including how the two work together to display video and handle key events effectively.
+""")
+
+
+    # Navigation Button
+    if st.button("Affine Transformation Matrix"):
+        st.session_state.page = "Affine_Transformation_Matrix"
+
+       # Navigation Button
+    if st.button("Back to Data Collection"):
+        st.session_state.page = "data_collection"
+
+
+    st.markdown(
+    '<a href="https://github.com/Vamshi-183/Animation_project_using_opencv" target="_blank">'
+    '<button style="background-color:#4CAF50; color:white; padding:10px 20px; border:none; border-radius:5px; font-size:16px;">Go to GitHub Project</button>'
+    '</a>',
+    unsafe_allow_html=True
+    )
+
+        
+# ----- AFFINE TRANSFORMATION MATRIX -----
+
+
+
+def affine_transformation_matrix():
+    # Header for Affine Transformation Matrix
+    st.header("Affine Transformation Matrix")
+
+    # Description of Affine Transformation
+    st.markdown("""
+    An **Affine Transformation** is a linear mapping method that preserves points, straight lines, and planes. In other words, it maintains the structure of the original object while allowing for operations like translation, scaling, rotation, reflection, and shearing. Affine transformations are widely used in computer graphics, computer vision, image processing, and geometry.
+    Affine transformations can be represented by a **transformation matrix** of the following form:
+    \\[
+    T(x, y) = \\begin{bmatrix} a & b & tx \\\\ c & d & ty \\\\ 0 & 0 & 1 \\end{bmatrix} \\begin{bmatrix} x \\\\ y \\\\ 1 \\end{bmatrix}
+    \\]
+    - The **matrix elements (a, b, c, d)** control the linear transformation (scaling, rotation, and shearing).
+    - The elements **tx and ty** represent translation (shifting the coordinates).
+    ### How the Transformation Works
+    Given a point \\((x, y)\\), applying an affine transformation produces a new point \\((x', y')\\) calculated as:
+    \\[
+    \\begin{bmatrix} x' \\\\ y' \\\\ 1 \\end{bmatrix} = \\begin{bmatrix} a & b & tx \\\\ c & d & ty \\\\ 0 & 0 & 1 \\end{bmatrix} \\begin{bmatrix} x \\\\ y \\\\ 1 \\end{bmatrix}
+    \\]
+    This means:
+    - \\(x' = a \\cdot x + b \\cdot y + tx\\)  
+    - \\(y' = c \\cdot x + d \\cdot y + ty\\)
+    Affine transformations can be visualized as applying a series of transformations to geometric shapes.
+    """)
+
+    # Key Points Section
+    st.header("Key Points of Affine Transformations")
+
+    st.markdown("""
+    ### 1. **Preserves Collinearity**
+    - Points that lie on a straight line before transformation remain on a straight line after transformation.
+    ### 2. **Preserves Ratios of Distances**
+    - The ratio of distances between points on a line remains unchanged after transformation.
+    ### 3. **Common Operations**
+    Affine transformations can perform the following operations:
+    - **Translation**: Moves the object along the x and y axes.
+    - **Scaling**: Changes the size of the object (uniform or non-uniform).
+    - **Rotation**: Rotates the object around a specific point (usually the origin).
+    - **Shearing**: Skews the object along one or both axes.
+    - **Reflection**: Mirrors the object about a specific axis (e.g., x-axis or y-axis).
+    ### 4. **2D Affine Transformation Matrix**
+    The general 2D affine transformation matrix can be expressed as:
+    \\[
+    \\begin{bmatrix} a & b & tx \\\\ c & d & ty \\\\ 0 & 0 & 1 \\end{bmatrix}
+    \\]
+    Where:
+    - \\(a, b, c, d\\) represent the linear transformations (scaling, rotation, shearing).
+    - \\(tx, ty\\) represent translation.
+    ### 5. **Combining Transformations**
+    - Multiple affine transformations can be combined by multiplying their matrices.
+    - **Order Matters**: The order in which transformations are applied affects the final result (matrix multiplication is non-commutative).
+    ### 6. **Applications of Affine Transformations**
+    - **Computer Graphics**: Transforming and rendering shapes and images.
+    - **Image Processing**: Geometric operations like rotation, scaling, and shearing of images.
+    - **Computer Vision**: Object detection, pattern recognition, and image alignment.
+    - **Robotics**: Coordinate transformations for motion planning and navigation.
+    - **Geographical Information Systems (GIS)**: Map projection and alignment.
+    ### 7. **Homogeneous Coordinates**
+    Using homogeneous coordinates \\((x, y, 1)\\) allows us to unify translation with linear transformations in a single matrix operation. This simplifies the combination and chaining of multiple transformations.
+    """)
+
+    # Navigation Button
+    if st.button("Back to Data Collection"):
+        st.session_state.page = "data_collection"
+
+
 
     if st.button(":red[Back to Data Collection]"):
         st.session_state.page = "data_collection"