Update pages/Data Collection.py

pages/Data Collection.py

@@ -1,71 +1,111 @@
 import streamlit as st
 
-# App title
-st.title("Working with HTML Data using Python")
+# Title
+st.title("📸 Understanding Images and How to Handle Them")
 
-# HTML and DataFrames Section
-st.header("HTML and DataFrames")
+# Helper function to style text with HTML
+def colored_subheader(text, color):
+    st.markdown(f"<h3 style='color:{color};'>{text}</h3>", unsafe_allow_html=True)
 
-st.write("""
-- **HTML (HyperText Markup Language)** is a semi-structured data format.  
-- HTML uses tags like `<table>`, `<tr>`, `<th>`, and `<td>` to structure tabular data.  
-- Unlike XML, HTML does not allow creating custom tags freely.  
-- Not all HTML content can be converted into dataframes, especially paragraph text or unstructured data.  
-- Typically, only table-related elements (`<table>`, `<tr>`, `<th>`, `<td>`) can be converted into dataframes.
-""")
+# What is an Image?
+st.header("What is an Image? 🖼️")
+st.write("An image is a **2D representation of the visible light spectrum**. It is created when light reflects off objects and is captured by a device like a camera or our eyes.")
 
-# Reading HTML Files Section
-st.header("Reading HTML Files into DataFrames")
+# How is an Image Formed?
+st.header("How is an Image Formed? 🌞📸")
+colored_subheader("1. Source of Light 🌟", "blue")
+st.write("- Light comes from sources like the **sun**, **moon**, or **stars**.")
 
-st.write("**Reading HTML Files:**")
-st.code("""
-import pandas as pd
-tables = pd.read_html(path_or_buffer)
-""", language="python")
+colored_subheader("2. Reflection 🔄", "green")
+st.write("- Light hits an object and **bounces back** (this is called reflection).")
 
-st.write("""
-- **`pd.read_html(path_or_buffer)`** reads HTML files or websites containing tables.  
-- Extracts all tables and returns them as a list of dataframes.
-""")
+colored_subheader("3. Capture 📸", "orange")
+st.write("- The reflected light is captured by a camera or eyes, forming an image.")
 
-st.write("**Accessing Specific Tables:**")
-st.code("""
-# Accessing the first table from the list
-table = tables[0]
-""", language="python")
+colored_subheader("4. Visible Light Only 🌈", "purple")
+st.write("- Not all light can create images (e.g., gamma rays or X-rays are invisible).")
+st.write("- **Visible light** is required to see and capture images.")
 
-st.write("""
-- Each table is stored in the list by index.  
-- Use indexing to select the table you want to work with.
-""")
+# Images and Pixels
+st.header("Images and Pixels 🟦⬜")
+colored_subheader("What are Pixels? 📏", "red")
+st.write("- Pixels are tiny squares that make up an image.")
+st.write("- Each pixel contains information about color and brightness.")
+
+colored_subheader("Resolution 📐", "darkblue")
+st.write("- The number of pixels in an image determines its resolution.")
+st.write("- **More pixels = Clearer image = More details.**")
+
+# Why are Images Like a Grid?
+st.header("Why are Images Like a Grid? 🔳")
+colored_subheader("Grid Structure 🧩", "darkgreen")
+st.write("- Images are stored as grids because they are made of pixels, each representing a feature like color or brightness.")
 
-st.write("**Limitations:**")
+colored_subheader("Difference from Tabular Data 📊", "teal")
+st.write("- Tabular data has rows as data points and columns as features.")
+st.write("- In images, the entire grid represents a **single data point**, with each pixel as a feature.")
+
+# How Are Images Represented in Python?
+st.header("How Are Images Represented in Python? 🐍")
+colored_subheader("Using NumPy Arrays 📊", "maroon")
+st.write("- Images are converted into arrays of numbers for computers to process.")
+st.write("- Example: A black-and-white image is represented as a 2D array.")
+
+# Color Spaces in Images
+st.header("Color Spaces in Images 🌈")
+
+# Black and White
+colored_subheader("1. Black and White 🏴", "black")
+st.write("- Represents two colors: **Black (0)** and **White (255)**.")
+st.write("- **Demerit**: Cannot preserve other colors like red, blue, or green.")
+
+# Grayscale
+colored_subheader("2. Grayscale 🖤", "gray")
+st.write("- Preserves **256 shades of gray** (from 0 to 255).")
+st.write("- **Demerit**: Cannot handle colored images (like red, green, blue).")
+
+# RGB
+colored_subheader("3. RGB (Red, Green, Blue) 🌈", "blue")
+st.write("- Most common color space.")
+st.write("- Colors are created by mixing **Red**, **Green**, and **Blue** intensities.")
+st.write("- Each channel has values ranging from **0 to 255**.")
+st.write("- **Advantages**: Can represent up to **16 million colors**.")
+
+# How Images are Converted to Arrays
+st.header("How Images are Converted to Arrays 🖩")
+colored_subheader("Steps to Convert Images 🛠️", "brown")
 st.write("""
-- Not all websites or HTML files can be read, even if they have tables.  
-- Issues like authorization restrictions can prevent reading certain tables.
+1. **Step 1: Convert the Image to Numbers**: Each pixel’s color and brightness are stored as numbers.
+2. **Step 2: Create Arrays**:
+   - A black-and-white image becomes a **2D array** (rows and columns).
+   - A colored image (RGB) becomes a **3D array** with separate layers for red, green, and blue.
+3. **Step 3: Process the Array**: The computer processes these arrays to analyze or modify the image.
 """)
 
-st.write("**Using the `match` Parameter:**")
-st.code("""
-# Reading a specific table using the match parameter
-tables = pd.read_html(path, match="keyword")
-""", language="python")
+# Differences Between 2D and 3D Arrays in Images
+st.header("Differences Between 2D and 3D Arrays in Images 📏")
+colored_subheader("Comparison 🆚", "indigo")
+st.table({
+    "Type": ["2D Array (Grayscale)", "3D Array (RGB)"],
+    "Explanation": ["Used for grayscale images (shades of gray).", "Used for RGB images (multiple channels)."],
+    "Values": ["0–255", "(R, G, B) values, each 0–255"]
+})
 
+# Notes
+st.header("Notes 📝")
+colored_subheader("Key Points ✏️", "gold")
 st.write("""
-- To locate specific tables, use `match="keyword"` while reading HTML.  
-- The `match` parameter searches for tables containing the specified keyword.
+- **Color Spaces**: Essential to represent and preserve the colors in an image.
+- **Numpy Library**: Widely used in Python for processing images as arrays.
 """)
 
-# Exporting DataFrames Section
-st.header("Exporting DataFrames to HTML")
+# Buttons
+col1, col2 = st.columns(2)
 
-st.write("**Exporting DataFrame to HTML:**")
-st.code("""
-# Exporting a dataframe to an HTML file
-df.to_html("output.html")
-""", language="python")
+with col1:
+    if st.button("🔄 Basic Operations Using OpenCV"):
+        st.write("Redirecting to the next section: Basic Operations Using OpenCV...")
 
-st.write("""
-- Converts a dataframe into an HTML file.  
-- Saves the dataframe in an HTML-compatible table format at the specified path.
-""")
+with col2:
+    if st.button("🔙 Back"):
+        st.write("Going back to the previous section...")