Update pages/Info _of_Image.py

pages/Info _of_Image.py

@@ -1,2 +1,78 @@
-st.markdown("<h2 style='color:black;'>Image Format</h2>", unsafe_allow_html=True)
- st.markdown("<h3 style='color:black;'>What is Image?</h3>", unsafe_allow_html=True)
+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 */
+    }
+</style>
+"""
+
+# Inject the CSS into the app
+st.markdown(custom_css, unsafe_allow_html=True)
+st.markdown("<h2 style='text-align: left; color: Black;'>What is IMAGE (JSON)</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()")