Upload 6 files

blipWorker.js

@@ -0,0 +1,78 @@
+//load Candle Bert Module wasm module
+import init, { Model } from "./build/m.js";
+
+async function fetchArrayBuffer(url, cacheFile = true) {
+  if (!cacheFile) return new Uint8Array(await (await fetch(url)).arrayBuffer());
+  const cacheName = "blip-candle-cache";
+  const cache = await caches.open(cacheName);
+  const cachedResponse = await cache.match(url);
+  if (cachedResponse) {
+    const data = await cachedResponse.arrayBuffer();
+    return new Uint8Array(data);
+  }
+  const res = await fetch(url, { cache: "force-cache" });
+  cache.put(url, res.clone());
+  return new Uint8Array(await res.arrayBuffer());
+}
+class Blip {
+  static instance = {};
+
+  static async getInstance(
+    weightsURL,
+    tokenizerURL,
+    configURL,
+    modelID,
+    quantized
+  ) {
+    if (!this.instance[modelID]) {
+      await init();
+
+      self.postMessage({ status: "loading", message: "Loading Model" });
+      const [weightsArrayU8, tokenizerArrayU8, configArrayU8] =
+        await Promise.all([
+          fetchArrayBuffer(weightsURL),
+          fetchArrayBuffer(tokenizerURL),
+          fetchArrayBuffer(configURL),
+        ]);
+
+      this.instance[modelID] = new Model(
+        weightsArrayU8,
+        tokenizerArrayU8,
+        configArrayU8,
+        quantized
+      );
+    } else {
+      self.postMessage({ status: "ready", message: "Model Already Loaded" });
+    }
+    return this.instance[modelID];
+  }
+}
+
+self.addEventListener("message", async (event) => {
+  const { weightsURL, tokenizerURL, configURL, modelID, imageURL, quantized } =
+    event.data;
+  try {
+    self.postMessage({ status: "status", message: "Loading Blip Model..." });
+    const model = await Blip.getInstance(
+      weightsURL,
+      tokenizerURL,
+      configURL,
+      modelID,
+      quantized
+    );
+    self.postMessage({
+      status: "status",
+      message: "Running Blip Inference...",
+    });
+    const imageArrayU8 = await fetchArrayBuffer(imageURL, false);
+    const output = model.generate_caption_from_image(imageArrayU8);
+
+    self.postMessage({
+      status: "complete",
+      message: "complete",
+      output: output,
+    });
+  } catch (e) {
+    self.postMessage({ error: e });
+  }
+});

build/m.d.ts

@@ -0,0 +1,55 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+*/
+export class Model {
+  free(): void;
+/**
+* @param {Uint8Array} weights
+* @param {Uint8Array} tokenizer
+* @param {Uint8Array} config
+* @param {boolean} quantized
+*/
+  constructor(weights: Uint8Array, tokenizer: Uint8Array, config: Uint8Array, quantized: boolean);
+/**
+* @param {Uint8Array} image
+* @returns {string}
+*/
+  generate_caption_from_image(image: Uint8Array): string;
+}
+
+export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
+
+export interface InitOutput {
+  readonly memory: WebAssembly.Memory;
+  readonly __wbg_model_free: (a: number) => void;
+  readonly model_load: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
+  readonly model_generate_caption_from_image: (a: number, b: number, c: number, d: number) => void;
+  readonly main: (a: number, b: number) => number;
+  readonly __wbindgen_add_to_stack_pointer: (a: number) => number;
+  readonly __wbindgen_malloc: (a: number, b: number) => number;
+  readonly __wbindgen_free: (a: number, b: number, c: number) => void;
+  readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
+  readonly __wbindgen_start: () => void;
+}
+
+export type SyncInitInput = BufferSource | WebAssembly.Module;
+/**
+* Instantiates the given `module`, which can either be bytes or
+* a precompiled `WebAssembly.Module`.
+*
+* @param {SyncInitInput} module
+*
+* @returns {InitOutput}
+*/
+export function initSync(module: SyncInitInput): InitOutput;
+
+/**
+* If `module_or_path` is {RequestInfo} or {URL}, makes a request and
+* for everything else, calls `WebAssembly.instantiate` directly.
+*
+* @param {InitInput | Promise<InitInput>} module_or_path
+*
+* @returns {Promise<InitOutput>}
+*/
+export default function __wbg_init (module_or_path?: InitInput | Promise<InitInput>): Promise<InitOutput>;

