Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,40 +1,174 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
+import time
+import random
+import matplotlib.pyplot as plt
+from matplotlib.animation import FuncAnimation
+import numpy as np
+
+# Set page config
+st.set_page_config(page_title="Insertion Sort Visualizer", layout="centered")
+st.title("🔄 Insertion Sort Algorithm Visualizer")
+st.markdown("Watch how Insertion Sort builds a sorted array one element at a time!")
+
+# Sidebar controls
+st.sidebar.header("Controls")
+array_size = st.sidebar.slider("Array Size", min_value=5, max_value=50, value=20)
+speed = st.sidebar.slider("Animation Speed (seconds)", min_value=0.1, max_value=2.0, value=0.5, step=0.1)
+
+# Generate random array
+if st.sidebar.button("Generate New Array"):
+    st.session_state.array = random.sample(range(1, 100), array_size)
+    st.session_state.history = []
+    st.session_state.steps = []
+    st.rerun()
+
+# Initialize array in session state
+if "array" not in st.session_state:
+    st.session_state.array = random.sample(range(1, 100), array_size)
+    st.session_state.history = []
+    st.session_state.steps = []
+
+array = st.session_state.array.copy()
+
+# Insertion Sort with step recording
+def insertion_sort_with_steps(arr):
+    steps = []
+    history = []
+    arr = arr.copy()
+    
+    for i in range(1, len(arr)):
+        key = arr[i]
+        j = i - 1
+        
+        # Record current state
+        history.append(arr.copy())
+        steps.append({
+            'comparing': i,
+            'key': key,
+            'action': f"Pick {key} and insert into sorted portion"
+        })
+        
+        while j >= 0 and arr[j] > key:
+            arr[j + 1] = arr[j]
+            j -= 1
+            
+            # Record shift
+            history.append(arr.copy())
+            steps.append({
+                'comparing': j + 1,
+                'inserting': i,
+                'key': key,
+                'action': f"Shift {arr[j+1]} right"
+            })
+        
+        arr[j + 1] = key
+        
+        # Record after insertion
+        history.append(arr.copy())
+        steps.append({
+            'inserted': j + 1,
+            'key': key,
+            'action': f"Insert {key} at position {j+1}"
+        })
+    
+    # Final sorted array
+    history.append(arr.copy())
+    steps.append({'action': "Sorting Complete! 🎉", 'sorted': True})
+    
+    return history, steps
+
+# Run sorting only when needed
+if st.button("Start Sorting") or st.session_state.get("running", False):
+    if not st.session_state.history:
+        with st.spinner("Running Insertion Sort..."):
+            history, steps = insertion_sort_with_steps(st.session_state.array)
+            st.session_state.history = history
+            st.session_state.steps = steps
+            st.session_state.current_step = 0
+            st.session_state.running = True
+    
+    # Animation placeholder
+    chart = st.empty()
+    info = st.empty()
+    progress = st.progress(0)
+
+    # Animation loop
+    for idx, (state, step) in enumerate(zip(st.session_state.history, st.session_state.steps)):
+        st.session_state.current_step = idx
+        
+        # Update progress
+        progress.progress((idx + 1) / len(st.session_state.history))
+
+        # Create bar plot
+        fig, ax = plt.subplots(figsize=(10, 6))
+        bars = ax.bar(range(len(state)), state, color='skyblue', edgecolor='black')
+        
+        # Highlight current key and sorted portion
+        if 'comparing' in step:
+            bars[step['comparing']].set_color('orange')
+        if 'inserted' in step:
+            bars[step['inserted']].set_color('green')
+        if 'inserting' in step:
+            bars[step['inserting']].set_color('red')
+        
+        # Color the sorted portion (left part)
+        sorted_until = 0
+        for s in st.session_state.steps[:idx]:
+            if 'inserted' in s:
+                sorted_until = max(sorted_until, s['inserted'] + 1)
+        for i in range(sorted_until):
+            bars[i].set_color('#90EE90')  # light green for sorted
+        
+        ax.set_title("Insertion Sort Visualization", fontsize=16, fontweight='bold')
+        ax.set_xlabel("Index")
+        ax.set_ylabel("Value")
+        ax.set_xlim(-0.5, len(state) - 0.5)
+        ax.set_ylim(0, max(state) * 1.1)
+
+        # Add step description
+        action_text = step.get('action', 'Processing...')
+        info.markdown(f"**Step {idx + 1}/{len(st.session_state.history)}**: {action_text}")
+
+        chart.pyplot(fig)
+        plt.close(fig)
+        
+        time.sleep(speed)
+    
+    st.success("Insertion Sort Completed!")
+    st.balloons()
+    st.session_state.running = False
+
+# Display current array
+st.subheader("Current Array")
+cols = st.columns(len(array))
+for i, val in enumerate(array):
+    cols[i].metric(label=f"Index {i}", value=val)
+
+# Show algorithm explanation
+with st.expander("How Insertion Sort Works"):
+    st.markdown("""
+    ### Insertion Sort Algorithm
+    
+    Insertion Sort builds the final sorted array one item at a time.
+    
+    **Steps:**
+    1. Start with the second element (index 1)
+    2. Compare it with elements on its left
+    3. Shift larger elements one position to the right
+    4. Insert the element in its correct position
+    5. Repeat until the entire array is sorted
+    
+    **Time Complexity:**
+    - Best Case: O(n) → Already sorted
+    - Average/Worst Case: O(n²)
+    
+    **Great for:** Small datasets or nearly sorted arrays!
+    """)
 
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+# Reset button
+if st.button("Reset"):
+    st.session_state.array = random.sample(range(1, 100), array_size)
+    st.session_state.history = []
+    st.session_state.steps = []
+    st.session_state.running = False
+    st.rerun()