Update app.py layout and fix visual alignment

README.md

@@ -1,25 +1,27 @@
-# Sorting Algorithm Visualizer
+---
+title: Sorting Algorithm Visualizer
+emoji: 📊
+colorFrom: blue
+colorTo: purple
+sdk: streamlit
+sdk_version: "1.32.2"
+app_file: app.py
+pinned: false
+---
 
-A Streamlit-based application that visually compares **Insertion Sort** and **Merge Sort** step by step.
+# Sorting Algorithm Visualizer
 
-![Demo Animation](demo.gif)
+A Streamlit-based web app that visually compares **Insertion Sort** and **Merge Sort** step-by-step using animated bar charts.
 
 ## Features
 
-- Generates a random list of integers
-- Runs Insertion Sort and Merge Sort side by side
-- Step-by-step animated visualization using Plotly
-- Highlights active comparisons and sorted segments
-- Displays total number of steps for each algorithm
-- Brief description of algorithm logic
-
-## Technologies Used
-
-- Python 3
-- Streamlit
-- Plotly
+- Generates a random array for sorting
+- Side-by-side animated visualization of Insertion Sort and Merge Sort
+- Highlights active elements and sorted regions
+- Displays total number of sorting steps
+- Brief algorithm summaries
 
-## How to Run
+## How to Run Locally
 
 ```bash
 pip install -r requirements.txt

app.py

@@ -18,10 +18,8 @@ if st.button("Compare Insertion Sort vs Merge Sort"):
     data_insertion = data.copy()
     data_merge = data.copy()
 
-    # Insertion Sort
     steps_insertion = insertion_sort(data_insertion)
 
-    # Merge Sort
     steps_merge = merge_sort(data_merge)
 
     st.subheader("Comparison Results")
@@ -35,10 +33,6 @@ if st.button("Compare Insertion Sort vs Merge Sort"):
         st.markdown("### Merge Sort")
         st.write(f"Total steps: {len(steps_merge)}")
 
-    # --- Görsel Karşılaştırma ---
-    st.subheader("Visual Comparison")
-    col1, col2 = st.columns(2)
-
     def create_animation(steps, title, color_fn):
         frames = []
         for i, step in enumerate(steps):
@@ -75,6 +69,7 @@ if st.button("Compare Insertion Sort vs Merge Sort"):
                 textposition="middle center"
             )],
             layout=go.Layout(
+                height=400,
                 title=title,
                 xaxis=dict(range=[-0.5, len(initial["array"]) - 0.5]),
                 yaxis=dict(range=[0, max(max(s['array']) for s in steps) + 5]),
@@ -112,13 +107,12 @@ if st.button("Compare Insertion Sort vs Merge Sort"):
             for j in range(length)
         ]
 
-    with col1:
-        st.plotly_chart(create_animation(steps_insertion, "Insertion Sort", insertion_colors))
+    st.subheader("Insertion Sort Visualization")
+    st.plotly_chart(create_animation(steps_insertion, "Insertion Sort", insertion_colors))
 
-    with col2:
-        st.plotly_chart(create_animation(steps_merge, "Merge Sort", merge_colors))
+    st.subheader("Merge Sort Visualization")
+    st.plotly_chart(create_animation(steps_merge, "Merge Sort", merge_colors))
 
-    # --- Açıklamalar ---
     st.subheader("About the Algorithms")
     st.markdown("**Insertion Sort:** A simple comparison-based algorithm that builds the sorted list one element at a time. Best for small or nearly sorted datasets. Time complexity: O(n²).")
     st.markdown("**Merge Sort:** A divide-and-conquer algorithm that recursively splits the list and merges them in sorted order. Efficient for large datasets. Time complexity: O(n log n).")

requirements.txt

@@ -1,48 +1,4 @@
-altair==5.5.0
-attrs==25.3.0
-black==25.1.0
-blinker==1.9.0
-cachetools==6.1.0
-certifi==2025.7.14
-charset-normalizer==3.4.2
-click==8.2.1
-contourpy==1.3.2
-cycler==0.12.1
-fonttools==4.59.0
-gitdb==4.0.12
-GitPython==3.1.44
-idna==3.10
-isort==6.0.1
-Jinja2==3.1.6
-jsonschema==4.25.0
-jsonschema-specifications==2025.4.1
-kiwisolver==1.4.8
-MarkupSafe==3.0.2
-matplotlib==3.10.3
-mypy_extensions==1.1.0
-narwhals==1.48.0
-numpy==2.3.1
-packaging==25.0
-pandas==2.3.1
-pathspec==0.12.1
-pillow==11.3.0
-platformdirs==4.3.8
-plotly==6.2.0
-protobuf==6.31.1
-pyarrow==21.0.0
-pydeck==0.9.1
-pyparsing==3.2.3
-python-dateutil==2.9.0.post0
-pytz==2025.2
-referencing==0.36.2
-requests==2.32.4
-rpds-py==0.26.0
-six==1.17.0
-smmap==5.0.2
-streamlit==1.47.0
-tenacity==9.1.2
-toml==0.10.2
-tornado==6.5.1
-typing_extensions==4.14.1
-tzdata==2025.2
-urllib3==2.5.0
+streamlit>=1.25.0,<2.0.0
+plotly>=5.18.0
+numpy<=1.26.4
+matplotlib