Updated project with React framework.

app.py

@@ -1,44 +1,72 @@
-import gradio as gr
-from PIL import Image, ImageDraw
 
-player_pos = [50, 50]
-canvas_size = (200, 200)
-step_size = 10
+# app.py
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect
+from fastapi.responses import HTMLResponse
+from PIL import Image, ImageDraw
+import base64
+import io
+import asyncio
 
-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]
+app = FastAPI()
 
-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)
+# Simple in-memory game state per-connection
+class GameState:
+    def __init__(self):
+        self.player_pos = [50, 50]
+        self.canvas_size = (200, 200)
+        self.step = 10
 
-    demo.load(update_frame, ["", state], [img_output, state])  # initial frame
+    def apply_action(self, action):
+        x, y = self.player_pos
+        if action == 'w': y -= self.step
+        elif action == 's': y += self.step
+        elif action == 'a': x -= self.step
+        elif action == 'd': x += self.step
+        x = max(0, min(self.canvas_size[0], x))
+        y = max(0, min(self.canvas_size[1], y))
+        self.player_pos = [x, y]
 
-    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>
-    """
+    def render_frame_b64(self):
+        img = Image.new('RGB', self.canvas_size, (255, 255, 255))
+        draw = ImageDraw.Draw(img)
+        x, y = self.player_pos
+        r = 6
+        draw.ellipse((x-r, y-r, x+r, y+r), fill=(40, 120, 255))
+        # scale up to 400x400 for client
+        img = img.resize((400, 400), Image.NEAREST)
+        buff = io.BytesIO()
+        img.save(buff, format='PNG')
+        b64 = base64.b64encode(buff.getvalue()).decode('ascii')
+        return b64
 
-    html_box = gr.HTML(custom_js)
-    action_button = gr.Button("Update")  # hidden trigger
-    action_button.click(update_frame, [action_box, state], [img_output, state])
+@app.websocket('/ws')
+async def websocket_endpoint(ws: WebSocket):
+    await ws.accept()
+    state = GameState()
+    try:
+        # send initial frame
+        await ws.send_json({ 'type': 'frame', 'image_b64': state.render_frame_b64(), 'player_pos': state.player_pos })
+        while True:
+            data = await ws.receive_text()
+            msg = None
+            try:
+                import json
+                msg = json.loads(data)
+            except Exception:
+                continue
+            if not isinstance(msg, dict):
+                continue
+            mtype = msg.get('type')
+            if mtype == 'action':
+                action = msg.get('action')
+                state.apply_action(action)
+                # return next frame
+                await ws.send_json({ 'type': 'frame', 'image_b64': state.render_frame_b64(), 'player_pos': state.player_pos })
+            elif mtype == 'reset':
+                state = GameState()
+                await ws.send_json({ 'type': 'frame', 'image_b64': state.render_frame_b64(), 'player_pos': state.player_pos })
+            elif mtype == 'noop':
+                await ws.send_json({ 'type': 'status', 'text': 'noop-ok' })
+    except WebSocketDisconnect:
+        return
 
-demo.launch()

frontend/app.jsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useRef, useState } from "react";
+
+
+export default function App() {
+const canvasRef = useRef(null);
+const wsRef = useRef(null);
+const [connected, setConnected] = useState(false);
+const [playerPos, setPlayerPos] = useState([50, 50]);
+const [status, setStatus] = useState("Disconnected");
+
+
+useEffect(() => {
+// Connect to backend WebSocket. When deploying to HF Spaces,
+// use the absolute URL or relative path ("/ws").
+const proto = window.location.protocol === "https:" ? "wss" : "ws";
+const host = window.location.host; // same host as Space
+const wsUrl = `${proto}://${host}/ws`;
+
+
+const ws = new WebSocket(wsUrl);
+wsRef.current = ws;
+
+
+ws.addEventListener("open", () => {
+setConnected(true);
+setStatus("Connected");
+// ask for initial frame
+ws.send(JSON.stringify({ type: "noop" }));
+});
+
+
+ws.addEventListener("message", (ev) => {
+const msg = JSON.parse(ev.data);
+if (msg.type === "frame") {
+drawFrame(msg.image_b64);
+if (Array.isArray(msg.player_pos)) setPlayerPos(msg.player_pos);
+} else if (msg.type === "status") {
+setStatus(msg.text);
+}
+});
+
+
+ws.addEventListener("close", () => {
+setConnected(false);
+setStatus("Disconnected");
+});
+
+
+return () => {
+ws.close();
+};
+}, []);
+
+
+// draw base64 png on canvas
+function drawFrame(image_b64) {
+const canvas = canvasRef.current;
+if (!canvas) return;
+const ctx = canvas.getContext("2d");
+const img = new Image();
+img.onload = () => {
+ctx.clearRect(0, 0, canvas.width, canvas.height);
+ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+};
+img.src = `data:image/png;base64,${image_b64}`;
+}
+
+
+// send action down the websocket
+function sendAction(action) {
+if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
+wsRef.current.send(JSON.stringify({ type: "action", action }));
+}
+
+
+}

requirements.txt

@@ -1,2 +1,3 @@
-gradio
-Pillow
+fastapi
+uvicorn[standard]
+Pillow

start.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+# Run backend on port 7860 (Hugging Face Spaces exposes this port)
+uvicorn app:app --host 0.0.0.0 --port 7860