Spaces:
Sleeping
Sleeping
| 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( | |
| "<p style='font-size: 16px; color: White; font-style: italic;'>" | |
| "Color space refers to the specific organization of colors, which helps in the reproduction of color in both physical and digital environments. Common color spaces include RGB, CMYK, and HSV. Each color space has different uses and is based on distinct principles:" | |
| "</p>", | |
| unsafe_allow_html=True | |
| ) | |
| st.markdown("<h3 style='text-align: left; color: Black;'>RGB (Red, Green, Blue): </h3>", unsafe_allow_html=True) | |
| st.markdown( | |
| "<p style='font-size: 16px; color: White; font-style: italic;'>" | |
| "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." | |
| "</p>", | |
| unsafe_allow_html=True | |
| ) | |
| st.markdown( | |
| "<p style='font-size: 16px; color: White; font-style: italic;'>" | |
| "we use cv2.cvtColor() to convert the image from RGB (or BGR in OpenCV) to Grayscale." | |
| "</p>", | |
| unsafe_allow_html=True | |
| ) | |
| st.markdown("<h3 style='text-align: left; color: Black;'>CMYK (Cyan, Magenta, Yellow, Key/Black): </h3>", unsafe_allow_html=True) | |
| st.markdown( | |
| "<p style='font-size: 16px; color: White; font-style: italic;'>" | |
| "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." | |
| "</p>", | |
| unsafe_allow_html=True | |
| ) | |
| st.markdown("<h3 style='text-align: left; color: Black;'>HSV (Hue, Saturation, Value): </h3>", unsafe_allow_html=True) | |
| st.markdown( | |
| "<p style='font-size: 16px; color: White; font-style: italic;'>" | |
| "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)." | |
| "</p>", | |
| unsafe_allow_html=True | |
| ) | |
| st.markdown( | |
| "<p style='font-size: 16px; color: White; font-style: italic;'>" | |
| "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." | |
| "</p>", | |
| unsafe_allow_html=True | |
| ) | |
| st.markdown("<h3 style='text-align: left; color: Black;'>splitting and merging the image colours </h3>", unsafe_allow_html=True) | |
| st.markdown("<h4 style='text-align: left; color: Black;'>cv2.cvtColor() & cv2.split() </h4>", unsafe_allow_html=True) | |
| st.markdown( | |
| "<p style='font-size: 16px; color: White; font-style: italic;'>" | |
| "This function is used to convert images from one color space to another. You can convert from RGB to Grayscale, RGB to HSV, and many other color spaces." | |
| "This function splits a color image into its individual channels (e.g., Blue, Green, Red for RGB images)." | |
| "</p>", | |
| unsafe_allow_html=True | |
| ) | |
| if st.button("Video"): | |
| st.markdown("<h2 style='text-align: left; color: Black;'>What is Video</h2>", unsafe_allow_html=True) | |
| st.markdown( | |
| "<p style='font-size: 16px; color: White; font-style: italic;'>" | |
| "A video is a series of images (called frames) displayed sequentially at a certain speed, or frame rate, to create the illusion of motion. Videos can be captured through cameras, created by animation software, or generated from other digital sources." | |
| "</p>", | |
| unsafe_allow_html=True | |
| ) | |
| st.markdown("<h2 style='text-align: left; color: Black;'>Converting Images into Videos</h2>", unsafe_allow_html=True) | |
| st.markdown( | |
| "<p style='font-size: 16px; color: White; font-style: italic;'>" | |
| "Converting images into a video involves displaying a sequence of images (frames) in rapid succession to create the effect of motion. The key steps include" | |
| "</p>", | |
| unsafe_allow_html=True | |
| ) | |
| st.markdown( | |
| "<p style='font-size: 16px; color: White; font-style: italic;'>" | |
| "Frame Rate: The number of frames shown per second (fps). Standard rates include 24 fps for cinema, 30 fps for TV, and 60 fps for high-definition videos." | |
| "Resolution: The size of each frame (e.g., 1920x1080 pixels). All frames in a video must have the same resolution." | |
| "Encoding: Video files are often compressed using encoding formats like H.264 or VP9 to reduce file sizes." | |
| "</p>", | |
| unsafe_allow_html=True | |
| ) | |
| if st.button("Affine Methods"): | |
| st.markdown("<h2 style='text-align: left; color: Black;'>Affine Transformations</h2>", unsafe_allow_html=True) | |
| st.markdown( | |
| "<p style='font-size: 16px; color: White; font-style: italic;'>" | |
| "Affine transformations are a set of geometric transformations that preserve parallelism of lines, including translation, scaling, rotation, and shearing." | |
| "</p>", | |
| unsafe_allow_html=True | |
| ) | |