From b992d3df6f2f6e9fe7d144a68249fd33b57e013d Mon Sep 17 00:00:00 2001 From: Belem Zhang Date: Mon, 12 Aug 2024 13:36:59 +0800 Subject: [PATCH 1/3] Update version of ONNX Runtime Web dists --- assets/js/common_utils.js | 73 +++++++++++++++++------------ demos/sd-turbo/index.html | 2 +- demos/sd-turbo/index.js | 57 ++-------------------- demos/stable-diffusion-1.5/index.js | 8 +--- demos/stable-diffusion-1.5/utils.js | 31 ------------ demos/whisper-base/main.js | 18 +------ demos/whisper-base/utils.js | 47 ------------------- 7 files changed, 51 insertions(+), 185 deletions(-) diff --git a/assets/js/common_utils.js b/assets/js/common_utils.js index 3ca7829..2b18e96 100644 --- a/assets/js/common_utils.js +++ b/assets/js/common_utils.js @@ -52,7 +52,7 @@ export const updateQueryStringParameter = (uri, key, value) => { export const log = (i) => { console.log(i); - if(getMode()) { + if (getMode()) { document.getElementById("status").innerText += `\n[${getTime()}] ${i}`; } else { document.getElementById("status").innerText += `\n${i}`; @@ -61,7 +61,7 @@ export const log = (i) => { export const logError = (i) => { console.error(i); - if(getMode()) { + if (getMode()) { document.getElementById("status").innerText += `\n[${getTime()}] ${i}`; } else { document.getElementById("status").innerText += `\n${i}`; @@ -96,38 +96,53 @@ export const getTime = () => { return `${hour}:${min}:${sec}`; }; -export const getOrtDevVersion = async () => { - const response = await fetch( - "https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/" - ); - const htmlString = await response.text(); - const parser = new DOMParser(); - const doc = parser.parseFromString(htmlString, "text/html"); - let selectElement = doc.querySelector(".path li"); - selectElement = doc.querySelector("select.versions.select-css"); - let options = Array.from(selectElement.querySelectorAll("option")).map( - (option) => option.value - ); - options = options.filter(option => !option.includes("esmtest")); - return options[0].replace("onnxruntime-web@", ""); +// Get the latest dev version of ONNX Runtime Web dists +const getLatestOrtWebDevVersion = async () => { + try { + const response = await fetch('https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/'); + const htmlString = await response.text(); + const parser = new DOMParser(); + const doc = parser.parseFromString(htmlString, 'text/html'); + let selectElement = doc.querySelector('select.versions.select-css'); + let options = Array.from(selectElement.querySelectorAll('option')).map( + (option) => option.value + ); + let filteredOptions = options.filter(item => item.includes('-dev.')); + return filteredOptions[0].replace('onnxruntime-web@', ''); + } catch (error) { + console.error('Error:', error.message); + } +}; + +const ORT_BASE_URL = 'https://www.npmjs.com/package/onnxruntime-web/v/'; +const ORT_CDN_URL = 'https://cdn.jsdelivr.net/npm/onnxruntime-web@'; +const ortLink = (version) => `${ORT_BASE_URL}${version}?activeTab=versions`; + +const loadOrtScript = async (version, url) => { + try { + await loadScript('onnxruntime-web', url); + return `ONNX Runtime Web: ${version}`; + } catch (error) { + console.error('Failed to load ORT script:', error); + return 'Failed to load ONNX Runtime Web'; + } }; export const setupORT = async () => { - const ortversion = document.querySelector("#ortversion"); - removeElement("onnxruntime-web"); - let ortVersion = "1.18.0"; - let ortLink = ""; - if (ortVersion && ortVersion.length > 4) { - await loadScript( - "onnxruntime-web", - `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ortVersion}/dist/ort.all.min.js` - ); - ortLink = `https://www.npmjs.com/package/onnxruntime-web/v/${ortVersion}`; - ortversion.innerHTML = `ONNX Runtime Web: ${ortVersion}`; + const ortVersionElement = document.querySelector('#ortversion'); + removeElement('onnxruntime-web'); + const queryOrt = getQueryValue('ort')?.toLowerCase(); + let versionHtml; + if (queryOrt?.includes('-dev.')) { + versionHtml = await loadOrtScript(queryOrt, `${ORT_CDN_URL}${queryOrt}/dist/ort.all.min.js`); + } else if (queryOrt === 'test') { + await loadScript('onnxruntime-web', '../../assets/dist/ort.all.min.js'); + versionHtml = 'ONNX Runtime Web: Test version'; } else { - await loadScript("onnxruntime-web", "../dist/ort.all.min.js"); - ortversion.innerHTML = `ONNX Runtime Web: Test version`; + const latestVersion = await getLatestOrtWebDevVersion(); + versionHtml = await loadOrtScript(latestVersion, `${ORT_CDN_URL}${latestVersion}/dist/ort.all.min.js`); } + ortVersionElement.innerHTML = versionHtml; }; export const webNnStatus = async () => { diff --git a/demos/sd-turbo/index.html b/demos/sd-turbo/index.html index bcd1e1a..e0c2f19 100644 --- a/demos/sd-turbo/index.html +++ b/demos/sd-turbo/index.html @@ -13,7 +13,7 @@ window.AutoTokenizer = AutoTokenizer; - + diff --git a/demos/sd-turbo/index.js b/demos/sd-turbo/index.js index 43197b3..6e15cbc 100644 --- a/demos/sd-turbo/index.js +++ b/demos/sd-turbo/index.js @@ -4,6 +4,8 @@ // An example how to run sd-turbo with webnn in onnxruntime-web. // +import { setupORT } from '../../assets/js/common_utils.js'; + const log = (i) => { console.log(i); if(getMode()) { @@ -37,6 +39,7 @@ function getConfig() { device: "gpu", threads: "1", images: "4", + ort: "test" }; let vars = query.split("&"); for (var i = 0; i < vars.length; i++) { @@ -907,32 +910,6 @@ const getTime = () => { return `${hour}:${min}:${sec}`; }; -const getDateTime = () => { - let date = new Date(), - m = padNumber(date.getMonth() + 1, 2), - d = padNumber(date.getDate(), 2), - hour = padNumber(date.getHours(), 2), - min = padNumber(date.getMinutes(), 2), - sec = padNumber(date.getSeconds(), 2); - return `${m}/${d} ${hour}:${min}:${sec}`; -}; - -const getOrtDevVersion = async () => { - const response = await fetch( - "https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/" - ); - const htmlString = await response.text(); - const parser = new DOMParser(); - const doc = parser.parseFromString(htmlString, "text/html"); - let selectElement = doc.querySelector(".path li"); - selectElement = doc.querySelector("select.versions.select-css"); - let options = Array.from(selectElement.querySelectorAll("option")).map( - (option) => option.value - ); - options = options.filter((option) => !option.includes("esmtest")); - return options[0].replace("onnxruntime-web@", ""); -}; - const checkWebNN = async () => { let status = document.querySelector("#webnnstatus"); let info = document.querySelector("#info"); @@ -992,34 +969,6 @@ const webNnStatus = async () => { } }; -const setupORT = async () => { - const ortversion = document.querySelector("#ortversion"); - removeElement("onnxruntime-web"); - await loadScript("onnxruntime-web", "../../assets/dist/ort.all.min.js"); - ortversion.innerHTML = `ONNX Runtime Web: Test version`; -}; - -const loadScript = async (id, url) => { - return new Promise((resolve, reject) => { - const script = document.createElement("script"); - script.onload = resolve; - script.onerror = reject; - script.id = id; - script.src = url; - if (url.startsWith("http")) { - script.crossOrigin = "anonymous"; - } - document.body.append(script); - }); -}; - -const removeElement = async (id) => { - let element = document.querySelector(id); - if (element) { - element.parentNode.removeChild(element); - } -}; - const getQueryValue = (name) => { const urlParams = new URLSearchParams(window.location.search); return urlParams.get(name); diff --git a/demos/stable-diffusion-1.5/index.js b/demos/stable-diffusion-1.5/index.js index cbfbb4f..a18bf99 100644 --- a/demos/stable-diffusion-1.5/index.js +++ b/demos/stable-diffusion-1.5/index.js @@ -5,6 +5,7 @@ // import * as Utils from "./utils.js"; +import { setupORT } from '../../assets/js/common_utils.js'; // Configuration... const pixelWidth = 512; @@ -210,13 +211,6 @@ function get_tensor_from_image(imageData, format) { return tensor; } -const setupORT = async () => { - const ortversion = document.querySelector("#ortversion"); - Utils.removeElement("onnxruntime-web"); - await Utils.loadScript("onnxruntime-web", "../../assets/dist/ort.all.min.js"); - ortversion.innerHTML = `ONNX Runtime Web: Test version`; -}; - let progress = 0; let fetchProgress = 0; let textEncoderFetchProgress = 0; diff --git a/demos/stable-diffusion-1.5/utils.js b/demos/stable-diffusion-1.5/utils.js index f0cd753..58dbd06 100644 --- a/demos/stable-diffusion-1.5/utils.js +++ b/demos/stable-diffusion-1.5/utils.js @@ -233,27 +233,6 @@ export function encodeFloat16(floatValue) /*: uint16 Number*/ { return bits; } -export const loadScript = async (id, url) => { - return new Promise((resolve, reject) => { - const script = document.createElement("script"); - script.onload = resolve; - script.onerror = reject; - script.id = id; - script.src = url; - if (url.startsWith("http")) { - script.crossOrigin = "anonymous"; - } - document.body.append(script); - }); -}; - -export const removeElement = async (id) => { - let element = document.querySelector(id); - if (element) { - element.parentNode.removeChild(element); - } -}; - export const getQueryValue = (name) => { const urlParams = new URLSearchParams(window.location.search); return urlParams.get(name); @@ -293,16 +272,6 @@ const padNumber = (num, fill) => { return Array(fill > len ? fill - len + 1 || 0 : 0).join(0) + num; }; -const getDateTime = () => { - let date = new Date(), - m = padNumber(date.getMonth() + 1, 2), - d = padNumber(date.getDate(), 2), - hour = padNumber(date.getHours(), 2), - min = padNumber(date.getMinutes(), 2), - sec = padNumber(date.getSeconds(), 2); - return `${m}/${d} ${hour}:${min}:${sec}`; -}; - export const getTime = () => { let date = new Date(), hour = padNumber(date.getHours(), 2), diff --git a/demos/whisper-base/main.js b/demos/whisper-base/main.js index ade1b00..fef7938 100644 --- a/demos/whisper-base/main.js +++ b/demos/whisper-base/main.js @@ -5,7 +5,8 @@ // import { Whisper } from "./whisper.js"; -import { loadScript, removeElement, getQueryValue, webNnStatus, log, logError, concatBuffer, concatBufferArray, logUser, getMode } from "./utils.js"; +import { getQueryValue, webNnStatus, log, logError, concatBuffer, concatBufferArray, logUser, getMode } from "./utils.js"; +import { setupORT } from '../../assets/js/common_utils.js'; import VADBuilder, { VADMode, VADEvent } from "./vad/embedded.js"; import AudioMotionAnalyzer from './static/js/audioMotion-analyzer.js?min'; import { lcm } from "./vad/math.js"; @@ -582,21 +583,6 @@ async function processAudioBuffer() { } } -const setupORT = async () => { - const ortversion = document.querySelector('#ortversion'); - removeElement('onnxruntime-web'); - let ortVersion = "1.18.0"; - let ortLink = ''; - if (ortVersion && ortVersion.length > 4) { - await loadScript('onnxruntime-web', `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ortVersion}/dist/ort.all.min.js`); - ortLink = `https://www.npmjs.com/package/onnxruntime-web/v/${ortVersion}` - ortversion.innerHTML = `ONNX Runtime Web: ${ortVersion}`; - } else { - await loadScript('onnxruntime-web', '../../assets/dist/ort.all.min.js'); - ortversion.innerHTML = `ONNX Runtime Web: Test version`; - } -} - const initAudioMotion = () => { if(!audioMotion){ audioMotion = new AudioMotionAnalyzer( diff --git a/demos/whisper-base/utils.js b/demos/whisper-base/utils.js index 4c9e280..f1da294 100644 --- a/demos/whisper-base/utils.js +++ b/demos/whisper-base/utils.js @@ -1,24 +1,3 @@ -export const loadScript = async (id, url) => { - return new Promise((resolve, reject) => { - const script = document.createElement("script"); - script.onload = resolve; - script.onerror = reject; - script.id = id; - script.src = url; - if (url.startsWith("http")) { - script.crossOrigin = "anonymous"; - } - document.body.append(script); - }); -}; - -export const removeElement = async (id) => { - let el = document.querySelector(id); - if (el) { - el.parentNode.removeChild(el); - } -}; - export const sleep = (ms) => { return new Promise((resolve) => setTimeout(resolve, ms)); }; @@ -50,16 +29,6 @@ const padNumber = (num, fill) => { return Array(fill > len ? fill - len + 1 || 0 : 0).join(0) + num; }; -const getDateTime = () => { - let date = new Date(), - m = padNumber(date.getMonth() + 1, 2), - d = padNumber(date.getDate(), 2), - hour = padNumber(date.getHours(), 2), - min = padNumber(date.getMinutes(), 2), - sec = padNumber(date.getSeconds(), 2); - return `${m}/${d} ${hour}:${min}:${sec}`; -}; - const getTime = () => { let date = new Date(), hour = padNumber(date.getHours(), 2), @@ -68,22 +37,6 @@ const getTime = () => { return `${hour}:${min}:${sec}`; }; -export const getOrtDevVersion = async () => { - const response = await fetch( - "https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/" - ); - const htmlString = await response.text(); - const parser = new DOMParser(); - const doc = parser.parseFromString(htmlString, "text/html"); - let selectElement = doc.querySelector(".path li"); - selectElement = doc.querySelector("select.versions.select-css"); - let options = Array.from(selectElement.querySelectorAll("option")).map( - (option) => option.value - ); - options = options.filter((option) => !option.includes("esmtest")); - return options[0].replace("onnxruntime-web@", ""); -}; - export const webNnStatus = async () => { let result = {}; try { From 96906d6b99477430aaa0dff88b2c57171914c7c6 Mon Sep 17 00:00:00 2001 From: Belem Zhang Date: Mon, 12 Aug 2024 14:35:12 +0800 Subject: [PATCH 2/3] Fix fetchProgress is not defined issue --- demos/sd-turbo/index.js | 2 +- demos/segment-anything/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/demos/sd-turbo/index.js b/demos/sd-turbo/index.js index 6e15cbc..ba38d01 100644 --- a/demos/sd-turbo/index.js +++ b/demos/sd-turbo/index.js @@ -153,7 +153,7 @@ async function readResponse(name, response) { if (done) return; let newLoaded = loaded + value.length; - fetchProgress = (newLoaded / contentLength) * 100; + let fetchProgress = (newLoaded / contentLength) * 100; if(!getSafetyChecker()) { if (name == "sd_turbo_text_encoder") { diff --git a/demos/segment-anything/index.js b/demos/segment-anything/index.js index 33924aa..546de2f 100644 --- a/demos/segment-anything/index.js +++ b/demos/segment-anything/index.js @@ -434,7 +434,7 @@ async function readResponse(name, response) { if (done) return; let newLoaded = loaded + value.length; - fetchProgress = (newLoaded / contentLength) * 100; + let fetchProgress = (newLoaded / contentLength) * 100; if (name.toLowerCase().indexOf("encoder") > -1) { samEncoderFetchProgress = 0.7 * fetchProgress; From e042d92eb9b466c87d69a3f773cc8a062d42a4a0 Mon Sep 17 00:00:00 2001 From: Belem Zhang Date: Tue, 13 Aug 2024 13:06:30 +0800 Subject: [PATCH 3/3] Update the naming issue for loading script with messages --- assets/js/common_utils.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/js/common_utils.js b/assets/js/common_utils.js index 2b18e96..f15f1f4 100644 --- a/assets/js/common_utils.js +++ b/assets/js/common_utils.js @@ -118,7 +118,7 @@ const ORT_BASE_URL = 'https://www.npmjs.com/package/onnxruntime-web/v/'; const ORT_CDN_URL = 'https://cdn.jsdelivr.net/npm/onnxruntime-web@'; const ortLink = (version) => `${ORT_BASE_URL}${version}?activeTab=versions`; -const loadOrtScript = async (version, url) => { +const loadScriptWithMessage = async (version, url) => { try { await loadScript('onnxruntime-web', url); return `ONNX Runtime Web: ${version}`; @@ -134,13 +134,13 @@ export const setupORT = async () => { const queryOrt = getQueryValue('ort')?.toLowerCase(); let versionHtml; if (queryOrt?.includes('-dev.')) { - versionHtml = await loadOrtScript(queryOrt, `${ORT_CDN_URL}${queryOrt}/dist/ort.all.min.js`); + versionHtml = await loadScriptWithMessage(queryOrt, `${ORT_CDN_URL}${queryOrt}/dist/ort.all.min.js`); } else if (queryOrt === 'test') { await loadScript('onnxruntime-web', '../../assets/dist/ort.all.min.js'); versionHtml = 'ONNX Runtime Web: Test version'; } else { const latestVersion = await getLatestOrtWebDevVersion(); - versionHtml = await loadOrtScript(latestVersion, `${ORT_CDN_URL}${latestVersion}/dist/ort.all.min.js`); + versionHtml = await loadScriptWithMessage(latestVersion, `${ORT_CDN_URL}${latestVersion}/dist/ort.all.min.js`); } ortVersionElement.innerHTML = versionHtml; };