Update app.py

app.py

@@ -1,6 +1,9 @@
 import streamlit as st
 import time
+import plotly.graph_objs as go
+import plotly.express as px
 from PIL import Image
+import numpy as np
 
 # Inject Custom CSS for Aesthetic Enhancements
 def inject_custom_css():
@@ -18,11 +21,9 @@ def inject_custom_css():
         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;
@@ -45,11 +46,9 @@ def inject_custom_css():
         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;
@@ -66,7 +65,6 @@ def inject_custom_css():
         font-family: 'Courier New', monospace;
         color: #333333;
     }
-
     /* Image styling */
     img {
         border-radius: 8px;
@@ -76,7 +74,7 @@ def inject_custom_css():
     </style>
     """, unsafe_allow_html=True)
 
-# Bubble Sort Algorithm with animation
+# Bubble Sort Algorithm with Plotly animation
 def bubble_sort(arr):
     steps = []
     n = len(arr)
@@ -87,7 +85,7 @@ def bubble_sort(arr):
                 steps.append(list(arr))  # Record the state of the array after each step
     return steps
 
-# Insertion Sort Algorithm with animation
+# Insertion Sort Algorithm with Plotly animation
 def insertion_sort(arr):
     steps = []
     for i in range(1, len(arr)):
@@ -101,7 +99,7 @@ def insertion_sort(arr):
         steps.append(list(arr))  # Record the state after inserting the key
     return steps
 
-# Selection Sort Algorithm with animation
+# Selection Sort Algorithm with Plotly animation
 def selection_sort(arr):
     steps = []
     n = len(arr)
@@ -114,11 +112,37 @@ def selection_sort(arr):
         steps.append(list(arr))  # Record the state after each swap
     return steps
 
-# Function to handle animation in the streamlit app
-def animate_sorting(steps):
+# Plotly animation function to display sorting process
+def plotly_animation(steps, algorithm_name):
+    fig = go.Figure()
     for step in steps:
-        st.write(step)
-        time.sleep(0.5)  # Adjust sleep time to control animation speed
+        fig.add_trace(go.Scatter(
+            x=list(range(len(step))),
+            y=step,
+            mode="lines+markers",
+            name=f'{algorithm_name} Sorting Step',
+            line=dict(color='blue'),
+            marker=dict(color='red', size=10),
+        ))
+    fig.update_layout(
+        title=f"{algorithm_name} Algorithm - Sorting Process",
+        xaxis_title="Index",
+        yaxis_title="Value",
+        updatemenus=[dict(
+            type="buttons",
+            showactive=False,
+            buttons=[dict(label="Play",
+                         method="animate",
+                         args=[None, dict(frame=dict(duration=500, redraw=True), fromcurrent=True)])]
+        )],
+        sliders=[dict(
+            steps=[dict(label=str(i),
+                        method="animate",
+                        args=[[i], dict(frame=dict(duration=500, redraw=True), mode="immediate", transition=dict(duration=0))]) 
+                   for i in range(len(steps))])
+        ]
+    )
+    st.plotly_chart(fig)
 
 # Streamlit App Interface
 def main():
@@ -159,8 +183,8 @@ def main():
                 elif algorithm == "Selection Sort":
                     steps = selection_sort(arr)
 
-                # Animate the sorting process
-                animate_sorting(steps)
+                # Show the Plotly animation
+                plotly_animation(steps, algorithm)
 
                 # Display the final sorted array
                 st.write("Sorted Array:", arr)