Update pages/Data Collection.py

pages/Data Collection.py

@@ -460,7 +460,7 @@ def image_details_page():
     
     # Sidebar for navigation
     st.sidebar.title("Navigation")
-    page = st.sidebar.radio("Go to", ["Introduction", "Basic Operations","Converting Image to Black&White ,BGR & Gray SCale"])
+    page = st.sidebar.radio("Go to", ["Introduction", "Basic Operations","Image Conversions"])
     
     # App Title and Description
     st.title("Image Processing Fundamentals")
@@ -503,7 +503,28 @@ def image_details_page():
         - **In images**: Each row represents a set of data points (pixels), and the columns represent their features.
         - **In tables**:Each row represents an individual data point, and each column corresponds to a feature of that data point.
         """)
+
+        st.subheader("Interactive Pixel Grid")
+    
+        # User Input for Height and Width
+        height = st.number_input("Enter Image Height (pixels):", min_value=1, max_value=50, value=10, step=1)
+        width = st.number_input("Enter Image Width (pixels):", min_value=1, max_value=50, value=10, step=1)
+        
+        # Display Resolution
+        resolution = height * width
+        st.write(f"**Image Resolution**: {resolution} pixels")
         
+        # Generate and Display Pixel Grid
+        st.write("**Pixel Grid Visualization:**")
+        grid = np.random.rand(int(height), int(width))  # Generate random grid values
+        fig, ax = plt.subplots()
+        cax = ax.imshow(grid, cmap="magma")  
+        plt.colorbar(cax, ax=ax)  # Add color bar for context
+        ax.set_title("Pixel Grid")
+        ax.set_xlabel("Width(pixels)", fontsize=8)  # Set smaller font size
+        ax.set_ylabel("Height(pixels)", fontsize=8)  # Set smaller font size
+
+    
         st.header("Color Spaces")
         
         # Explanation for Color Spaces
@@ -580,7 +601,10 @@ def image_details_page():
         """)
         
         # Theory Section
