Create Machine Learning vs Deep Learning

pages/Machine Learning vs Deep Learning

@@ -0,0 +1,152 @@
+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)