OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy J. Baek
2024-08-02 19:24:47 +02:00
parent 3f53abb233
commit b559bc84a7
3 changed files with 177 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/lib/apis/audio/index.ts
View File

@@ -131,3 +131,59 @@ export const synthesizeOpenAISpeech = async (
return res;
};
export const getModels = async (token: string = '') => {
let error = null;
const res = await fetch(`${AUDIO_API_BASE_URL}/models`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
error = err.detail;
console.log(err);
return null;
});
if (error) {
throw error;
}
return res;
};
export const getVoices = async (token: string = '') => {
let error = null;
const res = await fetch(`${AUDIO_API_BASE_URL}/voices`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
error = err.detail;
console.log(err);
return null;
});
if (error) {
throw error;
}
return res;
};

121
src/lib/components/admin/Settings/Audio.svelte
View File

@@ -1,13 +1,19 @@
<script lang="ts">
import { getAudioConfig, updateAudioConfig } from '$lib/apis/audio';
import { user, settings, config } from '$lib/stores';
import { createEventDispatcher, onMount, getContext } from 'svelte';
import { toast } from 'svelte-sonner';
import Switch from '$lib/components/common/Switch.svelte';
import { getBackendConfig } from '$lib/apis';
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
import { createEventDispatcher, onMount, getContext } from 'svelte';
const dispatch = createEventDispatcher();
import { getBackendConfig } from '$lib/apis';
import {
getAudioConfig,
updateAudioConfig,
getModels as _getModels,
getVoices as _getVoices
} from '$lib/apis/audio';
import { user, settings, config } from '$lib/stores';
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
const i18n = getContext('i18n');
export let saveHandler: Function;
@@ -30,48 +36,42 @@
let models = [];
let nonLocalVoices = false;
const getOpenAIVoices = () => {
voices = [
{ name: 'alloy' },
{ name: 'echo' },
{ name: 'fable' },
{ name: 'onyx' },
{ name: 'nova' },
{ name: 'shimmer' }
];
};
const getModels = async () => {
if (TTS_ENGINE === '') {
models = [];
} else {
const res = await _getModels(localStorage.token).catch((e) => {
toast.error(e);
});
const getOpenAIModels = () => {
models = [{ name: 'tts-1' }, { name: 'tts-1-hd' }];
};
const getWebAPIVoices = () => {
const getVoicesLoop = setInterval(async () => {
voices = await speechSynthesis.getVoices();
// do your loop
if (voices.length > 0) {
clearInterval(getVoicesLoop);
if (res) {
console.log(res);
models = res.models;
}
}, 100);
}
};
// Fetch available ElevenLabs voices
const getVoices = async () => {
const response = await fetch('/voices', {
method: 'GET',
headers: {
'Authorization': `Bearer ${localStorage.token}`
}
});
const getVoices = async () => {
if (TTS_ENGINE === '') {
const getVoicesLoop = setInterval(async () => {
voices = await speechSynthesis.getVoices();
if (response.ok) {
const data = await response.json();
voices = data.voices.map(name => ({ name })); // Update voices array with fetched names
} else {
toast.error('Failed to fetch voices');
}
};
// do your loop
if (voices.length > 0) {
clearInterval(getVoicesLoop);
}
}, 100);
} else {
const res = await _getVoices(localStorage.token).catch((e) => {
toast.error(e);
});
if (res) {
console.log(res);
voices = res.voices;
}
}
};
const updateConfigHandler = async () => {
const res = await updateAudioConfig(localStorage.token, {
@@ -99,9 +99,6 @@
};
onMount(async () => {
// Fetch available voices on component mount
await getVoices();
const res = await getAudioConfig(localStorage.token);
if (res) {
@@ -121,14 +118,8 @@
STT_MODEL = res.stt.MODEL;
}
if (TTS_ENGINE === 'openai') {
getOpenAIVoices();
getOpenAIModels();
} else if(TTS_ENGINE === 'elevenlabs') {
await getVoices(); //Get voices if TTS_ENGINE is ElevenLabs
} else {
getWebAPIVoices();
}
await getVoices();
await getModels();
});
</script>
@@ -208,14 +199,14 @@
bind:value={TTS_ENGINE}
placeholder="Select a mode"
on:change={async (e) => {
await updateConfigHandler();
await getVoices();
await getModels();
if (e.target.value === 'openai') {
getOpenAIVoices();
TTS_VOICE = 'alloy';
TTS_MODEL = 'tts-1';
} else if(e.target.value === 'elevenlabs') {
await getVoices();
} else {
getWebAPIVoices();
TTS_VOICE = '';
TTS_MODEL = '';
}
@@ -256,7 +247,7 @@
<hr class=" dark:border-gray-850 my-2" />
{#if TTS_ENGINE !== ''}
{#if TTS_ENGINE === ''}
<div>
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('TTS Voice')}</div>
<div class="flex w-full">
@@ -268,9 +259,9 @@
<option value="" selected={TTS_VOICE !== ''}>{$i18n.t('Default')}</option>
{#each voices as voice}
<option
value={voice.name}
value={voice.voiceURI}
class="bg-gray-100 dark:bg-gray-700"
selected={TTS_VOICE === voice.name}>{voice.name}</option
selected={TTS_VOICE === voice.voiceURI}>{voice.name}</option
>
{/each}
</select>
@@ -292,7 +283,7 @@
<datalist id="voice-list">
{#each voices as voice}
<option value={voice.name} />
<option value={voice.id}>{voice.name}</option>
{/each}
</datalist>
</div>
@@ -311,7 +302,7 @@
<datalist id="model-list">
{#each models as model}
<option value={model.name} />
<option value={model.id} />
{/each}
</datalist>
</div>
@@ -333,7 +324,7 @@
<datalist id="voice-list">
{#each voices as voice}
<option value={voice.name} />
<option value={voice.id}>{voice.name}</option>
{/each}
</datalist>
</div>
@@ -352,7 +343,7 @@
<datalist id="model-list">
{#each models as model}
<option value={model.name} />
<option value={model.id} />
{/each}
</datalist>
</div>