Update pages/Info _of_Image.py

pages/Info _of_Image.py

@@ -1,6 +1,4 @@
 import streamlit as st
-import pandas as pd
-import numpy as np
 
 # Custom CSS for styling
 custom_css = """
@@ -23,65 +21,93 @@ custom_css = """
     p {
         color: #FFFFFF; /* White text for paragraphs */
     }
+    button {
+        font-size: 16px;
+        font-weight: bold;
+        padding: 10px 20px;
+        margin: 10px 5px;
+        border-radius: 10px;
+        border: none;
+        cursor: pointer;
+    }
 </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."
+    "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."
     "</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()")
 
-# Add a link to the code
+# Buttons
+col1, col2, col3 = st.columns(3)
+with col1:
+    if st.button("Colour Space"):
+        st.markdown("<h3 style='text-align: left; color: Gold;'>Colour Space</h3>", unsafe_allow_html=True)
+        st.markdown(
+            "<p style='font-size: 16px; color: White;'>"
+            "Colour spaces define how colors are represented in an image. Common spaces include RGB (Red, Green, Blue), HSV (Hue, Saturation, Value), and LAB. "
+            "Using OpenCV, you can convert between color spaces with functions like `cv2.cvtColor()`."
+            "</p>", 
+            unsafe_allow_html=True
+        )
+
+with col2:
+    if st.button("Video Formation"):
+        st.markdown("<h3 style='text-align: left; color: Gold;'>Video Formation</h3>", unsafe_allow_html=True)
+        st.markdown(
+            "<p style='font-size: 16px; color: White;'>"
+            "To create videos, you can use OpenCV's `cv2.VideoWriter` class. It allows capturing frames and saving them as a video file. "
+            "Specify the codec, frame rate, and resolution for the output."
+            "</p>", 
+            unsafe_allow_html=True
+        )
+        st.markdown(
+            "<p style='font-size: 16px; color: White;'>Example:</p>"
+            "<pre style='background: #333; color: white; padding: 10px;'>"
+            "import cv2\n"
+            "fourcc = cv2.VideoWriter_fourcc(*'XVID')\n"
+            "out = cv2.VideoWriter('output.avi', fourcc, 20.0, (640, 480))\n"
+            "# Capture frames and write them using out.write(frame)"
+            "</pre>", 
+            unsafe_allow_html=True
+        )
+
+with col3:
+    if st.button("Affine Methods"):
+        st.markdown("<h3 style='text-align: left; color: Gold;'>Affine Methods</h3>", unsafe_allow_html=True)
+        st.markdown(
+            "<p style='font-size: 16px; color: White;'>"
+            "Affine transformations involve operations like scaling, rotating, and translating images. OpenCV functions like `cv2.getAffineTransform` "
+            "and `cv2.warpAffine` are used for these tasks."
+            "</p>", 
+            unsafe_allow_html=True
+        )
+        st.markdown(
+            "<p style='font-size: 16px; color: White;'>Example:</p>"
+            "<pre style='background: #333; color: white; padding: 10px;'>"
+            "import cv2\n"
+            "import numpy as np\n"
+            "rows, cols = img.shape[:2]\n"
+            "pts1 = np.float32([[50, 50], [200, 50], [50, 200]])\n"
+            "pts2 = np.float32([[10, 100], [200, 50], [100, 250]])\n"
+            "M = cv2.getAffineTransform(pts1, pts2)\n"
+            "dst = cv2.warpAffine(img, M, (cols, rows))\n"
+            "</pre>", 
+            unsafe_allow_html=True
+        )
+
+# Link to Colab
 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
-)
+)