| <!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> |
|
|
