From e17af6524f7268b02b506d2836a467335de27435 Mon Sep 17 00:00:00 2001 From: Daniel Bevenius Date: Mon, 31 Mar 2025 11:34:40 +0200 Subject: [PATCH] ci : add github pages workflow for wasm examples (#2969) * ci : add github pages workflow for wasm examples This commit adds a github workflow to build and deploy the wasm examples to github pages. The whisper.wasm example is deployed as the main page. This workflow is trigged by a push to master and will deploy the examples to: https://ggerganov.github.io/whisper.cpp/. This requires that the repository has enabled github actions in `Settings` -> `Pages` -> `Build and deployment` -> `Source` be set to `GitHub Actions`. One thing to note is that this commit removes the `talk` example as I'm not sure how this example is built yet. Refs: https://github.com/ggerganov/whisper.cpp/issues/2784 --- .github/workflows/examples-wasm.yml | 91 ++++++++++++++++ examples/bench.wasm/index-tmpl.html | 11 +- examples/coi-serviceworker.js | 146 ++++++++++++++++++++++++++ examples/command.wasm/index-tmpl.html | 11 +- examples/stream.wasm/index-tmpl.html | 11 +- examples/whisper.wasm/index-tmpl.html | 10 +- 6 files changed, 260 insertions(+), 20 deletions(-) create mode 100644 .github/workflows/examples-wasm.yml create mode 100644 examples/coi-serviceworker.js diff --git a/.github/workflows/examples-wasm.yml b/.github/workflows/examples-wasm.yml new file mode 100644 index 00000000..125c106b --- /dev/null +++ b/.github/workflows/examples-wasm.yml @@ -0,0 +1,91 @@ +name: Examples WASM +on: + push: + branches: ["master"] + + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + deploy-wasm-github-pages: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Pages + uses: actions/configure-pages@v4 + + - name: Setup emsdk + uses: mymindstorm/setup-emsdk@v14 + + - name: Build WASM Examples + # Enable for real build later in whisper.cpp + run: | + mkdir -p build-em && cd build-em + emcmake cmake .. -DCMAKE_BUILD_TYPE=Release + make -j + + - name: Create staging directory + run: mkdir -p staging + + - name: Create .nojekyll file in staging directory + run: touch staging/.nojekyll + + - name: Copy application files + run: | + build_dir=build-em/bin + + ls ${build_dir} + + # command.wasm + target_dir=staging/command.wasm + mkdir -p ${target_dir} + cp ${build_dir}/command.wasm/{index.html,command.js,helpers.js} ${target_dir} + cp ${build_dir}/libcommand.js ${target_dir} + + # bench.wasm + target_dir=staging/bench.wasm + mkdir -p ${target_dir} + cp ${build_dir}/bench.wasm/{index.html,bench.js,helpers.js} ${target_dir} + cp ${build_dir}/libbench.js ${target_dir} + + # stream.wasm + target_dir=staging/stream.wasm + mkdir -p ${target_dir} + cp ${build_dir}/stream.wasm/{index.html,stream.js,helpers.js} ${target_dir} + cp ${build_dir}/libstream.js ${target_dir} + + # whisper.wasm (this will be the main example page) + target_dir=staging + mkdir -p ${target_dir} + cp ${build_dir}/whisper.wasm/{index.html,main.js,helpers.js} ${target_dir} + cp ${build_dir}/libmain.js ${target_dir} + + # Copy Cross-Origin Isolation service worker + cp -v examples/coi-serviceworker.js staging/ + + - name: List files in staging directory (for debugging) + run: | + echo "Files in staging directory:" + find staging -type f | sort + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: ./staging + + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/examples/bench.wasm/index-tmpl.html b/examples/bench.wasm/index-tmpl.html index ca7a0138..e9b49e07 100644 --- a/examples/bench.wasm/index-tmpl.html +++ b/examples/bench.wasm/index-tmpl.html @@ -24,6 +24,8 @@ overflow-x: scroll; } + +
@@ -36,11 +38,10 @@

More examples: - main | - bench | - stream | - command | - talk | + main | + bench | + stream | + command |

diff --git a/examples/coi-serviceworker.js b/examples/coi-serviceworker.js new file mode 100644 index 00000000..9901474c --- /dev/null +++ b/examples/coi-serviceworker.js @@ -0,0 +1,146 @@ +/*! coi-serviceworker v0.1.7 - Guido Zuidhof and contributors, licensed under MIT */ +let coepCredentialless = false; +if (typeof window === 'undefined') { + self.addEventListener("install", () => self.skipWaiting()); + self.addEventListener("activate", (event) => event.waitUntil(self.clients.claim())); + + self.addEventListener("message", (ev) => { + if (!ev.data) { + return; + } else if (ev.data.type === "deregister") { + self.registration + .unregister() + .then(() => { + return self.clients.matchAll(); + }) + .then(clients => { + clients.forEach((client) => client.navigate(client.url)); + }); + } else if (ev.data.type === "coepCredentialless") { + coepCredentialless = ev.data.value; + } + }); + + self.addEventListener("fetch", function (event) { + const r = event.request; + if (r.cache === "only-if-cached" && r.mode !== "same-origin") { + return; + } + + const request = (coepCredentialless && r.mode === "no-cors") + ? new Request(r, { + credentials: "omit", + }) + : r; + event.respondWith( + fetch(request) + .then((response) => { + if (response.status === 0) { + return response; + } + + const newHeaders = new Headers(response.headers); + newHeaders.set("Cross-Origin-Embedder-Policy", + coepCredentialless ? "credentialless" : "require-corp" + ); + if (!coepCredentialless) { + newHeaders.set("Cross-Origin-Resource-Policy", "cross-origin"); + } + newHeaders.set("Cross-Origin-Opener-Policy", "same-origin"); + + return new Response(response.body, { + status: response.status, + statusText: response.statusText, + headers: newHeaders, + }); + }) + .catch((e) => console.error(e)) + ); + }); + +} else { + (() => { + const reloadedBySelf = window.sessionStorage.getItem("coiReloadedBySelf"); + window.sessionStorage.removeItem("coiReloadedBySelf"); + const coepDegrading = (reloadedBySelf == "coepdegrade"); + + // You can customize the behavior of this script through a global `coi` variable. + const coi = { + shouldRegister: () => !reloadedBySelf, + shouldDeregister: () => false, + coepCredentialless: () => true, + coepDegrade: () => true, + doReload: () => window.location.reload(), + quiet: false, + ...window.coi + }; + + const n = navigator; + const controlling = n.serviceWorker && n.serviceWorker.controller; + + // Record the failure if the page is served by serviceWorker. + if (controlling && !window.crossOriginIsolated) { + window.sessionStorage.setItem("coiCoepHasFailed", "true"); + } + const coepHasFailed = window.sessionStorage.getItem("coiCoepHasFailed"); + + if (controlling) { + // Reload only on the first failure. + const reloadToDegrade = coi.coepDegrade() && !( + coepDegrading || window.crossOriginIsolated + ); + n.serviceWorker.controller.postMessage({ + type: "coepCredentialless", + value: (reloadToDegrade || coepHasFailed && coi.coepDegrade()) + ? false + : coi.coepCredentialless(), + }); + if (reloadToDegrade) { + !coi.quiet && console.log("Reloading page to degrade COEP."); + window.sessionStorage.setItem("coiReloadedBySelf", "coepdegrade"); + coi.doReload("coepdegrade"); + } + + if (coi.shouldDeregister()) { + n.serviceWorker.controller.postMessage({ type: "deregister" }); + } + } + + // If we're already coi: do nothing. Perhaps it's due to this script doing its job, or COOP/COEP are + // already set from the origin server. Also if the browser has no notion of crossOriginIsolated, just give up here. + if (window.crossOriginIsolated !== false || !coi.shouldRegister()) return; + + if (!window.isSecureContext) { + !coi.quiet && console.log("COOP/COEP Service Worker not registered, a secure context is required."); + return; + } + + // In some environments (e.g. Firefox private mode) this won't be available + if (!n.serviceWorker) { + !coi.quiet && console.error("COOP/COEP Service Worker not registered, perhaps due to private mode."); + return; + } + + n.serviceWorker.register(window.document.currentScript.src).then( + (registration) => { + !coi.quiet && console.log("COOP/COEP Service Worker registered", registration.scope); + + registration.addEventListener("updatefound", () => { + !coi.quiet && console.log("Reloading page to make use of updated COOP/COEP Service Worker."); + window.sessionStorage.setItem("coiReloadedBySelf", "updatefound"); + coi.doReload(); + }); + + // If the registration is active, but it's not controlling the page + if (registration.active && !n.serviceWorker.controller) { + !coi.quiet && console.log("Reloading page to make use of COOP/COEP Service Worker."); + window.sessionStorage.setItem("coiReloadedBySelf", "notcontrolling"); + coi.doReload(); + } + }, + (err) => { + !coi.quiet && console.error("COOP/COEP Service Worker failed to register:", err); + } + ); + })(); +} diff --git a/examples/command.wasm/index-tmpl.html b/examples/command.wasm/index-tmpl.html index 9e74012c..752d851e 100644 --- a/examples/command.wasm/index-tmpl.html +++ b/examples/command.wasm/index-tmpl.html @@ -24,6 +24,8 @@ overflow-x: scroll; } + +
@@ -36,11 +38,10 @@

More examples: - main | - bench | - stream | - command | - talk | + main | + bench | + stream | + command |

diff --git a/examples/stream.wasm/index-tmpl.html b/examples/stream.wasm/index-tmpl.html index 045eab20..c831b2f5 100644 --- a/examples/stream.wasm/index-tmpl.html +++ b/examples/stream.wasm/index-tmpl.html @@ -24,6 +24,8 @@ overflow-x: scroll; } + +
@@ -36,11 +38,10 @@

More examples: - main | - bench | - stream | - command | - talk | + main | + bench | + stream | + command |

diff --git a/examples/whisper.wasm/index-tmpl.html b/examples/whisper.wasm/index-tmpl.html index 9362d44c..32fdf12f 100644 --- a/examples/whisper.wasm/index-tmpl.html +++ b/examples/whisper.wasm/index-tmpl.html @@ -24,6 +24,8 @@ overflow-x: scroll; } + +
@@ -47,11 +49,9 @@ More examples: - main | - bench | - stream | - command | - talk | + bench | + stream | + command |