tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Projects 1 Releases 2 Packages 1 Activity Actions

Add default voice setting and apply to chat

Browse source
This commit is contained in:
Xiaodong Ye 2024-01-25 15:07:00 +08:00
parent b6d9cf3bc8
commit b297b432f7
3 changed files with 79 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/lib/components/chat/Messages/ResponseMessage.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts">
import dayjs from 'dayjs';
import { marked } from 'marked';
import { settings, voices } from '$lib/stores';
import tippy from 'tippy.js';
import auto_render from 'katex/dist/contrib/auto-render.mjs';
import 'katex/dist/katex.min.css';
@ -116,6 +117,8 @@
} else {
speaking = true;
const speak = new SpeechSynthesisUtterance(message.content);
const voice = $voices?.filter((v) => v.name === $settings?.speakVoice)?.at(0) ?? undefined;
speak.voice = voice;
speechSynthesis.speak(speak);
}
};

77
src/lib/components/chat/SettingsModal.svelte
View file

@ -20,7 +20,7 @@
import { createNewChat, deleteAllChats, getAllChats, getChatList } from '$lib/apis/chats';
import { WEB_UI_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
import { config, models, settings, user, chats } from '$lib/stores';
import { config, models, voices, settings, user, chats } from '$lib/stores';
import { splitStream, getGravatarURL, getImportOrigin, convertOpenAIChats } from '$lib/utils';
import Advanced from './Settings/Advanced.svelte';
@ -112,6 +112,9 @@
let gravatarEmail = '';
let titleAutoGenerateModel = '';
// Voice
let speakVoice = '';
// Chats
let saveChatHistory = true;
let importFiles;
@ -614,6 +617,9 @@
titleAutoGenerateModel = settings.titleAutoGenerateModel ?? '';
gravatarEmail = settings.gravatarEmail ?? '';
speakVoice = settings.speakVoice ?? '';
await voices.set(await speechSynthesis.getVoices());
saveChatHistory = settings.saveChatHistory ?? true;
authEnabled = settings.authHeader !== undefined ? true : false;
@ -808,6 +814,30 @@
<div class=" self-center">Add-ons</div>
</button>
<button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'voice'
? 'bg-gray-200 dark:bg-gray-700'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
on:click={() => {
selectedTab = 'voice';
}}
>
<div class=" self-center mr-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M12.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
/>
</svg>
</div>
<div class=" self-center">Voice</div>
</button>
<button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'chats'
@ -901,7 +931,7 @@
toggleTheme();
}}
>
</button> -->
<div class="flex items-center relative">
@ -1755,6 +1785,49 @@
</button>
</div>
</form>
{:else if selectedTab === 'voice'}
<form
class="flex flex-col h-full justify-between space-y-3 text-sm"
on:submit|preventDefault={() => {
show = false;
}}
>
<div class=" space-y-3">
<div>
<div class=" mb-2.5 text-sm font-medium">Set Default Voice</div>
<div class="flex w-full">
<div class="flex-1 mr-2">
<select
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
bind:value={speakVoice}
placeholder="Select a voice"
>
<option value="" selected>Default</option>
{#each $voices.filter((v) => v.localService === true) as voice}
<option value={voice.name} class="bg-gray-100 dark:bg-gray-700"
>{voice.name}</option
>
{/each}
</select>
</div>
</div>
</div>
</div>
<div class="flex justify-end pt-3 text-sm font-medium">
<button
class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
on:click={() => {
saveSettings({
speakVoice: speakVoice !== '' ? speakVoice : undefined
});
}}
type="submit"
>
Save
</button>
</div>
</form>
{:else if selectedTab === 'chats'}
<div class="flex flex-col h-full justify-between space-y-3 text-sm">
<div class=" space-y-2">