import streamlit as st

# Title and Introduction
st.markdown("""
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #121212; /* Dark background */
            color: #e0e0e0; /* Light text for visibility */
        }
        .title {
            text-align: center;
            color: #ffffff; /* White title text */
            font-size: 40px;
            font-weight: bold;
        }
        .subtitle {
            text-align: center;
            color: #bdbdbd; /* Light gray subtitle text */
            font-size: 18px;
        }
        .section {
            background-color: #1e1e1e; /* Darker section background */
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6); /* Subtle shadow */
        }
        .section-header {
            color: #81d4fa; /* Light blue section headers */
            font-size: 24px;
            margin-bottom: 10px;
            text-decoration: underline;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        ul li {
            background-color: #2e2e2e; /* Slightly lighter background for list items */
            margin: 10px 0;
            padding: 15px;
            border: 1px solid #424242; /* Gray border */
            border-radius: 8px;
            font-size: 16px;
            color: #f5f5f5; /* Light text color */
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: #1e1e1e; /* Table background matches sections */
        }
        th, td {
            text-align: left;
            padding: 12px;
            border: 1px solid #424242; /* Gray border for table cells */
            color: #e0e0e0; /* Light text color */
        }
        th {
            background-color: #263238; /* Dark blue-gray for headers */
            color: #ffffff; /* White header text */
        }
        tr:nth-child(even) {
            background-color: #2e2e2e; /* Slightly lighter rows */
        }
        tr:hover {
            background-color: #424242; /* Highlighted row on hover */
        }
    </style>
    <div class="title">Difference Between Machine Learning (ML) and Deep Learning (DL)</div>
    <p class="subtitle">Learn how ML and DL differ in capabilities, requirements, and use cases!</p>
""", unsafe_allow_html=True)

# Machine Learning Section
st.markdown("""
    <div class="section">
        <div class="section-header">Machine Learning 🖥️</div>
        <ul>
            <li>Uses statistics to understand patterns in data and make predictions 📊.</li>
            <li>Can learn with less data 📉.</li>
            <li>Handles structured data; unstructured data must be converted to structured form 🔄.</li>
            <li>Requires less memory 🧠💾.</li>
            <li>Trains models in less time ⏱️.</li>
            <li>Can run efficiently on CPUs without requiring powerful hardware 🖥️.</li>
        </ul>
    </div>
""", unsafe_allow_html=True)

# Deep Learning Section
st.markdown("""
    <div class="section">
        <div class="section-header">Deep Learning 🤖</div>
        <ul>
            <li>Uses neural networks to mimic brain-like learning and decision-making 🧠.</li>
            <li>Requires large amounts of data for better accuracy 🍽️📊.</li>
            <li>Handles both structured and unstructured data like images, text, and audio 🖼️📝🎧.</li>
            <li>Requires more memory and storage 🧠💾.</li>
            <li>Takes more time to train due to complex calculations ⏱️.</li>
            <li>Needs GPUs and advanced hardware for efficient processing 🖥️💡.</li>
        </ul>
    </div>
""", unsafe_allow_html=True)

# Tabular Comparison
st.markdown("""
    <div class="section">
        <div class="section-header">Comparison Table</div>
        <table>
            <thead>
                <tr>
                    <th>Aspect</th>
                    <th>Machine Learning (ML)</th>
                    <th>Deep Learning (DL)</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Definition</td>
                    <td>Uses algorithms and statistics to learn from data.</td>
                    <td>Uses neural networks to mimic brain-like decision-making.</td>
                </tr>
                <tr>
                    <td>Data Dependency</td>
                    <td>Works well with smaller datasets.</td>
                    <td>Requires large datasets for better accuracy.</td>
                </tr>
                <tr>
                    <td>Data Type</td>
                    <td>Handles structured data only.</td>
                    <td>Handles both structured and unstructured data.</td>
                </tr>
                <tr>
                    <td>Training Time</td>
                    <td>Requires less time to train.</td>
                    <td>Requires more time to train.</td>
                </tr>
                <tr>
                    <td>Hardware</td>
                    <td>Can run on CPUs.</td>
                    <td>Requires GPUs and advanced hardware.</td>
                </tr>
                <tr>
                    <td>Memory Requirement</td>
                    <td>Uses less memory.</td>
                    <td>Requires more memory and storage.</td>
                </tr>
            </tbody>
        </table>
    </div>
""", unsafe_allow_html=True)