Update pages/hari.py

pages/hari.py

@@ -450,10 +450,236 @@ def image_details_page():
     - Formats include JPEG, PNG, BMP, etc.
     - Libraries like OpenCV and PIL are used for image processing.
     """)
-    st.code('from PIL import Image\nimage = Image.open("file.jpg")', language="python")
-
-    if st.button("Back to Home"):
-        st.session_state['page'] = "home"
+    
+    import numpy as np
+    
+    # Helper function for subheadings
+    def subheading(text):
+        """Displays a subheader with consistent styling."""
+        st.markdown(f"<h3 style='color:teal;'>{text}</h3>", unsafe_allow_html=True)
+    
+    # Sidebar for navigation
+    st.sidebar.title("Navigation")
+    page = st.sidebar.radio("Go to", ["Introduction", "Basic Operations","Converting Image to Black&White ,BGR & Gray SCale"])
+    
+    # App Title and Description
+    st.title("Image Processing Fundamentals")
+    st.write("""
+    This app introduces the basics of image processing, helping you understand how images are formed, represented, and handled programmatically. 
+    It's designed for beginners exploring computer vision concepts.
+    """)
+    
+    # Introduction Section
+    if page == "Introduction":
+        st.header("Introduction")
+        st.write("""
+        Images play a crucial role in various fields, including art, science, and technology.  
+        In this app, you will learn:
+        - How images are captured and represented.
+        - Different color spaces and their applications.
+        - Basic operations on images using Python libraries.
+        """)
+    
+        st.header("Understanding Images")
+        
+        # Subsections
+        subheading("What is an Image?")
+        st.write("""
+        An image is a **2D representation of light**, created when light reflects off an object and is captured by a camera or our eyes.
+        """)
+    
+        subheading("How is an Image Formed?")
+        st.write("""
+        - **Light Source**: Light from sources like the sun or a bulb hits an object.
+        - **Reflection**: Light bounces off the object's surface.
+        - **Capture**: The reflected light is recorded by a camera sensor or the human eye.
+        """)
+    
+        subheading("Why is an Image Represented as a Grid?")
+        st.write("""
+        - Images are stored as grids of **pixels**, where each pixel represents a single point of color and brightness.
+        - These grids are also called **image matrices**.
+        """)
+    
+        st.header("Color Spaces")
+        
+        subheading("1. Black and White")
+        st.write("""
+        - Represents two colors: **Black (0)** and **White (255)**.
+        - Used for simple image processing tasks where color isn't essential.
+        """)
+    
+        subheading("2. Grayscale")
+        st.write("""
+        - Extends black and white to include **256 shades of gray**.
+        - Preserves brightness details but loses color information.
+        """)
+    
+        subheading("3. RGB (Red, Green, Blue)")
+        st.write("""
+        - Combines three color channels: **Red**, **Green**, and **Blue**.
+        - Most commonly used for colored images, capable of representing over **16 million colors**.
+        """)
+    
+    # Basic Operations Section
+    elif page == "Basic Operations":
+        
+        st.code(""" 
+        import cv2
+        import numpy as np
+        """)
+        
+        st.title("OpenCV Basics: Image Handling")
+        
+        # Theory Section
+        st.header("1. `cv2.imread` - Reading an Image")
+        st.markdown("""
+        - **Purpose**: Converts an image file into a numerical array that represents its pixel data.
+        - **Default Behavior**: Reads the image in the **BGR color space**.
+        - **Parameters**:  
+          - `path`: Specifies the location of the image file.  
+          - `flags`:  
+            - `1`: Reads the image as a color image (default).  
+            - `0`: Reads the image as a grayscale image (2D array).
+        - **Output**: A numerical array where each element corresponds to a pixel's intensity or color.
+        """)
+        st.code("""
+        # Code to read an image
+        img = cv2.imread('path/to/your/image.jpg', 1)  # Read as color image
+        st.image(img, channels="BGR")  # Display image in Streamlit
+        """)
+        
+        # Theory Section
+        st.header("2. `cv2.imshow` - Displaying an Image")
+        st.markdown("""
+        - **Purpose**: Opens a pop-up window to show an image.
+        - **Parameters**:  
+          - `Window Name`: Title of the display window.
+          - `Image`: Array data representing the image.
+        """)
+        st.code("""
+        # Code to display an image
+        cv2.imshow("Sample Image", img)
+        """)
+        
+        # Theory Section
+        st.header("3. `cv2.waitKey` - Waiting for a Key Input")
+        st.markdown("""
+        - **Purpose**: Waits for the specified time (in milliseconds) for a key press to proceed or close the window.
+        - **Parameters**:
+          - `Delay`:  
+            - If `0`: Waits indefinitely until a key is pressed.  
+            - If a positive value: Waits for that duration in milliseconds.
+        - **Usage**: Prevents the program from closing the window immediately.
+        """)
+        st.code("""
+        # Code to wait for a key press
+        cv2.waitKey(0)  # Wait indefinitely until key press
+        """)
+        
+        # Theory Section
+        st.header("4. `cv2.destroyAllWindows` - Closing OpenCV Windows")
+        st.markdown("""
+        - **Purpose**: Closes all OpenCV-created windows.
+        - **Usage**: Ensures proper memory cleanup and avoids crashes by freeing up resources after the display is no longer needed.
+        - **Best Practice**: Always use this after displaying images to clean up the resources.
+        """)
+        st.code("""
+        # Code to close all windows
+        cv2.destroyAllWindows()  # Close all OpenCV windows
+        """)
+        
+        st.markdown("""
+        ### Additional Notes
+        - **Why Use `cv2.waitKey`?**  
+          Without this, the image display window will close immediately after the program finishes execution.
+          
+        - **Handling Pop-Up Windows**  
+          - Use `cv2.destroyAllWindows()` to close all pop-up windows and release system resources properly.
+        """)
+    
+    
+    elif page =="Converting Image to Black&White ,BGR & Gray SCale":
+    
+        from PIL import Image
+        
+        # Title of the app
+        st.header("Black & White Images")
+        
+        # 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()
+        """, language="python")
+        
+        
+        # Section 1: Grayscale Image
+        st.header("Grayscale Image Creation")
+        st.code("""
+        # Grayscale image creation
+        gray_img = np.full((500, 500), 155, dtype=np.uint8)
+        
+        # Display in OpenCV
+        cv2.imshow("Gray Image", gray_img)
+        cv2.waitKey(0)
+        cv2.destroyAllWindows()
+        """, language="python")
+        
+        # Section 2: BGR Channels
+        st.header("BGR Color Channels")
+        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
+        ])
+        """, language="python")
+        
+        st.code("""
+        # Display in OpenCV
+        cv2.imshow("Blue Channel", blue_channel)
+        cv2.waitKey(0)
+        cv2.destroyAllWindows()
+        
+        cv2.imshow("Green Channel", green_channel)
+        cv2.waitKey(0)
+        cv2.destroyAllWindows()
+        
+        cv2.imshow("Red Channel", red_channel)
+        cv2.waitKey(0)
+        cv2.destroyAllWindows()
+        """, language="python")
+        
+        if st.button("Go Back"):
+            st.experimental_set_query_params(page="Introduction")
+    
+        if st.button("Back to Home"):
+            st.session_state['page'] = "home"
 
 # Unstructured Data - Video Page
 def video_details_page():