<!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
import numpy as np
import PIL
import trimesh
from transformers_js import import_transformers_js, as_url
transformers = await import_transformers_js()
pipeline = transformers.pipeline
depth_estimator = await pipeline('depth-estimation', 'Xenova/depth-anything-small-hf');
def depthmap_to_glb_trimesh(depth_map, rgb_image, file_path):
assert depth_map.shape[:2] == rgb_image.shape[:2], "Depth map and RGB image must have the same dimensions"
# Generate vertices and faces
vertices = []
colors = []
faces = []
height, width = depth_map.shape
for y in range(height):
for x in range(width):
z = depth_map[y, x]
vertices.append([x, y, z])
colors.append(rgb_image[y, x])
# Create faces (2 triangles per pixel, except for edges)
for y in range(height - 1):
for x in range(width - 1):
top_left = y * width + x
top_right = top_left + 1
bottom_left = top_left + width
bottom_right = bottom_left + 1
faces.append([top_left, bottom_left, top_right])
faces.append([top_right, bottom_left, bottom_right])
# Convert to numpy arrays
vertices = np.array(vertices, dtype=np.float64)
colors = np.array(colors, dtype=np.uint8)
faces = np.array(faces, dtype=np.int32)
mesh = trimesh.Trimesh(vertices=vertices, faces=faces, vertex_colors=colors, process=False)
# Export to GLB
mesh.export(file_path, file_type='glb')
def invert_depth(depth_map):
max_depth = np.max(depth_map)
return max_depth - depth_map
def invert_xy(map):
return map[::-1, ::-1]
async def estimate(image_path, depth_scale):
image = PIL.Image.open(image_path)
image.thumbnail((384, 384)) # Resize the image keeping the aspect ratio
predictions = await depth_estimator(as_url(image_path))
depth_image = predictions["depth"].to_pil()
tensor = predictions["predicted_depth"]
tensor_data = {
"dims": tensor.dims,
"type": tensor.type,
"size": tensor.size,
}
# Construct the 3D model from the depth map and the RGB image
depth = predictions["predicted_depth"].to_numpy()
depth = invert_depth(depth)
depth = invert_xy(depth)
depth = depth * depth_scale
# The model outputs the depth map in a different size than the input image.
# So we resize the depth map to match the original image size.
depth = np.array(PIL.Image.fromarray(depth).resize(image.size))
image_array = np.asarray(image)
image_array = invert_xy(image_array)
glb_file_path = "output.glb"
depthmap_to_glb_trimesh(depth, image_array, glb_file_path)
return depth_image, glb_file_path, tensor_data
demo = gr.Interface(
fn=estimate,
inputs=[
gr.Image(type="filepath"),
gr.Slider(minimum=1, maximum=100, value=10, label="Depth Scale")
],
outputs=[
gr.Image(label="Depth Image"),
gr.Model3D(label="3D Model"),
gr.JSON(label="Tensor"),
],
examples=[
["bread_small.png"],
["cats.jpg"],
]
)
demo.launch()
</gradio-file>
<gradio-file name="bread_small.png" url="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/bread_small.png" />
<gradio-file name="cats.jpg" url="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/cats.jpg" />
<gradio-requirements>
transformers_js_py
trimesh
</gradio-requirements>
</gradio-lite>
</body>
</html>