extern/whisper.cpp
1
0
Fork 1
mirror of https://github.com/ggerganov/whisper.cpp.git synced 2025-08-19 17:35:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

wasm : refactor wasm example + reuse fetch mechanism

Browse Source
This commit is contained in:
Georgi Gerganov
2022-11-24 23:13:26 +02:00
parent ff36415a86
commit e4805d9601
7 changed files with 264 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
examples/whisper.wasm/README.md
View File

@@ -37,7 +37,6 @@ emcmake cmake ..
make -j
# copy the produced page to your HTTP path
cp bin/whisper.wasm/index.html /path/to/html/
cp bin/whisper.wasm/whisper.js /path/to/html/
cp bin/libwhisper.worker.js /path/to/html/
cp bin/whisper.wasm/* /path/to/html/
cp bin/libwhisper.worker.js /path/to/html/
```

224
examples/whisper.wasm/index-tmpl.html
View File

@@ -45,13 +45,14 @@
<br><br><hr>
<div id="model">
Model:
Whisper model: <span id="model-whisper-status"></span>
<button id="fetch-whisper-tiny-en" onclick="loadWhisper('tiny.en')">tiny.en (75 MB)</button>
<button id="fetch-whisper-tiny" onclick="loadWhisper('tiny')">tiny (75 MB)</button>
<button id="fetch-whisper-base-en" onclick="loadWhisper('base.en')">base.en (142 MB)</button>
<button id="fetch-whisper-base" onclick="loadWhisper('base')">base (142 MB)</button>
<span id="fetch-whisper-progress"></span>
<input type="file" id="file" name="file" onchange="loadFile(event, 'whisper.bin')" />
<input type="file" id="whisper-file" name="file" onchange="loadFile(event, 'whisper.bin')" />
</div>
<br>
@@ -185,6 +186,7 @@
</div>
</div>
<script type="text/javascript" src="helpers.js"></script>
<script type='text/javascript'>
// TODO: convert audio buffer to WAV
function setAudio(audio) {
@@ -204,28 +206,15 @@
function changeInput(input) {
if (input == 'file') {
document.getElementById('input_file').style.display = 'block';
document.getElementById('input_mic').style.display = 'none';
document.getElementById('progress').style.display = 'none';
document.getElementById('input_mic' ).style.display = 'none';
document.getElementById('progress' ).style.display = 'none';
} else {
document.getElementById('input_file').style.display = 'none';
document.getElementById('input_mic').style.display = 'block';
document.getElementById('progress').style.display = 'block';
document.getElementById('input_mic' ).style.display = 'block';
document.getElementById('progress' ).style.display = 'block';
}
}
var printTextarea = (function() {
var element = document.getElementById('output');
if (element) element.alue = ''; // clear browser cache
return function(text) {
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
console.log(text);
if (element) {
element.value += text + "\n";
element.scrollTop = element.scrollHeight; // focus on bottom
}
};
})();
var Module = {
print: printTextarea,
printErr: printTextarea,
@@ -250,7 +239,7 @@
// the whisper instance
var instance = null;
var model_fname = '';
var model_whisper = '';
// helper function
function convertTypedArray(src, type) {
@@ -278,8 +267,11 @@
Module.FS_createDataFile("/", fname, buf, true, true);
model_fname = fname;
printTextarea('js: stored model: ' + fname + ' size: ' + buf.length);
model_whisper = fname;
document.getElementById('model-whisper-status').innerHTML = 'loaded "' + model_whisper + '"!';
printTextarea('storeFS: stored model: ' + fname + ' size: ' + buf.length);
}
function loadFile(event, fname) {
@@ -288,8 +280,8 @@
return;
}
printTextarea("js: loading model: " + file.name + ", size: " + file.size + " bytes");
printTextarea('js: please wait ...');
printTextarea("loadFile: loading model: " + file.name + ", size: " + file.size + " bytes");
printTextarea('loadFile: please wait ...');
var reader = new FileReader();
reader.onload = function(event) {
@@ -300,160 +292,10 @@
document.getElementById('fetch-whisper-tiny-en').style.display = 'none';
document.getElementById('fetch-whisper-base-en').style.display = 'none';
document.getElementById('fetch-whisper-tiny').style.display = 'none';
document.getElementById('fetch-whisper-base').style.display = 'none';
}
// fetch a remote file from remote URL using the Fetch API
async function fetchRemote(url, elProgress) {
printTextarea('js: downloading with fetch()...');
const response = await fetch(
url,
{
method: 'GET',
headers: {
'Content-Type': 'application/octet-stream',
},
}
);
if (!response.ok) {
printTextarea('js: failed to fetch ' + url);
return;
}
const contentLength = response.headers.get('content-length');
const total = parseInt(contentLength, 10);
const reader = response.body.getReader();
var chunks = [];
var receivedLength = 0;
var progressLast = -1;
while (true) {
const { done, value } = await reader.read();
if (done) {
break;
}
chunks.push(value);
receivedLength += value.length;
if (contentLength) {
// update progress bar element with the new percentage
elProgress.innerHTML = Math.round((receivedLength / total) * 100) + '%';
var progressCur = Math.round((receivedLength / total) * 10);
if (progressCur != progressLast) {
printTextarea('js: fetching ' + 10*progressCur + '% ...');
progressLast = progressCur;
}
}
}
var chunksAll = new Uint8Array(receivedLength);
var position = 0;
for (var chunk of chunks) {
chunksAll.set(chunk, position);
position += chunk.length;
}
return chunksAll;
}
// load remote data
// - check if the data is already in the IndexedDB
// - if not, fetch it from the remote URL and store it in the IndexedDB
// - store it in WASM memory
function loadRemote(url, dst, elProgress, size_mb) {
// query the storage quota and print it
navigator.storage.estimate().then(function (estimate) {
printTextarea('js: storage quota: ' + estimate.quota + ' bytes');
printTextarea('js: storage usage: ' + estimate.usage + ' bytes');
});
// check if the data is already in the IndexedDB
var request = indexedDB.open(dbName, dbVersion);
request.onupgradeneeded = function (event) {
var db = event.target.result;
if (db.version == 1) {
var objectStore = db.createObjectStore('models', { autoIncrement: false });
printTextarea('js: created IndexedDB ' + db.name + ' version ' + db.version);
} else {
// clear the database
var objectStore = event.currentTarget.transaction.objectStore('models');
objectStore.clear();
printTextarea('js: cleared IndexedDB ' + db.name + ' version ' + db.version);
}
};
request.onsuccess = function (event) {
var db = event.target.result;
var transaction = db.transaction(['models'], 'readonly');
var objectStore = transaction.objectStore('models');
var request = objectStore.get(url);
request.onsuccess = function (event) {
if (request.result) {
printTextarea('js: "' + url + '" is already in the IndexedDB');
storeFS(dst, request.result);
} else {
// data is not in the IndexedDB
printTextarea('js: "' + url + '" is not in the IndexedDB');
// alert and ask the user to confirm
if (!confirm('You are about to download ' + size_mb + ' MB of data.\nThe model data will be cached in the browser for future use.\n\nPress OK to continue.')) {
var el;
el = document.getElementById('fetch-whisper-tiny-en'); if (el) el.style.display = 'inline-block';
el = document.getElementById('fetch-whisper-tiny'); if (el) el.style.display = 'inline-block';
el = document.getElementById('fetch-whisper-base-en'); if (el) el.style.display = 'inline-block';
el = document.getElementById('fetch-whisper-base'); if (el) el.style.display = 'inline-block';
return;
}
fetchRemote(url, elProgress).then(function (data) {
if (data) {
// store the data in the IndexedDB
var request = indexedDB.open(dbName, dbVersion);
request.onsuccess = function (event) {
var db = event.target.result;
var transaction = db.transaction(['models'], 'readwrite');
var objectStore = transaction.objectStore('models');
var request = objectStore.put(data, url);
request.onsuccess = function (event) {
printTextarea('js: "' + url + '" stored in the IndexedDB');
storeFS(dst, data);
};
request.onerror = function (event) {
printTextarea('js: failed to store "' + url + '" in the IndexedDB');
};
};
}
});
}
};
request.onerror = function (event) {
printTextarea('js: failed to get data from the IndexedDB');
};
};
request.onerror = function (event) {
printTextarea('js: failed to open IndexedDB');
};
request.onblocked = function (event) {
printTextarea('js: failed to open IndexedDB: blocked');
};
request.onabort = function (event) {
printTextarea('js: failed to open IndexedDB: abort');
};
document.getElementById('fetch-whisper-tiny' ).style.display = 'none';
document.getElementById('fetch-whisper-base' ).style.display = 'none';
document.getElementById('whisper-file' ).style.display = 'none';
document.getElementById('model-whisper-status' ).innerHTML = 'loaded model: ' + file.name;
}
function loadWhisper(model) {
@@ -473,17 +315,33 @@
let url = urls[model];
let dst = 'whisper.bin';
let el = document.getElementById('fetch-whisper-progress');
let size_mb = sizes[model];
model_whisper = model;
document.getElementById('fetch-whisper-tiny-en').style.display = 'none';
document.getElementById('fetch-whisper-base-en').style.display = 'none';
document.getElementById('fetch-whisper-tiny').style.display = 'none';
document.getElementById('fetch-whisper-base').style.display = 'none';
document.getElementById('fetch-whisper-tiny' ).style.display = 'none';
document.getElementById('fetch-whisper-base' ).style.display = 'none';
document.getElementById('whisper-file' ).style.display = 'none';
document.getElementById('model-whisper-status' ).innerHTML = 'loading model: ' + model;
loadRemote(url, dst, el, size_mb);
cbProgress = function(p) {
let el = document.getElementById('fetch-whisper-progress');
el.innerHTML = Math.round(100*p) + '%';
};
cbCancel = function() {
var el;
el = document.getElementById('fetch-whisper-tiny-en'); if (el) el.style.display = 'inline-block';
el = document.getElementById('fetch-whisper-base-en'); if (el) el.style.display = 'inline-block';
el = document.getElementById('fetch-whisper-tiny' ); if (el) el.style.display = 'inline-block';
el = document.getElementById('fetch-whisper-base' ); if (el) el.style.display = 'inline-block';
el = document.getElementById('whisper-file' ); if (el) el.style.display = 'inline-block';
el = document.getElementById('model-whisper-status' ); if (el) el.innerHTML = '';
};
loadRemote(url, dst, size_mb, cbProgress, storeFS, cbCancel, printTextarea);
}
//
@@ -651,7 +509,7 @@
if (instance) {
printTextarea("js: whisper initialized, instance: " + instance);
document.getElementById('model').innerHTML = 'Model loaded: ' + model_fname;
document.getElementById('model').innerHTML = 'Model loaded: ' + model_whisper;
}
}