pages/2Machine Learning VS Deep Learning.py

import streamlit as st

# Title for the app
st.markdown("<h1 style='text-align: center; color: #ffa500;'> Machine Learning vs. Deep Learning</h1>", unsafe_allow_html=True)

# Table comparison with examples
st.markdown("""
    <div style="display: flex; justify-content: center;">
        <table style="width: 100%; border: 1px solid black; border-collapse: collapse; font-size: 14px; margin: 0;">
            <tr>
                <th style="border: 1px solid black; padding: 8px; text-align: center;">Feature</th>
                <th style="border: 1px solid black; padding: 8px; text-align: center;">Machine Learning (ML)</th>
                <th style="border: 1px solid black; padding: 8px; text-align: center;">Deep Learning (DL)</th>
            </tr>
            <tr>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">Learning Ability Mimic</td>
                <td style="border: 1px solid black; padding: 8px;">Mimics human learning using statistical concepts.</td>
                <td style="border: 1px solid black; padding: 8px;">Mimics human learning using artificial neurons (logical structure).</td>
            </tr>
            <tr>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">Data Requirement</td>
                <td style="border: 1px solid black; padding: 8px;">Requires less data to perform effectively.</td>
                <td style="border: 1px solid black; padding: 8px;">Requires large amounts of data to perform well.</td>
            </tr>
            <tr>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">Performance</td>
                <td style="border: 1px solid black; padding: 8px;">Works well with structured data.</td>
                <td style="border: 1px solid black; padding: 8px;">Works well with both structured and unstructured data.</td>
            </tr>
            <tr>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">Data Handling</td>
                <td style="border: 1px solid black; padding: 8px;">Works mainly on structured data, unstructured data needs conversion (with potential data loss).</td>
                <td style="border: 1px solid black; padding: 8px;">Can directly handle both structured and unstructured data without significant loss.</td>
            </tr>
            <tr>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">Memory Usage</td>
                <td style="border: 1px solid black; padding: 8px;">Uses less memory.</td>
                <td style="border: 1px solid black; padding: 8px;">Uses more memory due to complex models.</td>
            </tr>
            <tr>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">Training Time</td>
                <td style="border: 1px solid black; padding: 8px;">Generally has less training time.</td>
                <td style="border: 1px solid black; padding: 8px;">Requires more time for training due to complex models.</td>
            </tr>
            <tr>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">Hardware Requirement</td>
                <td style="border: 1px solid black; padding: 8px;">Can run on CPUs with lower storage needs.</td>
                <td style="border: 1px solid black; padding: 8px;">Runs better on GPUs with more storage and computational power.</td>
            </tr>
            <tr>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">Story Example</td>
                <td style="border: 1px solid black; padding: 8px;">
                    <b>Teacher Predicting Student Performance:</b><br>
                    A teacher uses past exam results to predict student performance, analyzing patterns in study habits and class participation. This is similar to ML, where the model learns from structured data to make predictions and requires less computational power.
                </td>
                <td style="border: 1px solid black; padding: 8px;">
                    <b>Self-Driving Car Learning:</b><br>
                    A self-driving car processes huge amounts of data from cameras and sensors to understand its environment, learning over time to navigate obstacles. This requires large datasets and more computational power (via GPUs) and longer training times, similar to how DL works.
                </td>
            </tr>
        </table>
    </div>
""", unsafe_allow_html=True)


st.image("https://huggingface.co/spaces/hari3485/DiveIntoML/resolve/main/data.jpg")


st.markdown("""
This Graph explains the relationship between the accuracy of *Machine Learning (ML) techniques* and *Deep Learning (DL) models* with respect to the size of data:
- *ML techniques* perform well on smaller datasets but plateau as data size increases.
- *DL models* start with lower accuracy on small datasets but improve significantly as data size grows, outperforming ML techniques on larger datasets.
""")