madisonmac789/MergeSortVisualization

1---2title: Merge Sort Project3colorFrom: blue4colorTo: blue5sdk: gradio6sdk_version: 6.0.27app_file: app.py8pinned: false9---10 11Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference12 13Merge Sort Visualizer – CISC-121 Project14 15Demo16[(Insert your GIF, screenshot, or short demo video here)](https://youtu.be/Fve5pBzABiQ)17 18 19Hugging Face App: 20[madisonmac789/MergeSortVisualization ](https://huggingface.co/spaces/madisonmac789/MergeSortVisualization/)21 22Problem Breakdown & Computational Thinking23 24Algorithm Choice – Why Merge Sort?25I chose Merge Sort because:26- It is a divide-and-conquer algorithm that always runs in O(n log n) time, no matter what the input looks like (best, average, or worst case).27- It has a very structured sequence: split → sort → merge, which makes it ideal for teaching and visualization.28  29Computational Thinking301. Decomposition 31To understand and implement Merge Sort, I broke the process into these smaller steps:32- Take an input array (custom or auto-generated).33- If the segment only has one element → this is the base case.34- Split the array into a left half and a right half.35- Recursively sort the left half.36- Recursively sort the right half.37- Merge the two sorted halves:38- Compare the front elements of each half.39- Place the smaller value first.40- Continue until both halves are empty.41- After each action, record:42the current segment being worked on,43whether the algorithm is splitting or merging,44which indices are highlighted,45the updated list for the next animation frame.46- Repeat until the final fully sorted array is complete.47 482. Pattern Recognition49Merge Sort repeats the same structure over and over:50Every segment is divided into two halves.51Every division eventually reaches a base case of one element.52Every merge step follows the same pattern:53Compare left vs right.54Insert the smaller.55Move forward in that half.56The recursion depth forms a balanced binary tree, which is why the time complexity is always O(n log n).57 583. Abstraction 59The user does not see the complicated internal work happening behind the scenes.60The app hides:61Python’s recursive call stack.62Index tracking and boundary calculations.63Temporary left/right arrays created during merging.64All Gradio layout and update logic.65Matplotlib and PIL image generation steps.66Instead, the user sees simplified, helpful visuals:67Clear bar-chart animations for each step.68Color-highlighted active segments.69Labels explaining split and merge operations.70A “Teaching View” text explanation for every recursion event.71A final summary showing both the input and the sorted output.72This makes the experience educational while avoiding confusion.73 74 755. Algorithm Design 76Input Options77- Best Case (already sorted)78- Worst Case (reverse sorted)79- Average Case (random)80- Custom input (e.g., 5, 2, 7, 1, 3)81Processing Steps82- The algorithm checks if the current segment size is 1 → if yes, return it as sorted.83- Calculate the midpoint:84mid = (low + high) // 285- Recursively call merge sort on the left half [low, mid].86- Recursively call merge sort on the right half [mid+1, high].87- Merge both halves:88Compare the first elements of each half.89Insert the smaller value into the new list.90- Continue until both halves are empty.91 92At each stage, the app:93Records the state,94Generates a bar-chart image,95Highlights active sections,96Logs a text explanation.97 98Output99- A complete gallery of animated steps100- A textual breakdown of every recursive call and merge101- The final sorted list102 103 104Flowchart:105Start106↓107Input array (custom or generated)108↓109If segment size = 1 → Base Case110↓111Split array into Left and Right112↓113Recursively sort Left114↓115Recursively sort Right116↓117Merge Left and Right118↓119Record step + generate visualization120↓121If entire array merged → Done122↓123Output sorted array + all visualization steps124 125Steps to Run 126 1271. Choose Your Input Type128On the left side of the interface, select one:129Best Case – sorted numbers (easiest pattern)130Worst Case – reverse sorted (hardest pattern)131Average Case – random values132Custom – type your own list (example: 5, 2, 4, 7, 1, 3)133If using Custom, enter your numbers separated by commas.134 1353. Click “Run Merge Sort and Visualize”136When you press the button:137The program reads your input.138The Merge Sort algorithm begins.139Each step of the algorithm is captured as an image.140 1414. Watch the Bar-Chart Animations142Shows:143The array splitting into smaller pieces144Each segment being sorted145The merging of values into the correct order146Bars may change color to show active regions.147 148 1496. Read the Teaching Explanation150A text breakdown of what the algorithm is doing151Messages such as:152“Splitting array…”153“Merging left and right segments…”154“Comparing values…”155“Base case reached…”156This helps you learn exactly how the algorithm works (step by step).157 158 1598. View All Steps in the Gallery160A gallery appears showing:161Every step of the algorithm162All split and merge stages163The complete visual history164You can scroll through and study each part of the process.165 16610. Final Output167The original array168The fully sorted array169Total number of steps recorded170This completes the simulation.171 172Testing & Verification173The program was tested thoroughly with:174Small arrays (2–5 elements)175Large arrays (20+ elements)176Sorted inputs177Reverse-sorted inputs178Random inputs179Duplicate values180Invalid inputs (error messages shown correctly)181All tests produced correct sorting results and stable visual output (see demo).182 183 184Author & Acknowledgment185Created by Madison MacRury186CISC-121 Project — 2025187Tools used: Python, Gradio, Matplotlib, Pillow