pages/1_INTRODUCTION.py

import streamlit as st
import pandas as pd
import numpy as np
from PIL import Image

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

# Custom CSS Styling
st.markdown("""
    <style>
    /* Background Color */
    body {
        background-color: #eef2f7;
    }
    /* Title Styling */
    h1 {
        color: #00FFFF;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
        text-align: center;
        margin-bottom: 25px;
    }
    /* Header Styling */
    h2 {
        color: #FFFACD;
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        margin-top: 30px;
    }
    /* Subheader Styling */
    h3 {
        color: #ba95b0;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        margin-top: 20px;
    }
    /* Paragraph Styling */
    p {
        font-family: 'Georgia', serif;
        line-height: 1.8;
        color: #2b2b2b; /* Improved readability */
        margin-bottom: 20px;
    }
    /* List Styling */
    .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)

# App Content
st.title("Understanding Unstructured Data")

# Section: Introduction
st.header("What is Unstructured Data?")
st.write("""
Unstructured data refers to information that does not follow a predefined data model or organization. 
It includes text, images, videos, and audio files. This type of data is often difficult to search, process, and analyze due to its lack of structure.
""")

# Section: Characteristics
st.subheader("Key Characteristics")
st.markdown("""
<ul class="icon-bullet">
    <li>Cannot be stored in relational databases.</li>
    <li>Requires advanced processing tools like AI and NoSQL databases.</li>
    <li>Includes multimedia, emails, and social media content.</li>
</ul>
""", unsafe_allow_html=True)

# Section: Examples
st.header("Examples of Unstructured Data")
st.write("""
Explore common types of unstructured data and their practical applications.
""")
col1, col2 = st.columns(2)

with col1:
    st.subheader("1. Text Data")
    st.write("""
Text data includes emails, social media posts, and articles. Sentiment analysis is a popular application in this domain.
""")
    st.image("https://via.placeholder.com/400x250", caption="Example of Text Analysis", use_column_width=True)

with col2:
    st.subheader("2. Image Data")
    st.write("""
Images consist of pixels arranged in a grid. Computer vision tasks include object detection and facial recognition.
""")
    st.image("https://via.placeholder.com/400x250", caption="Example of Image Processing", use_column_width=True)

# Section: Image Concepts
st.header("Understanding Image Data")

# Subsection: Color Spaces
st.subheader("Color Spaces")
st.write("""
Images are represented in different color spaces, such as RGB and Grayscale. Each pixel represents color information based on the chosen color space.
""")

col1, col2 = st.columns(2)
with col1:
    st.image("https://via.placeholder.com/400x250", caption="RGB Color Space Example", use_column_width=True)

with col2:
    st.image("https://via.placeholder.com/400x250", caption="Grayscale Conversion Example", use_column_width=True)

# Section: Video Data
st.header("Exploring Video Data")
st.write("""
Videos are sequences of images called frames. They are processed frame-by-frame for applications such as motion detection and video editing.
""")

# Subsection: Capturing Video
st.subheader("Video Capture Example")
st.code("""
import cv2

# Open webcam
cap = cv2.VideoCapture(0)
while True:
    ret, frame = cap.read()
    if not ret:
        break
    cv2.imshow("Webcam Feed", frame)
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break
cap.release()
cv2.destroyAllWindows()
""", language="python")

# Section: Working with Pixels
st.header("Pixels: The Building Blocks of Images")
st.write("""
Images are composed of small units called pixels. Each pixel contains information about color and intensity.
""")
st.image("https://via.placeholder.com/400x250", caption="Pixel Grid Example", use_column_width=True)

# Interaction: Upload an Image
st.subheader("Upload Your Image")
uploaded_image = st.file_uploader("Choose an image file", type=["jpg", "png", "jpeg"])
if uploaded_image:
    img = Image.open(uploaded_image)
    st.image(img, caption="Uploaded Image", use_column_width=True)
    st.write(f"Image Format: {img.format}")
    st.write(f"Image Size: {img.size}")
    st.write(f"Color Mode: {img.mode}")

# Section: Conclusion
st.markdown("---")
st.header("Key Takeaways")
st.markdown("""
<ul class="icon-bullet">
    <li>Unstructured data is diverse and includes text, images, and videos.</li>
    <li>Images are represented by pixels and processed using color spaces.</li>
    <li>Advanced tools are essential for analyzing unstructured data effectively.</li>
</ul>
""", unsafe_allow_html=True)

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