<!DOCTYPE html>
<html>
<head>
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
</head>
<body>
<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(image):
result = await pipe(as_url(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 = 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>
</body>
</html>