JacqHazzard/BubbleSortMakerCISC121

I chose Bubble Sort beacuse its straightforward, iterative process-where the alrgest values "bubble up"- is ideal for clear, step-by-step visual demonsrtation. This simplicity directly supports the goal of creating an easy to understand interactive learning app.

A. Decomposition

1. 1.Input Parsing: Handle user string input and convert it safely to a list of integers.
2. 2.Core Sorting: Implement the Bubble Sort algorithm's comparison and swap logic.
3. 3.Visualization & Logging: Record the array state at every step and translate the final state into a Matplotlib bar chart.
4. 4.UI/Deployment: Integrate all modules using Gradio for a user-friendly interface.

B. Pattern Recognition

• —The core pattern is the repeated operation: Compare Adjacent Elements --> Swap If Out of Order.
• —This pattern is repeated in a predictable manner across $N$ passes, allowing for the creation of an accurate, step-by-step log of the algorithm's execution

C. Abstraction

1. 1.Input: Read string from gr.Textbox.
2. 2.Process: Call visualize_sort() which:
3. 3.Parses the string (check for errors).
4. 4.Calls bubble_sort() to get the sorted list and the execution log (steps).
5. 5.Generates the Matplotlib plot from the final sorted list.
6. 6.Output: Display the text log in the gr.Textbox and the plot image in the gr.Image component.

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