spnch/Binary_Code_Visualization
2
1---2title: Binary Search Visualization3emoji: 🔍4colorFrom: blue5colorTo: purple6sdk: gradio7sdk_version: 6.0.18app_file: app.py9pinned: false10---11 12# Binary-Search-Visualization13 14For this final project for the CISC121 class I have decided to create a visualization of the Binary Search algorithm. This program allows its users to enter a sorted list and a target value inside the list, then watch how the algorithm would check the middle element of the list, narrow down the search space, and finally finding the target value. 15 16**Demo Screenshot:**17 18Homepage: 19 2021 22Successful Search (Target Found):23 2425 26Unsuccessful Search (Target Not Found):27 2829 30Unsorted List:31 3233 34Invalid Input Error:35 3637 38 39**Problem Breakdown & Computational Thinking:**40 41Binary Search is a fast and efficient way to look for a value in a sorted list. Its best-case time is O(1) and its average and worst case is O(log n) because the algorithm keeps cutting the list in half. I chose this algorithm because many students learn the steps, but it can still be hard to picture how the search range gets smaller each time. With this project, users can actually see the process happen step by step, which makes the algorithm easier to understand. Below is the computational thinking breakdown I used to design this app.42 43**1. Decomposition**44 45The Binary Search algorithm is broken into the following steps:46- Convert the user input into a list of integers 47- Make sure the list is sorted48- Set the left and right pointers49- While left <= right:50 - Compute Mid51 - Compare list[mid] with target52 - Store each step for the visualization53 - If list[mid] < target -> search the right half54 - If list[mid] > target -> search the left half 55- Return the index of the target value or "not found"56- Display all the steps with a visual interface57 58**2. Pattern Recognition**59 60Binary Search always:61- Looks for the middle element of the list 62- Eliminates half of the list every step63- Moves to the left or to the right based on comparisons64 65**3. Abstraction**66 67The visualization shows:68- The sorted list given69- The current middle, left, and right positions70- Step by step narrowing of the list71- Middle element being compared72- Total number of comparisons73 74The visualization hides:75- The usage of integer division76- Memory addresses77- Details about the internal pointer 78 79**4. Algorithm Design**80 81Flowchart:82 8384 85Input -> Processing -> Output Flow:86- Input (via GUI)87 - Text field: A list of integers separated by commas88 - Text field: The target integer to find 89 90- Processing:91 - Execution of the binary search algorithm92 - Count each comparisons93 - Track each step with a visual representation94 95- Output (via GUI)96 - The final result (found at index __ / not found) 97 - Visual indicators that shows the search progress 98 - Text that shows step by step process99 100**Usage of HTML in code**101 102- In my code, I used a little bit of HTML so I could show the binary search steps using colored boxes. Python by itself can’t create these visual boxes inside a Gradio app. Gradio is great for text and images, but it doesn’t let you style each number in a list. By adding small HTML sections, I was able to make the boxes change color at each step. This makes it easy for users to see which part of the list is being searched, which number is being checked, and which numbers have been removed from the search.103 104**Hugging Face Link**105 106- https://huggingface.co/spaces/spnch/Binary_Code_Visualization107 108**Steps To Run**109- Install Python (3.10+ recommended)110- Install Gradio: pip istall gradio111- Download Project Files112- Open a terminal in the project folder113- Run: python app.py114- Your browser will automatically open the application115 116 117**Author & Acknowledgements**118 119- Author: Henrique Silverio Sponchiado120- Student ID: 20530321121- Course: CISC 121122- Institution: Queen's University123- Date: November 2025124