mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-02-21 17:36:39 +00:00
working audio in and audio out
This commit is contained in:
Saifeddine ALOUI
parent
747d7af758
commit
a42f048194
@ -1,5 +1,5 @@
|
||||
# =================== Lord Of Large Language Models Configuration file ===========================
|
||||
version: 14
|
||||
version: 15
|
||||
binding_name: null
|
||||
model_name: null
|
||||
|
||||
@ -44,4 +44,5 @@ auto_update: false
|
||||
# Audio
|
||||
audio_in_language: 'en-US'
|
||||
audio_out_voice: null
|
||||
auto_speak: false
|
||||
silenceTimer: 5000
|
||||
File diff suppressed because one or more lines are too long
@ -1,4 +1,4 @@
|
||||
.dot{width:10px;height:10px;border-radius:50%}.dot-green{background-color:green}.dot-red{background-color:red}.active-tab{font-weight:700}.scrollbar[data-v-3cb88319]{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);white-space:pre-wrap;overflow-wrap:break-word}.scrollbar[data-v-3cb88319]::-webkit-scrollbar{width:8px}.scrollbar[data-v-3cb88319]::-webkit-scrollbar-track{background-color:var(--scrollbar-track-color)}.scrollbar[data-v-3cb88319]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color);border-radius:4px}.scrollbar[data-v-3cb88319]::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color)}.toastItem-enter-active[data-v-3ffdabf3],.toastItem-leave-active[data-v-3ffdabf3]{transition:all .5s ease}.toastItem-enter-from[data-v-3ffdabf3],.toastItem-leave-to[data-v-3ffdabf3]{opacity:0;transform:translate(-30px)}.selected-choice{background-color:#bde4ff}.list-move[data-v-22719428],.list-enter-active[data-v-22719428],.list-leave-active[data-v-22719428]{transition:all .5s ease}.list-enter-from[data-v-22719428]{transform:translatey(-30px)}.list-leave-to[data-v-22719428]{opacity:0;transform:translatey(30px)}.list-leave-active[data-v-22719428]{position:absolute}.bounce-enter-active[data-v-22719428]{animation:bounce-in-22719428 .5s}.bounce-leave-active[data-v-22719428]{animation:bounce-in-22719428 .5s reverse}@keyframes bounce-in-22719428{0%{transform:scale(0)}50%{transform:scale(1.25)}to{transform:scale(1)}}.bg-primary-light[data-v-22719428]{background-color:#0ff}.hover[data-v-22719428]:bg-primary-light:hover{background-color:#7fffd4}.font-bold[data-v-22719428]{font-weight:700}.hljs-comment,.hljs-quote{color:#7285b7}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#ff9da4}.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#ffc58f}.hljs-attribute{color:#ffeead}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#d1f1a9}.hljs-section,.hljs-title{color:#bbdaff}.hljs-keyword,.hljs-selector-tag{color:#ebbbff}.hljs{background:#002451;color:#fff}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
|
||||
.dot{width:10px;height:10px;border-radius:50%}.dot-green{background-color:green}.dot-red{background-color:red}.active-tab{font-weight:700}.scrollbar[data-v-3cb88319]{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);white-space:pre-wrap;overflow-wrap:break-word}.scrollbar[data-v-3cb88319]::-webkit-scrollbar{width:8px}.scrollbar[data-v-3cb88319]::-webkit-scrollbar-track{background-color:var(--scrollbar-track-color)}.scrollbar[data-v-3cb88319]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color);border-radius:4px}.scrollbar[data-v-3cb88319]::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color)}.toastItem-enter-active[data-v-3ffdabf3],.toastItem-leave-active[data-v-3ffdabf3]{transition:all .5s ease}.toastItem-enter-from[data-v-3ffdabf3],.toastItem-leave-to[data-v-3ffdabf3]{opacity:0;transform:translate(-30px)}.selected-choice{background-color:#bde4ff}.list-move[data-v-67b64cb1],.list-enter-active[data-v-67b64cb1],.list-leave-active[data-v-67b64cb1]{transition:all .5s ease}.list-enter-from[data-v-67b64cb1]{transform:translatey(-30px)}.list-leave-to[data-v-67b64cb1]{opacity:0;transform:translatey(30px)}.list-leave-active[data-v-67b64cb1]{position:absolute}.bounce-enter-active[data-v-67b64cb1]{animation:bounce-in-67b64cb1 .5s}.bounce-leave-active[data-v-67b64cb1]{animation:bounce-in-67b64cb1 .5s reverse}@keyframes bounce-in-67b64cb1{0%{transform:scale(0)}50%{transform:scale(1.25)}to{transform:scale(1)}}.bg-primary-light[data-v-67b64cb1]{background-color:#0ff}.hover[data-v-67b64cb1]:bg-primary-light:hover{background-color:#7fffd4}.font-bold[data-v-67b64cb1]{font-weight:700}.hljs-comment,.hljs-quote{color:#7285b7}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#ff9da4}.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#ffc58f}.hljs-attribute{color:#ffeead}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#d1f1a9}.hljs-section,.hljs-title{color:#bbdaff}.hljs-keyword,.hljs-selector-tag{color:#ebbbff}.hljs{background:#002451;color:#fff}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
|
||||
Theme: Tokyo-night-Dark
|
||||
origin: https://github.com/enkia/tokyo-night-vscode-theme
|
||||
Description: Original highlight.js style
|
||||
4
web/dist/index.html
vendored
4
web/dist/index.html
vendored
@ -6,8 +6,8 @@
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LoLLMS WebUI - Welcome</title>
|
||||
<script type="module" crossorigin src="/assets/index-c38120e7.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-60a1711a.css">
|
||||
<script type="module" crossorigin src="/assets/index-27ecf876.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-ba1c9746.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -197,6 +197,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
msg:null,
|
||||
isVoiceActive:false,
|
||||
speechSynthesis: null,
|
||||
voices: [],
|
||||
@ -235,32 +236,52 @@ export default {
|
||||
this.voices = this.speechSynthesis.getVoices();
|
||||
},
|
||||
speak() {
|
||||
// Assuming you have received the text from your backend and stored it in a variable called "streamedText"
|
||||
const textToSpeak = this.message.content;
|
||||
if(this.msg)
|
||||
{
|
||||
this.isVoiceActive = false;
|
||||
this.speechSynthesis.cancel();
|
||||
this.msg = null;
|
||||
return
|
||||
}
|
||||
const textToSpeak = this.message.content;
|
||||
const chunkSize = 200; // You can adjust the chunk size as needed
|
||||
|
||||
// Create a new SpeechSynthesisUtterance instance
|
||||
const msg = new SpeechSynthesisUtterance();
|
||||
msg.text = textToSpeak;
|
||||
// Create a new SpeechSynthesisUtterance instance
|
||||
this.msg = new SpeechSynthesisUtterance();
|
||||
|
||||
// Optionally, you can set the voice and other parameters
|
||||
// For example, to set the voice, assuming you want the first voice available:
|
||||
if (this.voices.length > 0) {
|
||||
let v = this.voices.filter(voice => voice.name === this.$store.state.config.audio_out_voice);
|
||||
console.log(v)
|
||||
msg.voice = v[0];
|
||||
}
|
||||
// Optionally, set the voice and other parameters as before
|
||||
if (this.voices.length > 0) {
|
||||
this.msg.voice = this.voices.filter(voice => voice.name === this.$store.state.config.audio_out_voice)[0];
|
||||
}
|
||||
|
||||
// Set isVoiceActive to true before starting synthesis
|
||||
this.isVoiceActive = true;
|
||||
// Set isVoiceActive to true before starting synthesis
|
||||
this.isVoiceActive = true;
|
||||
|
||||
// Listen for the end event to set isVoiceActive to false after synthesis completes
|
||||
msg.addEventListener('end', () => {
|
||||
this.isVoiceActive = false;
|
||||
});
|
||||
// Function to speak a chunk of text
|
||||
const speakChunk = (startIdx) => {
|
||||
const chunk = textToSpeak.substr(startIdx, chunkSize);
|
||||
this.msg.text = chunk;
|
||||
this.speechSynthesis.speak(this.msg);
|
||||
};
|
||||
|
||||
// Speak the text
|
||||
this.speechSynthesis.speak(msg);
|
||||
},
|
||||
// Listen for the end event to set isVoiceActive to false after synthesis completes
|
||||
this.msg.addEventListener('end', () => {
|
||||
const startIdx = msg.text.length;
|
||||
if (startIdx < textToSpeak.length) {
|
||||
// Use setTimeout to add a brief delay before speaking the next chunk
|
||||
setTimeout(() => {
|
||||
speakChunk(startIdx);
|
||||
}, 200); // Adjust the delay as needed
|
||||
} else {
|
||||
this.isVoiceActive = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Speak the first chunk
|
||||
speakChunk(0);
|
||||
},
|
||||
|
||||
|
||||
toggleModel() {
|
||||
this.expanded = !this.expanded;
|
||||
},
|
||||
|
||||
@ -1650,9 +1650,7 @@ export default {
|
||||
getVoices() {
|
||||
// Fetch available voices from the SpeechSynthesis API
|
||||
if ('speechSynthesis' in window) {
|
||||
console.log("here");
|
||||
this.audioVoices = speechSynthesis.getVoices();
|
||||
console.log(this.audioVoices)
|
||||
if (!this.audio_out_voice && this.audioVoices.length > 0) {
|
||||
this.audio_out_voice = this.audioVoices[0].name;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user