diff --git a/examples/talk.wasm/index-tmpl.html b/examples/talk.wasm/index-tmpl.html index 5124392..51d176f 100644 --- a/examples/talk.wasm/index-tmpl.html +++ b/examples/talk.wasm/index-tmpl.html @@ -6,7 +6,7 @@ + + - -
- Talk - GPT-2 meets Whisper in WebAssembly + +
+
+
+
+

Talk - GPT-2 + Whisper in WebAssembly

-

+
+ +

Talk with an Artificial Intelligence in your browser. This demo uses:

+ + + + All of this runs locally in your browser using WebAssembly. + You can find more about this project on GitHub. + +

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

+ +
+ +
Select the models you would like to use:
+ +
+
+
+

Whisper model:

+ + +
+
+

Quantized models:

+ + +
+
+

GPT-2 model:

+ + + + +
+
+ - Talk with an Artificial Intelligence in your browser. This demo uses: + +
+ +
+ +
+
- +
+
Click "Start" button to begin the conversation:
+
+ + + + + +
+
+ + +
+ +
+ +
+ Status: not started + +
[The text context will be displayed here]
+
+ +
+ + Debug output: + + +
+ + Troubleshooting + +

+ + The page does some heavy computations, so make sure: + +
    +
  • To use a modern web browser (e.g. Chrome, Firefox)
  • +
  • To use a fast desktop or laptop computer (i.e. not a mobile phone)
  • +
  • Your browser supports WASM Fixed-width SIMD
  • +
+ + Note that these neural network models were not meant to be used in a browser, so the performance and
+ quality of the results may not be optimal. If you have any questions or suggestions, checkout the following + discussion. + +

+ + Here is a short video of the demo in action: https://youtu.be/LeWKl8t1-Hc + +

- All of this runs locally in your browser using WebAssembly.
- You can find more about this project on GitHub. - -

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

- -
- - Select the models you would like to use and click the "Start" button to begin the conversation - -

- -
- Whisper model: - - -

- Quantized models:

- - - - - -
- -
- -
- GPT-2 model: - - - - - -
- -
- -
- - - - - - - -
- -
- -
- Status: not started - -
[The text context will be displayed here]
-
- -
- - Debug output: - - -
- - Troubleshooting - -

- - The page does some heavy computations, so make sure: - -
    -
  • To use a modern web browser (e.g. Chrome, Firefox)
  • -
  • To use a fast desktop or laptop computer (i.e. not a mobile phone)
  • -
  • Your browser supports WASM Fixed-width SIMD
  • -
- - Note that these neural network models were not meant to be used in a browser, so the performance and
- quality of the results may not be optimal. If you have any questions or suggestions, checkout the following - discussion. - -

- - Here is a short video of the demo in action: https://youtu.be/LeWKl8t1-Hc - -

- -
- - | - Build time: @GIT_DATE@ | - Commit hash: @GIT_SHA1@ | - Commit subject: @GIT_COMMIT_SUBJECT@ | - Source Code | - +
+
+
+

+ Build time: @GIT_DATE@ | +

+

+ Commit hash: @GIT_SHA1@ | +

+

+ Commit subject: @GIT_COMMIT_SUBJECT@ | +

+

+ Source Code | +

+
+
+
+ +
+
@@ -291,24 +332,40 @@ 'tiny-en-q5_1': 31, 'base-en-q5_1': 57, }; + let ids = { + 'tiny.en': 'fetch-whisper-tiny-en', + 'base.en': 'fetch-whisper-base-en', + + 'tiny-en-q5_1': 'fetch-whisper-tiny-en-q5_1', + 'base-en-q5_1': 'fetch-whisper-base-en-q5_1', + }; let url = urls[model]; let dst = 'whisper.bin'; let size_mb = sizes[model]; + let id = ids[model]; model_whisper = model; - document.getElementById('fetch-whisper-tiny-en').style.display = 'none'; - document.getElementById('fetch-whisper-base-en').style.display = 'none'; + document.getElementById(id).classList.replace("btn-secondary", "btn-primary"); + document.getElementById("bs-progress-bars").style.display = ''; + document.getElementById("fetch-whisper-progress-container").style.display = ''; - document.getElementById('fetch-whisper-tiny-en-q5_1').style.display = 'none'; - document.getElementById('fetch-whisper-base-en-q5_1').style.display = 'none'; + document.getElementById('fetch-whisper-tiny-en').disabled = true; + document.getElementById('fetch-whisper-base-en').disabled = true; - document.getElementById('model-whisper-status').innerHTML = 'loading "' + model + '" ... '; + document.getElementById('fetch-whisper-tiny-en-q5_1').disabled = true; + document.getElementById('fetch-whisper-base-en-q5_1').disabled = true; + + document.getElementById('model-whisper-status').textContent = "Load " + model + ":"; cbProgress = function(p) { let el = document.getElementById('fetch-whisper-progress'); el.innerHTML = Math.round(100*p) + '%'; + el.style.width = Math.round(100*p) + '%'; + if(p == 1){ + el.classList.replace("text-bg-warning", "text-bg-danger"); + } }; cbCancel = function() { @@ -342,12 +399,18 @@ model_gpt_2 = model; - document.getElementById('fetch-gpt-2-small').style.display = 'none'; - document.getElementById('model-gpt-2-status').innerHTML = 'loading "' + model + '" ... '; + document.getElementById('fetch-gpt-2-small').classList.replace("btn-secondary", "btn-primary"); + document.getElementById('fetch-gpt-2-small').disabled = true; + document.getElementById('fetch-gpt-2-container').style.display = ''; + document.getElementById('model-gpt-2-status').innerHTML = "Load " + model + ":"; cbProgress = function(p) { let el = document.getElementById('fetch-gpt-2-progress'); el.innerHTML = Math.round(100*p) + '%'; + el.style.width = Math.round(100*p) + '%'; + if(p == 1){ + el.classList.replace("text-bg-warning", "text-bg-danger"); + } }; cbCancel = function() {