fix: errors and missing components, use wildcard for CORS headers

moeru-ai · Dec 3, 2024 · 8c9ac92 · 8c9ac92
1 parent 11670ca
commit 8c9ac92
Show file tree

Hide file tree

Showing 19 changed files with 425 additions and 204 deletions.
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "typecheck": "pnpm -r --filter=./packages/* run build",
     "dev": "pnpm packages:dev",
     "build": "pnpm packages:build",
-    "packages:dev": "pnpm -r --filter=./packages/* run dev",
+    "packages:dev": "pnpm -r --filter=./packages/* --parallel run dev",
     "packages:stub": "pnpm -r --filter=./packages/* run stub",
     "packages:build": "pnpm -r --filter=./packages/* run build",
     "test": "vitest --coverage",

diff --git a/packages/elevenlabs/package.json b/packages/elevenlabs/package.json
@@ -27,7 +27,7 @@
     "package.json"
   ],
   "scripts": {
-    "dev": "concurrently \"pnpm run stub\"",
+    "dev": "pnpm run stub",
     "stub": "unbuild --stub",
     "build": "unbuild"
   },

diff --git a/packages/llm-proxy/src/index.ts b/packages/llm-proxy/src/index.ts
@@ -1,13 +1,14 @@
 import { ElevenLabsClient } from 'elevenlabs'
 import { Hono } from 'hono'
