Update app.py

app.py

@@ -1,34 +1,44 @@
 # ============================================================
-# 🔍 Binary Search Game — Step-by-Step Interactive Gradio App
+# 🔍 Binary Search Game — Two-Stage (Generate → Search)
 # ============================================================
 # Author: Your Name
-# Course: CISC-121 (Intro to Computing Science)
+# Course: CISC-121
 # Description:
-#   Generates a random sorted list and performs binary search
-#   step-by-step, showing each comparison and final result.
+#   1) Click "Generate List" to create a random sorted list.
+#   2) Enter a number and click "Run Binary Search".
+#   UI shows the list, step-by-step decisions, and final result.
 # ============================================================
 
 import random
 import gradio as gr
 
-
-# ------------------------------------------------------------
-# Binary Search Logic (returns list, steps, and final result)
-# ------------------------------------------------------------
-def binary_search_visual(user_number):
+MAX_STEPS = 8  # number of step boxes to show
+
+# -------------------------
+# Stage 1: Generate the list
+# -------------------------
+def generate_list():
+    arr = sorted(random.sample(range(1, 50), 10))   # 10 unique ints in [1..49]
+    display = f"Random Sorted List:\n{arr}"
+    return display, arr
+
+# -------------------------
+# Stage 2: Run the search
+# -------------------------
+def binary_search_on_state(user_number, arr_state):
+    # If user hasn't generated a list yet
+    if not arr_state:
+        list_msg = "⚠️ Please click 'Generate List' first."
+        # Return list warning, blank steps, and final result message
+        return list_msg, *["" for _ in range(MAX_STEPS)], "⚠️ No list to search."
+
+    # Validate input
     try:
         target = int(user_number)
-    except ValueError:
-        # Return blanks for all boxes if invalid input
-        return (
-            "⚠️ Please enter a valid integer.",
-            *["" for _ in range(8)],
-            "⚠️ Invalid input.",
-        )
-
-    # Generate a random sorted list of 10 unique numbers (1–50)
-    arr = sorted(random.sample(range(1, 50), 10))
+    except (TypeError, ValueError):
+        return f"Random Sorted List:\n{arr_state}", *["" for _ in range(MAX_STEPS)], "⚠️ Enter a valid integer."
 
+    arr = arr_state[:]  # copy for safety
     steps = []
     low, high = 0, len(arr) - 1
     found = False
@@ -36,7 +46,6 @@ def binary_search_visual(user_number):
     while low <= high:
         mid = (low + high) // 2
         steps.append(f"Checking middle index {mid} → value {arr[mid]}")
-
         if arr[mid] == target:
             steps.append(f"✅ Found {target} at index {mid}")
             found = True
@@ -49,64 +58,60 @@ def binary_search_visual(user_number):
             high = mid - 1
 
     if not found:
-        steps.append("❌ Number not found in the list.")
+        steps.append(f"❌ The number {target} was not found.")
 
-    # Pad to fill consistent 8 steps
-    while len(steps) < 8:
+    # Pad steps to fill UI boxes consistently
+    while len(steps) < MAX_STEPS:
         steps.append("")
 
-    # Create a clear summary message for the last box
-    final_message = (
-        f"✅ The number {target} was found!" if found else f"❌ The number {target} was not found."
-    )
+    final_msg = f"✅ The number {target} was found!" if found else f"❌ The number {target} was not found."
+    list_display = f"Random Sorted List:\n{arr}"
 
-    # Return list display, all 8 steps, and final message
-    return f"Random Sorted List:\n{arr}", *steps[:8], final_message
+    return list_display, *steps[:MAX_STEPS], final_msg
 
 
-# ------------------------------------------------------------
-# Gradio Interface
-# ------------------------------------------------------------
-with gr.Blocks(title="Binary Search Game") as demo:
+# -------------------------
+# UI
+# -------------------------
+with gr.Blocks(title="Binary Search Game — Two-Stage") as demo:
     gr.Markdown(
         """
-        # 🎯 Binary Search Game (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 watch **Binary Search** in action, step by step!
+        # 🎯 Binary Search Game — Two-Stage  
+        **Step 1:** Click **Generate List** to create a random sorted list (10 numbers in 1–49).  
+        **Step 2:** Enter a number and click **Run Binary Search** to see each step and the final result.
         """
     )
 
-    # Input
-    
-    #show the generated list
+    # App state to hold the generated list across button clicks
+    arr_state = gr.State([])
+
+    with gr.Row():
+        gen_btn = gr.Button("Generate List 🎲", variant="secondary")
+        user_number = gr.Number(label="Enter a number to search (1–49)", value=1, precision=0)
+        run_btn = gr.Button("Run Binary Search 🔎", variant="primary")
+
+    # List display
     list_box = gr.Textbox(label="Generated Sorted List", lines=2, interactive=False)
-    user_number = gr.Number(label="Enter a number to search (1–50)", value=1, precision=0)
-    run_button = gr.Button("Run Binary Search 🔎")
+
     # Step-by-step outputs
-    gr.Markdown("### 🔹 Search Steps:")
-    step_boxes = [gr.Textbox(label=f"Step {i+1}", lines=1, interactive=False) for i in range(8)]
+    gr.Markdown("### 🔹 Search Steps")
+    step_boxes = [gr.Textbox(label=f"Step {i+1}", lines=1, interactive=False) for i in range(MAX_STEPS)]
 
-    # Final result box
+    # Final result
     result_box = gr.Textbox(label="Final Result", lines=1, interactive=False)
 
-    # Button event linking
-    run_button.click(
-        fn=binary_search_visual,
-        inputs=[user_number],
-        outputs=[list_box, *step_boxes, result_box],
+    # Wire up events
+    gen_btn.click(
+        fn=generate_list,
+        inputs=[],
+        outputs=[list_box, arr_state],
     )
 
-    gr.Markdown(
-        """
-        ---
-        **How Binary Search Works:**  
-        1. The list must be sorted.  
-        2. Compare your target with the middle element.  
-        3. If smaller → search the left half. If larger → search the right.  
-        4. Repeat until the number is found or the range is empty.  
-        """
+    run_btn.click(
+        fn=binary_search_on_state,
+        inputs=[user_number, arr_state],
+        outputs=[list_box, *step_boxes, result_box],
     )
 
-# Run app locally or deploy to Hugging Face
 if __name__ == "__main__":
     demo.launch()