Added keyboard as input.

app.py

@@ -1,43 +1,44 @@
 import gradio as gr
 from PIL import Image, ImageDraw
 
-# Initial game state
 player_pos = [50, 50]
 canvas_size = (200, 200)
 step_size = 10
 
-def update_frame(action):
-    global player_pos
+def update_frame(action, prev_pos):
+    x, y = prev_pos
+    if action == "w": y -= step_size
+    elif action == "s": y += step_size
+    elif action == "a": x -= step_size
+    elif action == "d": x += step_size
+    x = max(0, min(canvas_size[0], x))
+    y = max(0, min(canvas_size[1], y))
+    img = Image.new("RGB", canvas_size, color="white")
+    draw = ImageDraw.Draw(img)
+    draw.ellipse((x-5, y-5, x+5, y+5), fill="blue")
+    return img, [x, y]
 
-    # Move player based on action
-    if action == "w":
-        player_pos[1] -= step_size
-    elif action == "s":
-        player_pos[1] += step_size
-    elif action == "a":
-        player_pos[0] -= step_size
-    elif action == "d":
-        player_pos[0] += step_size
+with gr.Blocks() as demo:
+    state = gr.State([50, 50])
+    img_output = gr.Image(type="pil", interactive=False)
+    action_box = gr.Textbox(label="Press keys (WASD)", interactive=False)
 
-    # Keep player inside bounds
-    player_pos[0] = max(0, min(canvas_size[0], player_pos[0]))
-    player_pos[1] = max(0, min(canvas_size[1], player_pos[1]))
+    demo.load(update_frame, ["", state], [img_output, state])  # initial frame
 
-    # Draw frame
-    img = Image.new("RGB", canvas_size, color="white")
-    draw = ImageDraw.Draw(img)
-    draw.ellipse((player_pos[0]-5, player_pos[1]-5,
-                  player_pos[0]+5, player_pos[1]+5),
-                 fill="blue")
-    return img
+    custom_js = """
+    <script>
+    document.addEventListener('keydown', function(event) {
+        let key = event.key.toLowerCase();
+        if (["w","a","s","d"].includes(key)) {
+            document.querySelector('textarea[aria-label="Press keys (WASD)"]').value = key;
+            document.querySelector('button').click();
+        }
+    });
+    </script>
+    """
 
-iface = gr.Interface(
-    fn=update_frame,
-    inputs=gr.Dropdown(["w", "a", "s", "d"], label="Action"),
-    outputs=gr.Image(type="pil"),
-    live=False,
-    title="Simple WASD Game",
-    description="Move the blue dot using WASD!"
-)
+    html_box = gr.HTML(custom_js)
+    action_button = gr.Button("Update")  # hidden trigger
+    action_button.click(update_frame, [action_box, state], [img_output, state])
 
-iface.launch()
+demo.launch()