diff --git a/assets/arena.html b/assets/arena.html
index f0c93e5..1454448 100644
--- a/assets/arena.html
+++ b/assets/arena.html
@@ -174,7 +174,8 @@
}
.copy-message-btn,
- .regenerate-message-btn {
+ .regenerate-message-btn,
+ .tts-message-btn {
top: 0.7rem;
right: 0.7rem;
cursor: pointer;
@@ -183,7 +184,8 @@
}
.copy-message-btn svg,
- .regenerate-message-btn svg {
+ .regenerate-message-btn svg,
+ .tts-message-btn svg {
width: 1rem;
height: 1rem;
}
@@ -459,6 +461,16 @@
+
+
+
@@ -658,6 +670,19 @@
this.ask(index);
},
+ /**
+ * @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() {
for (const chat of this.chats) {
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 @@
+
+
+
@@ -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();