TOMCHENP/mergeSort_visualizer

Merge Sort Visualization App

Demo Video

🎥 Click below to watch the demo video:

➡️ Watch Video on Google Drive

Problem Breakdown & Computational Thinking

1. Decomposition

• —Recursively split the input array into two halves.
• —Identify the base case (single-element segment).
• —Merge two sorted halves back into one sorted array.
• —Record each meaningful operation as a visualization step.

2. Pattern Recognition

• —Merge Sort repeatedly uses the same two patterns:
• —Divide: keep splitting the array in half.
• —Conquer: compare the first elements of two sorted lists.
• —Merging always follows the “take the smaller element first” pattern.

3. Abstraction

• —The algorithm hides memory operations and recursion stack details.
• —Instead, it presents simplified, color-coded visual steps.
• —Users only interact with clean inputs and outputs.

4. Algorithm Design

• —Input: comma-separated integers (e.g., 8, 3, 7, 1, 6, 2, 5, 4)
• —Processing: generate annotated Merge Sort steps (splitting + merging)
• —Output: interactive Gradio visualization with slider control
• —Includes input validation and error messaging.

Steps to Run

Run Locally

1. 1.Install dependencies: pip install -r requirements.txt

1. 1.Run the app: python app.py

1. 1.Open the local Gradio link (e.g., http://localhost:7860)

Run on HuggingFace Spaces

1. 1.Upload these files:
2. 2.app.py
3. 3.requirements.txt
4. 4.README.md
5. 5.HuggingFace automatically builds and deploys the Gradio app.

Hugging Face Link

https://huggingface.co/spaces/TOMCHENP/mergeSort_visualizer

Author & Acknowledgment

Author: Tom Chen Course: CISC-121 —Fall 2025 Acknowledgments:

• —CISC-121 project guidelines
• —Gradio library for interface
• —Merge Sort algorithm reference from Introduction to Algorithms (Cormen et al.)

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference