pages/Introduction to ML.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='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='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: 25px; font-weight: bold;'> Artificial :</h2>", unsafe_allow_html=True)
st.markdown("""
    <p style='font-size: 18px;'>
    The term <b>artificial</b> refers to anything that is not naturally occurring and is created by humans.
    </p>
    <p style='font-size: 18px;'><b>Examples:</b></p>
    <ul style='font-size: 18px;'>
        <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>
    </div>
""", unsafe_allow_html=True)

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

st.markdown("""
    <p style='font-size: 18px;'>
    <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: 18px; font-style: italic;'><b>Example:</b></p>
    <ul style='font-size: 18px;'>
        <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: 18px; font-weight: bold;'>How AI Mimics This Process</p>
    <ul style='font-size: 18px;'>
        <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>
    </p>
    <p style='font-size: 18px; font-weight: bold;'>Real-World Examples of AI</p>
    <ul style='font-size: 18px;'>
        <li><b>Siri, Alexa, and Google Assistant:</b> These AI systems process natural language to answer questions.</li>
    </ul>
""", unsafe_allow_html=True)

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

# Section: Machine Learning
st.markdown("""
        <h2 style='color: #1ABC9C; font-size: 25px; font-weight: bold;'> Machine Learning: A Subset of AI</h2>
        <p style='font-size: 18px;'>
        <b>Machine Learning</b> is a statistical technique that learns from data and makes predictions or decisions based on it.
        </p>
        <p style='font-size: 18px;font-weight: bold;'>How Machine Learning Works?</p>
        <p style='font-size: 18px; font-weight: bold;'>ML follows a simple process:</p>
        <ul style='font-size: 18px;'>
            <li><b>Collect Data:</b> Gather historical data (e.g., past movie ratings, customer transactions).</li>
            <li><b>Train the Model:</b> Use algorithms to find patterns in the data.</li>
            <li><b>Test & Improve:</b> Evaluate the model’s accuracy and refine it.</li>
            <li><b>Make Predictions:</b> Apply the trained model to new data for real-world use.</li>
        </ul>
        <p style='font-size: 18px; font-weight: bold;'>Applications:</p>
        <ul style='font-size: 18px;'>
            <li><b>Chatbots:</b> Text-based chatbots for customer support, voice-based assistants like Siri and Alexa.</li>
            <li><b>Autonomous Vehicles:</b> Tesla’s self-driving cars.</li>
            <li><b>Recommendation Systems:</b> Personalized suggestions on e-commerce platforms (Amazon, Netflix, etc.).</li>
            <li><b>Predictive Analytics:</b> Weather forecasting, traffic prediction.</li>
            <li><b>Robotics:</b> Used in automation and intelligent robots.</li>
            <li><b>Object Detection & Sentiment Analysis:</b> Used in computer vision and NLP applications like fraud detection, emotion analysis.</li>
        </ul>
    </div>
""", unsafe_allow_html=True)

# Section: Deep Learning
st.markdown("""
        <h2 style='color: #8E44AD; font-size: 25px; font-weight: bold;'> Deep Learning: A Subset of Machine Learning</h2>
        <p style='font-size: 18px;'>
        <b>Deep Learning</b> is a subset of machine learning that focuses on using artificial neural networks to learn from large amounts of data. 
        </p>
        <p style='font-size: 18px;'>These neural networks are composed of multiple layers (hence the term “deep”) that enable the model to automatically extract features from the data.</p>
    </div>
""", unsafe_allow_html=True)

# Section: Generative AI
st.markdown("""
        <h2 style='color: #F39C12; font-size: 25px; font-weight: bold;'> Generative AI</h2>
        <p style='font-size: 18px;'>
        <b>Generative AI</b> refers to the branch of AI that focuses on creating new content, such as images, music, text, or videos, that is indistinguishable from human-created content.
        </p>
    </div>
""", unsafe_allow_html=True)

# Section: Relationship Between AI, ML, DL, and Generative AI
st.markdown("""
        <h2 style='color: #3498DB; font-size: 25px; font-weight: bold;'> Relationship Between AI, Machine Learning, Deep Learning, and Generative AI</h2>
        <p style='font-size: 18px; font-weight: bold;'>Simple Breakdown:</p>
        <ul style='font-size: 18px;'>
            <li><b>AI:</b> The big umbrella of intelligent systems.</li>
            <li><b>ML:</b> A part of AI that helps machines learn from data.</li>
            <li><b>DL:</b> A more advanced type of ML using deep neural networks.</li>
            <li><b>Generative AI:</b> A creative branch of DL that generates new content.</li>
        </ul>
    </div>
""", unsafe_allow_html=True)