app.py

import streamlit as st
import time
from PIL import Image

# Inject Custom CSS for Aesthetic Enhancements
def inject_custom_css():
    st.markdown("""
    <style>
    /* Overall page styling */
    body {
        background-color: #f4f7fa;
        font-family: 'Arial', sans-serif;
    }
    
    /* Sidebar styling */
    .css-1d391kg { 
        background-color: #ffffff; 
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); 
        border-radius: 12px;
    }
    .css-1d391kg .sidebar-content {
        padding: 2rem;
    }
    /* Title and Headers */
    h1 {
        font-size: 2.5rem;
        color: #333333;
        font-weight: 600;
    }
    h2, h3 {
        color: #4c4c4c;
        font-weight: 500;
    }
    
    /* Button styling */
    .css-1emrehy {
        background-color: #ff4c4c;
        color: white;
        padding: 10px 24px;
        border-radius: 6px;
        font-size: 1rem;
        border: none;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }
    .css-1emrehy:hover {
        background-color: #ff7b7b;
    }
    /* Text input styling */
    .css-1bppn4z input {
        border: 2px solid #ddd;
        border-radius: 8px;
        padding: 12px;
        font-size: 1rem;
    }
    
    /* Code blocks (steps) */
    pre {
        background-color: #f4f4f4;
        padding: 1rem;
        border-radius: 8px;
        font-family: 'Courier New', monospace;
        color: #333333;
    }
    /* Image styling */
    img {
        border-radius: 8px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    </style>
    """, unsafe_allow_html=True)

# Bubble Sort Algorithm with animation
def bubble_sort(arr):
    steps = []
    n = len(arr)
    for i in range(n):
        for j in range(0, n - i - 1):
            if arr[j] > arr[j + 1]:
                arr[j], arr[j + 1] = arr[j + 1], arr[j]
                steps.append(list(arr))  # Record the state of the array after each step
    return steps

# Insertion Sort Algorithm with animation
def insertion_sort(arr):
    steps = []
    for i in range(1, len(arr)):
        key = arr[i]
        j = i - 1
        while j >= 0 and key < arr[j]:
            arr[j + 1] = arr[j]
            j -= 1
            steps.append(list(arr))  # Record the state of the array after each step
        arr[j + 1] = key
        steps.append(list(arr))  # Record the state after inserting the key
    return steps

# Selection Sort Algorithm with animation
def selection_sort(arr):
    steps = []
    n = len(arr)
    for i in range(n):
        min_index = i
        for j in range(i + 1, n):
            if arr[j] < arr[min_index]:
                min_index = j
        arr[i], arr[min_index] = arr[min_index], arr[i]
        steps.append(list(arr))  # Record the state after each swap
    return steps

# Function to handle animation in the streamlit app
def animate_sorting(steps):
    for step in steps:
        st.write(step)
        time.sleep(0.5)  # Adjust sleep time to control animation speed

# Streamlit App Interface
def main():
    # Inject custom CSS for aesthetics
    inject_custom_css()
    
    # Sidebar with two options: "Try Simulation" and "Detailed Explanation"
    st.sidebar.title("Sorting Algorithm Options")
    option = st.sidebar.radio("Choose an option:", ("Detailed Explanation", "Try Simulation"))
    
    # Sidebar image
    st.sidebar.image("sort.png", use_container_width=True)  # Replace with your image path
    
    if option == "Try Simulation":
        st.title("Sorting Algorithms Visualization")

        # Input array from user
        user_input = st.text_input("Enter a list of numbers (comma separated):", "64, 34, 25, 12, 22, 11, 90")
        
        # Convert the input into a list of integers
        if user_input:
            try:
                arr = [int(x) for x in user_input.split(',')]
            except ValueError:
                st.error("Please enter a valid list of integers.")
                return
            
            # Select the sorting algorithm
            algorithm = st.selectbox("Select sorting algorithm:", ("Bubble Sort", "Insertion Sort", "Selection Sort"))
            
            # Start the animation on button press
            if st.button('Sort'):
                steps = []
                if algorithm == "Bubble Sort":
                    steps = bubble_sort(arr)
                elif algorithm == "Insertion Sort":
                    steps = insertion_sort(arr)
                elif algorithm == "Selection Sort":
                    steps = selection_sort(arr)

                # Animate the sorting process
                animate_sorting(steps)

                # Display the final sorted array
                st.write("Sorted Array:", arr)
    
    elif option == "Detailed Explanation":
        st.title("Detailed Explanation of Sorting Algorithms")

        # Show explanations for each algorithm
        algorithm = st.selectbox("Select an algorithm to see the explanation:", 
                                 ("Bubble Sort", "Insertion Sort", "Selection Sort"))

        if algorithm == "Bubble Sort":
            st.subheader("Bubble Sort Explanation")
            st.write("""
                Bubble Sort is a simple sorting algorithm that works by repeatedly stepping through the list,
                comparing adjacent elements and swapping them if they are in the wrong order. The pass through the
                list is repeated until the list is sorted. It gets its name because the largest unsorted element
                "bubbles" to its correct position in each pass.
            """)
            st.write("""
                **Steps**:
                1. Compare adjacent elements.
                2. Swap them if they are in the wrong order.
                3. Repeat this for each pair of adjacent elements in the array.
                4. Continue until no more swaps are needed.
            """)

            image = Image.open("bubble-short.png")  # Path to your image file
            st.image(image, use_container_width=True) 
        
        elif algorithm == "Insertion Sort":
            st.subheader("Insertion Sort Explanation")
            st.write("""
                Insertion Sort is a simple comparison-based algorithm. It builds the sorted array one item at a time.
                It works by picking the next item from the unsorted part of the array and inserting it into its correct position
                in the sorted part of the array. The process is repeated until the whole array is sorted.
            """)
            st.write("""
                **Steps**:
                1. Start with the second element.
                2. Compare it with the elements before it, and move those elements one position to the right if necessary.
                3. Insert the element at the correct position.
                4. Continue this process until all elements are inserted in the correct order.
            """)

            image = Image.open("insertion-sort.png")  # Path to your image file
            st.image(image, use_container_width=True) 

        elif algorithm == "Selection Sort":
            st.subheader("Selection Sort Explanation")
            st.write("""
                Selection Sort is a simple comparison-based algorithm that divides the array into two parts: the sorted part and
                the unsorted part. In each pass, it selects the smallest (or largest, depending on the sorting order) element from
                the unsorted part and swaps it with the first element of the unsorted part. This process is repeated until the array is sorted.
            """)
            st.write("""
                **Steps**:
                1. Find the smallest element in the unsorted part of the array.
                2. Swap it with the first unsorted element.
                3. Move the boundary of the sorted part one element forward.
                4. Repeat this process for all elements.
            """)

            image = Image.open("selection-short.png")  # Path to your image file
            st.image(image, use_container_width=True)

# Run the app
if __name__ == "__main__":
    main()