Update pages/pg.py

pages/pg.py

@@ -1,77 +1,108 @@
 import streamlit as st
 
 # Set page configuration
-st.set_page_config(page_title="introduction to AI,ML and DL", page_icon="🤖", layout="wide")
-
-# Custom CSS for styling
-st.markdown("""
-    <style>
-        .main-title {
-            font-size: 36px;
-            font-weight: bold;
-            color: #2980B9;
-        }
-        .sub-title {
-            font-size: 30px;
-            font-weight: bold;
-            color: #8E44AD;
-        }
-        .highlight {
-            color: #E74C3C;
-            font-weight: bold;
-        }
-        .content {
-            font-size: 18px;
-            line-height: 1.8;
-            color: #2C3E50;
-        }
-    </style>
-""", unsafe_allow_html=True)
-
-# HTML content with the class-based styling
-st.markdown("""
-    <div class="content">
-        <h2 class="main-title">Artificial:</h2>
-        <p>The term <b>artificial</b> refers to anything that is not naturally occurring and is created by humans.</p>
-
-        <h3 class="sub-title">Examples:</h3>
-        <ul>
-            Artificial Satellites:</b> An artificial satellite is a man-made object that orbits Earth or other planets. 
-                                  Unlike the Moon (a natural satellite), artificial satellites are built for specific purposes like communication, navigation, weather monitoring, and research.</li>
-            Artificial Flowers:</b> Artificial flowers are man-made replicas of real flowers, crafted using materials like silk, plastic, paper, or fabric. 
-                                  They are designed to mimic the appearance of natural flowers and are used in decoration, religious ceremonies, events, and artistic arrangements.</li>
-        </ul>
-
-        <h2 class="main-title">Intelligence:</h2>
-        <p><span class="highlight">Intelligence</span> is the ability to think, learn, understand, reason, and make decisions.</p>
-        <p>This intelligence exists naturally, we call it <span class="highlight">natural intelligence</span>.</p>
-
-        <h3 class="sub-title">Example of Natural Intelligence:</h3>
-        <p>Imagine a child learning to recognize different animals.</p>
-        <ul>
-            <li><b>Observation & Learning:</b> The child sees a dog for the first time and hears their parents say, “This is a dog.”</li>
-            <li>The child observes its shape, fur, barking sound, and movement.</li>
-        </ul>
-
-        <h2 class="main-title">Artificial Intelligence:</h2>
-        <p><span class="highlight">Artificial Intelligence</span> is a branch of computer science that focuses on mimicking, copying, or cloning human intelligence in machines, enabling them to perform tasks like a human.</p>
-        <p>In other words, <span class="highlight">Artificial Intelligence</span> is a field where machines try to mimic the natural intelligence to create their own intelligence to perform day-to-day tasks without human intervention.</p>
-
-        <h3 class="sub-title">Example:</h3>
-        <p>Imagine a baby learning to walk. At first, the baby stumbles and falls, but with each attempt, they improve. Their brain automatically learns from past experiences — adjusting balance, correcting mistakes, and gradually walking without help. 
-        This is an example of natural intelligence — the ability to learn, adapt, and improve based on experience.</p>
-
-        <h3 class="sub-title">How AI Mimics This Process:</h3>
-        <p>Now, think about a self-driving car. In the beginning, the car doesn’t know how to drive. It is trained by feeding it thousands of hours of road data — how to stop at red lights, recognize pedestrians, and adjust speed. 
-        The AI system analyzes these patterns, learns from past mistakes, and gets better at driving over time.</p>
-        <p>Just like a baby learns to walk through trial and error, AI learns by analyzing data, identifying patterns, and making decisions based on what it has learned.</p>
-
-        <h3 class="sub-title">Real-World Examples of AI:</h3>
-        <ul>
-            <li>Siri, Alexa, and Google Assistant process natural language to answer questions.</li>
-        </ul>
-
-        <p>If you want to mimic/copy/clone human intelligence on a machine, there are some techniques and tools involved.</p>
+st.set_page_config(
+    page_title="Understanding Artificial Intelligence and Intelligence",
+    page_icon="🤖",
+    layout="wide"
+)
+
+# Main Title
+st.markdown("<h1 style='text-align: center; color: #FF5733;'>🌟 Understanding Artificial Intelligence and Intelligence</h1>", unsafe_allow_html=True)
+
+# Visual Section: Comparison of AI, ML, DL, and Generative AI
+st.markdown("<h2 style='text-align: center; color: #F39C12;'>🔹 AI vs ML vs DL vs Generative AI</h2>", unsafe_allow_html=True)
+
+image_url = "https://huggingface.co/spaces/sushma2910/Drive_in_to_ML/resolve/main/venn%20diagram.jpg"
+
+st.markdown(
+    f"""
+    <div style="display: flex; justify-content: center;">
+        <img src="{image_url}" alt="AI vs ML vs DL vs Generative AI" width="600">
     </div>
-""", unsafe_allow_html=True)
+    """,
+    unsafe_allow_html=True
+)
+# Section 1: Artificial
+st.markdown("<h2 style='color: #F39C12; font-weight: bold;'>🔹 1. What is Artificial?</h2>", unsafe_allow_html=True)
+
+with st.expander("Read more about Artificial"):
+    st.write("""
+    The term **artificial** refers to anything that is not naturally occurring and is created by humans.
+    
+    **Examples:**
+    - **Artificial Satellites**: A man-made object that orbits Earth or other planets. These are built for specific purposes like communication, navigation, weather monitoring, and research.
+    - **Artificial Flowers**: These are man-made replicas of real flowers, crafted using materials like silk, plastic, or fabric. They are used for decoration, religious ceremonies, events, and artistic arrangements.
+    """)
+
+# Section 2: Intelligence
+st.markdown("<h2 style='color: #F39C12; font-weight: bold;'>🔹 2. What is Intelligence?</h2>", unsafe_allow_html=True)
+
+with st.expander("Read more about Intelligence"):
+    st.write("""
+    **Intelligence** is the ability to think, learn, understand, reason, and make decisions.
+    
+    This intelligence exists naturally, and we call it **natural intelligence**.
+    
+    **Example:**
+    Imagine a child learning to recognize different animals.
+    - The child sees a dog for the first time and hears their parents say, “This is a dog.”
+    - The child observes its shape, fur, barking sound, and movement.
+    """)
+
+# Section 3: Artificial Intelligence (AI)
+st.markdown("<h2 style='color: #F39C12; font-weight: bold;'>🔹 3. What is Artificial Intelligence (AI)?</h2>", unsafe_allow_html=True)
+
+with st.expander("Read more about Artificial Intelligence"):
+    st.write("""
+    **Artificial Intelligence (AI)** is a field of computer science that focuses on mimicking, copying, or cloning human intelligence in machines, enabling them to perform tasks like a human.
+    
+    **For Example:** Imagine a baby learning to walk.
+    - At first, the baby stumbles and falls, but with each attempt, they improve. 
+    - Their brain learns from past experiences and adjusts its balance to walk without help.
+
+    **How AI Mimics This Process:**
+    - Think about a self-driving car. Initially, it doesn’t know how to drive.
+    - It is trained using thousands of hours of road data — learning to stop at red lights, recognize pedestrians, and adjust speed.
+    - Over time, the AI improves by learning from its mistakes, much like how a baby learns to walk.
+
+    **Real-World Examples of AI:**
+    - **Siri, Alexa, and Google Assistant**: These AI systems process natural language to answer questions.
+    """)
+
+
+
+# Section 4: Techniques and Tools for AI
+st.markdown("<h2 style='color: #F39C12; font-weight: bold;'>🔹 4. Techniques and Tools for AI</h2>", unsafe_allow_html=True)
+
+with st.expander("AI Techniques and Tools"):
+    st.write("""
+    If you want to mimic or clone human intelligence on a machine, there are several techniques and tools involved.
+    These include:
+# image 
+image_url = "https://huggingface.co/spaces/sushma2910/Drive_in_to_ML/resolve/main/venn%20diagram.jpg"
+
+st.markdown(
+    f"""
+    <div style="display: flex; justify-content: center;">
+        <img src="{image_url}" alt="AI vs ML vs DL vs Generative AI" width="600">
+    </div>
+    """,
+    unsafe_allow_html=True
+)
+    - **Neural Networks**
+    - **Deep Learning Frameworks** (e.g., TensorFlow, PyTorch)
+    - **Natural Language Processing (NLP)** for understanding text
+    - **Reinforcement Learning** for learning through interaction
+    """)
+
+# Section 5: Summary
+st.markdown("<h2 style='color: #F39C12; font-weight: bold;'>🔹 5. Summary</h2>", unsafe_allow_html=True)
+st.write("""
+In conclusion, Artificial Intelligence is a powerful tool that mimics human intelligence to perform tasks autonomously.  
+From understanding natural language to learning from data, AI systems have the potential to revolutionize many industries, 
+from healthcare to entertainment, and beyond.
+
+AI's ability to mimic natural intelligence is leading to advancements like self-driving cars, AI chatbots, and even creative AI tools like image generators.
+""")