diff --git a/js/README.md b/js/README.md
index 4d22d621..de8d378e 100644
--- a/js/README.md
+++ b/js/README.md
@@ -47,3 +47,5 @@ Click links for README of each examples.
 * [OpenAI Whisper](ort-whisper) - demonstrates how to run [whisper tiny.en](https://github.com/openai/whisper) in your browser using [onnxruntime-web](https://github.com/microsoft/onnxruntime) and the browser's audio interfaces.
 
 * [Facebook Segment-Anything](segment-anything) - demonstrates how to run [segment-anything](https://github.com/facebookresearch/segment-anything) in your browser using [onnxruntime-web](https://github.com/microsoft/onnxruntime/js) with webgpu.
+
+* [Stable Diffusion Turbo](sd-turbo) - demonstrates how to run [Stable Diffusion Turbo](https://huggingface.co/stabilityai/sd-turbo) in your browser using [onnxruntime-web](https://github.com/microsoft/onnxruntime/js) with webgpu.
diff --git a/js/segment-anything/README.md b/js/segment-anything/README.md
index 31ea5352..3d8aca32 100644
--- a/js/segment-anything/README.md
+++ b/js/segment-anything/README.md
@@ -1,63 +1,47 @@
-# Run Segment-Anything in your browser using webgpu and onnxruntime-web
+# Segment-Anything: Browser-Based Image Segmentation with WebGPU and ONNX Runtime Web
 
-This example demonstrates how to run [Segment-Anything](https://github.com/facebookresearch/segment-anything) in your 
-browser using [onnxruntime-web](https://github.com/microsoft/onnxruntime) and webgpu.
+This repository contains an example of running [Segment-Anything](https://github.com/facebookresearch/segment-anything), an encoder/decoder model for image segmentation, in a browser using [ONNX Runtime Web](https://github.com/microsoft/onnxruntime) with WebGPU.
 
-Segment-Anything is a encoder/decoder model. The encoder creates embeddings and using the embeddings the decoder creates the segmentation mask.
+You can try out the live demo [here](https://guschmue.github.io/ort-webgpu/segment-anything/index.html).
 
-One can run the decoder in onnxruntime-web using WebAssembly with  latencies at ~200ms. 
+## Model Overview
 
-The encoder is much more compute intensive and takes ~45sec using WebAssembly what is not practical.
-Using webgpu we can speedup the encoder ~50 times and it becomes visible to run it inside the browser, even on a integrated GPU.
+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. 
 
-## Usage
+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](https://nodejs.org/) installed on your machine.
 
 ### Installation
-First, install the required dependencies by running the following command in your terminal:
+
+1. Install the required dependencies:
+
 ```sh
 npm install
 ```
 
-### Build the code
-Next, bundle the code using webpack by running:
+### Building the Project
+
+1. Bundle the code using webpack:
+
 ```sh
 npm run build
 ```
-this generates the bundle file `./dist/bundle.min.js`
 
-### Create an ONNX Model
+This command generates the bundle file `./dist/index.js`.
 
-We use [samexporter](https://github.com/vietanhdev/samexporter) to export encoder and decoder to onnx.
-Install samexporter:
-```sh
-pip install https://github.com/vietanhdev/samexporter
-```
-Download the pytorch model from [Segment-Anything](https://github.com/facebookresearch/segment-anything). We use the smallest flavor (vit_b).
-```sh
-curl -o models/sam_vit_b_01ec64.pth https://dl.fbaipublicfiles.com/segment_anything/sam_vit_b_01ec64.pth
-```
-Export both encoder and decoder to onnx:
-```sh
-python -m samexporter.export_encoder --checkpoint models/sam_vit_b_01ec64.pth \
-    --output models/sam_vit_b_01ec64.encoder.onnx \
-    --model-type vit_b 
-
-python -m samexporter.export_decoder --checkpoint models/sam_vit_b_01ec64.pth \
-    --output models/sam_vit_b_01ec64.decoder.onnx \
-    --model-type vit_b \
-    --return-single-mask
-```
-### Start a web server
-Use NPM package `light-server` to serve the current folder at http://localhost:8888/.
-To start the server, run:
-```sh
-npx light-server -s . -p 8888
-```
+### The ONNX Model
 
-### Point your browser at the web server
-Once the web server is running, open your browser and navigate to http://localhost:8888/. 
-You should now be able to run Segment-Anything in your browser.
+The model used in this project is hosted on [Hugging Face](https://huggingface.co/schmuell/sam-b-fp16). It was created using [samexporter](https://github.com/vietanhdev/samexporter).
 
-## TODO
-* add support for fp16
-* add support for MobileSam
+### Running the Project
+
+Start a web server to serve the current folder at http://localhost:8888/. To start the server, run:
+
+```sh
+npm run dev
+```
diff --git a/js/segment-anything/index.html b/js/segment-anything/index.html
index 6216910e..ef8f76b0 100644
--- a/js/segment-anything/index.html
+++ b/js/segment-anything/index.html
@@ -3,9 +3,9 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
-    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
-    <script src="./dist/bundle.min.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
+  integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous" />
+  <script type="module" src="dist/index.js"></script>
    
   <style>
     /* Add rounded corners to blocks */
@@ -23,7 +23,7 @@
       left: 50%;
       transform: translate(-50%, -50%);
       padding: 5px 10px;
-      background-color: white;
+      background-color: #212529;
       font-size: 18px;
     }
 
@@ -38,7 +38,7 @@
 
 </head>
 
-<body>
+<body data-bs-theme="dark">
   <title>segment anything example</title>
   <div class="container-fluid">
     <h2>segment anything example</h2>
@@ -71,15 +71,16 @@ <h4>Latencies</h4>
                   accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*">
               </div>
             </form>
+            <div class="form-group ">
+              <button id="cut-button" type="button" class="btn btn-primary">Cut</button>
+              <button id="clear-button" type="button" class="btn btn-primary">Clear</button>
+            </div>
+            <div style="margin-top: 30px;">
+              <div>Other providers:</div>
+              <a href="index.html?provider=wasm&model=sam_b_int8">wasm</a>
+              <a href="index.html?provider=webgpu&model=sam_b">webgpu</a>
+            </div>
           </div>
-          <div style="margin-top: 30px;">
-            <div>Other providers:</div>
-            <a href="index.html?provider=wasm">wasm</a>
-            <a href="index.html?provider=webgpu">webgpu</a>
-            <a href="index.html?provider=webnn">webnn</a>
-          </div>
-
-        </div>
 
         <p class="text-lg-start">
         <div id="status" style="font: 1em consolas;"></div>
diff --git a/js/segment-anything/index.js b/js/segment-anything/index.js
new file mode 100644
index 00000000..cb74bc25
--- /dev/null
+++ b/js/segment-anything/index.js
@@ -0,0 +1,415 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+//
+// An example how to run segment-anything with webgpu in onnxruntime-web.
+//
+
+import ort from 'onnxruntime-web/webgpu';
+
+// the image size on canvas
+const MAX_WIDTH = 500;
+const MAX_HEIGHT = 500;
+
+// the image size supported by the model
+const MODEL_WIDTH = 1024;
+const MODEL_HEIGHT = 1024;
+
+const MODELS = {
+    sam_b: [
+        {
+            name: "sam-b-encoder",
+            url: "https://huggingface.co/schmuell/sam-b-fp16/resolve/main/sam_vit_b_01ec64.encoder-fp16.onnx",
+            size: 180,
+        },
+        {
+            name: "sam-b-decoder",
+            url: "https://huggingface.co/schmuell/sam-b-fp16/resolve/main/sam_vit_b_01ec64.decoder.onnx",
+            size: 17,
+        },
+    ],
+    sam_b_int8: [
+        {
+            name: "sam-b-encoder-int8",
+            url: "https://huggingface.co/schmuell/sam-b-fp16/resolve/main/sam_vit_b-encoder-int8.onnx",
+            size: 108,
+        },
+        {
+            name: "sam-b-decoder-int8",
+            url: "https://huggingface.co/schmuell/sam-b-fp16/resolve/main/sam_vit_b-decoder-int8.onnx",
+            size: 5,
+        },
+    ],
+};
+
+const config = getConfig();
+
+ort.env.wasm.wasmPaths = 'dist/';
+ort.env.wasm.numThreads = config.threads;
+// ort.env.wasm.proxy = config.provider == "wasm";
+
+let canvas;
+let filein;
+let decoder_latency;
+
+var image_embeddings;
+var points = [];
+var labels = [];
+var imageImageData;
+var isClicked = false;
+var maskImageData;
+
+function log(i) {
+    document.getElementById('status').innerText += `\n${i}`;
+}
+
+/**
+ * create config from url
+ */
+function getConfig() {
+    const query = window.location.search.substring(1);
+    var config = {
+        model: "sam_b",
+        provider: "webgpu",
+        device: "gpu",
+        threads: "1",
+    };
+    let vars = query.split("&");
+    for (var i = 0; i < vars.length; i++) {
+        let pair = vars[i].split("=");
+        if (pair[0] in config) {
+            config[pair[0]] = decodeURIComponent(pair[1]);
+        } else if (pair[0].length > 0) {
+            throw new Error("unknown argument: " + pair[0]);
+        }
+    }
+    config.threads = parseInt(config.threads);
+    config.local = parseInt(config.local);
+    return config;
+}
+
+/**
+ * clone tensor
+ */
+function cloneTensor(t) {
+    return new ort.Tensor(t.type, Float32Array.from(t.data), t.dims);
+}
+
+/*
+ * create feed for the original facebook model
+ */
+function feedForSam(emb, points, labels) {
+    const maskInput = new ort.Tensor(new Float32Array(256 * 256), [1, 1, 256, 256]);
+    const hasMask = new ort.Tensor(new Float32Array([0]), [1,]);
+    const origianlImageSize = new ort.Tensor(new Float32Array([MODEL_HEIGHT, MODEL_WIDTH]), [2,]);
+    const pointCoords = new ort.Tensor(new Float32Array(points), [1, points.length / 2, 2]);
+    const pointLabels = new ort.Tensor(new Float32Array(labels), [1, labels.length]);
+
+    return {
+        "image_embeddings": cloneTensor(emb.image_embeddings),
+        "point_coords": pointCoords,
+        "point_labels": pointLabels,
+        "mask_input": maskInput,
+        "has_mask_input": hasMask,
+        "orig_im_size": origianlImageSize
+    }
+}
+
+/*
+ * Handle cut-out event
+ */
+async function handleCut(event) {
+    if (points.length == 0) {
+        return;
+    }
+
+    const [w, h] = [canvas.width, canvas.height];
+
+    // canvas for cut-out
+    const cutCanvas = new OffscreenCanvas(w, h);
+    const cutContext = cutCanvas.getContext('2d');
+    const cutPixelData = cutContext.getImageData(0, 0, w, h);
+
+    // need to rescale mask to image size
+    const maskCanvas = new OffscreenCanvas(w, h);
+    const maskContext = maskCanvas.getContext('2d');
+    maskContext.drawImage(await createImageBitmap(maskImageData), 0, 0);
+    const maskPixelData = maskContext.getImageData(0, 0, w, h);
+
+    // copy masked pixels to cut-out
+    for (let i = 0; i < maskPixelData.data.length; i += 4) {
+        if (maskPixelData.data[i] > 0) {
+            for (let j = 0; j < 4; ++j) {
+                const offset = i + j;
+                cutPixelData.data[offset] = imageImageData.data[offset];
+            }
+        }
+    }
+    cutContext.putImageData(cutPixelData, 0, 0);
+
+    // Download image 
+    const link = document.createElement('a');
+    link.download = 'image.png';
+    link.href = URL.createObjectURL(await cutCanvas.convertToBlob());
+    link.click();
+    link.remove();
+}
+
+async function decoder(points, labels) {
+    let ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    canvas.width = imageImageData.width;
+    canvas.height = imageImageData.height;
+    ctx.putImageData(imageImageData, 0, 0);
+
+    if (points.length > 0) {
+        // need to wait for encoder to be ready
+        if (image_embeddings === undefined) {
+            await MODELS[config.model][0].sess;
+        }
+
+        // wait for encoder to deliver embeddings
+        const emb = await image_embeddings;
+
+        // the decoder
+        const session = MODELS[config.model][1].sess;
+
+        const feed = feedForSam(emb, points, labels);
+        const start = performance.now();
+        const res = await session.run(feed);
+        decoder_latency.innerText = `${(performance.now() - start).toFixed(1)}ms`;
+
+        for (let i = 0; i < points.length; i += 2) {
+            ctx.fillStyle = 'blue';
+            ctx.fillRect(points[i], points[i + 1], 10, 10);
+        }
+        const mask = res.masks;
+        maskImageData = mask.toImageData();
+        ctx.globalAlpha = 0.3;
+        ctx.drawImage(await createImageBitmap(maskImageData), 0, 0);
+    }
+}
+
+function getPoint(event) {
+    const rect = canvas.getBoundingClientRect();
+    const x = Math.trunc(event.clientX - rect.left);
+    const y = Math.trunc(event.clientY - rect.top);
+    return [x, y];
+}
+
+/**
+ * handler mouse move event
+ */
+async function handleMouseMove(event) {
+    if (isClicked) {
+        return;
+    }
+    try {
+        isClicked = true;
+        canvas.style.cursor = "wait";
+        const point = getPoint(event);
+        await decoder([...points, point[0], point[1]], [...labels, 1]);
+    }
+    finally {
+        canvas.style.cursor = "default";
+        isClicked = false;
+    }
+}
+
+/**
+ * handler to handle click event on canvas
+ */
+async function handleClick(event) {
+    if (isClicked) {
+        return;
+    }
+    try {
+        isClicked = true;
+        canvas.style.cursor = "wait";
+
+        const point = getPoint(event);
+        const label = 1;
+        points.push(point[0]);
+        points.push(point[1]);
+        labels.push(label);
+        await decoder(points, labels);
+    }
+    finally {
+        canvas.style.cursor = "default";
+        isClicked = false;
+    }
+}
+
+/**
+ * handler called when image available
+ */
+async function handleImage(img) {
+    const encoder_latency = document.getElementById("encoder_latency");
+    encoder_latency.innerText = "";
+    points = [];
+    labels = [];
+    filein.disabled = true;
+    decoder_latency.innerText = "";
+    canvas.style.cursor = "wait";
+    image_embeddings = undefined;
+
+    let width = img.width;
+    let height = img.height;
+    if (width > height) {
+        if (width > MAX_WIDTH) {
+            height = height * (MAX_WIDTH / width);
+            width = MAX_WIDTH;
+        }
+    } else {
+        if (height > MAX_HEIGHT) {
+            width = width * (MAX_HEIGHT / height);
+            height = MAX_HEIGHT;
+        }
+    }
+    width = Math.round(width);
+    height = Math.round(height);
+    canvas.width = width;
+    canvas.height = height;
+    
+    var ctx = canvas.getContext("2d");
+    ctx.drawImage(img, 0, 0, width, height);
+
+    imageImageData = ctx.getImageData(0, 0, width, height);
+
+    const t = await ort.Tensor.fromImage(imageImageData, { resizedWidth: MODEL_WIDTH, resizedHeight: MODEL_HEIGHT });
+    const feed = (config.isSlimSam) ? { "pixel_values": t } : { "input_image": t };
+    const session = await MODELS[config.model][0].sess;
+
+    const start = performance.now();
+    image_embeddings = session.run(feed);
+    image_embeddings.then(() => {
+        encoder_latency.innerText = `${(performance.now() - start).toFixed(1)}ms`;
+        canvas.style.cursor = "default";
+    });
+    filein.disabled = false;
+}
+
+/*
+ * fetch and cache url
+ */
+async function fetchAndCache(url, name) {
+    try {
+        const cache = await caches.open("onnx");
+        let cachedResponse = await cache.match(url);
+        if (cachedResponse == undefined) {
+            await cache.add(url);
+            cachedResponse = await cache.match(url);
+            log(`${name} (network)`);
+        } else {
+            log(`${name} (cached)`);
+        }
+        const data = await cachedResponse.arrayBuffer();
+        return data;
+    } catch (error) {
+        log(`${name} (network)`);
+        return await fetch(url).then(response => response.arrayBuffer());
+    }
+}
+
+/*
+ * load models one at a time
+ */
+async function load_models(models) {
+    const cache = await caches.open("onnx");
+    let missing = 0;
+    for (const [name, model] of Object.entries(models)) {
+        let cachedResponse = await cache.match(model.url);
+        if (cachedResponse === undefined) {
+            missing += model.size;
+        }
+    }
+    if (missing > 0) {
+        log(`downloading ${missing} MB from network ... it might take a while`);
+    } else {
+        log("loading...");
+    }
+    const start = performance.now();
+    for (const [name, model] of Object.entries(models)) {
+        try {
+            const opt = {
+                executionProviders: [config.provider],
+                enableMemPattern: false,
+                enableCpuMemArena: false,
+                extra: {
+                    session: {
+                        disable_prepacking: "1",
+                        use_device_allocator_for_initializers: "1",
+                        use_ort_model_bytes_directly: "1",
+                        use_ort_model_bytes_for_initializers: "1"
+                    }
+                },
+            };
+            const model_bytes = await fetchAndCache(model.url, model.name);
+            const extra_opt = model.opt || {};
+            const sess_opt = { ...opt, ...extra_opt };
+            model.sess = await ort.InferenceSession.create(model_bytes, sess_opt);
+        } catch (e) {
+            log(`${model.url} failed, ${e}`);
+        }
+    }
+    const stop = performance.now();
+    log(`ready, ${(stop - start).toFixed(1)}ms`);
+}
+
+async function main() {
+    const model = MODELS[config.model];
+
+    canvas = document.getElementById("img_canvas");
+    canvas.style.cursor = "wait";
+
+    filein = document.getElementById("file-in");
+    decoder_latency = document.getElementById("decoder_latency");
+
+    document.getElementById("clear-button").addEventListener("click", () => {
+        points = [];
+        labels = [];
+        decoder(points, labels);
+    });
+
+    let img = document.getElementById("original-image");
+
+    await load_models(MODELS[config.model]).then(() => {
+        canvas.addEventListener("click", handleClick);
+        canvas.addEventListener("mousemove", handleMouseMove);
+        document.getElementById("cut-button").addEventListener("click", handleCut);
+
+        // image upload
+        filein.onchange = function (evt) {
+            let target = evt.target || window.event.src, files = target.files;
+            if (FileReader && files && files.length) {
+                let fileReader = new FileReader();
+                fileReader.onload = () => {
+                    img.onload = () => handleImage(img);
+                    img.src = fileReader.result;
+                }
+                fileReader.readAsDataURL(files[0]);
+            }
+        };
+        handleImage(img);
+    }, (e) => {
+        log(e);
+    });
+}
+
+async function hasFp16() {
+    try {
+        const adapter = await navigator.gpu.requestAdapter()
+        return adapter.features.has('shader-f16')
+    } catch (e) {
+        return false
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    hasFp16().then((fp16) => {
+        if (fp16) {
+            main();
+        } else {
+            log("Your GPU or Browser doesn't support webgpu/f16");
+        }
+    });
+});
diff --git a/js/segment-anything/main.js b/js/segment-anything/main.js
deleted file mode 100644
index b67dadc7..00000000
--- a/js/segment-anything/main.js
+++ /dev/null
@@ -1,278 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-//
-// An example how to run segment-anything with webgpu in onnxruntime-web.
-//
-
-const ort = require('onnxruntime-web/webgpu');
-
-const MAX_WIDTH = 500;
-const MAX_HEIGHT = 500;
-const MODEL_WIDTH = 1024;
-const MODEL_HEIGHT = 1024;
-
-const MODEL_MAP = {
-    sam_b: ["models/sam_vit_b_01ec64.encoder.onnx", "models/sam_vit_b_01ec64.decoder.onnx"],
-};
-
-const config = getConfig();
-
-ort.env.wasm.numThreads = config.threads;
-ort.env.wasm.proxy = true;
-
-let canvas;
-let filein;
-let decoder_latency;
-
-var image_embeddings;
-var sess = [];
-var points = [];
-var labels = [];
-var imageImageData;
-var isClicked = false;
-
-function log(i) {
-    document.getElementById('status').innerText += `\n[${performance.now().toFixed(3)}] ` + i;
-}
-
-/**
- * get some parameters from url
- */
-function getConfig() {
-    const query = window.location.search.substring(1);
-    var config = {
-        model: "sam_b",
-        provider: "webgpu",
-        device: "gpu",
-        threads: "1",
-    };
-    let vars = query.split("&");
-    for (var i = 0; i < vars.length; i++) {
-        let pair = vars[i].split("=");
-        if (pair[0] in config) {
-            config[pair[0]] = decodeURIComponent(pair[1]);
-        } else if (pair[0].length > 0) {
-            throw new Error("unknown argument: " + pair[0]);
-        }
-    }
-    config.threads = parseInt(config.threads);
-    return config;
-}
-
-/**
- * handler to handle click on the image canvas
- *  with ctl: add point
- *  with shift: forground label
- */
-async function handleClick(event) {
-    if (isClicked) {
-        return;
-    }
-    try {
-        isClicked = true;
-        canvas.style.cursor = "wait";
-
-        const rect = canvas.getBoundingClientRect();
-        const x = event.clientX - rect.left;
-        const y = event.clientY - rect.top;
-        const label = (event.shiftKey) ? 0 : 1;
-
-        if (image_embeddings === undefined) {
-            await sess[0];
-        }
-        const emb = await image_embeddings;
-
-        if (!event.ctrlKey) {
-            points = [];
-            labels = [];
-        }
-        points.push(x, y);
-        labels.push(label);
-
-        let ctx = canvas.getContext('2d');
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        canvas.width = imageImageData.width;
-        canvas.height = imageImageData.height;
-        ctx.putImageData(imageImageData, 0, 0);
-        ctx.fillStyle = 'blue';
-        ctx.fillRect(x, y, 10, 10);
-
-        const pointCoords = new ort.Tensor(new Float32Array(points), [1, points.length / 2, 2]);
-        const pointLabels = new ort.Tensor(new Float32Array(labels), [1, labels.length]);
-        const maskInput = new ort.Tensor(new Float32Array(256 * 256), [1, 1, 256, 256]);
-        const hasMask = new ort.Tensor(new Float32Array([0]), [1,]);
-        const origianlImageSize = new ort.Tensor(new Float32Array([MODEL_HEIGHT, MODEL_WIDTH]), [2,]);
-
-        const s = await sess[1];
-        const t = new ort.Tensor(emb.image_embeddings.type, Float32Array.from(emb.image_embeddings.data), emb.image_embeddings.dims);
-        const feed = {
-            "image_embeddings": t,
-            "point_coords": pointCoords,
-            "point_labels": pointLabels,
-            "mask_input": maskInput,
-            "has_mask_input": hasMask,
-            "orig_im_size": origianlImageSize
-        }
-        const start = performance.now();
-        const res = await s.run(feed);
-        decoder_latency.innerText = `${(performance.now() - start).toFixed(1)}ms`;
-        const mask = res.masks;
-        const maskImageData = mask.toImageData();
-        ctx.globalAlpha = 0.3;
-        ctx.drawImage(await createImageBitmap(maskImageData), 0, 0);
-    }
-    finally {
-        canvas.style.cursor = "default";
-        isClicked = false;
-    }
-}
-
-
-/**
- * handler called when image available
- */
-async function handleImage(img) {
-    const encoder_latency = document.getElementById("encoder_latency");
-    encoder_latency.innerText = "";
-    filein.disabled = true;
-    decoder_latency.innerText = "";
-    canvas.style.cursor = "wait";
-    image_embeddings = undefined;
-    var width = img.width;
-    var height = img.height;
-
-    if (width > height) {
-        if (width > MAX_WIDTH) {
-            height = height * (MAX_WIDTH / width);
-            width = MAX_WIDTH;
-        }
-    } else {
-        if (height > MAX_HEIGHT) {
-            width = width * (MAX_HEIGHT / height);
-            height = MAX_HEIGHT;
-        }
-    }
-    width = Math.round(width);
-    height = Math.round(height);
-
-    canvas.width = width;
-    canvas.height = height;
-    var ctx = canvas.getContext("2d");
-    ctx.drawImage(img, 0, 0, width, height);
-
-    imageImageData = ctx.getImageData(0, 0, width, height);
-
-    // eslint-disable-next-line no-undef
-    const t = await ort.Tensor.fromImage(imageImageData, options = { resizedWidth: MODEL_WIDTH, resizedHeight: MODEL_HEIGHT });
-    const feed = { "input_image": t };
-    const s = await sess[0];
-
-    const start = performance.now();
-    image_embeddings = s.run(feed);
-    image_embeddings.then(() => {
-        encoder_latency.innerText = `${(performance.now() - start).toFixed(1)}ms`;
-        canvas.style.cursor = "default";
-    });
-    filein.disabled = false;
-}
-
-
-/**
- * fetch and cache url
- */
-async function fetchAndCache(url) {
-    try {
-        const cache = await caches.open("onnx");
-        if (config.clear_cache) {
-            cache.delete(url);
-        }
-        let cachedResponse = await cache.match(url);
-        if (cachedResponse == undefined) {
-            await cache.add(url);
-            cachedResponse = await cache.match(url);
-            log(`${url} (from network)`);
-        } else {
-            log(`${url} (from cache)`);
-        }
-        const data = await cachedResponse.arrayBuffer();
-        return data;
-    } catch (error) {
-        log(`${url} (from network)`);
-        return await fetch(url).then(response => response.arrayBuffer());
-    }
-}
-
-/*
- * load encoder and decoder sequentially
- */
-async function load_model(model, idx, img) {
-    let provider = config.provider;
-
-    switch (provider) {
-        case "webnn":
-            if (!("ml" in navigator)) {
-                throw new Error("webnn is NOT supported");
-            }
-            provider = {
-                name: "webnn",
-                deviceType: config.device,
-                powerPreference: 'default'
-            };
-            break;
-        case "webgpu":
-            if (!navigator.gpu) {
-                throw new Error("webgpu is NOT supported");
-            }
-            break;
-    }
-
-    const opt = { executionProviders: [provider] };
-
-    fetchAndCache(model[idx]).then((data) => {
-        sess[idx] = ort.InferenceSession.create(data, opt);
-        sess[idx].then(() => {
-            log(`${model[idx]} loaded.`);
-            if (idx == 0) {
-                load_model(model, 1);
-            }
-        }, (e) => {
-            log(`${model[idx]} failed with ${e}.`);
-            throw e;
-        });
-        if (img !== undefined) {
-            handleImage(img);
-        }
-    })
-}
-
-async function main() {
-    const model = MODEL_MAP[config.model];
-
-    canvas = document.getElementById("img_canvas");
-    canvas.addEventListener("click", handleClick);
-    canvas.style.cursor = "wait";
-
-    filein = document.getElementById("file-in");
-    decoder_latency = document.getElementById("decoder_latency");
-
-    let img = document.getElementById("original-image");
-
-    load_model(model, 0, img).then(() => {}, (e) => {
-        log(e);
-    });
-
-    // image upload
-    filein.onchange = function (evt) {
-        let target = evt.target || window.event.src, files = target.files;
-        if (FileReader && files && files.length) {
-            let fileReader = new FileReader();
-            fileReader.onload = () => {
-                img.onload = () => handleImage(img);
-                img.src = fileReader.result;
-            }
-            fileReader.readAsDataURL(files[0]);
-        }
-    };
-}
-
-document.addEventListener("DOMContentLoaded", () => { main(); });
diff --git a/js/segment-anything/package.json b/js/segment-anything/package.json
index bb130375..44e48d50 100644
--- a/js/segment-anything/package.json
+++ b/js/segment-anything/package.json
@@ -1,19 +1,33 @@
 {
-  "name": "ort-sam",
-  "private": true,
-  "version": "1.0.0",
-  "description": "An example how to run segment-anything with webgpu in onnxruntime-web.",
+  "name": "segment-anything-demo",
+  "version": "0.0.0",
+  "description": "onnxruntime segment anything demo",
+  "main": "index.js",
+  "type": "module",
   "scripts": {
-    "build": "webpack --config ./webpack.config.js --mode production",
-    "dev": "webpack --config ./webpack.config.js --mode development"
-  },
-  "devDependencies": {
-    "eslint": "^8.40.0"
+    "dev": "webpack serve --no-client-overlay",
+    "build": "webpack",
+    "build1": "node scripts/build.js"
   },
+  "keywords": [
+    "onnxruntime",
+    "webgpu",
+    "segment-anything",
+    "deep learning",
+    "AI"
+  ],
+  "author": "me",
+  "license": "Apache-2.0",
   "dependencies": {
-    "copy-webpack-plugin": "^11.0.0",
-    "onnxruntime-web": "^1.17.0-dev.20231102-178f7caaeb",
-    "webpack": "^5.82.1",
-    "webpack-cli": "^5.1.1"
+    "copy-webpack-plugin": "^12.0.2",
+    "esbuild": "^0.20.1",
+    "eslint": "^8.57.0",
+    "onnxruntime-common": "^1.17.1",
+    "onnxruntime-web": "^1.17.1",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4"
+  },
+  "devDependencies": {
+    "webpack-dev-server": "^5.0.2"
   }
 }
diff --git a/js/segment-anything/webpack.config.js b/js/segment-anything/webpack.config.js
index 7efebc44..def2dfd2 100644
--- a/js/segment-anything/webpack.config.js
+++ b/js/segment-anything/webpack.config.js
@@ -1,27 +1,52 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import { fileURLToPath } from 'url';
+import path from 'path';
 
-const path = require('path');
-const CopyPlugin = require("copy-webpack-plugin");
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-module.exports = () => {
-    return {
-        target: ['web'],
-        // eslint-disable-next-line no-undef
-        entry: path.resolve(__dirname, 'main.js'),
-        devtool: 'inline-source-map',
-        output: {
-            // eslint-disable-next-line no-undef
-            path: path.resolve(__dirname, 'dist'),
-            filename: 'bundle.min.js',
-            library: {
-                type: 'umd'
-            }
+/**
+ * @type {import('webpack').Configuration}
+ */
+export default {
+    mode: 'development',
+    devtool: 'source-map',
+    entry: {
+        'dist/index': './index.js',
+        'dist/index.min': './index.js',
+    },
+    output: {
+        filename: '[name].js',
+        path: __dirname,
+        library: {
+            type: 'module',
         },
-        plugins: [new CopyPlugin({
-            // Use copy plugin to copy *.wasm to output folder.
-            patterns: [{ from: 'node_modules/onnxruntime-web/dist/*.wasm', to: '[name][ext]' }]
+    },
+    plugins: [
+        // Copy .wasm files to dist folder
+        new CopyWebpackPlugin({
+            patterns: [
+                {
+                    from: 'node_modules/onnxruntime-web/dist/*.wasm',
+                    to: 'dist/[name][ext]'
+                },
+            ],
+        }),
+    ],
+    optimization: {
+        minimize: true,
+        minimizer: [new TerserPlugin({
+            test: /\.min\.js$/,
+            extractComments: false,
         })],
-        mode: 'production'
-    }
+    },
+    devServer: {
+        static: {
+            directory: __dirname
+        },
+        port: 8080
+    },
+    experiments: {
+        outputModule: true,
+    },
 };