Rewrite demo using Gradio and video components

.gitignore

@@ -0,0 +1 @@
+__pycache__

README.md

@@ -3,8 +3,8 @@ title: Hand & Finger Tracking
 emoji: 🙌  
 colorFrom: pink
 colorTo: purple
-sdk: streamlit
-sdk_version: 1.10.0
+sdk: gradio
+sdk_version: 3.0.20
 app_file: app.py
 pinned: false
 ---

app.py

@@ -1,9 +1,9 @@
-import streamlit as st
-from streamlit_webrtc import webrtc_streamer
-import av
+import gradio as gr
+from matplotlib.pyplot import draw
 import mediapipe as mp
 import numpy as np
-from PIL import Image
+import tempfile
+import mediapy as media
 
 mp_hands = mp.solutions.hands
 mp_hands_connections = mp.solutions.hands_connections
@@ -20,7 +20,7 @@ connections = {
     'HAND_PINKY_FINGER_CONNECTIONS': mp_hands_connections.HAND_PINKY_FINGER_CONNECTIONS,
 }
 
-def process_hands(img):
+def process_hands(img, selected_connection, draw_background):
   results = hands.process(img)
   output_img = img if draw_background else np.zeros_like(img)  
   if results.multi_hand_landmarks:
@@ -28,21 +28,48 @@ def process_hands(img):
       mp_draw.draw_landmarks(output_img, hand_landmarks, connections[selected_connection])    
   return output_img
 
-st.title('Hand & Finger Tracking')
-st.markdown("This is a demo of hand and finger tracking using [Google's MediaPipe](https://google.github.io/mediapipe/solutions/hands.html).")
 
-col1, col2 = st.columns(2)
+def process_video(video_path, selected_connection, draw_background):
+  with tempfile.NamedTemporaryFile() as f:
+    out_path = f"{f.name}.{video_path.split('.')[-1]}"
+    with media.VideoReader(video_path) as r:
+      with media.VideoWriter(
+          out_path, shape=r.shape, fps=r.fps, bps=r.bps) as w:
+        for image in r:
+          w.add_image(process_hands(image, selected_connection, draw_background))
+    return out_path
 
-with col1:
-  picture = st.camera_input("Take a picture with one or both hands in the shot")
-  draw_background = st.checkbox("Draw background", value=True)
-  selected_connection = st.selectbox("Select connections to draw", list(connections.keys()))
 
-with col2:
-  if picture is not None:
-    img = Image.open(picture)
-    img_array = np.array(img)
-    processed_img = process_hands(img_array)
-    st.image(processed_img)
+demo = gr.Blocks()
 
-st.image('https://visitor-badge.glitch.me/badge?page_id=kristyc.mediapipe-hands')
+with demo:
+  gr.Markdown(
+    """
+    # Hand & Finger Tracking
+    This is a demo of hand and finger tracking using [Google's MediaPipe](https://google.github.io/mediapipe/solutions/hands.html).
+    """)
+
+  with gr.Column():  
+    draw_background = gr.Checkbox(value=True, label="Draw background?")
+    connection_keys = list(connections.keys())
+    selected_connection = gr.Dropdown(
+      label="Select connections to draw", 
+      choices=connection_keys,
+      value=connection_keys[0],
+      )
+    with gr.Tabs():
+      with gr.TabItem(label="Record a video"):
+        recorded_video = gr.Video(source="webcam", format="mp4")
+        submit_recorded_video = gr.Button(value="Process Video")
+      with gr.TabItem(label="Upload a video"):
+        uploaded_video = gr.Video(format="mp4")
+        submit_uploaded_video = gr.Button(value="Process Video")  
+
+  with gr.Column():
+    processed_video = gr.Video()
+
+  gr.Markdown('<img id="visitor-badge" alt="visitor badge" src="https://visitor-badge.glitch.me/badge?page_id=kristyc.mediapipe-hands" />')
+  submit_recorded_video.click(fn=process_video, inputs=[recorded_video, selected_connection, draw_background], outputs=[processed_video])
+  submit_uploaded_video.click(fn=process_video, inputs=[recorded_video, selected_connection, draw_background], outputs=[processed_video])
+
+demo.launch()

requirements.txt

@@ -1,3 +1,4 @@
 mediapipe==0.8.10.1
-streamlit-webrtc==0.41.0
-opencv-contrib-python==4.6.0.66
+gradio==3.0.20
+opencv-contrib-python==4.6.0.66
+mediapy=1.0.3