|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>Gradio-Lite: Serverless Gradio Running Entirely in Your Browser</title> |
|
<meta name="description" content="Gradio-Lite: Serverless Gradio Running Entirely in Your Browser"> |
|
|
|
<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" /> |
|
|
|
<style> |
|
html, body { |
|
margin: 0; |
|
padding: 0; |
|
height: 100%; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<gradio-lite> |
|
<gradio-file name="app.py" entrypoint> |
|
import gradio as gr |
|
from transformers_js_py import pipeline |
|
from filters import convert |
|
|
|
pipe = await pipeline('object-detection', 'Xenova/detr-resnet-50') |
|
|
|
async def fn(image): |
|
result = await pipe(image) |
|
return result |
|
|
|
#demo = gr.Interface.from_pipeline(pipe) |
|
|
|
async def predict(image): |
|
result = await pipe(image) |
|
print(result) |
|
result = convert(result) |
|
print(result) |
|
return image, result |
|
|
|
demo = gr.Interface( |
|
fn=predict, |
|
inputs=gr.Image(type='pil'), |
|
outputs=gr.AnnotatedImage(), |
|
title='On-Device Object-Detection with Gradio-Lite & Transformers.js' |
|
) |
|
|
|
demo.launch() |
|
</gradio-file> |
|
|
|
<gradio-file name="filters.py"> |
|
def convert(input_data): |
|
# Initialize the output list |
|
result_labels = [] |
|
|
|
# Iterate over each item in the input data |
|
for item in input_data: |
|
# Extract the label |
|
label = item['label'] |
|
|
|
# Extract the bounding box coordinates |
|
xmin = item['box']['xmin'] |
|
ymin = item['box']['ymin'] |
|
xmax = item['box']['xmax'] |
|
ymax = item['box']['ymax'] |
|
|
|
# Convert coordinates into the required output format (list of coordinates) |
|
coordinates = [xmin, ymin, xmax, ymax] |
|
|
|
# Append the tuple of coordinates and label to the output list |
|
result_labels.append((coordinates, label)) |
|
|
|
# Return the output list |
|
return result_labels |
|
|
|
</gradio-file> |
|
|
|
<gradio-requirements> |
|
# Same syntax as requirements.txt |
|
transformers-js-py |
|
</gradio-requirements> |
|
</gradio-lite> |
|
</body> |
|
</html> |
