File size: 8,178 Bytes
6a9e1bb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 |
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() |