Audio.svelte 6.72 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
<script lang="ts">
2
	import { createEventDispatcher, onMount } from 'svelte';
Jannik Streidl's avatar
Jannik Streidl committed
3
	import { toast } from 'svelte-sonner';
Timothy J. Baek's avatar
Timothy J. Baek committed
4
5
6
7
	const dispatch = createEventDispatcher();

	export let saveSettings: Function;

Timothy J. Baek's avatar
Timothy J. Baek committed
8
	// Audio
Timothy J. Baek's avatar
Timothy J. Baek committed
9

Timothy J. Baek's avatar
Timothy J. Baek committed
10
11
12
	let STTEngines = ['', 'openai'];
	let STTEngine = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
13
	let conversationMode = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
14
15
16
	let speechAutoSend = false;
	let responseAutoPlayback = false;

Timothy J. Baek's avatar
Timothy J. Baek committed
17
18
	let TTSEngines = ['', 'openai'];
	let TTSEngine = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
19
20
21

	let voices = [];
	let speaker = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
22

Timothy J. Baek's avatar
Timothy J. Baek committed
23
24
25
26
27
28
29
30
31
32
	const getOpenAIVoices = () => {
		voices = [
			{ name: 'alloy' },
			{ name: 'echo' },
			{ name: 'fable' },
			{ name: 'onyx' },
			{ name: 'nova' },
			{ name: 'shimmer' }
		];
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
33

Timothy J. Baek's avatar
Timothy J. Baek committed
34
	const getWebAPIVoices = () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
35
		const getVoicesLoop = setInterval(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
36
			voices = await speechSynthesis.getVoices();
Timothy J. Baek's avatar
Timothy J. Baek committed
37
38

			// do your loop
Timothy J. Baek's avatar
Timothy J. Baek committed
39
			if (voices.length > 0) {
Timothy J. Baek's avatar
Timothy J. Baek committed
40
41
42
				clearInterval(getVoicesLoop);
			}
		}, 100);