+import { env } from 'hono/adapter'
 import { cors } from 'hono/cors'
 import { stream } from 'hono/streaming'
 
 const app = new Hono()
 
 app.use(cors({
   origin: '*',
-  allowHeaders: ['Referer', 'Origin', 'Content-Type', 'Accept', 'Authorization', 'X-Requested-With', 'X-HTTP-Method-Override', 'X-Forwarded-For', 'X-Real-IP'],
+  allowHeaders: ['*'],
   allowMethods: ['POST', 'HEAD'],
   exposeHeaders: ['Content-Type', 'Transfer-Encoding', 'Content-Length', 'Date', 'Server', 'Connection', 'X-Powered-By', 'X-Request-ID'],
   maxAge: 60 * 60 * 24 * 30, // 30 days
@@ -16,11 +17,15 @@ app.use(cors({
 app.post('/api/v1/llm/voice/elevenlabs', async (c) => {
   return stream(c, async (stream) => {
     const body = await c.req.json()
-    const apiKey = c.req.header('Authorization')
+    const apiKeyUnknown = c.req.header('Authorization')
 
-    const client = new ElevenLabsClient({
-      apiKey: apiKey?.trim().substring('Bearer '.length),
-    })
+    let apiKey = apiKeyUnknown?.trim().substring('Bearer '.length)
+    const { ELEVENLABS_API_KEY } = env<{ ELEVENLABS_API_KEY?: string }>(c)
+    if (!apiKey && !!ELEVENLABS_API_KEY) {
+      apiKey = ELEVENLABS_API_KEY
+    }
+
+    const client = new ElevenLabsClient({ apiKey })
 
     const res = await client.generate(body)
 

diff --git a/packages/stage/package.json b/packages/stage/package.json
@@ -32,6 +32,8 @@
     "@pixi/sprite": "6",
     "@pixi/ticker": "^6.5.10",
     "@pixi/utils": "6",
+    "@pixiv/three-vrm": "^3.2.0",
+    "@tresjs/core": "^4.3.1",
     "@types/yauzl": "^2.10.3",
     "@unhead/vue": "^1.11.13",
     "@unocss/reset": "^0.65.0",
@@ -46,6 +48,7 @@
     "rehype-stringify": "^10.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
+    "three": "^0.171.0",
     "unified": "^11.0.5",
     "vue": "^3.5.13",
     "vue-demi": "^0.14.10",
@@ -61,6 +64,7 @@
     "@shikijs/markdown-it": "^1.24.0",
     "@types/markdown-it-link-attributes": "^3.0.5",
     "@types/nprogress": "^0.2.3",
+    "@types/three": "^0.170.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue-macros/volar": "^0.30.6",
     "markdown-it-link-attributes": "^4.0.1",

diff --git a/packages/stage/src/App.vue b/packages/stage/src/App.vue
@@ -1,37 +1,3 @@
-<script setup lang="ts">
-import { useDark, usePreferredDark } from '@vueuse/core'
-
-const isDark = useDark()
-const preferredDark = usePreferredDark()
-// const toggleDark = useToggle(isDark)
-
-// https://github.com/vueuse/head
-// you can use this to manipulate the document head in any components,
-// they will be rendered correctly in the html results with vite-ssg
-useHead({
-  title: 'Vitesse',
-  meta: [
-    {
-      name: 'description',
-      content: 'Opinionated Vite Starter Template',
-    },
-    {
-      name: 'theme-color',
-      content: () => isDark.value ? '#00aba9' : '#ffffff',
-    },
-  ],
-  link: [
-    {
-      rel: 'icon',
-      type: 'image/svg+xml',
-      href: () => preferredDark.value ? '/favicon-dark.svg' : '/favicon.svg',
-    },
-  ],
-})
-</script>
-
 <template>
-  <ClientOnly>
-    <RouterView />
-  </ClientOnly>
+  <RouterView />
 </template>
diff --git a/packages/stage/src/auto-imports.d.ts b/packages/stage/src/auto-imports.d.ts
@@ -244,6 +244,7 @@ declare global {
   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
   const useSeoMeta: typeof import('@vueuse/head')['useSeoMeta']
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useSettings: typeof import('./stores/settings')['useSettings']
   const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
   const useSorted: typeof import('@vueuse/core')['useSorted']
@@ -550,6 +551,7 @@ declare module 'vue' {
     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
     readonly useSeoMeta: UnwrapRef<typeof import('@vueuse/head')['useSeoMeta']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
+    readonly useSettings: UnwrapRef<typeof import('./stores/settings')['useSettings']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>

diff --git a/packages/stage/src/components/MainStage.vue b/packages/stage/src/components/MainStage.vue
@@ -9,7 +9,9 @@ import type {
 } from '../constants/emotions'
 
 import { useLocalStorage } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
+
 import Avatar from '../assets/live2d/models/hiyori_free_zh/avatar.png'
 import { useMarkdown } from '../composables/markdown'
 
@@ -26,18 +28,18 @@ import {
 } from '../constants/emotions'
 import SystemPromptV2 from '../constants/prompts/system-v2'
 import { useLLM } from '../stores/llm'
+import { useSettings } from '../stores/settings'
 
 import BasicTextarea from './BasicTextarea.vue'
 // import AudioWaveform from './AudioWaveform.vue'
 import Live2DViewer from './Live2DViewer.vue'
+import Settings from './Settings.vue'
 
 const nowSpeakingAvatarBorderOpacityMin = 30
 const nowSpeakingAvatarBorderOpacityMax = 100
 
-const openAiApiKey = useLocalStorage('openai-api-key', '')
-const openAiApiBaseURL = useLocalStorage('openai-api-base-url', '')
+const { elevenLabsApiKey, openAiApiBaseURL, openAiApiKey } = storeToRefs(useSettings())
 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,
@@ -270,37 +272,10 @@ 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"
-          placeholder="Input your API key"
-          p="2" bg="zinc-100 dark:zinc-700" w-full rounded-lg outline-none
-        >
-      </div>
-      <div flex="~ row" w-full>
-        <input
-          v-model="elevenLabsApiKey"
-          placeholder="Input your ElevenLabs API key"
-          p="2" bg="zinc-100 dark:zinc-700" w-full rounded-lg outline-none
-        >
-      </div>
-    </div>
+    <Settings />
     <div flex="~ row 1" w-full items-end space-x-2>
       <div w-full min-h="100 sm:100">
         <Live2DViewer ref="live2DViewerRef" :mouth-open-size="mouthOpenSize" model="/assets/live2d/models/hiyori_pro_zh/runtime/hiyori_pro_t11.model3.json" />
-        <!-- <div>
-          <input v-model.number="mouthOpenSize" type="range" max="1" min="0" step="0.01">
-          <span>{{ mouthOpenSize }}</span>
-        </div> -->
-        <!-- <AudioWaveform ref="audioWaveformRef" /> -->
       </div>
       <div my="2" w-full space-y-2 max-h="[calc(100vh-117px)]">
         <div v-for="(message, index) in messages" :key="index">

diff --git a/packages/stage/src/components/Settings.vue b/packages/stage/src/components/Settings.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useSettings } from '../stores/settings'
+
+const settings = useSettings()
+</script>
+
+<template>
+  <div space-x="2" flex="~ row" w-full>
+    <div flex="~ row" w-full>
+      <input
+        v-model="settings.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="settings.openAiApiKey"
+        placeholder="Input your API key"
+        p="2" bg="zinc-100 dark:zinc-700" w-full rounded-lg outline-none
+      >
+    </div>
+    <div flex="~ row" w-full>
+      <input
+        v-model="settings.elevenLabsApiKey"
+        placeholder="Input your ElevenLabs API key"
+        p="2" bg="zinc-100 dark:zinc-700" w-full rounded-lg outline-none
+      >
+    </div>
+  </div>
+</template>
diff --git a/packages/stage/src/pages/audio.vue b/packages/stage/src/pages/audio.vue
@@ -24,15 +24,13 @@ function handleFileUpload(e: Event) {
 
 <template>
   <div>
-    <ClientOnly>
-      <div>
-        <div ref="containerRef" />
-        <input
-          ref="fileInputRef"
-          type="file"
-          @change="handleFileUpload"
-        >
-      </div>
-    </ClientOnly>
+    <div>
+      <div ref="containerRef" />
+      <input
+        ref="fileInputRef"
+        type="file"
+        @change="handleFileUpload"
+      >
+    </div>
   </div>
 </template>
diff --git a/packages/stage/src/pages/index.vue b/packages/stage/src/pages/index.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <ClientOnly>
-      <MainStage />
-    </ClientOnly>
+    <MainStage />
   </div>
 </template>
 

diff --git a/packages/stage/src/pages/queue.vue b/packages/stage/src/pages/queue.vue
@@ -147,8 +147,6 @@ onMounted(() => {
 
 <template>
   <div>
-    <ClientOnly>
-      <div />
-    </ClientOnly>
+    <div />
   </div>
 </template>
diff --git a/packages/stage/src/pages/test/filter-message.vue b/packages/stage/src/pages/test/filter-message.vue
@@ -56,26 +56,24 @@ async function onSendMessage() {
 </script>
 
 <template>
-  <ClientOnly>
-    <div flex flex-col gap-2 p-2>
-      <div flex flex-row gap-2>
-        <BasicTextarea
-          v-model="messageInput"
-          placeholder="Message"
-          p="2" bg="zinc-100 dark:zinc-700"
-          w-full rounded-lg outline-none
-          @submit="onSendMessage"
-        />
-        <button rounded-lg bg="zinc-100 dark:zinc-700" p-4>
-          {{ processing ? 'Processing...' : 'Send' }}
-        </button>
-      </div>
-      <div w-full rounded-lg bg="zinc-100 dark:zinc-700" p-2>
-        <h3 font-semibold>
-          Streaming Message
-        </h3>
-        <div>{{ streamingMessage.content }}</div>
-      </div>
+  <div flex flex-col gap-2 p-2>
+    <div flex flex-row gap-2>
+      <BasicTextarea
+        v-model="messageInput"
+        placeholder="Message"
+        p="2" bg="zinc-100 dark:zinc-700"
+        w-full rounded-lg outline-none
+        @submit="onSendMessage"
+      />
+      <button rounded-lg bg="zinc-100 dark:zinc-700" p-4>
+        {{ processing ? 'Processing...' : 'Send' }}
+      </button>
     </div>
-  </ClientOnly>
+    <div w-full rounded-lg bg="zinc-100 dark:zinc-700" p-2>
+      <h3 font-semibold>
+        Streaming Message
+      </h3>
+      <div>{{ streamingMessage.content }}</div>
+    </div>
+  </div>
 </template>
diff --git a/packages/stage/src/pages/test/queues/delays.vue b/packages/stage/src/pages/test/queues/delays.vue
@@ -37,38 +37,36 @@ function onSendMessage() {
 </script>
 
 <template>
-  <ClientOnly>
-    <div flex flex-col gap-2 p-2>
-      <div flex flex-row gap-2>
-        <BasicTextarea
-          v-model="messageInput"
-          placeholder="Message"
-          p="2" bg="zinc-100 dark:zinc-700"
-          w-full rounded-lg outline-none
-          @submit="onSendMessage"
-        />
-        <button rounded-lg bg="zinc-100 dark:zinc-700" p-4>
-          {{ processing ? 'Processing...' : 'Send' }}
-        </button>
-      </div>
-      <div w-full flex flex-row gap-4>
-        <div w-full rounded-lg bg="zinc-100 dark:zinc-700" p-2>
-          <h3 font-semibold>
-            Emotion Message
-          </h3>
-          <div v-for="message in emotionMessageContentProcessed" :key="message">
-            <div>{{ message }}</div>
-          </div>
+  <div flex flex-col gap-2 p-2>
+    <div flex flex-row gap-2>
+      <BasicTextarea
+        v-model="messageInput"
+        placeholder="Message"
+        p="2" bg="zinc-100 dark:zinc-700"
+        w-full rounded-lg outline-none
+        @submit="onSendMessage"
+      />
+      <button rounded-lg bg="zinc-100 dark:zinc-700" p-4>
+        {{ processing ? 'Processing...' : 'Send' }}
+      </button>
+    </div>
+    <div w-full flex flex-row gap-4>
+      <div w-full rounded-lg bg="zinc-100 dark:zinc-700" p-2>
+        <h3 font-semibold>
+          Emotion Message
+        </h3>
+        <div v-for="message in emotionMessageContentProcessed" :key="message">
+          <div>{{ message }}</div>
         </div>
-        <div w-full rounded-lg bg="zinc-100 dark:zinc-700" p-2>
-          <h3 font-semibold>
-            Delays
-          </h3>
-          <div v-for="message in delaysProcessed" :key="message">
-            <div>{{ message }}s</div>
-          </div>
+      </div>
+      <div w-full rounded-lg bg="zinc-100 dark:zinc-700" p-2>
+        <h3 font-semibold>
+          Delays
+        </h3>
+        <div v-for="message in delaysProcessed" :key="message">
+          <div>{{ message }}s</div>
         </div>
       </div>
     </div>
-  </ClientOnly>
+  </div>
 </template>