pages/LIFE_CYCLE_OF_MACHINE_LEARNING.py

import streamlit as st
import pandas as pd
import json
import xml.etree.ElementTree as ET
from PIL import Image
import numpy as np
import matplotlib.pyplot as plt

# Inject custom CSS to style the buttons
st.markdown("""
    <style>
    .stButton>button {
        background-color: #4CAF50;
        color: white;
        width: 100%;
    }
    </style>
    """, unsafe_allow_html=True)

# Initialize page navigation state
if 'page' not in st.session_state:
    st.session_state.page = "home"  # Default page is "home"

# ----------------- Home Page -----------------
def home_page():
    st.title(":green[Lifecycle of a Machine Learning Project]")
    st.markdown("Click on a stage to learn more about it.")

    # Buttons for various stages of the ML project lifecycle
    if st.button(":blue[📊 Data Collection]"):
        st.session_state.page = "data_collection"

    if st.button(":blue[🌟 Problem Statement]"):
        st.markdown("### Problem Statement\nIdentify the problem you want to solve and set clear objectives and success criteria.")
    
    if st.button(":blue[🛠️ Simple EDA]"):
        st.markdown("### Simple EDA\nPerform exploratory data analysis to understand data distributions and relationships.")
    
    if st.button(":blue[🧹 Data Pre-Processing]"):
        st.markdown("### Data Pre-Processing\nConvert raw data into cleaned data.")

    if st.button(":blue[📈 Exploratory Data Analysis (EDA)]"):
        st.markdown("### Exploratory Data Analysis (EDA)\nVisualize and analyze the data to understand its distributions and relationships.")

    if st.button(":blue[🏋️ Feature Engineering]"):
        st.markdown("### Feature Engineering\nCreate new features from existing data.")

    if st.button(":blue[🤖 Model Training]"):
        st.markdown("### Model Training\nTrain the model using the training data and optimize its parameters.")

    if st.button(":blue[🔧 Model Testing]"):
        st.markdown("### Model Testing\nAssess the model's performance using various metrics and cross-validation techniques.")

    if st.button(":blue[🚀 Model Deployment]"):
        st.markdown("### Model Deployment\nIntegrate the trained model into a production environment and monitor its performance.")

    if st.button(":blue[📝 Monitoring]"):
        st.markdown("### Monitoring\nPeriodically retrain the model with new data and update features as needed.")

# ----------------- Data Collection Page -----------------
def data_collection_page():
    st.title(":red[Data Collection]")
    st.markdown("### Data Collection\nThis page discusses the process of Data Collection.")
    st.markdown("Types of Data: **Structured**, **Unstructured**, **Semi-Structured**")

    if st.button(":blue[🌟 Structured Data]"):
        st.session_state.page = "structured_data"

    if st.button(":blue[📷 Unstructured Data]"):
        st.session_state.page = "unstructured_data"

    if st.button(":blue[🗃️ Semi-Structured Data]"):
        st.session_state.page = "semi_structured_data"

    if st.button("Back to Home"):
        st.session_state.page = "home"

# ----------------- Structured Data Page -----------------
def structured_data_page():
    st.title(":blue[Structured Data]")
    st.markdown("""
    Structured data is highly organized and typically stored in tables like spreadsheets or databases. It is easy to search and analyze.
    """)
    st.markdown("### Examples: Excel files")

    if st.button(":green[📊 Excel]"):
        st.session_state.page = "excel"

    if st.button("Back to Data Collection"):
        st.session_state.page = "data_collection"