Timothy J. Baek's avatar
Timothy J. Baek committed
43
44
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
45
46
	const toggleConversationMode = async () => {
		conversationMode = !conversationMode;
Timothy J. Baek's avatar
Timothy J. Baek committed
47
48
49
50
51
52
53
54
55
56
57

		if (conversationMode) {
			responseAutoPlayback = true;
			speechAutoSend = true;
		}

		saveSettings({
			conversationMode: conversationMode,
			responseAutoPlayback: responseAutoPlayback,
			speechAutoSend: speechAutoSend
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
58
59
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
60
61
62
63
64
65
66
67
68
69
	const toggleResponseAutoPlayback = async () => {
		responseAutoPlayback = !responseAutoPlayback;
		saveSettings({ responseAutoPlayback: responseAutoPlayback });
	};

	const toggleSpeechAutoSend = async () => {
		speechAutoSend = !speechAutoSend;
		saveSettings({ speechAutoSend: speechAutoSend });
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
70
71
72
	onMount(async () => {
		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');

Timothy J. Baek's avatar
Timothy J. Baek committed
73
		conversationMode = settings.conversationMode ?? false;
Timothy J. Baek's avatar
Timothy J. Baek committed
74
75
76
		speechAutoSend = settings.speechAutoSend ?? false;
		responseAutoPlayback = settings.responseAutoPlayback ?? false;

Timothy J. Baek's avatar
Timothy J. Baek committed
77
78
79
		STTEngine = settings?.audio?.STTEngine ?? '';
		TTSEngine = settings?.audio?.TTSEngine ?? '';
		speaker = settings?.audio?.speaker ?? '';
Timothy J. Baek's avatar
Timothy J. Baek committed
80

Timothy J. Baek's avatar
Timothy J. Baek committed
81
		if (TTSEngine === 'openai') {
Timothy J. Baek's avatar
Timothy J. Baek committed
82
83
84
85
			getOpenAIVoices();
		} else {
			getWebAPIVoices();
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
86
87
88
89
90
91
92
	});
</script>

<form
	class="flex flex-col h-full justify-between space-y-3 text-sm"
	on:submit|preventDefault={() => {
		saveSettings({
Timothy J. Baek's avatar
Timothy J. Baek committed
93
			audio: {
Timothy J. Baek's avatar
Timothy J. Baek committed
94
95
				STTEngine: STTEngine !== '' ? STTEngine : undefined,
				TTSEngine: TTSEngine !== '' ? TTSEngine : undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
96
97
				speaker: speaker !== '' ? speaker : undefined
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
98
99
100
101
		});
		dispatch('save');
	}}
>
Timothy J. Baek's avatar
Timothy J. Baek committed
102
	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
Timothy J. Baek's avatar
Timothy J. Baek committed
103
		<div>
104
			<div class=" mb-1 text-sm font-medium">STT Settings</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
105
106

			<div class=" py-0.5 flex w-full justify-between">
107
				<div class=" self-center text-xs font-medium">Speech-to-Text Engine</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
108
109
				<div class="flex items-center relative">
					<select
110
						class="w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
Timothy J. Baek's avatar
Timothy J. Baek committed
111
						bind:value={STTEngine}
Timothy J. Baek's avatar
Timothy J. Baek committed
112
113
						placeholder="Select a mode"
						on:change={(e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
114
115
							if (e.target.value !== '') {
								navigator.mediaDevices.getUserMedia({ audio: true }).catch(function (err) {
116
									toast.error(`Permission denied when accessing microphone: ${err}`);
Timothy J. Baek's avatar
Timothy J. Baek committed
117
118
									STTEngine = '';
								});
Timothy J. Baek's avatar
Timothy J. Baek committed
119
120
121
							}
						}}
					>
122
123
						<option value="">Default (Web API)</option>
						<option value="whisper-local">Whisper (Local)</option>
Timothy J. Baek's avatar
Timothy J. Baek committed
124
125
126
127
128
					</select>
				</div>
			</div>

			<div class=" py-0.5 flex w-full justify-between">
129
				<div class=" self-center text-xs font-medium">Conversation Mode</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
130
131
132
133
134
135
136
137
138

				<button
					class="p-1 px-3 text-xs flex rounded transition"
					on:click={() => {
						toggleConversationMode();
					}}
					type="button"
				>
					{#if conversationMode === true}
139
						<span class="ml-2 self-center">On</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
140
					{:else}
141
						<span class="ml-2 self-center">Off</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
142
143
144
145
146
					{/if}
				</button>
			</div>

			<div class=" py-0.5 flex w-full justify-between">
147
				<div class=" self-center text-xs font-medium">Auto-send input after 3 sec.</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
148
149
150
151
152
153
154
155
156

				<button
					class="p-1 px-3 text-xs flex rounded transition"
					on:click={() => {
						toggleSpeechAutoSend();
					}}
					type="button"
				>
					{#if speechAutoSend === true}
157
						<span class="ml-2 self-center">On</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
158
					{:else}
159
						<span class="ml-2 self-center">Off</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
160
161
162
					{/if}
				</button>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
163
164
165
		</div>

		<div>
166
			<div class=" mb-1 text-sm font-medium">TTS Settings</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
167
168

			<div class=" py-0.5 flex w-full justify-between">
169
				<div class=" self-center text-xs font-medium">Text-to-Speech Engine</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
170
171
				<div class="flex items-center relative">
					<select
172
						class="w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
Timothy J. Baek's avatar
Timothy J. Baek committed
173
174
175
176
177
178
179
180
181
182
183
184
						bind:value={TTSEngine}
						placeholder="Select a mode"
						on:change={(e) => {
							if (e.target.value === 'openai') {
								getOpenAIVoices();
								speaker = 'alloy';
							} else {
								getWebAPIVoices();
								speaker = '';
							}
						}}
					>
185
186
						<option value="">Default (Web API)</option>
						<option value="openai">Open AI</option>
Timothy J. Baek's avatar
Timothy J. Baek committed
187
188
189
					</select>
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
190
191

			<div class=" py-0.5 flex w-full justify-between">
192
				<div class=" self-center text-xs font-medium">Auto-playback response</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
193
194
195
196
197

				<button
					class="p-1 px-3 text-xs flex rounded transition"
					on:click={() => {
						toggleResponseAutoPlayback();
Timothy J. Baek's avatar
Timothy J. Baek committed
198
					}}
Timothy J. Baek's avatar
Timothy J. Baek committed
199
					type="button"
Timothy J. Baek's avatar
Timothy J. Baek committed
200
				>
Timothy J. Baek's avatar
Timothy J. Baek committed
201
					{#if responseAutoPlayback === true}
202
						<span class="ml-2 self-center">On</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
203
					{:else}
204
						<span class="ml-2 self-center">Off</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
205
206
					{/if}
				</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
207
208
209
210
211
			</div>
		</div>

		<hr class=" dark:border-gray-700" />

Timothy J. Baek's avatar
Timothy J. Baek committed
212
		{#if TTSEngine === ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
213
			<div>
214
				<div class=" mb-2.5 text-sm font-medium">Set Voice</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
215
216
217
218
				<div class="flex w-full">
					<div class="flex-1">
						<select
							class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
Timothy J. Baek's avatar
Timothy J. Baek committed
219
							bind:value={speaker}
Timothy J. Baek's avatar
Timothy J. Baek committed
220
221
							placeholder="Select a voice"
						>
222
							<option value="" selected>Default</option>
Timothy J. Baek's avatar
Timothy J. Baek committed
223
							{#each voices.filter((v) => v.localService === true) as voice}
Timothy J. Baek's avatar
Timothy J. Baek committed
224
225
226
227
228
229
230
								<option value={voice.name} class="bg-gray-100 dark:bg-gray-700">{voice.name}</option
								>
							{/each}
						</select>
					</div>
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
231
		{:else if TTSEngine === 'openai'}
Timothy J. Baek's avatar
Timothy J. Baek committed
232
			<div>
233
				<div class=" mb-2.5 text-sm font-medium">Set Voice</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
				<div class="flex w-full">
					<div class="flex-1">
						<select
							class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
							bind:value={speaker}
							placeholder="Select a voice"
						>
							{#each voices as voice}
								<option value={voice.name} class="bg-gray-100 dark:bg-gray-700">{voice.name}</option
								>
							{/each}
						</select>
					</div>
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
249
		{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
250
251
252
253
	</div>

	<div class="flex justify-end pt-3 text-sm font-medium">
		<button
Timothy J. Baek's avatar
Timothy J. Baek committed
254
			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
Timothy J. Baek's avatar
Timothy J. Baek committed
255
256
			type="submit"
		>
257
			Save
Timothy J. Baek's avatar
Timothy J. Baek committed
258
259
260
		</button>
	</div>
</form>