I am willing to make a bounding box editor implementation in gradio by creating html and js by myself (where user can move bboxes, scale and draw new ones). But i can’t find a way to load an image to canvas. I would appreciate any kind of help
The best thing i’ve accomplished so far is loading an image to an image html element:
import gradio as gr
import numpy as np
import base64
from PIL import Image
from io import BytesIO
def image_to_base64(img):
buffered = BytesIO()
img.save(buffered, format="PNG")
img_str = base64.b64encode(buffered.getvalue()).decode("utf-8")
return img_str
def image_uploaded(img):
img_pil = Image.fromarray(img)
img_str = image_to_base64(img_pil)
# HTML content with a canvas element
html_content = f"""
<html lang="en">
<body>
<img src="data:image/png;base64,{img_str}" alt="">
<canvas id="canvas"></canvas>
</body>
</html>
"""
return img, gr.HTML(html_content)
with gr.Blocks(js=None) as demo:
uploaded_image = gr.Image(type="numpy", show_label=False, interactive=True, show_download_button=False)
original_image = gr.Image(type="numpy", interactive=False, show_label=False, show_download_button=False)
bounding_box_editor = gr.HTML()
uploaded_image.upload(image_uploaded, inputs=uploaded_image, outputs=[original_image, bounding_box_editor])
demo.launch(share=False)
P.S. If there are other implementations to that – i would be happy to see them (where user can move bboxes, scale and draw new ones)
What I need help with is the JavaScript part to actually draw the uploaded image onto the canvas. Any guidance or examples would be greatly appreciated.