I was making my own Bounding Box editor in gradio and succeeded to make some with written JS and HTML code using canvas, but now i need to pass an information from JS where boxes are drawn and saved to gr.Dataframe, how do i do it ?

import gradio as gr

js_script = """
    const values = [
    {
        "x_min": 115,
        "y_min": 24,
        "x_max": 329,
        "y_max": 61
    },
    {
        "x_min": 51,
        "y_min": 60,
        "x_max": 363,
        "y_max": 105
    },
    {
        "x_min": 120,
        "y_min": 107,
        "x_max": 277,
        "y_max": 135
    }
];
"""

with gr.Blocks(js=js_script) as demo:
    bounding_box_editor = gr.HTML()
    boxes_list = gr.Dataframe(headers=["x_min", "y_min", "x_max", "y_max"], datatype=["number", "number", "number", "number"], interactive=False, col_count=(4, 'fixed'))
        
demo.launch(share=False)

P.S. If there is already a solution to a good bounding box drawer and editor (with drawing, deleting, resizing options) – I would appreciate a link