Update pages/2_Difference_Between_Ml_and_Dl.py

pages/2_Difference_Between_Ml_and_Dl.py

@@ -1,103 +1,153 @@
 import streamlit as st
-import pandas as pd
-import numpy as np 
-import matplotlib.pyplot as plt
-import random
-import requests
+
+# Title and Introduction
 st.markdown("""
     <style>
-    /* Set a soft background color */
-    body {
-        background-color: #eef2f7;
-    }
-    /* Style for main title */
-    h1 {
-        color: #00FFFF;
-        font-family: 'Roboto', sans-serif;
-        font-weight: 700;
-        text-align: center;
-        margin-bottom: 25px;
-    }
-    /* Style for headers */
-    h2 {
-        color: #FFFACD;
-        font-family: 'Roboto', sans-serif;
-        font-weight: 600;
-        margin-top: 30px;
-    }
-    
-    /* Style for subheaders */
-     h3 {
-        color: #ba95b0;
-        font-family: 'Roboto', sans-serif;
-        font-weight: 500;
-        margin-top: 20px;
-    }
-    .custom-subheader {
-        color: #00FFFF;
-        font-family: 'Roboto', sans-serif;
-        font-weight: 600;
-        margin-bottom: 15px;
-    }
-    /* Paragraph styling */
-    p {
-        font-family: 'Georgia', serif;
-        line-height: 1.8;
-        color: #FFFFFF; /* Darker text color for better visibility */
-        margin-bottom: 20px;
-    }
-    /* List styling with checkmark bullets */
-    .icon-bullet {
-        list-style-type: none;
-        padding-left: 20px;
-    }
-    .icon-bullet li {
-        font-family: 'Georgia', serif;
-        font-size: 1.1em;
-        margin-bottom: 10px;
-        color: #FFFFF0; /* Darker text color for better visibility */
-    }
-    .icon-bullet li::before {
-        content: "✔️";
-        padding-right: 10px;
-        color: #b3b3ff;
-    }
-    /* Sidebar styling */
-    .sidebar .sidebar-content {
-        background-color: #ffffff;
-        border-radius: 10px;
-        padding: 15px;
-    }
-    .sidebar h2 {
-        color: #495057;
-    }
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+        }
+        .title {
+            text-align: center;
+            color: #2c3e50;
+            font-size: 40px;
+            font-weight: bold;
+        }
+        .subtitle {
+            text-align: center;
+            color: #7f8c8d;
+            font-size: 18px;
+        }
+        .section {
+            background-color: #ecf0f1;
+            padding: 20px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .section-header {
+            color: #34495e;
+            font-size: 24px;
+            margin-bottom: 10px;
+            text-decoration: underline;
+        }
+        ul {
+            list-style-type: none;
+            padding: 0;
+        }
+        ul li {
+            background-color: #ffffff;
+            margin: 10px 0;
+            padding: 15px;
+            border: 1px solid #dcdcdc;
+            border-radius: 8px;
+            font-size: 16px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+        }
+        th, td {
+            text-align: left;
+            padding: 12px;
+            border: 1px solid #ddd;
+        }
+        th {
+            background-color: #34495e;
+            color: white;
+        }
+        tr:nth-child(even) {
+            background-color: #f9f9f9;
+        }
+        tr:hover {
+            background-color: #f1f1f1;
+        }
     </style>
-    """, unsafe_allow_html=True)
-st.title("Difference Between ML and DL")
-st.markdown("""Whenever machines want to adopt the learning ability 🧠.We have two tools one is **Ml** and other one is **Dl**.Let's understad the major differnce between them below..""",unsafe_allow_html=True)
-st.header("Machine Learning 🖥️")
-st.markdown("""
-<ul class="icon-bullet">
-<li>Machine learning uses statistics to understand patterns in data, make predictions, and help models learn from data 📊.</li>
-<li>Machine learning algorithms can easily learn with the help of less data 📉.</li>
-<li>Machine learning algorithms can only handle structured data. To deal with unstructured data, it needs to be converted into structured data 🔄.</li> 
-<li>Machine learning requires less memory 🧠💾.</li>
-<li>Machine learning models can be trained in less time ⏱️.</li>
-<li>Machine learning can run on a CPU because it handles smaller tasks without needing powerful hardware 🖥️.</li>
-</ul>
+    <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)
-st.header("Deep Learning 🤖")
 
+# Machine Learning Section
 st.markdown("""
-<ul class="icon-bullet">
-<li>Deep Learning uses neural networks, which are brain-like systems of connected nodes that learn from data to recognize patterns and make decisions. 🧠</li>
-<li>Deep Learning is hungry for data because it needs a large amount of information to learn patterns and make accurate predictions. The more data it has, the better it can perform. 🍽️📊</li>
-<li>Deep Learning can handle all types of data, including images, text, and audio, and it can learn complex patterns from both structured and unstructured data. 🖼️📝🎧</li> 
-<li>Deep Learning requires more memory 🧠💾 to process complex data and models.</li>
-<li>Deep Learning models require more time ⏱️ because of the large amount of data and complex calculations involved.</li>
-<li>Deep Learning requires a GPU (Graphics Processing Unit), more RAM, and storage because it processes large amounts of data efficiently. 🖥️💡</li>
-</ul>
+    <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)
 
+# Footer
+st.markdown("""
+    <hr>
+    <p style="text-align: center; color: #7f8c8d; font-size: 14px;">Created with ❤️ using Streamlit</p>
+""", unsafe_allow_html=True)