Lite: Support AnnotatedImage on Wasm

[whitphx]

Description

This PR makes gr.AnnotatedImage Wasm-compatible.

Closes: #6131

Samples

Object detection

<gradio-lite>
<gradio-requirements>
transformers_js_py
</gradio-requirements>

<gradio-file name="app.py" entrypoint>
from transformers_js import import_transformers_js, as_url
import gradio as gr

transformers = await import_transformers_js()
pipeline = transformers.pipeline
pipe = await pipeline('object-detection', "Xenova/yolos-tiny")

async def detect(input_image):
    result = await pipe(as_url(input_image))
    gradio_labels = [
        # List[Tuple[numpy.ndarray | Tuple[int, int, int, int], str]]
        (
            (
                int(item["box"]["xmin"]),
                int(item["box"]["ymin"]),
                int(item["box"]["xmax"]),
                int(item["box"]["ymax"]),
            ),
            item["label"],
        )
        for item in result
    ]
    annotated_image_data = input_image, gradio_labels
    return annotated_image_data, result

demo = gr.Interface(
    detect,
    gr.Image(type="filepath"),
    [
        gr.AnnotatedImage(),
        gr.JSON(),
    ]
)

demo.launch()
</gradio-file>

</gradio-lite>

The sample image is from https://vancouver.ca/streets-transportation/homer-street-upgrades.aspx

Segmentation

mkdir images
cd images
wget https://gradio-builds.s3.amazonaws.com/demo-files/base.png
wget https://gradio-builds.s3.amazonaws.com/demo-files/buildings.png
cd ..
python -m http.server

<gradio-lite>

<gradio-file name="base.png" url="/images/base.png" />
<gradio-file name="buildings.png" url="/images/buildings.png" />

<gradio-file name="app.py" entrypoint>
import gradio as gr
from PIL import Image
import numpy as np

base_image = Image.open("base.png")
building_image = Image.open("buildings.png")

# Create segmentation mask
building_image = np.asarray(building_image)[:, :, -1] > 0

with gr.Blocks() as demo:
    gr.AnnotatedImage(
        value=(base_image, [(building_image, "buildings")]),
        height=500,
    )

demo.launch()
</gradio-file>

</gradio-lite>

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
	Visual tests	all good!	Build review
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/060e06b4062e3a65d13a262a6f595b0ca874ec2a/gradio-4.12.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@060e06b4062e3a65d13a262a6f595b0ca874ec2a#subdirectory=client/python"

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/annotatedimage	minor
@gradio/image	minor
@gradio/video	minor
gradio	minor

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Lite: Support AnnotatedImage on Wasm

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[aliabid94]

LGTM

[whitphx]

Thanks!
Gradio-lite is now not working after v4 merge, so plz wait for fixing the problem before resolving the conflict.

[whitphx]

Current impl has the same problem as what #6398 (comment) referred to the Image component.
Will fix it with the same solution as well.

-> DONE: 1ce1f52

[aliabd]

Everything LGTM! Nice work @whitphx

This is good to merge :)