Update app.py

app.py

@@ -1,92 +1,100 @@
 # ============================================================
-# 🔍 Binary Search Game (Interactive Gradio App)
+# 🔍 Binary Search Game — Step-by-Step Interactive Gradio App
 # ============================================================
 # Author: Your Name
 # Course: CISC-121 (Intro to Computing Science)
 # Description:
-#   This app randomly generates a sorted list of numbers and
-#   performs binary search on it based on the user's guess.
-#   It shows each step of the search in the UI.
+#   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.
 # ============================================================
 
 import random
 import gradio as gr
 
 # ------------------------------------------------------------
-# Binary Search Function
+# Binary Search (returns list + steps)
 # ------------------------------------------------------------
-def binary_search_steps(arr, target):
+def binary_search_visual(user_number):
+    try:
+        target = int(user_number)
+    except ValueError:
+        return "⚠️ Please enter a valid integer.", [], []
+
+    # 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
 
-    steps.append(f"List: {arr}")
-    steps.append(f"Searching for: {target}\n")
-
     while low <= high:
         mid = (low + high) // 2
-        steps.append(f"🔹 Checking middle index {mid} (value {arr[mid]})")
+        steps.append(f"Checking middle index {mid} → value {arr[mid]}")
 
         if arr[mid] == target:
-            steps.append(f"✅ Found {target} at position {mid}!")
-            return "\n".join(steps)
-
+            steps.append(f"✅ Found {target} at index {mid}")
+            break
         elif arr[mid] < target:
-            steps.append(f"{arr[mid]} is less than {target} → searching right half")
+            steps.append(f"{arr[mid]} is smaller → searching right half")
             low = mid + 1
-
         else:
-            steps.append(f"{arr[mid]} is greater than {target} → searching left half")
+            steps.append(f"{arr[mid]} is larger → searching left half")
             high = mid - 1
 
-    steps.append("❌ Not found. Try again!")
-    return "\n".join(steps)
-
-
-# ------------------------------------------------------------
-# Function to handle user interaction
-# ------------------------------------------------------------
-def play_binary_search(user_number):
-    try:
-        user_number = int(user_number)
-    except ValueError:
-        return "⚠️ Please enter a valid number."
+    if not any("✅" in s for s in steps):
+        steps.append("❌ Not found. Try again!")
 
-    # Generate random sorted list of numbers (unique)
-    arr = sorted(random.sample(range(1, 50), 10))
+    # 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=""))
 
-    result = binary_search_steps(arr, user_number)
-    return result
+    return list_display, *step_texts
 
 
 # ------------------------------------------------------------
-# Gradio Interface
+# Gradio Interface Layout
 # ------------------------------------------------------------
 with gr.Blocks(title="Binary Search Game") as demo:
     gr.Markdown(
         """
-        # 🎯 Binary Search Game  
-        The computer will randomly generate a sorted list of numbers (1–50).  
-        Try guessing a number (default: 1) and see how **binary search** works step by step!  
+        # 🎯 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.  
         """
     )
 
-    with gr.Row():
-        user_number = gr.Number(label="Enter a number to search (1–50)", value=1, precision=0)
-    output_box = gr.Textbox(label="Search Steps", lines=12, interactive=False)
-
+    # Input section
+    user_number = gr.Number(label="Enter a number to search (1–50)", value=1, precision=0)
     run_button = gr.Button("Run Binary Search 🔎")
-    run_button.click(play_binary_search, inputs=user_number, outputs=output_box)
+
+    # Output: show list in one box
+    list_box = gr.Textbox(label="Generated Sorted List", lines=2, interactive=False)
+
+    # Create separate boxes for each step
+    gr.Markdown("### 🔹 Search Steps:")
+    step_boxes = [gr.Textbox(label=f"Step {i+1}", lines=1, interactive=False) for i in range(8)]
+
+    # Click event
+    run_button.click(
+        fn=binary_search_visual,
+        inputs=user_number,
+        outputs=[list_box, *step_boxes]
+    )
 
     gr.Markdown(
         """
         ---
-        **How Binary Search Works:**  
-        1. Start with a sorted list.  
-        2. Compare your number to the middle element.  
-        3. If it's smaller, search the left half; if larger, search the right.  
-        4. Continue halving the range until the number is found or the list is empty.  
+        **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.  
         """
     )
 
+# Run app
 if __name__ == "__main__":
     demo.launch()