Update app.py

app.py

@@ -4,28 +4,28 @@
 # Author: Your Name
 # Course: CISC-121 (Intro to Computing Science)
 # Description:
-#   This app generates a random sorted list of numbers and lets
-#   the user guess a target value. Binary Search runs step-by-step,
-#   showing the list separately from each search step.
+#   Generates a random sorted list and performs binary search
+#   step-by-step, showing each comparison in separate boxes.
 # ============================================================
 
 import random
 import gradio as gr
 
 # ------------------------------------------------------------
-# Binary Search (returns list + steps)
+# Binary Search Function
 # ------------------------------------------------------------
 def binary_search_visual(user_number):
     try:
         target = int(user_number)
     except ValueError:
-        return "⚠️ Please enter a valid integer.", [], []
+        return "⚠️ Please enter a valid integer.", *["" for _ in range(8)]
 
     # Generate a random sorted list of 10 unique numbers between 1–50
     arr = sorted(random.sample(range(1, 50), 10))
 
     steps = []
     low, high = 0, len(arr) - 1
+    found = False
 
     while low <= high:
         mid = (low + high) // 2
@@ -33,6 +33,7 @@ def binary_search_visual(user_number):
 
         if arr[mid] == target:
             steps.append(f"✅ Found {target} at index {mid}")
+            found = True
             break
         elif arr[mid] < target:
             steps.append(f"{arr[mid]} is smaller → searching right half")
@@ -41,46 +42,44 @@ def binary_search_visual(user_number):
             steps.append(f"{arr[mid]} is larger → searching left half")
             high = mid - 1
 
-    if not any("✅" in s for s in steps):
+    if not found:
         steps.append("❌ Not found. Try again!")
 
-    # Return values for display
-    list_display = f"Random Sorted List:\n{arr}"
-    step_texts = [gr.Textbox.update(value=step) for step in steps]
-    # Fill remaining boxes with blanks to keep layout consistent
-    while len(step_texts) < 8:
-        step_texts.append(gr.Textbox.update(value=""))
+    # Pad steps so each step textbox is filled consistently
+    while len(steps) < 8:
+        steps.append("")
 
-    return list_display, *step_texts
+    # Return: one string for list, then 8 step strings
+    return f"Random Sorted List:\n{arr}", *steps[:8]
 
 
 # ------------------------------------------------------------
-# Gradio Interface Layout
+# Gradio Interface
 # ------------------------------------------------------------
 with gr.Blocks(title="Binary Search Game") as demo:
     gr.Markdown(
         """
         # 🎯 Binary Search Game (Step-by-Step)  
-        This app generates a **random sorted list (1–50)** each time.  
-        Enter a number and watch how **Binary Search** checks values step-by-step.  
+        Each time you click **Run**, a new sorted list of 10 random numbers (1–50) will be generated.  
+        Enter a number and see how **Binary Search** checks values step-by-step!
         """
     )
 
-    # Input section
+    # Input
     user_number = gr.Number(label="Enter a number to search (1–50)", value=1, precision=0)
     run_button = gr.Button("Run Binary Search 🔎")
 
-    # Output: show list in one box
+    # Output: list display
     list_box = gr.Textbox(label="Generated Sorted List", lines=2, interactive=False)
 
-    # Create separate boxes for each step
+    # Step outputs
     gr.Markdown("### 🔹 Search Steps:")
     step_boxes = [gr.Textbox(label=f"Step {i+1}", lines=1, interactive=False) for i in range(8)]
 
-    # Click event
+    # Link logic
     run_button.click(
         fn=binary_search_visual,
-        inputs=user_number,
+        inputs=[user_number],
         outputs=[list_box, *step_boxes]
     )
 
@@ -88,13 +87,13 @@ with gr.Blocks(title="Binary Search Game") as demo:
         """
         ---
         **How it works:**  
-        1. Binary Search divides the list in half each time.  
-        2. Compares the middle element to your target.  
-        3. Moves left or right based on the result.  
-        4. Repeats until it finds your number or the range is empty.  
+        1. Binary Search divides the sorted list into halves.  
+        2. It compares your number with the middle value.  
+        3. If smaller → searches left half. If larger → searches right half.  
+        4. Repeats until the number is found or range is empty.
         """
     )
 
-# Run app
+# Run the app locally or deploy to Hugging Face
 if __name__ == "__main__":
     demo.launch()