build/m.js

@@ -0,0 +1,329 @@
+let wasm;
+
+const cachedTextDecoder = (typeof TextDecoder !== 'undefined' ? new TextDecoder('utf-8', { ignoreBOM: true, fatal: true }) : { decode: () => { throw Error('TextDecoder not available') } } );
+
+if (typeof TextDecoder !== 'undefined') { cachedTextDecoder.decode(); };
+
+let cachedUint8Memory0 = null;
+
+function getUint8Memory0() {
+    if (cachedUint8Memory0 === null || cachedUint8Memory0.byteLength === 0) {
+        cachedUint8Memory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8Memory0;
+}
+
+function getStringFromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len));
+}
+
+const heap = new Array(128).fill(undefined);
+
+heap.push(undefined, null, true, false);
+
+let heap_next = heap.length;
+
+function addHeapObject(obj) {
+    if (heap_next === heap.length) heap.push(heap.length + 1);
+    const idx = heap_next;
+    heap_next = heap[idx];
+
+    heap[idx] = obj;
+    return idx;
+}
+
+function getObject(idx) { return heap[idx]; }
+
+function dropObject(idx) {
+    if (idx < 132) return;
+    heap[idx] = heap_next;
+    heap_next = idx;
+}
+
+function takeObject(idx) {
+    const ret = getObject(idx);
+    dropObject(idx);
+    return ret;
+}
+
+let WASM_VECTOR_LEN = 0;
+
+function passArray8ToWasm0(arg, malloc) {
+    const ptr = malloc(arg.length * 1, 1) >>> 0;
+    getUint8Memory0().set(arg, ptr / 1);
+    WASM_VECTOR_LEN = arg.length;
+    return ptr;
+}
+
+let cachedInt32Memory0 = null;
+
+function getInt32Memory0() {
+    if (cachedInt32Memory0 === null || cachedInt32Memory0.byteLength === 0) {
+        cachedInt32Memory0 = new Int32Array(wasm.memory.buffer);
+    }
+    return cachedInt32Memory0;
+}
+
+const cachedTextEncoder = (typeof TextEncoder !== 'undefined' ? new TextEncoder('utf-8') : { encode: () => { throw Error('TextEncoder not available') } } );
+
+const encodeString = (typeof cachedTextEncoder.encodeInto === 'function'
+    ? function (arg, view) {
+    return cachedTextEncoder.encodeInto(arg, view);
+}
+    : function (arg, view) {
+    const buf = cachedTextEncoder.encode(arg);
+    view.set(buf);
+    return {
+        read: arg.length,
+        written: buf.length
+    };
+});
+
+function passStringToWasm0(arg, malloc, realloc) {
+
+    if (realloc === undefined) {
+        const buf = cachedTextEncoder.encode(arg);
+        const ptr = malloc(buf.length, 1) >>> 0;
+        getUint8Memory0().subarray(ptr, ptr + buf.length).set(buf);
+        WASM_VECTOR_LEN = buf.length;
+        return ptr;
+    }
+
+    let len = arg.length;
+    let ptr = malloc(len, 1) >>> 0;
+
+    const mem = getUint8Memory0();
+
+    let offset = 0;
+
+    for (; offset < len; offset++) {
+        const code = arg.charCodeAt(offset);
+        if (code > 0x7F) break;
+        mem[ptr + offset] = code;
+    }
+
+    if (offset !== len) {
+        if (offset !== 0) {
+            arg = arg.slice(offset);
+        }
+        ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
+        const view = getUint8Memory0().subarray(ptr + offset, ptr + len);
+        const ret = encodeString(arg, view);
+
+        offset += ret.written;
+    }
+
+    WASM_VECTOR_LEN = offset;
+    return ptr;
+}
+/**
+*/
+export class Model {
+
+    static __wrap(ptr) {
+        ptr = ptr >>> 0;
+        const obj = Object.create(Model.prototype);
+        obj.__wbg_ptr = ptr;
+
+        return obj;
+    }
+
+    __destroy_into_raw() {
+        const ptr = this.__wbg_ptr;
+        this.__wbg_ptr = 0;
+
+        return ptr;
+    }
+
+    free() {
+        const ptr = this.__destroy_into_raw();
+        wasm.__wbg_model_free(ptr);
+    }
+    /**
+    * @param {Uint8Array} weights
+    * @param {Uint8Array} tokenizer
+    * @param {Uint8Array} config
+    * @param {boolean} quantized
+    */
+    constructor(weights, tokenizer, config, quantized) {
+        try {
+            const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
+            const ptr0 = passArray8ToWasm0(weights, wasm.__wbindgen_malloc);
+            const len0 = WASM_VECTOR_LEN;
+            const ptr1 = passArray8ToWasm0(tokenizer, wasm.__wbindgen_malloc);
+            const len1 = WASM_VECTOR_LEN;
+            const ptr2 = passArray8ToWasm0(config, wasm.__wbindgen_malloc);
+            const len2 = WASM_VECTOR_LEN;
+            wasm.model_load(retptr, ptr0, len0, ptr1, len1, ptr2, len2, quantized);
+            var r0 = getInt32Memory0()[retptr / 4 + 0];
+            var r1 = getInt32Memory0()[retptr / 4 + 1];
+            var r2 = getInt32Memory0()[retptr / 4 + 2];
+            if (r2) {
+                throw takeObject(r1);
+            }
+            return Model.__wrap(r0);
+        } finally {
+            wasm.__wbindgen_add_to_stack_pointer(16);
+        }
+    }
+    /**
+    * @param {Uint8Array} image
+    * @returns {string}
+    */
+    generate_caption_from_image(image) {
+        let deferred3_0;
+        let deferred3_1;
+        try {
+            const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
+            const ptr0 = passArray8ToWasm0(image, wasm.__wbindgen_malloc);
+            const len0 = WASM_VECTOR_LEN;
+            wasm.model_generate_caption_from_image(retptr, this.__wbg_ptr, ptr0, len0);
+            var r0 = getInt32Memory0()[retptr / 4 + 0];
+            var r1 = getInt32Memory0()[retptr / 4 + 1];
+            var r2 = getInt32Memory0()[retptr / 4 + 2];
+            var r3 = getInt32Memory0()[retptr / 4 + 3];
+            var ptr2 = r0;
+            var len2 = r1;
+            if (r3) {
+                ptr2 = 0; len2 = 0;
+                throw takeObject(r2);
+            }
+            deferred3_0 = ptr2;
+            deferred3_1 = len2;
+            return getStringFromWasm0(ptr2, len2);
+        } finally {
+            wasm.__wbindgen_add_to_stack_pointer(16);
+            wasm.__wbindgen_free(deferred3_0, deferred3_1, 1);
+        }
+    }
+}
+
+async function __wbg_load(module, imports) {
+    if (typeof Response === 'function' && module instanceof Response) {
+        if (typeof WebAssembly.instantiateStreaming === 'function') {
+            try {
+                return await WebAssembly.instantiateStreaming(module, imports);
+
+            } catch (e) {
+                if (module.headers.get('Content-Type') != 'application/wasm') {
+                    console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
+
+                } else {
+                    throw e;
+                }
+            }
+        }
+
+        const bytes = await module.arrayBuffer();
+        return await WebAssembly.instantiate(bytes, imports);
+
+    } else {
+        const instance = await WebAssembly.instantiate(module, imports);
+
+        if (instance instanceof WebAssembly.Instance) {
+            return { instance, module };
+
+        } else {
+            return instance;
+        }
+    }
+}
+
+function __wbg_get_imports() {
+    const imports = {};
+    imports.wbg = {};
+    imports.wbg.__wbindgen_error_new = function(arg0, arg1) {
+        const ret = new Error(getStringFromWasm0(arg0, arg1));
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbg_new_abda76e883ba8a5f = function() {
+        const ret = new Error();
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbg_stack_658279fe44541cf6 = function(arg0, arg1) {
+        const ret = getObject(arg1).stack;
+        const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len1 = WASM_VECTOR_LEN;
+        getInt32Memory0()[arg0 / 4 + 1] = len1;
+        getInt32Memory0()[arg0 / 4 + 0] = ptr1;
+    };
+    imports.wbg.__wbg_error_f851667af71bcfc6 = function(arg0, arg1) {
+        let deferred0_0;
+        let deferred0_1;
+        try {
+            deferred0_0 = arg0;
+            deferred0_1 = arg1;
+            console.error(getStringFromWasm0(arg0, arg1));
+        } finally {
+            wasm.__wbindgen_free(deferred0_0, deferred0_1, 1);
+        }
+    };
+    imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
+        takeObject(arg0);
+    };
+    imports.wbg.__wbg_log_751f7b214d870e8a = function(arg0, arg1) {
+        console.log(getStringFromWasm0(arg0, arg1));
+    };
+    imports.wbg.__wbg_now_9c5990bda04c7e53 = function() {
+        const ret = Date.now();
+        return ret;
+    };
+    imports.wbg.__wbindgen_throw = function(arg0, arg1) {
+        throw new Error(getStringFromWasm0(arg0, arg1));
+    };
+
+    return imports;
+}
+
+function __wbg_init_memory(imports, maybe_memory) {
+
+}
+
+function __wbg_finalize_init(instance, module) {
+    wasm = instance.exports;
+    __wbg_init.__wbindgen_wasm_module = module;
+    cachedInt32Memory0 = null;
+    cachedUint8Memory0 = null;
+
+    wasm.__wbindgen_start();
+    return wasm;
+}
+
+function initSync(module) {
+    if (wasm !== undefined) return wasm;
+
+    const imports = __wbg_get_imports();
+
+    __wbg_init_memory(imports);
+
+    if (!(module instanceof WebAssembly.Module)) {
+        module = new WebAssembly.Module(module);
+    }
+
+    const instance = new WebAssembly.Instance(module, imports);
+
+    return __wbg_finalize_init(instance, module);
+}
+
+async function __wbg_init(input) {
+    if (wasm !== undefined) return wasm;
+
+    if (typeof input === 'undefined') {
+        input = new URL('m_bg.wasm', import.meta.url);
+    }
+    const imports = __wbg_get_imports();
+
+    if (typeof input === 'string' || (typeof Request === 'function' && input instanceof Request) || (typeof URL === 'function' && input instanceof URL)) {
+        input = fetch(input);
+    }
+
+    __wbg_init_memory(imports);
+
+    const { instance, module } = await __wbg_load(await input, imports);
+
+    return __wbg_finalize_init(instance, module);
+}
+
+export { initSync }
+export default __wbg_init;

build/m_bg.wasm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8a0b451b714b0da374d5b574572f4847c3b4fe20cd1f46b1d236bac1125f084b
+size 4523850

build/m_bg.wasm.d.ts

@@ -0,0 +1,12 @@
+/* tslint:disable */
+/* eslint-disable */
+export const memory: WebAssembly.Memory;
+export function __wbg_model_free(a: number): void;
+export function model_load(a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number): void;
+export function model_generate_caption_from_image(a: number, b: number, c: number, d: number): void;
+export function main(a: number, b: number): number;
+export function __wbindgen_add_to_stack_pointer(a: number): number;
+export function __wbindgen_malloc(a: number, b: number): number;
+export function __wbindgen_free(a: number, b: number, c: number): void;
+export function __wbindgen_realloc(a: number, b: number, c: number, d: number): number;
+export function __wbindgen_start(): void;

index.html

@@ -1,19 +1,393 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;300;400&family=Source+Sans+3:wght@100;200;300;400;500;600;700;800;900&display=swap");
+      html,
+      body {
+        font-family: "Source Sans 3", sans-serif;
+      }
+    </style>
+    <title>Candle Blip Image Captioning Demo</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script type="module" src="./code.js"></script>
+    <script type="module">
+      const MODELS = {
+        blip_image_quantized_q4k: {
+          base_url: "https://huggingface.co/lmz/candle-blip/resolve/main/",
+          model: "blip-image-captioning-large-q4k.gguf",
+          config: "config.json",
+          tokenizer: "tokenizer.json",
+          quantized: true,
+          size: "271 MB",
+        },
+        blip_image_quantized_q80: {
+          base_url: "https://huggingface.co/lmz/candle-blip/resolve/main/",
+          model: "blip-image-captioning-large-q80.gguf",
+          config: "config.json",
+          tokenizer: "tokenizer.json",
+          quantized: true,
+          size: "505 MB",
+        },
+        blip_image_large: {
+          base_url:
+            "https://huggingface.co/Salesforce/blip-image-captioning-large/resolve/refs%2Fpr%2F18/",
+          model: "model.safetensors",
+          config: "config.json",
+          tokenizer: "tokenizer.json",
+          quantized: false,
+          size: "1.88 GB",
+        },
+      };
+
+      const blipWorker = new Worker("./blipWorker.js", {
+        type: "module",
+      });
+
+      const outputStatusEl = document.querySelector("#output-status");
+      const outputCaptionEl = document.querySelector("#output-caption");
+      const modelSelectEl = document.querySelector("#model");
+      const clearBtn = document.querySelector("#clear-btn");
+      const fileUpload = document.querySelector("#file-upload");
+      const dropArea = document.querySelector("#drop-area");
+      const imagesExamples = document.querySelector("#image-select");
+      const canvas = document.querySelector("#canvas");
+      const ctxCanvas = canvas.getContext("2d");
+
+      let isCaptioning = false;
+      let currentImageURL = null;
+      clearBtn.addEventListener("click", () => {
+        clearImageCanvas();
+      });
+      modelSelectEl.addEventListener("change", () => {
+        if (currentImageURL) {
+          runInference(currentImageURL);
+        }
+      });
+
+      //add event listener to file input
+      fileUpload.addEventListener("input", async (e) => {
+        const target = e.target;
+        if (target.files.length > 0) {
+          const href = URL.createObjectURL(target.files[0]);
+          clearImageCanvas();
+          await drawImageCanvas(href);
+          runInference(href);
+        }
+      });
+      // add event listener to drop-area
+      dropArea.addEventListener("dragenter", (e) => {
+        e.preventDefault();
+        dropArea.classList.add("border-blue-700");
+      });
+      dropArea.addEventListener("dragleave", (e) => {
+        e.preventDefault();
+        dropArea.classList.remove("border-blue-700");
+      });
+      dropArea.addEventListener("dragover", (e) => {
+        e.preventDefault();
+      });
+      dropArea.addEventListener("drop", async (e) => {
+        e.preventDefault();
+        dropArea.classList.remove("border-blue-700");
+        const url = e.dataTransfer.getData("text/uri-list");
+        const files = e.dataTransfer.files;
+
+        if (files.length > 0) {
+          const href = URL.createObjectURL(files[0]);
+          clearImageCanvas();
+          await drawImageCanvas(href);
+          runInference(href);
+        } else if (url) {
+          clearImageCanvas();
+          await drawImageCanvas(url);
+          runInference(url);
+        }
+      });
+
+      imagesExamples.addEventListener("click", async (e) => {
+        if (isCaptioning) {
+          return;
+        }
+        const target = e.target;
+        if (target.nodeName === "IMG") {
+          const href = target.src;
+          clearImageCanvas();
+          await drawImageCanvas(href);
+          runInference(href);
+        }
+      });
+      function clearImageCanvas() {
+        ctxCanvas.clearRect(0, 0, canvas.width, canvas.height);
+        isCaptioning = false;
+        clearBtn.disabled = true;
+        canvas.parentElement.style.height = "auto";
+        outputStatusEl.hidden = false;
+        outputCaptionEl.hidden = true;
+        outputStatusEl.innerText = "Please select an image";
+        currentImageURL = null;
+      }
+
+      async function drawImageCanvas(imgURL) {
+        if (!imgURL) {
+          throw new Error("No image URL provided");
+        }
+        return new Promise((resolve, reject) => {
+          ctxCanvas.clearRect(0, 0, canvas.width, canvas.height);
+          ctxCanvas.clearRect(0, 0, canvas.width, canvas.height);
+
+          const img = new Image();
+          img.crossOrigin = "anonymous";
+          img.onload = () => {
+            canvas.width = img.width;
+            canvas.height = img.height;
+            ctxCanvas.drawImage(img, 0, 0);
+            canvas.parentElement.style.height = canvas.offsetHeight + "px";
+            clearBtn.disabled = false;
+            resolve(img);
+          };
+          img.src = imgURL;
+          currentImageURL = imgURL;
+        });
+      }
+
+      document.addEventListener("DOMContentLoaded", () => {
+        for (const [id, model] of Object.entries(MODELS)) {
+          const option = document.createElement("option");
+          option.value = id;
+          option.innerText = `${id} (${model.size})`;
+          modelSelectEl.appendChild(option);
+        }
+      });
+      async function getImageCaption(
+        worker,
+        weightsURL,
+        tokenizerURL,
+        configURL,
+        modelID,
+        imageURL,
+        quantized,
+        updateStatus = null
+      ) {
+        return new Promise((resolve, reject) => {
+          worker.postMessage({
+            weightsURL,
+            tokenizerURL,
+            configURL,
+            modelID,
+            imageURL,
+            quantized,
+          });
+          function messageHandler(event) {
+            if ("error" in event.data) {
+              worker.removeEventListener("message", messageHandler);
+              reject(new Error(event.data.error));
+            }
+            if (event.data.status === "complete") {
+              worker.removeEventListener("message", messageHandler);
+              resolve(event.data);
+            }
+            if (updateStatus) updateStatus(event.data);
+          }
+          worker.addEventListener("message", messageHandler);
+        });
+      }
+      function updateStatus(data) {
+        if (data.status === "status") {
+          outputStatusEl.innerText = data.message;
+        }
+      }
+      async function runInference(imageURL) {
+        if (isCaptioning || !imageURL) {
+          alert("Please select an image first");
+          return;
+        }
+
+        outputStatusEl.hidden = false;
+        outputCaptionEl.hidden = true;
+        clearBtn.disabled = true;
+        modelSelectEl.disabled = true;
+        isCaptioning = true;
+        const selectedModel = modelSelectEl.value;
+        const model = MODELS[selectedModel];
+        const weightsURL = `${model.base_url}${model.model}`;
+        const tokenizerURL = `${model.base_url}${model.tokenizer}`;
+        const configURL = `${model.base_url}${model.config}`;
+        const quantized = model.quantized;
+        try {
+          const time = performance.now();
+          const caption = await getImageCaption(
+            blipWorker,
+            weightsURL,
+            tokenizerURL,
+            configURL,
+            selectedModel,
+            imageURL,
+            quantized,
+            updateStatus
+          );
+          outputStatusEl.hidden = true;
+          outputCaptionEl.hidden = false;
+          const totalTime = ((performance.now() - time)/1000).toFixed(2);
+          outputCaptionEl.innerHTML = `${
+            caption.output
+          }<br/><span class="text-xs">Inference time: ${totalTime} s</span>`;
+        } catch (err) {
+          console.error(err);
+          outputStatusEl.hidden = false;
+          outputCaptionEl.hidden = true;
+          outputStatusEl.innerText = err.message;
+        }
+        clearBtn.disabled = false;
+        modelSelectEl.disabled = false;
+        isCaptioning = false;
+      }
+    </script>
+  </head>
+  <body class="container max-w-4xl mx-auto p-4">
+    <main class="grid grid-cols-1 gap-5 relative">
+      <span class="absolute text-5xl -ml-[1em]"> 🕯️ </span>
+      <div>
+        <h1 class="text-5xl font-bold">Candle BLIP Image Captioning</h1>
+        <h2 class="text-2xl font-bold">Rust/WASM Demo</h2>
+        <p class="max-w-lg">
+          <a
+            href="https://huggingface.co/Salesforce/blip-image-captioning-large"
+            target="_blank"
+            class="underline hover:text-blue-500 hover:no-underline"
+            >BLIP Image Captioning
+          </a>
+          running in the browser using
+          <a
+            href="https://github.com/huggingface/candle/"
+            target="_blank"
+            class="underline hover:text-blue-500 hover:no-underline"
+            >Candle</a
+          >, a minimalist ML framework for Rust.
+        </p>
+        <p class="text-xs max-w-lg py-2">
+          <b>Note:</b>
+          The image captioning on the smallest model takes about ~50 seconds, it
+          will vary depending on your machine and model size.
+        </p>
+      </div>
+
+      <div>
+        <label for="model" class="font-medium block">Models Options: </label>
+        <select
+          id="model"
+          class="border-2 border-gray-500 rounded-md font-light interactive disabled:cursor-not-allowed w-full max-w-max"
+        ></select>
+      </div>
+      <!-- drag and drop area -->
+      <div class="grid gap-4 sm:grid-cols-2 py-4">
+        <div class="relative max-w-lg">
+          <div
+            class="absolute w-full bottom-full flex justify-between items-center"
+          >
+            <div class="flex gap-2 w-full">
+              <button
+                id="clear-btn"
+                disabled
+                title="Clear Image"
+                class="ml-auto text-xs bg-white rounded-md disabled:opacity-50 flex gap-1 items-center"
+              >
+                <svg
+                  class=""
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 13 12"
+                  height="1em"
+                >
+                  <path
+                    d="M1.6.7 12 11.1M12 .7 1.6 11.1"
+                    stroke="#2E3036"
+                    stroke-width="2"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            id="drop-area"
+            class="flex flex-col items-center justify-center border-2 border-gray-300 border-dashed rounded-xl relative aspect-video w-full overflow-hidden"
+          >
+            <div
+              class="flex flex-col items-center justify-center space-y-1 text-center"
+            >
+              <svg
+                width="25"
+                height="25"
+                viewBox="0 0 25 25"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z"
+                  fill="#000"
+                />
+              </svg>
+              <div class="flex text-sm text-gray-600">
+                <label
+                  for="file-upload"
+                  class="relative cursor-pointer bg-white rounded-md font-medium text-blue-950 hover:text-blue-700"
+                >
+                  <span>Drag and drop y our image here</span>
+                  <span class="block text-xs">or</span>
+                  <span class="block text-xs">Click to upload</span>
+                </label>
+              </div>
+              <input
+                id="file-upload"
+                name="file-upload"
+                type="file"
+                class="sr-only"
+              />
+            </div>
+            <canvas
+              id="canvas"
+              class="absolute pointer-events-none w-full"
+            ></canvas>
+          </div>
+        </div>
+        <div class="">
+          <div
+            class="h-full bg-slate-100 text-gray-500 p-4 rounded-md flex flex-col gap-2"
+          >
+            <p
+              id="output-caption"
+              class="m-auto text-xl text-center p-2"
+              hidden
+            ></p>
+            <span id="output-status" class="m-auto font-light">
+              Please select an image
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div
+          class="flex gap-3 items-center overflow-x-scroll"
+          id="image-select"
+        >
+          <h3 class="font-medium">Examples:</h3>
+
+          <img
+            src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/candle/examples/sf.jpg"
+            class="cursor-pointer w-24 h-24 object-cover"
+          />
+          <img
+            src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/candle/examples/bike.jpeg"
+            class="cursor-pointer w-24 h-24 object-cover"
+          />
+          <img
+            src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/candle/examples/000000000077.jpg"
+            class="cursor-pointer w-24 h-24 object-cover"
+          />
+        </div>
+      </div>
+    </main>
+  </body>
 </html>