mirror of
https://github.com/ggerganov/whisper.cpp.git
synced 2025-04-25 11:48:34 +02:00
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
This commit is contained in:
Daniel Bevenius
GitHub
parent
88d13a17a7
commit
e17af6524f
91
.github/workflows/examples-wasm.yml
vendored
Normal file
91
.github/workflows/examples-wasm.yml
vendored
Normal file
@ -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
|
||||||
@ -24,6 +24,8 @@
|
|||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script src="../coi-serviceworker.js"></script>
|
||||||
|
<link rel="icon" href="data:,">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="main-container">
|
<div id="main-container">
|
||||||
@ -36,11 +38,10 @@
|
|||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<b>More examples:</b>
|
<b>More examples:</b>
|
||||||
<a href="https://whisper.ggerganov.com/">main</a> |
|
<a href="../">main</a> |
|
||||||
<a href="https://whisper.ggerganov.com/bench">bench</a> |
|
<a href="../bench.wasm/">bench</a> |
|
||||||
<a href="https://whisper.ggerganov.com/stream">stream</a> |
|
<a href="../stream.wasm">stream</a> |
|
||||||
<a href="https://whisper.ggerganov.com/command">command</a> |
|
<a href="../command.wasm/">command</a> |
|
||||||
<a href="https://whisper.ggerganov.com/talk">talk</a> |
|
|
||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
|
|||||||
146
examples/coi-serviceworker.js
Normal file
146
examples/coi-serviceworker.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})();
|
||||||
|
}
|
||||||
@ -24,6 +24,8 @@
|
|||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script src="../coi-serviceworker.js"></script>
|
||||||
|
<link rel="icon" href="data:,">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="main-container">
|
<div id="main-container">
|
||||||
@ -36,11 +38,10 @@
|
|||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<b>More examples:</b>
|
<b>More examples:</b>
|
||||||
<a href="https://whisper.ggerganov.com/">main</a> |
|
<a href="../">main</a> |
|
||||||
<a href="https://whisper.ggerganov.com/bench">bench</a> |
|
<a href="../bench.wasm/">bench</a> |
|
||||||
<a href="https://whisper.ggerganov.com/stream">stream</a> |
|
<a href="../stream.wasm">stream</a> |
|
||||||
<a href="https://whisper.ggerganov.com/command">command</a> |
|
<a href="../command.wasm/">command</a> |
|
||||||
<a href="https://whisper.ggerganov.com/talk">talk</a> |
|
|
||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
|
|||||||
@ -24,6 +24,8 @@
|
|||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script src="../coi-serviceworker.js"></script>
|
||||||
|
<link rel="icon" href="data:,">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="main-container">
|
<div id="main-container">
|
||||||
@ -36,11 +38,10 @@
|
|||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<b>More examples:</b>
|
<b>More examples:</b>
|
||||||
<a href="https://whisper.ggerganov.com/">main</a> |
|
<a href="../">main</a> |
|
||||||
<a href="https://whisper.ggerganov.com/bench">bench</a> |
|
<a href="../bench.wasm/">bench</a> |
|
||||||
<a href="https://whisper.ggerganov.com/stream">stream</a> |
|
<a href="../stream.wasm">stream</a> |
|
||||||
<a href="https://whisper.ggerganov.com/command">command</a> |
|
<a href="../command.wasm/">command</a> |
|
||||||
<a href="https://whisper.ggerganov.com/talk">talk</a> |
|
|
||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
|
|||||||
@ -24,6 +24,8 @@
|
|||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script src="coi-serviceworker.js"></script>
|
||||||
|
<link rel="icon" href="data:,">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="main-container">
|
<div id="main-container">
|
||||||
@ -47,11 +49,9 @@
|
|||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<b>More examples:</b>
|
<b>More examples:</b>
|
||||||
<a href="https://whisper.ggerganov.com/">main</a> |
|
<a href="bench.wasm/">bench</a> |
|
||||||
<a href="https://whisper.ggerganov.com/bench">bench</a> |
|
<a href="stream.wasm">stream</a> |
|
||||||
<a href="https://whisper.ggerganov.com/stream">stream</a> |
|
<a href="command.wasm/">command</a> |
|
||||||
<a href="https://whisper.ggerganov.com/command">command</a> |
|
|
||||||
<a href="https://whisper.ggerganov.com/talk">talk</a> |
|
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user