pages/pg.py

import streamlit as st

# Set page configuration
st.set_page_config(
    page_title="Exploring AI, ML, DL, and Generative AI",
    page_icon="🤖",
    layout="wide"
)

# Main Title
st.markdown("<h1 style='text-align: center; color: #FF5733;'>🌟 Exploring Artificial Intelligence, Machine Learning, Deep Learning, and Generative AI</h1>", unsafe_allow_html=True)

# Visual Section: Comparison of AI, ML, DL, and Generative AI
st.markdown("<h2 style='text-align: center; color: #2C3E50;'>🔹 AI vs ML vs DL vs Generative AI</h2>", unsafe_allow_html=True)

image_url = "https://huggingface.co/spaces/varshitha22/ML/resolve/main/images/im1.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
)

# Section 1: Artificial
st.markdown("<h2 style='color: #1ABC9C; font-size: 30px; font-weight: bold;'>🔹 1. Artificial : </h2>", unsafe_allow_html=True)
st.markdown("""
    <p style='font-size: 24px;'>
    The term <b>artificial</b> refers to anything that is not naturally occurring and is created by humans.
    </p>
    <p style='font-size: 24px;'><b>Examples:</b></p>
    <ul style='font-size: 24px;'>
        <li><b>Artificial Satellites</b>: A man-made object that orbits Earth or other planets. These are built for specific purposes like communication, navigation, weather monitoring, and research.</li>
        <li><b>Artificial Flowers</b>: 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.</li>
    </ul>
    """, unsafe_allow_html=True)

# Section 2: Intelligence
st.markdown("<h2 style='color: #8E44AD; font-size: 30px; font-weight: bold;'>🔹 2. Intelligence :</h2>", unsafe_allow_html=True)
st.markdown("""
    <p style='font-size: 24px;'>
    <b>Intelligence</b> is the ability to think, learn, understand, reason, and make decisions.
    </p>
    <p style='font-size: 24px;'>This intelligence exists naturally, and we call it <b>natural intelligence</b>.</p>
    <p style='font-size: 24px;'><b>Example:</b></p>
    <ul style='font-size: 24px;'>
        <li>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>
    """, unsafe_allow_html=True)

# Section 3: Artificial Intelligence (AI)
st.markdown("<h2 style='color: #F39C12; font-size: 30px; font-weight: bold;'>🔹 3. Artificial Intelligence (AI) :</h2>", unsafe_allow_html=True)

st.markdown("""
    <p style='font-size: 24px;'>
    <b>Artificial Intelligence (AI)</b> 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.
    </p>

    <p style='font-size: 24px; font-style: italic;'><b>Example:</b></p>
    <ul style='font-size: 24px;'>
        <li>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 <b>natural intelligence</b> — the ability to learn, adapt, and improve based on experience.</li>
    </ul>

    <p style='font-size: 24px; font-weight: bold;'>How AI Mimics This Process</p>
    <ul style='font-size: 24px;'>
        <li>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.</li>
    </ul>

    <p style='font-size: 24px;'>
    Just like a baby learns to walk through trial and error, <b>AI learns by analyzing data, identifying patterns, and making decisions based on what it has learned.</b>

    </u1>
    <p style='font-size: 24px; font-weight: bold;'>Real-World Examples of AI</p>
    <ul style='font-size: 24px;'>
        <li><b>Siri, Alexa, and Google Assistant:</b> These AI systems process natural language to answer questions.</li>
    </ul>
     </p>
    """, unsafe_allow_html=True)


# Section 4: Techniques and Tools for AI
st.markdown("<h2 style='color: #3498DB; font-size: 30px; font-weight: bold;'>🔹 4. Techniques and Tools for AI</h2>", unsafe_allow_html=True)
st.markdown("""
    <p style='font-size: 24px;'>
    If you want to mimic or clone human intelligence on a machine, there are several techniques and tools involved.
    """, unsafe_allow_html=True)

# Image Section for Techniques and Tools
image_url = "https://huggingface.co/spaces/varshitha22/ML/resolve/main/images/im2.jpg"

st.markdown(
    f"""
    <div style="display: flex; justify-content: center;">
        <img src="{image_url}" alt="AI Techniques and Tools" width="600">
    </div>
    """,
    unsafe_allow_html=True
)
    """, unsafe_allow_html=True)