Update pages/7_Un_Structured_Data.py

pages/7_Un_Structured_Data.py

@@ -1,8 +1,12 @@
 import streamlit as st
 from PIL import Image
-import os
+import cv2
+import numpy as np
+
+# Page Configuration
+st.set_page_config(page_title="Unstructured Data Exploration", layout="wide")
 
-# Apply styling
+# Custom CSS Styling
 st.markdown("""
     <style>
     body {
@@ -11,108 +15,179 @@ st.markdown("""
     h1 {
         color: #00FFFF;
         font-family: 'Roboto', sans-serif;
-        font-weight: 700;
+        font-weight: bold;
         text-align: center;
         margin-bottom: 25px;
     }
     h2 {
         color: #FFFACD;
         font-family: 'Roboto', sans-serif;
-        font-weight: 600;
+        font-weight: 700;
         margin-top: 30px;
     }
     h3 {
         color: #ba95b0;
         font-family: 'Roboto', sans-serif;
-        font-weight: 500;
+        font-weight: 600;
         margin-top: 20px;
     }
     p {
         font-family: 'Georgia', serif;
         line-height: 1.8;
-        color: #495057;
+        color: #2b2b2b;
         margin-bottom: 20px;
     }
+    .icon-bullet {
+        list-style-type: none;
+        padding-left: 20px;
+    }
+    .icon-bullet li {
+        font-family: 'Georgia', serif;
+        font-size: 1.1em;
+        margin-bottom: 10px;
+        color: #2b2b2b;
+    }
+    .icon-bullet li::before {
+        content: "✔️";
+        padding-right: 10px;
+        color: #00FFFF;
+    }
     </style>
-    """, unsafe_allow_html=True)
-
-# Define function to display unstructured data page
-def unstructured_data_page():
-    st.title("📂 Unstructured Data")
-    st.markdown("""
-    **Unstructured data** refers to information that does not follow a predefined model, such as text, images, videos, and social media posts. It often requires advanced tools like AI and machine learning to process effectively.
-    """)
-    st.image("https://via.placeholder.com/800x400?text=Unstructured+Data", caption="Examples of Unstructured Data")
-
-    st.header("Types of Unstructured Data")
-    col1, col2 = st.columns(2)
-    with col1:
-        if st.button("🖼️ Images"):
-            st.session_state.page = "image"
-    with col2:
-        if st.button("🎥 Videos"):
-            st.session_state.page = "video"
-
-# Define function for image page
-def image_page():
-    st.title("🖼️ Image Data")
-    st.markdown("""
-    Images consist of pixels, which store information such as color and intensity. Images can be stored in formats like JPEG, PNG, and BMP.
-    """)
-    st.image("https://via.placeholder.com/600x300?text=Image+Grid", caption="Image Grid Representation", use_column_width=True)
-
-    st.header("📏 Image Formats and Resolution")
-    st.markdown("""
-    - **JPEG/JPG**: Compressed format for photos.
-    - **PNG**: Supports transparency.
-    - **GIF**: Used for animations.
-    - **BMP**: Raw image data.
-    """)
-    st.image("https://via.placeholder.com/600x300?text=Resolution+Comparison", caption="Resolution Comparison", use_column_width=True)
-
-    st.subheader("Upload Your Image")
-    uploaded_file = st.file_uploader("Choose an image file", type=["jpg", "jpeg", "png"])
-    if uploaded_file:
-        img = Image.open(uploaded_file)
-        st.image(img, caption="Uploaded Image", use_column_width=True)
-
-    if st.button("🔙 Back to Unstructured Data"):
-        st.session_state.page = "unstructured_data"
-
-# Define function for video page
-def video_page():
-    st.title("🎥 Video Data")
-    st.markdown("""
-    Videos are sequences of frames (images) processed continuously. OpenCV provides tools for video processing.
-    """)
-
-    st.header("📹 Example: Video Capture")
-    st.code("""
+""", unsafe_allow_html=True)
+
+# Page Title
+st.title("Unstructured Data Exploration")
+
+# Section 1: Introduction
+st.header("What is Unstructured Data?")
+st.write("""
+Unstructured data refers to information that lacks a predefined data model or is not organized in a standard manner. It encompasses:
+- Text data (emails, social media posts)
+- Image data (photos, medical scans)
+- Audio and video content
+""")
+
+st.image("https://via.placeholder.com/800x400", caption="Examples of Unstructured Data", use_column_width=True)
+
+# Section 2: Characteristics
+st.header("Characteristics of Unstructured Data")
+st.markdown("""
+<ul class="icon-bullet">
+    <li>Does not conform to relational database models.</li>
+    <li>Requires advanced tools like AI and machine learning for analysis.</li>
+    <li>Includes multimedia and textual formats.</li>
+</ul>
+""", unsafe_allow_html=True)
+
+# Section 3: Image Data
+st.header("Image Data")
+st.write("""
+Images are a significant part of unstructured data. They are represented as a grid of pixels, each containing information about color and intensity.
+""")
+st.image("https://via.placeholder.com/400x250", caption="Image Grid and Pixels", use_column_width=True)
+
+st.subheader("Common Image Formats")
+st.markdown("""
+<ul class="icon-bullet">
+    <li>**JPEG**: Ideal for compressed images.</li>
+    <li>**PNG**: Supports transparency.</li>
+    <li>**GIF**: Used for animations.</li>
+    <li>**BMP**: Bitmap format for uncompressed images.</li>
+</ul>
+""", unsafe_allow_html=True)
+
+# Subsection: Color Spaces
+st.subheader("Color Spaces")
+st.write("""
+Color spaces define how color information is represented in an image. Popular color spaces include:
+- **RGB**: Red, Green, and Blue channels.
+- **Grayscale**: Shades of gray from black to white.
+- **Black & White**: Binary representation (0 for black, 1 for white).
+""")
+st.image("https://via.placeholder.com/400x250", caption="Color Space Examples", use_column_width=True)
+
+# Section 4: Video Data
+st.header("Video Data")
+st.write("""
+Videos are essentially sequences of images (frames) displayed in rapid succession. They are commonly used in surveillance, entertainment, and training systems.
+""")
+st.image("https://via.placeholder.com/400x250", caption="Video Frames", use_column_width=True)
+
+st.subheader("Video Processing with OpenCV")
+st.code("""
 import cv2
-cap = cv2.VideoCapture(0)
+
+# Open a video file
+video = cv2.VideoCapture("sample.mp4")
 while True:
-    ret, frame = cap.read()
+    ret, frame = video.read()
     if not ret:
         break
-    cv2.imshow('Webcam Feed', frame)
+    gray_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+    cv2.imshow("Grayscale Video", gray_frame)
     if cv2.waitKey(1) & 0xFF == ord('q'):
         break
-cap.release()
+video.release()
+cv2.destroyAllWindows()
+""", language="python")
+
+# Section 5: Image Processing with OpenCV
+st.header("Image Processing Techniques")
+st.write("""
+OpenCV is a powerful library for working with images and videos. It provides tools for:
+- Reading and writing images
+- Manipulating color spaces
+- Applying filters and transformations
+""")
+
+# Subsection: Reading an Image
+st.subheader("Reading and Displaying an Image")
+st.code("""
+import cv2
+
+# Load an image
+image = cv2.imread("image.jpg")
+
+# Display the image
+cv2.imshow("Image", image)
+cv2.waitKey(0)
+cv2.destroyAllWindows()
+""", language="python")
+
+# Subsection: Color Conversion
+st.subheader("Color Space Conversion")
+st.code("""
+import cv2
+
+# Convert an image to grayscale
+image = cv2.imread("image.jpg")
+gray_image = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+cv2.imshow("Grayscale Image", gray_image)
+cv2.waitKey(0)
 cv2.destroyAllWindows()
-    """, language="python")
-    st.image("https://via.placeholder.com/600x300?text=Video+Processing", caption="Video Processing Example", use_column_width=True)
-
-    if st.button("🔙 Back to Unstructured Data"):
-        st.session_state.page = "unstructured_data"
-
-# Initialize session state
-if "page" not in st.session_state:
-    st.session_state.page = "unstructured_data"
-
-# Page routing logic
-if st.session_state.page == "unstructured_data":
-    unstructured_data_page()
-elif st.session_state.page == "image":
-    image_page()
-elif st.session_state.page == "video":
-    video_page()
+""", language="python")
+
+# Section 6: Upload Your Image
+st.header("Try It Yourself")
+uploaded_file = st.file_uploader("Upload an Image", type=["jpg", "png"])
+if uploaded_file:
+    image = Image.open(uploaded_file)
+    st.image(image, caption="Uploaded Image", use_column_width=True)
+    st.write(f"Image Format: {image.format}")
+    st.write(f"Image Size: {image.size}")
+    st.write(f"Color Mode: {image.mode}")
+
+# Section 7: Key Takeaways
+st.header("Key Takeaways")
+st.markdown("""
+<ul class="icon-bullet">
+    <li>Unstructured data is diverse and valuable.</li>
+    <li>Images and videos require specialized tools for processing.</li>
+    <li>OpenCV simplifies image and video manipulation.</li>
+</ul>
+""", unsafe_allow_html=True)
+
+st.write("Created with ❤️ using Streamlit")
+
+
+