import streamlit as st

# Adding the introduction part
st.markdown("""
    <p style='font-size: 18px;'>Earlier, we discussed how <b>Machine Learning (ML)</b> and <b>Deep Learning (DL)</b> are two powerful tools in the field of <b>Artificial Intelligence (AI)</b>. But how do we better understand their differences? Let’s use an analogy:</p>
""", unsafe_allow_html=True)

# Adding the analogy heading
st.markdown("<h2 style='color: #3498DB; font-size: 25px; font-weight: bold;'>✨ Imagine This: Chefs in the Kitchen </h2>", unsafe_allow_html=True)

# Adding the analogy content
st.markdown("""
    <p style='font-size: 18px;'>Two chefs are in the same kitchen. One chef is highly skilled and prepares a dish every day, experimenting with different flavors and ingredients. The second chef, who is not very experienced, wants to recreate the dish but hasn’t been as consistent with their practice. To do this, they borrow the first chef's recipe to copy it. To help them recreate the dish, they use two tools: a <b>recipe book</b> and a <b>set of cooking tools</b>. While both tools serve the same purpose of helping them cook, their functionality differs:</p>
    
    <ul style='font-size: 18px;'>
        <li><b>A recipe book</b> is used for <i>guidance</i>, as it provides clear instructions on how to prepare the dish. You can follow the steps and make adjustments to improve your skills over time.</li>
        <li><b>A set of cooking tools</b> is used for <i>precision</i>, as it allows you to directly manipulate ingredients and execute complex techniques, making it easier to experiment and achieve finer results.</li>
    </ul>
    
    <p style='font-size: 18px;'><b>ML and DL Analogy:</b></p>
    <ul style='font-size: 18px;'>
        <li><b>Recipe Book = Machine Learning</b> </li>
        <li><b>Cooking Tools = Deep Learning</b></li>
    </ul>
""", unsafe_allow_html=True)
st.markdown("<h2 style='color:#98FF98;'>Key Differences Between ML and DL</h2>", unsafe_allow_html=True)

# Centered Image
image_url = "https://huggingface.co/spaces/varshitha22/ML/resolve/main/images/im3.jpeg"

st.markdown(
    f"""
    <div style="display: flex; justify-content: center;">
        <img src="{image_url}" alt="ML vs DL Key Differences" width="600">
    </div>
    """,
    unsafe_allow_html=True
)
# Adding the table comparison content
st.markdown("<h2 style='color: #3498DB; font-size: 25px; font-weight: bold;'> Machine Learning vs Deep Learning </h2>", unsafe_allow_html=True)

markdown_content = """
    <style>
        table {
            font-size: 18px;
            width: 80%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 2px solid black;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
    <table>
        <tr>
            <th>Features</th>
            <th>Machine Learning (ML)</th>
            <th>Deep Learning (DL)</th>
        </tr>
        <tr>
            <td><b>Learning Approach</b></td>
            <td>Uses a statistical approach to analyze data and make predictions.</td>
            <td>Uses neural networks to automatically learn patterns.</td>
        </tr>
        <tr>
            <td><b>Data Requirement</b></td>
            <td>Works well with smaller datasets.</td>
            <td>Requires large amounts of data to perform well.</td>
        </tr>
        <tr>
            <td><b>Feature Engineering</b></td>
            <td>Requires manual feature selection and extraction.</td>
            <td>Automatically learns features from raw data.</td>
        </tr>
        <tr>
            <td><b>Interpretability</b></td>
            <td>Easier to interpret and explain model decisions.</td>
            <td>Harder to interpret due to complex layers in the network.</td>
        </tr>
        <tr>
            <td><b>Computation Power</b></td>
            <td>Can run on CPUs (low computational power).</td>
            <td>Requires GPUs/TPUs (high computational power).</td>
        </tr>
        <tr>
            <td><b>Algorithms Used</b></td>
            <td>Uses models like KNN, Decision Trees, Linear Regression.</td>
            <td>Uses ANN, CNN, RNN for feature extraction and learning.</td>
        </tr>
        <tr>
            <td><b>Training Time</b></td>
            <td>Faster training due to simpler computations.</td>
            <td>Longer training time due to deep layers and complex processing.</td>
        </tr>
        <tr>
            <td><b>Data Types Processed</b></td>
            <td>Works with structured/tabular data.</td>
            <td>Works with images, videos, text, and audio.</td>
        </tr>
    </table>
"""

st.markdown(markdown_content, unsafe_allow_html=True)