Use the published gradio streaming component

app.py

@@ -1,13 +1,18 @@
-import rerun as rr
-import rerun.blueprint as rrb
 import numpy as np
-import gradio as gr
-import urllib
-from math import cos, sin
+from math import cos, sin, pi
 from collections import namedtuple
+import time
+
+import gradio as gr
+from gradio_rerun import Rerun
+
+import rerun as rr
+import rerun.blueprint as rrb
+
 
 ColorGrid = namedtuple("ColorGrid", ["positions", "colors"])
 
+
 def build_color_grid(x_count=10, y_count=10, z_count=10, twist=0):
     """
     Create a cube of points with colors.
@@ -52,36 +57,47 @@ def build_color_grid(x_count=10, y_count=10, z_count=10, twist=0):
     return ColorGrid(positions.T, colors.T.astype(np.uint8))
 
 
-def html_template(rrd, app_url="https://app.rerun.io"):
-    encoded_url = urllib.parse.quote(rrd)
-    return f"""<div style="width:100%; height:70vh;"><iframe style="width:100%; height:100%;" src="{app_url}?url={encoded_url}" frameborder="0" allowfullscreen=""></iframe></div>"""
-
-def show_cube(x, y, z):
-    rr.init("my data")
+@rr.thread_local_stream("rerun_example_cube")
+def show_cube(x, y, z, twist):
+    stream = rr.binary_stream()
 
-    cube = build_color_grid(int(x), int(y), int(z), twist=0)
-    rr.log("cube", rr.Points3D(cube.positions, colors=cube.colors, radii=0.5))
+    blueprint = rrb.Blueprint(
+        rrb.Spatial3DView(origin="cube"),
+        collapse_panels=True,
+    )
+    rr.send_blueprint(blueprint)
 
-    blueprint = rrb.Spatial3DView(origin='cube')
+    yield stream.read()
 
-    rr.save("cube.rrd", default_blueprint=blueprint)
-    
-    return "cube.rrd"
+    for step in range(twist):
+        rr.set_time_sequence("steps", step)
+        cube = build_color_grid(int(x), int(y), int(z), twist=pi * step / 180)
+        rr.log("cube", rr.Points3D(cube.positions, colors=cube.colors, radii=0.5))
+        yield stream.read()
+        time.sleep(0.01)
 
 
 with gr.Blocks() as demo:
     with gr.Row():
-        x_count = gr.Number(minimum=1, maximum=10, value=5, precision=0, label="X Count")
-        y_count = gr.Number(minimum=1, maximum=10, value=5, precision=0, label="Y Count")
-        z_count = gr.Number(minimum=1, maximum=10, value=5, precision=0, label="Z Count")
+        x_count = gr.Number(
+            minimum=1, maximum=20, value=10, precision=0, label="X Count"
+        )
+        y_count = gr.Number(
+            minimum=1, maximum=20, value=10, precision=0, label="Y Count"
+        )
+        z_count = gr.Number(
+            minimum=1, maximum=20, value=10, precision=0, label="Z Count"
+        )
+        twist_steps = gr.Number(
+            minimum=0, maximum=180, value=90, precision=0, label="Twist (degrees)"
+        )
         button = gr.Button("Show Cube")
-    with gr.Row():    
-        rrd = gr.File()
-    with gr.Row():    
-        viewer = gr.HTML()
+    with gr.Row():
+        viewer = Rerun(streaming=True)
 
-    button.click(show_cube, inputs=[x_count, y_count, z_count], outputs=rrd)
-    rrd.change(html_template, js="""(rrd) => { console.log(rrd.url); return rrd.url}""", inputs=[rrd], outputs=viewer, preprocess=False)
+    button.click(
+        show_cube, inputs=[x_count, y_count, z_count, twist_steps], outputs=viewer
+    )
 
-    
+demo.queue(default_concurrency_limit=10)
 demo.launch()

requirements.txt

@@ -1 +1,2 @@
-rerun-sdk==0.15.1
+rerun-sdk==0.16.1
+gradio_rerun==0.0.3