-        st.header("Reading an Image")
+        st.markdown("""
+        <h3 style="color:  #9400d3;"> Reading an image</h3>
+        """, unsafe_allow_html=True)
+        
         st.markdown("""
         - It converts an 2D image into Machine representation value array.
         - **cv2.imread("path)** this method going to convert image to 3D aray as it used default colour space **RGB**.
@@ -599,7 +623,10 @@ def image_details_page():
         
         
         # Theory Section
-        st.header("`cv2.imshow`")
+        st.markdown("""
+        <h3 style="color: #FF7F00;"> imshow()</h3>
+        """, unsafe_allow_html=True)
+        
         st.markdown("""
         - After creating or reading an image, we can display it using OpenCV. Here’s how the key functions work together:
         - The `imshow()` function creates a pop-up window to display the image.
@@ -610,21 +637,31 @@ def image_details_page():
         """)
 
         # Theory Section
-        st.header("`cv2.waitKey`")
+        st.markdown("""
+        <h3 style="color: #FF7F00;"> waitkey()</h3>
+        """, unsafe_allow_html=True)
         st.markdown("""
         - The main purpose Waits for a key press and adds a delay before closing the pop-up window.
         - `waitKey(0)` or `waitKey()` Keeps the window open indefinitely until a key is pressed.
-        - `waitkey(10) After 10 milli seconds the pop up window will be closed when we use `waitkey(n)` after n milliseconds window closes.
+        - `waitkey(10)` After 10 milli seconds the pop up window will be closed when we use waitkey(n) after n milliseconds window closes.
         """)
         
         # Theory Section
-        st.header("`cv2.destroyAllWindows`")
+        st.markdown("""
+        <h3 style="color: #FF7F00;"> destroyAllWindows()</h3>
+        """, unsafe_allow_html=True)
         st.markdown("""
         - **Purpose**: Closes all OpenCV-created windows.
         - **Usage**:This makes sure that memory is cleared and helps avoid crashes by getting rid of resources when the image is no longer needed.
         """)
 
-        st.markdown("<h5 style='color: green;'>These three functions must work together to display and manage images effectively./h5>", unsafe_allow_html=True)
+        st.code("""
+        cv2.destroyAllWindows() # When we give this all temporary windows will be closed
+        """)
+        
+        st.markdown("""
+        <h5 style='color: green;'>These three functions must work together to display and manage images effectively. /h5>
+        """, unsafe_allow_html=True)
 
         
         st.code("""
@@ -649,83 +686,183 @@ def image_details_page():
           - Use `cv2.destroyAllWindows()` to close all pop-up windows and release system resources properly.
         """)
     
+        st.markdown("""
+        <h3 style="color: #9400d3;">Saving an Image</h3>
+        """, unsafe_allow_html=True)
     
-    elif page =="Converting Image to Black&White ,BGR & Gray SCale":
+        # About imwrite() function
+        st.write("""
+        To save an image file in OpenCV, we use the **imwrite()** function.  
+        It converts the numerical array (image data) back into an image file format, such as `.jpg`, `.png`, or `.bmp`.
+        """)
+        
+        # Code example
+        st.code("""
+        
+        cv2.imwrite('image.jpg', image_array)  # 'image.jpg' it is the name of the output file
+        print("Wow your image is saved!")
+        """, language="python")
+
+    elif page =="Image Conversions":
     
         from PIL import Image
         
         # Title of the app
-        st.header("Black & White Images")
+        st.markdown("""
+        <h3 style="color: #9400d3;">Creating a Black and White Image</h3>
+        """, unsafe_allow_html=True)
+            
+        # Explanation
+        st.write("""
+        In OpenCV, black and white images are created by filling a matrix with pixel values:
+        - **Black image**: When the pixel values are set to 0.
+        - **White image**: When the pixel values are set to 255.
+            """)     
         
         # Display the code
-        st.subheader("Code to Create and Display Black & White Images")
         st.code("""
         import numpy as np
         import streamlit as st
         
-        # Create images
-        white_img = np.full((500, 500), 255, dtype=np.uint8)  # White image
-        black_img = np.zeros((500, 500), dtype=np.uint8)      # Black image
-    
-         # Display in OpenCV
-        cv2.imshow("White image", white_img)
-        cv2.waitKey(0)
-        cv2.destroyAllWindows()
-    
-        cv2.imshow("Black image", black_img)
-        cv2.waitKey(0)
-        cv2.destroyAllWindows()
+        white_img= np.full((500,500),255,dtype=np.uint8)
+        black_img = np.zeros((500,500),dtype=np.uint8)        
+        
+        cv2.imshow("white",white_img)       #white image is displayed
+        cv2.imshow("black",black_img)       #black image is displayed
+        cv2.waitKey()                       # until we close the window it displays the image
+        cv2.destroyAllWindows()             # Close all temporary windows
         """, language="python")
         
         
         # Section 1: Grayscale Image
-        st.header("Grayscale Image Creation")
+        st.markdown("""
+        <h3 style="color: #9400d3;">Creating a Grayscale Image</h3>
+        """, unsafe_allow_html=True)
+
+        st.write("""
+        In a grayscale image, 0 is black, 255 is white, and pixel values between 1 and 254 represent varying shades of gray
+        """)
+
+
         st.code("""
         # Grayscale image creation
-        gray_img = np.full((500, 500), 155, dtype=np.uint8)
+        gray_img = np.full((500, 500), 155, dtype=np.uint8)   #155 is a medium-light gray, closer to white than black.
         
         # Display in OpenCV
-        cv2.imshow("Gray Image", gray_img)
+        cv2.imshow("Gray Image", gray_img)    #Gray scale image is created
         cv2.waitKey(0)
         cv2.destroyAllWindows()
         """, language="python")
         
-        # Section 2: BGR Channels
-        st.header("BGR Color Channels")
+        # Section 2: Merge colors
+
+        st.markdown("""
+        <h3 style="color: #e25822;">Combining Color Channels</h3>
+        """, unsafe_allow_html=True)
+
+        # About cv2.merge() function
+        st.write("""
+        To create a full color image from separate single-channel images (such as Red, Green, and Blue), the **cv2.merge()** function is used.  
+        It combines individual color channels into a single, complete color image.
+        """)
+        
+        # Syntax example for cv2.merge()
+        st.code("""
+        # Combining individual color channels (Blue, Green, Red)
+        merged_image = cv2.merge([blue_channel, green_channel, red_channel]) 
+        # blue_channel, green_channel, red_channel are individual images representing the Blue, Green, and Red color channels
+        """, language="python")
+
+
+        st.markdown("""
+        <h3 style="color: #9400d3;">Creating a BGR image</h3>
+        """, unsafe_allow_html=True)
+
+        st.write("""
+        - The **Red channel** has pixel values with red set to 255, and green and blue to 0. 
+        - The **Green channel** has pixel values with green set to 255, and red and blue to 0. 
+        - The **Blue channel** has pixel values with blue set to 255, and red and green to 0. 
+        - When merged, these channels form a complete color image.
+        """)
+
+        st.markdown("""
+        <p style="color: #FF6347;">To represent a coloured image, we have to convert the image into a 3D array. The mixture of three 2D arrays is <strong style="color: #1E90FF;">RGB</strong>.</p>
+        """, unsafe_allow_html=True)
+
+        
         st.code("""
-        # Creating BGR channels
-        blue_channel = cv2.merge([
-            np.full((300, 300), 255, dtype=np.uint8),  # Blue
-            np.zeros((300, 300), dtype=np.uint8),     # Green
-            np.zeros((300, 300), dtype=np.uint8)      # Red
-        ])
-        green_channel = cv2.merge([
-            np.zeros((300, 300), dtype=np.uint8),     # Blue
-            np.full((300, 300), 255, dtype=np.uint8), # Green
-            np.zeros((300, 300), dtype=np.uint8)      # Red
-        ])
-        red_channel = cv2.merge([
-            np.zeros((300, 300), dtype=np.uint8),     # Blue
-            np.zeros((300, 300), dtype=np.uint8),     # Green
-            np.full((300, 300), 255, dtype=np.uint8)  # Red
-        ])
+    
+        # Create individual color channels
+        b = np.full((200, 200), 255, dtype=np.uint8)  # Blue channel
+        g = np.zeros((200, 200), dtype=np.uint8)     # Green channel
+        r = np.zeros((200, 200), dtype=np.uint8)     # Red channel
+    
+        # Merge the color channels to create RGB images
+        b_img = cv2.merge([b, g, r])  # Blue image
+        g_img = cv2.merge([g, b, r])  # Green image
+        r_img = cv2.merge([r, g, b])  # Red image
+    
+        # Display the images
+        cv2.imshow("Blue", b_img)
+        cv2.imshow("Green", g_img)
+        cv2.imshow("Red", r_img)
+        cv2.waitKey(0)               # Wait until a key is pressed
+        cv2.destroyAllWindows()      # Close all OpenCV windows
         """, language="python")
+
+        st.markdown("""
+        <h3 style="color: #e25822;">Channel Splitting</h3>
+        """, unsafe_allow_html=True)
+
+        # About cv2.split() function
+        st.write("""
+        The `cv2.split()` function in OpenCV is used to separate an image into its individual color channels.  
+        It generates separate single-channel arrays for each color, which can then be manipulated independently.  
+        For example, it can divide an RGB image into its Red, Green, and Blue components.
+        """)
         
+        # Syntax for cv2.split() function
         st.code("""
-        # Display in OpenCV
-        cv2.imshow("Blue Channel", blue_channel)
-        cv2.waitKey(0)
-        cv2.destroyAllWindows()
+            # Syntax for cv2.split()
+            channels = cv2.split(image)
+            # image: The input image (e.g., an RGB image).
+            # channels: A list of single-channel images (e.g., Blue, Green, Red).
+        """, language="python")
         
-        cv2.imshow("Green Channel", green_channel)
-        cv2.waitKey(0)
-        cv2.destroyAllWindows()
+        # Heading for the section
+        st.markdown("""
+                <h3 style="color: #9400d3;">Splitting and Recombining Color Channels</h3>
+            """, unsafe_allow_html=True)
         
-        cv2.imshow("Red Channel", red_channel)
-        cv2.waitKey(0)
-        cv2.destroyAllWindows()
+        # Code Example for Splitting and Merging Color Channels
+        st.code("""
+            img = cv2.imread("path of the image")   # Load the image
+            
+            b, g, r = cv2.split(img)  # Separate the image into Blue, Green, and Red channels
+            
+            zeros = np.zeros(img.shape[:-1], dtype=np.uint8)   # Create a blank array for the empty channels
+            
+            blue_channel = cv2.merge([b, zeros, zeros])    # The Blue channel has blue set to 255, and red and green to 0
+            green_channel = cv2.merge([zeros, g, zeros])   # The Green channel has green set to 255, and red and blue to 0
+            red_channel = cv2.merge([zeros, zeros, r])     # The Red channel has red set to 255, and green and blue to 0
+            
+            # Show the separate color channels and the original image
+            cv2.imshow("Blue_channel", blue_channel)
+            cv2.imshow("Green_channel", green_channel)
+            cv2.imshow("Red_channel", red_channel)
+            cv2.imshow("Original_img", cv2.merge([b, g, r]))
+            cv2.waitKey(0)
+            cv2.destroyAllWindows()
         """, language="python")
         
+
+        
+
+
+
+
+
+        
         if st.button("Go Back"):
             st.experimental_set_query_params(page="Introduction")