import streamlit as st
from PIL import Image

# Page Configuration
st.set_page_config(page_title="Unstructured Data Exploration", layout="wide")

# Custom CSS Styling
st.markdown("""
    <style>
    body {
        background-color: #eef2f7;
    }
    h1 {
        color: #00FFFF;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
        text-align: center;
        margin-bottom: 25px;
    }
    h2 {
        color: #FFFACD;
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        margin-top: 30px;
    }
    h3 {
        color: #ba95b0;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        margin-top: 20px;
    }
    p {
        font-family: 'Georgia', serif;
        line-height: 1.8;
        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;
    }
    .stImage img {
        border-radius: 10px;
    }
    </style>
""", unsafe_allow_html=True)

# Page Title
st.title("Unstructured Data Exploration")

# Section 1: Introduction
st.header("What is Unstructured Data?")
st.markdown("""
Unstructured data refers to information that lacks a predefined data model or organization. Examples include:
- Text data (emails, social media posts)
- Image data (photos, medical scans)
- Video content (movies, surveillance footage)
""",unsafe_allow_html=True)

st.image(
    "https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/wSlRj9jk4szr4yy3wTlfA.webp",
    caption="Examples of Unstructured Data",
    width=400
)

# Section 2: Image Data
st.header("📸 Image Data")
st.write("""
Images are a critical part of unstructured data. They are composed of grids of pixels, where each pixel holds information about color and intensity.
""")
st.image(
    "https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/hKcxlf1gUdsnj__asq_TH.webp",
    caption="Image Grid and Pixels",
    width=400
)

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: Image Reading and Manipulation
st.subheader("Image Reading and Manipulation")
st.write("""
Images can be read and manipulated using libraries like OpenCV and PIL. Below is an example of how to load and display an image using OpenCV:
""")
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 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://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/bs6jfQ-F2SktBujt567_s.webp",
    caption="Color Space Examples",
    width=400
)

# Subsection: Try It Yourself
st.subheader("Try It Yourself: Upload an Image")
uploaded_image = st.file_uploader("Upload an Image", type=["jpg", "png"])
if uploaded_image:
    image = Image.open(uploaded_image)
    st.image(image, caption="Uploaded Image", width=400)
    st.write(f"**Image Format:** {image.format}")
    st.write(f"**Image Size:** {image.size}")
    st.write(f"**Color Mode:** {image.mode}")

# Section 3: Video Data
st.header("🎥 Video Data")
st.write("""
Videos are sequences of images (frames) displayed rapidly to create motion. They are widely used in entertainment, surveillance, and educational platforms.
""")
st.image(
    "https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/jjNqKTcx5RsoKEzsK1kM1.webp",
    caption="Video Frames",
    width=400
)

st.subheader("Processing Videos with OpenCV")
st.write("""
OpenCV provides tools to process videos frame by frame. Here’s an example of converting a video to grayscale:
""")
st.code("""
import cv2
# Open a video file
video = cv2.VideoCapture("sample.mp4")
while True:
    ret, frame = video.read()
    if not ret:
        break
    gray_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
    cv2.imshow("Grayscale Video", gray_frame)
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break
video.release()
cv2.destroyAllWindows()
""", language="python")

# Section 4: Key Takeaways
st.header("Key Takeaways")
st.markdown("""
<ul class="icon-bullet">
    <li>Unstructured data includes images and videos, requiring specialized tools for processing.</li>
    <li>OpenCV is a versatile library for image and video manipulation.</li>
    <li>Color spaces play a significant role in image representation and manipulation.</li>
</ul>
""", unsafe_allow_html=True)

st.write("Created with ❤️ using Streamlit")