Merge pull request #28 from ibelem/ort-dists-update

Update version of ONNX Runtime Web dists
microsoft · Aug 13, 2024 · 4c80f1b · 4c80f1b
2 parents d05a3e0 + e042d92
commit 4c80f1b
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 187 deletions.
diff --git 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 loadScriptWithMessage = async (version, url) => {
+  try {
+    await loadScript('onnxruntime-web', url);
+    return `ONNX Runtime Web: <a href="${ortLink(version)}">${version}</a>`;
+  } 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: <a href="${ortLink}">${ortVersion}</a>`;
+  const ortVersionElement = document.querySelector('#ortversion');
+  removeElement('onnxruntime-web');
+  const queryOrt = getQueryValue('ort')?.toLowerCase();
+  let versionHtml;
+  if (queryOrt?.includes('-dev.')) {
+    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 {
-    await loadScript("onnxruntime-web", "../dist/ort.all.min.js");
-    ortversion.innerHTML = `ONNX Runtime Web: Test version`;
+    const latestVersion = await getLatestOrtWebDevVersion();
+    versionHtml = await loadScriptWithMessage(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
@@ -13,7 +13,7 @@
         window.AutoTokenizer = AutoTokenizer;
     </script>
     <!-- <script src="ort-web/js/web/dist/ort.all.js"></script> -->
-    <script src="index.js"></script>
+    <script src="index.js" type="module"></script>
 </head>
 
 <body>

diff --git 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++) {
@@ -150,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") {
@@ -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/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;

diff --git 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
@@ -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
@@ -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: <a href="${ortLink}">${ortVersion}</a>`;
-  } 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
@@ -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 {