Skip to content

Latest commit

 

History

History
 
 

segment-anything

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
.eslintrc.js
.eslintrc.js
 
 
EgyptianCat.png
EgyptianCat.png
 
 
README.md
README.md
 
 
index.html
index.html
 
 
index.js
index.js
 
 
package.json
package.json
 
 
webpack.config.js
webpack.config.js
 
 

README.md

Segment-Anything: Browser-Based Image Segmentation with WebGPU and ONNX Runtime Web

This repository contains an example of running Segment-Anything, an encoder/decoder model for image segmentation, in a browser using ONNX Runtime Web with WebGPU.

You can try out the live demo here.

Model Overview

Segment-Anything creates embeddings for an image using an encoder. These embeddings are then used by the decoder to create and update the segmentation mask. The decoder can run in ONNX Runtime Web using WebAssembly with latencies at ~200ms.

The encoder is more compute-intensive, taking ~45sec in WebAssembly, which is not practical. However, by using WebGPU, we can speed up the encoder, making it feasible to run it inside the browser, even on an integrated GPU.

Getting Started

Prerequisites

Ensure that you have Node.js installed on your machine.

Installation

  1. Install the required dependencies:
npm install

Building the Project

  1. Bundle the code using webpack:
npm run build

This command generates the bundle file ./dist/index.js.

The ONNX Model

The model used in this project is hosted on Hugging Face. It was created using samexporter.

Running the Project

Start a web server to serve the current folder at http://localhost:8888/. To start the server, run:

npm run dev