# ----------------- Excel Data Page -----------------
def excel_page():
    st.title(":green[Excel Data Format]")

    st.write("### What is Excel?")
    st.write("Excel is a spreadsheet tool for storing data in tabular format with rows and columns. Common file extensions: .xls, .xlsx.")

    st.write("### How to Read Excel Files")
    st.code("""
import pandas as pd

# Read an Excel file
df = pd.read_excel('data.xlsx', sheet_name='Sheet1')
print(df)
    """, language='python')

    st.write("### Issues Encountered")
    st.write("""
- **File not found**: Incorrect file path.
- **Sheet name error**: Specified sheet doesn't exist.
- **Missing libraries**: openpyxl or xlrd might be missing.
""")

    st.write("### Solutions to These Issues")
    st.code("""
# Install required libraries
# pip install openpyxl xlrd

# Handle missing file
try:
    df = pd.read_excel('data.xlsx', sheet_name='Sheet1')
except FileNotFoundError:
    print("File not found. Check the file path.")

# List available sheet names
excel_file = pd.ExcelFile('data.xlsx')
print(excel_file.sheet_names)
    """, language='python')

    st.markdown('[Jupyter Notebook](https://colab.research.google.com/drive/1Dv68m9hcRzXsLRlRit0uZc-8CB8U6VV3?usp=sharing)')
   
    if st.button("Back to Structured Data"):
        st.session_state.page = "structured_data"

# ----------------- Unstructured Data Page -----------------
def unstructured_data_page():
    st.title(":blue[Unstructured Data]")
    
    st.markdown("""
    *Unstructured data* does not have a predefined format. It consists of various data types like text, images, videos, and audio files.
    Examples include:
    - Images (e.g., .jpg, .png)
    - Videos (e.g., .mp4, .avi)
    - Social media posts
    """)

    # 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
    - 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)
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"

        
# ----- 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"

# Call the function
if __name__ == "__main__":
    affine_transformation_matrix()






        
# ----------------- Semi-Structured Data Page -----------------
def semi_structured_data_page():
    st.title(":orange[Semi-Structured Data]")
    st.markdown("""
    Semi-structured data does not follow the rigid structure of relational databases but still has some organizational properties. Examples include:
    - JSON files
    - XML files
    """)

    if st.button(":green[💾 JSON]"):
        st.session_state.page = "json"
        
    if st.button(":green[📄 CSV]"):
        st.session_state.page = "csv"

    if st.button(":green[📄 XML]"):
        st.session_state.page = "xml"

    if st.button("Back to Data Collection"):
        st.session_state.page = "data_collection"

# ----------------- JSON Data Page -----------------
def json_page():
    st.title(":green[JSON Data Format]")

    st.write("### What is JSON?")
    st.write("""
    JSON (JavaScript Object Notation) is a lightweight data-interchange format that's easy for humans to read and write, and easy for machines to parse and generate. JSON is often used in APIs, configuration files, and data transfer applications.
    """)

    st.write("### Reading JSON Files")
    st.code("""
import json
# Read a JSON file
with open('data.json', 'r') as file:
    data = json.load(file)
    print(data)
    """, language='python')

    st.write("### Writing JSON Files")
    st.code("""
import json
# Write data to JSON file
data = {
    "name": "Alice",
    "age": 25,
    "skills": ["Python", "Machine Learning"]
}
with open('data.json', 'w') as file:
    json.dump(data, file, indent=4)
    """, language='python')

    st.markdown("### Tips for Handling JSON Files")
    st.write("""
    - JSON files can be nested, so you might need to navigate through dictionaries and lists.
    - If the structure is complex, you can use libraries like json_normalize() in pandas to flatten the JSON into a more tabular format for easier analysis.
    - JSON supports both strings and numbers, and other types like arrays and booleans, making it versatile for various data types.
    """)

    st.markdown('[Jupyter Notebook](https://huggingface.co/transformers/notebooks.html)')
    
    if st.button("Back to Semi-Structured Data"):
        st.session_state.page = "semi_structured_data"

# ----------------- Main Execution -----------------
def main():
    page = st.session_state.page

    if page == "home":
        home_page()
    elif page == "data_collection":
        data_collection_page()
    elif page == "structured_data":
        structured_data_page()
    elif page == "excel":
        excel_page()
    elif page == "unstructured_data":
        unstructured_data_page()
    elif page == "semi_structured_data":
        semi_structured_data_page()
    elif page == "json":
        json_page()
    elif page == "introduction_to_image":
        introduction_to_image_page()
    elif page == "operations_using_opencv":
         operations_using_opencv_page()
    elif page == "Conversion_of_Images":
         Conversion_of_Images_page()
    elif page == "Video_capture_and_explanation":
         Video_capture_and_explanation_page()

        
if __name__ == "__main__":
    main()