import rerun as rr
import rerun.blueprint as rrb
import numpy as np
import gradio as gr
import urllib


def html_template(rrd, width=950, height=712, app_url="https://app.rerun.io"):
    encoded_url = urllib.parse.quote(rrd)
    return f"""<iframe width="{width}" height="{height}" src="{app_url}?url={encoded_url}" frameborder="0" allowfullscreen=""></iframe>"""

def show_cube():
    rr.init("my data")

    positions = np.zeros((10, 3))
    positions[:,0] = np.linspace(-10,10,10)

    colors = np.zeros((10,3), dtype=np.uint8)
    colors[:,0] = np.linspace(0,255,10)

    rr.log("my_points", rr.Points3D(positions=positions, colors=colors, radii=0.5))

    blueprint = rrb.Spatial3DView(origin='my_points')

    rr.save("cube.rrd", default_blueprint=blueprint)
    
    return "cube.rrd"


with gr.Blocks() as demo:
    with gr.Row():
        button = gr.Button("Show Cube")
    with gr.Row():    
        rrd = gr.File()
    with gr.Row():    
        viewer = gr.HTML()

    button.click(show_cube, outputs=rrd)
    rrd.change(html_template, js="""(rrd) => { console.log(rrd.url); return rrd.url}""", inputs=[rrd], outputs=viewer, preprocess=False)

    
demo.launch()