import streamlit as st

# Set the page configuration
st.set_page_config(page_title="ML vs DL", page_icon="🤖")

# Custom CSS for styling
st.markdown("""
    <style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f4f4f4;
    }
    .title {
        text-align: center;
        font-size: 2.5rem;
        color: black;
        margin-bottom: 10px;
    }
    .subtitle {
        text-align: center;
        font-size: 1.2rem;
        color: violet;
        margin-bottom: 30px;
    }
    .table-container {
        margin: 0 auto;
        width: 80%;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }
    .styled-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 1rem;
    }
    .styled-table thead tr {
        background-color: #4CAF50;
        color: #ffffff;
        text-align: left;
    }
    .styled-table th, .styled-table td {
        padding: 12px 15px;
    }
    .styled-table tbody tr {
        border-bottom: 1px solid #dddddd;
    }
    .styled-table tbody tr:nth-of-type(even) {
        background-color: #f3f3f3;
    }
    .styled-table tbody tr:last-of-type {
        border-bottom: 2px solid #4CAF50;
    }
    </style>
""", unsafe_allow_html=True)

# Title and subtitle
st.markdown('<div class="title">Machine Learning vs Deep Learning</div>', unsafe_allow_html=True)
st.markdown('<div class="subtitle">Understanding the key differences</div>', unsafe_allow_html=True)

# HTML table for differences
html_table = """
<div class="table-container">
    <table class="styled-table">
        <thead>
            <tr>
                <th>Aspect</th>
                <th>Machine Learning</th>
                <th>Deep Learning</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Definition</td>
                <td>Machine Learning is a tool which needs statistical concepts to copy / mimic the learning ability in natural intelligence </td>
                <td>Deep Learning is a tool which needs logical structure known as neural network to copy / mimic the learning ability in natural intelligence</td>
            </tr>
            <tr>
                <td>Data Dependency</td>
                <td>ML performs well with structured data (**tabular data**) and smaller datasets</td>
                <td>DL is hungry of data as it requires large amounts of unstructured data and also structured data to perform well</td>
            </tr>
            <tr>
                <td>Performance</td>
                <td>ML have treshold as the data increases the performance becomes stable</td>
                <td>DL performance increases as the data increases because DL is hungry of data</td>
            </tr>
            <tr>
                <td>Memory Management</td>
                <td>ML memory uasage is less as it uses less data</td>
                <td>DL memory usage is large as it has huge data</td>
            </tr>
            <tr>
                <td>Hardware Requirements</td>
                <td>ML works on standard CPUs; lower hardware demands</td>
                <td>DL requires GPUs for efficient computation.</td>
            </tr>
            <tr>
                <td>Interpretability</td>
                <td>ML is more interpretable as it works on smaller datasets </td>
                <td>DL is less interpretable as it works on complex neural networks</td>
            </tr>
            <tr>
                <td>Training Time</td>
                <td>ML is relatively faster to train models as it uses less data</td>
                <td>DL training can take significantly longer</td>
            </tr>
        </tbody>
    </table>
</div>
"""

# Render the HTML table
st.markdown(html_table, unsafe_allow_html=True)