Update app.py

app.py

@@ -15,11 +15,10 @@ def paint(frame: np.ndarray) -> np.ndarray:
     global canvas
     h, w, _ = frame.shape
 
-    # Initialize canvas once
     if canvas is None:
         canvas = np.zeros((h, w, 3), dtype=np.uint8)
 
-    # MediaPipe expects RGB
+    # Convert to RGB for MediaPipe
     rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
     results = hands.process(rgb)
     if results.multi_hand_landmarks:
@@ -30,15 +29,18 @@ def paint(frame: np.ndarray) -> np.ndarray:
     # Blend live frame and canvas
     return cv2.addWeighted(frame, 0.5, canvas, 0.5, 0)
 
-# --- Gradio interface using gr.components ---
-demo = gr.Interface(
-    fn=paint,
-    inputs=gr.components.Image(source="webcam", type="numpy"),
-    outputs=gr.components.Image(type="numpy"),
-    live=True,
-    title="🖌️ Virtual Painter",
-    description="Move your index finger in front of the camera to draw!"
-)
-
-if __name__ == "__main__":
-    demo.launch()
+def clear_canvas():
+    global canvas
+    canvas = None
+
+with gr.Blocks() as demo:
+    gr.Markdown("## 🖌️ Virtual Painter\nMove your index finger in front of the camera to draw!")
+    webcam = gr.Webcam(type="numpy", streaming=True)
+    output = gr.Image(type="numpy")
+    clear_btn = gr.Button("Clear Canvas")
+
+    # Stream webcam → paint() → output
+    webcam.stream(fn=paint, inputs=webcam, outputs=output)
+    clear_btn.click(fn=clear_canvas, inputs=None, outputs=None)
+
+demo.launch()