OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to Load an Image onto a Canvas in Gradio with Custom HTML and JavaScript?

  • Thread starter Thread starter sleshworld
  • Start date Start date
S

sleshworld

Guest
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:

Code:
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.
<p>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</p>
<p>The best thing i've accomplished so far is loading an image to an image html element:</p>
<pre><code>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)
</code></pre>
<p>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)</p>
<p>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.</p>
Continue reading...
 

Latest posts

I
Replies
0
Views
1
Isaac P. Liu
I
U
Replies
0
Views
1
user3658366
U
G
Replies
0
Views
1
Giampaolo Levorato
G
M
Replies
0
Views
1
Marcelo Rodrigo Nascimento
M
Top