diff options
Diffstat (limited to 'assets/playground.html')
| -rw-r--r-- | assets/playground.html | 29 |
1 files changed, 27 insertions, 2 deletions
diff --git a/assets/playground.html b/assets/playground.html index 72c1e3e..ec13133 100644 --- a/assets/playground.html +++ b/assets/playground.html @@ -251,7 +251,8 @@ } .copy-message-btn, - .regenerate-message-btn { + .regenerate-message-btn, + .tts-message-btn { top: 0.7rem; right: 0.7rem; cursor: pointer; @@ -260,7 +261,8 @@ } .copy-message-btn svg, - .regenerate-message-btn svg { + .regenerate-message-btn svg, + .tts-message-btn svg { width: 1rem; height: 1rem; } @@ -618,6 +620,16 @@ </svg> </div> </template> + <template + x-if="message.state == 'succeed' && !!window.speechSynthesis"> + <div class="tts-message-btn" @click="handleTTSMessage(message.content)" title="Text to speech"> + <svg fill="currentColor" viewBox="0 0 16 16"> + <path d="M11.536 14.01A8.47 8.47 0 0 0 14.026 8a8.47 8.47 0 0 0-2.49-6.01l-.708.707A7.48 7.48 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z"/> + <path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z"/> + <path d="M10.025 8a4.5 4.5 0 0 1-1.318 3.182L8 10.475A3.5 3.5 0 0 0 9.025 8c0-.966-.392-1.841-1.025-2.475l.707-.707A4.5 4.5 0 0 1 10.025 8M7 4a.5.5 0 0 0-.812-.39L3.825 5.5H1.5A.5.5 0 0 0 1 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 7 12zM4.312 6.39 6 5.04v5.92L4.312 9.61A.5.5 0 0 0 4 9.5H2v-3h2a.5.5 0 0 0 .312-.11"/> + </svg> + </div> + </template> </div> </template> </div> @@ -816,6 +828,19 @@ this.ask(); }, + /** + * @param {string} messageToUtter + */ + handleTTSMessage(messageToUtter) { + if (!!window.speechSynthesis) { + if (window.speechSynthesis.speaking || window.speechSynthesis.pending) { + window.speechSynthesis.cancel(); + } else { + let utterance = new SpeechSynthesisUtterance(messageToUtter); + window.speechSynthesis.speak(utterance); + } + } + }, handleCancelAsk() { this.askAbortController?.abort(); |