chore: tts

Signed-off-by: Neko Ayaka <[email protected]>

app/components/MainStage.vue

@@ -37,6 +37,7 @@ const nowSpeakingAvatarBorderOpacityMax = 100
 const openAiApiKey = useLocalStorage('openai-api-key', '')
 const openAiApiBaseURL = useLocalStorage('openai-api-base-url', '')
 const openAIModel = useLocalStorage<{ id: string, name?: string }>('openai-model', { id: 'openai/gpt-3.5-turbo', name: 'OpenAI GPT3.5 Turbo' })
+const elevenLabsApiKey = useLocalStorage('elevenlabs-api-key', '')
 
 const { setupOpenAI, streamSpeech, stream, models } = useLLM()
 const { audioContext, calculateVolume } = useAudioContext()
@@ -102,7 +103,7 @@ const ttsQueue = useQueue<string>({
   handlers: [
     async (ctx) => {
       const now = Date.now()
-      const res = await streamSpeech(ctx.data)
+      const res = await streamSpeech(ctx.data, elevenLabsApiKey.value)
       const elapsed = Date.now() - now
 
       // eslint-disable-next-line no-console
@@ -253,6 +254,13 @@ onUnmounted(() => {
 <template>
   <div max-h="[100vh]" h-full p="2" flex="~ col">
     <div space-x="2" flex="~ row" w-full>
+      <div flex="~ row" w-full>
+        <input
+          v-model="openAiApiBaseURL"
+          placeholder="Input your API base URL"
+          p="2" bg="zinc-100 dark:zinc-700" w-full rounded-lg outline-none
+        >
+      </div>
       <div flex="~ row" w-full>
         <input
           v-model="openAiApiKey"
@@ -262,8 +270,8 @@ onUnmounted(() => {
       </div>
       <div flex="~ row" w-full>
         <input
-          v-model="openAiApiBaseURL"
-          placeholder="Input your API base URL"
+          v-model="elevenLabsApiKey"
+          placeholder="Input your ElevenLabs API key"
           p="2" bg="zinc-100 dark:zinc-700" w-full rounded-lg outline-none
         >
       </div>

app/stores/llm.ts

@@ -35,13 +35,14 @@ export const useLLM = defineStore('llm', () => {
     return await openAI.value.models.list()
   }
 
-  async function streamSpeech(text: string) {
+  async function streamSpeech(text: string, apiKey: string) {
     if (!text || !text.trim())
       throw new Error('Text is required')
 
     return await ofetch('/api/v1/llm/voice/text-to-speech', {
       body: {
         text,
+        apiKey,
       },
       method: 'POST',
       cache: 'no-cache',

package.json

@@ -62,5 +62,8 @@
     "vue-tsc": "^2.1.10",
     "yauzl": "^3.2.0",
     "zod": "^3.23.8"
+  },
+  "dependencies": {
+    "elevenlabs": "^0.18.1"
   }
 }

server/api/v1/llm/voice/text-to-speech.ts

@@ -0,0 +1,30 @@
+import { ElevenLabsClient } from 'elevenlabs'
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody<{ text: string, apiKey: string }>(event)
+  const client = new ElevenLabsClient({
+    apiKey: body.apiKey,
+  })
+
+  const res = await client.generate({
+    // voice: 'ShanShan',
+    // Quite good for English
+    voice: 'Myriam',
+    // Beatrice is not 'childish' like the others
+    // voice: 'Beatrice',
+    text: body.text,
+    stream: true,
+    model_id: 'eleven_multilingual_v2',
+    voice_settings: {
+      stability: 0.4,
+      similarity_boost: 0.5,
+    },
+  })
+
+  // Set headers for streaming
+  event.node.res.setHeader('Content-Type', 'audio/mpeg')
+  event.node.res.setHeader('Transfer-Encoding', 'chunked')
+
+  // res is NodeJS.ReadableStream
+  return sendStream(event, res)
+})