Update pages/Info _of_Image.py

pages/Info _of_Image.py

@@ -0,0 +1,139 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+
+# Custom CSS for styling
+custom_css = """
+<style>
+    html, body, [data-testid="stAppViewContainer"] {
+        background-image: linear-gradient(
+            rgba(0, 0, 0, 0.6), 
+            rgba(0, 0, 0, 0.6)
+        ), 
+        url("https://www.istockphoto.com/photo/tech-or-space-background-abstract-3d-illustration-gm1367865109-437999705?utm_source=pixabay&utm_medium=affiliate&utm_campaign=SRP_photo_sponsored&utm_content=https%3A%2F%2Fpixabay.com%2Fphotos%2Fsearch%2Fbackground%2520datascience%2F&utm_term=background+datascience.jpg");
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+        color: white;  /* Ensures all text is readable */
+    }
+    h2, h3 {
+        color: #FFD700; /* Gold color for headings */
+    }
+    p {
+        color: #FFFFFF; /* White text for paragraphs */
+    }
+    .stButton>button {
+        background-color: #4CAF50; /* Green */
+        color: white;
+        padding: 10px 24px;
+        border: none;
+        border-radius: 5px;
+        text-align: center;
+        font-size: 16px;
+        margin: 4px 2px;
+        transition-duration: 0.4s;
+        cursor: pointer;
+    }
+    .stButton>button:hover {
+        background-color: #45a049; /* Darker Green on hover */
+        color: white;
+    }
+    .stButton>div:nth-child(1)>button {
+        background-color: #2196F3; /* Blue */
+    }
+    .stButton>div:nth-child(2)>button {
+        background-color: #f44336; /* Red */
+    }
+    .stButton>div:nth-child(3)>button {
+        background-color: #FF9800; /* Orange */
+    }
+</style>
+"""
+
+# Inject the CSS into the app
+st.markdown(custom_css, unsafe_allow_html=True)
+
+# Page content
+st.markdown("<h2 style='text-align: left; color: Black;'>What is IMAGE</h2>", unsafe_allow_html=True)
+st.markdown(
+    "<p style='font-size: 16px; color: White; font-style: italic;'>"
+    "An image is a visual depiction of a subject, such as a person, object, scene, or idea, created or captured through means like photography, drawing, painting, or digital tools. It can take various forms, including photographs, illustrations, artworks, or computer-generated visuals."
+    "</p>", 
+    unsafe_allow_html=True
+)
+
+st.markdown("<h2 style='text-align: left; color: Black;'>Features of IMAGE</h2>", unsafe_allow_html=True)
+st.markdown(
+    "<p style='font-size: 16px; color: White; font-style: italic;'>"
+    "Pixels: Images are composed of small dots called pixels, each containing color data that together create the overall image."
+    "</p>", 
+    unsafe_allow_html=True
+)
+st.markdown(
+    "<p style='font-size: 16px; color: White; font-style: italic;'>"
+    "File Formats: Images can be stored in different formats,"
+    "JPEG/JPG: Widely used for photographs and online images due to their efficient balance between quality and file size."
+    "PNG: Preferred for high-quality visuals or images requiring transparency, such as logos."
+    "GIF: Commonly utilized for basic animations or compact graphics."
+    "</p>", 
+    unsafe_allow_html=True
+)
+
+st.markdown("<h2 style='text-align: left; color: Black;'>Basic Operations in IMAGE</h2>", unsafe_allow_html=True)
+st.markdown(
+    "<p style='font-size: 16px; color: White; font-style: italic;'>"
+    "For performing this Basic Operations we use cv2 function from opencv library"
+    "cv2 is the Python module for OpenCV (Open Source Computer Vision Library), a powerful library used for computer vision and image processing tasks. It provides a wide range of tools and algorithms for analyzing and manipulating images and videos."
+    "</p>", 
+    unsafe_allow_html=True
+)
+
+st.markdown("<h3 style='text-align: left; color: Black;'>Why cv2 is Used</h3>", unsafe_allow_html=True)
+st.markdown(
+    "<p style='font-size: 16px; color: White; font-style: italic;'>"
+    "cv2 is used for various ways like:"
+    "1. Image Processing"
+    "2. Video Analysis"
+    "3. Feature Detection"
+    "4. Image Transformations"
+    "</p>", 
+    unsafe_allow_html=True
+)
+
+st.markdown("<h3 style='text-align: left; color: Black;'>Operations Used</h3>", unsafe_allow_html=True)
+st.markdown("1. imread()")
+st.markdown("2. imshow()")
+st.markdown("3. imwrite()") 
+st.markdown("4. cv2.waitkey()")
+st.markdown("5. destroyAllWindows()")
+
+# Buttons for each stage
+st.markdown("###")
+col1, col2, col3 = st.columns(3)
+
+with col1:
+    if st.button("Color Space"):
+        st.markdown("<h2 style='text-align: left; color: Black;'>What is Colour Space?</h2>", unsafe_allow_html=True)
+        st.markdown("Color space refers to the specific organization of colors, which helps in the reproduction of color in both physical and digital environments.")
+        st.markdown("Common color spaces include RGB, CMYK, and HSV. Each color space has different uses and is based on distinct principles.")
+        st.markdown("<h3 style='text-align: left; color: Black;'>RGB (Red, Green, Blue):</h3>", unsafe_allow_html=True)
+        st.markdown("This color model is based on the way human vision perceives light. In RGB, colors are created by combining different intensities of red, green, and blue light. It is primarily used for screens and digital displays like monitors and televisions.")
+        st.markdown("<h3 style='text-align: left; color: Black;'>CMYK (Cyan, Magenta, Yellow, Key/Black):</h3>", unsafe_allow_html=True)
+        st.markdown("The CMYK color space is used in color printing. It relies on the subtractive model, where colors are created by subtracting light through layers of ink. When combined in various proportions, CMYK creates a wide range of colors.")
+        st.markdown("<h3 style='text-align: left; color: Black;'>HSV (Hue, Saturation, Value):</h3>", unsafe_allow_html=True)
+        st.markdown("This model is often used in graphic design and image processing, as it aligns more closely with how humans perceive color. It allows for easier manipulation of color through hue (the type of color), saturation (the intensity), and value (brightness).")
+        st.markdown("Each color space is suited for different applications, depending on the medium and technology used. Choosing the correct color space is crucial for ensuring that colors appear as intended, whether you're working with digital graphics, web design, or printed materials.")
+        st.markdown("<h2 style='text-align: left; color: Black;'>Splitting and Merging the Image Colors</h2>", unsafe_allow_html=True)
+    
+    if st.button("Video Creation"):
+        st.markdown("Video creation is used to generate a video from images or frames")
+
+# Add a link to the code
+st.markdown(
+    "<p style='font-size: 16px; color: White;'>"
+    "You can view and run the code in Colab: "
+    "<a href='https://colab.research.google.com/drive/1fvP-k70HJnp1iCN7Vs-tkfFs8vq--WGc?usp=sharing' target='_blank' style='color: #FFD700;'>Colab Notebook</a>"
+    "</p>", 
+    unsafe_allow_html=True
+)