feat(provider-transformers): multi-pages

Signed-off-by: Neko Ayaka <neko@ayaka.moe>
moeru-ai · Mar 1, 2025 · 2ab0a72 · 2ab0a72
1 parent b9f59cc
commit 2ab0a72
Show file tree

Hide file tree

Showing 12 changed files with 203 additions and 160 deletions.
diff --git a/...ovider-transformers/playground/index.html → packages/provider-transformers/index.html b/...ovider-transformers/playground/index.html → packages/provider-transformers/index.html
@@ -17,7 +17,7 @@
   </head>
   <body class="font-sans">
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/playground/src/main.ts"></script>
     <noscript> This website requires JavaScript to function properly. Please enable JavaScript to continue. </noscript>
   </body>
 </html>
diff --git a/packages/provider-transformers/package.json b/packages/provider-transformers/package.json
@@ -56,7 +56,9 @@
     "@xsai/embed": "catalog:",
     "@xsai/shared": "catalog:",
     "defu": "^6.1.4",
-    "es-toolkit": "^1.32.0"
+    "es-toolkit": "^1.32.0",
+    "unplugin-vue-router": "^0.11.2",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@iconify-json/solar": "^1.2.2",

diff --git a/packages/provider-transformers/playground/src/App.vue b/packages/provider-transformers/playground/src/App.vue
@@ -1,76 +1,8 @@
 <script setup lang="ts">
-import type { InitiateProgressInfo, ProgressStatusInfo } from '@proj-airi/utils-transformers/types'
-
 import { useDark, useToggle } from '@vueuse/core'
-import { embed } from '@xsai/embed'
-import { serialize } from 'superjson'
-import { onMounted, ref } from 'vue'
-
-import { createTransformers } from '../../src'
-import embedWorkerURL from '../../src/worker?worker&url'
-import Progress from './components/Progress.vue'
 
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
-
-const modelId = ref('Xenova/all-MiniLM-L6-v2')
-const input = ref('Hello, world!')
-const results = ref<any>()
-
-const loadingItems = ref<(InitiateProgressInfo | ProgressStatusInfo)[]>([])
-const loadingItemsSet = new Set<string>()
-
-const transformersProvider = createTransformers({ embedWorkerURL })
-
-onMounted(async () => {
-  await load()
-})
-
-async function load() {
-  await transformersProvider.loadEmbed(modelId.value, {
-    onProgress: (progress) => {
-      switch (progress.status) {
-        case 'initiate':
-          if (loadingItemsSet.has(progress.file)) {
-            return
-          }
-
-          loadingItemsSet.add(progress.file)
-          loadingItems.value.push(progress)
-          break
-
-        case 'progress':
-          loadingItems.value = loadingItems.value.map((item) => {
-            if (item.file === progress.file) {
-              return { ...item, ...progress }
-            }
-
-            return item
-          })
-
-          break
-
-        case 'done':
-          // loadingItems.value = loadingItems.value.filter(item => item.file !== progress.file)
-          break
-      }
-    },
-  })
-}
-
-async function execute() {
-  const result = await embed({
-    ...transformersProvider.embed(modelId.value),
-    input: input.value,
-  })
-
-  results.value = result
-}
-
-async function handleLoad() {
-  await transformersProvider.terminateEmbed()
-  await load()
-}
 </script>
 
 <template>
@@ -91,51 +23,29 @@ async function handleLoad() {
         </a>
       </div>
     </header>
-    <div flex flex-col gap-2>
-      <h2 text-xl>
-        Options
-      </h2>
-      <div w-full flex flex-row gap-2>
-        <div w-full flex flex-row gap-2>
-          <label flex flex-1 flex-row items-center gap-2>
-            <div text-nowrap><span>Model ID</span></div>
-            <input v-model="modelId" bg="neutral-100 dark:neutral-800" block w-full rounded-lg p-2>
-          </label>
-          <button rounded-lg bg="blue-100 dark:blue-900" px-4 py-2 @click="() => handleLoad()">
-            Load
-          </button>
-        </div>
-      </div>
-      <div v-if="loadingItems.length > 0" class="w-full flex flex-col gap-2">
-        <Progress
-          v-for="(item, index) of loadingItems" :key="index" :text="item.file"
-          :percentage="'progress' in item ? item.progress || 0 : 0" :total="'total' in item ? item.total || 0 : 0"
-        />
-      </div>
-    </div>
-    <div flex flex-col gap-2>
-      <div flex flex-col gap-2>
-        <h2 text-xl>
-          Inference
-        </h2>
-        <div>
-          <textarea v-model="input" h-full w-full rounded-lg bg="neutral-100 dark:neutral-800" p-4 font-mono />
-        </div>
-        <div flex flex-row gap-2>
-          <button rounded-lg bg="blue-100 dark:blue-900" px-4 py-2 @click="execute">
-            Extract
-          </button>
-        </div>
-        <div flex flex-col gap-2>
-          <h2 text-xl>
-            Results
-          </h2>
-          <div max-h-100 of-y-scroll whitespace-pre-wrap p-4 font-mono>
-            {{ JSON.stringify(serialize(results).json, null, 2) }}
-          </div>
-        </div>
-      </div>
-    </div>
+    <nav bg="neutral-100 dark:neutral-800" w-fit flex items-center of-hidden rounded-lg>
+      <RouterLink
+        to="/" px-3 py-2 bg="hover:neutral-200 dark:hover:neutral-700"
+        transition="all duration-250 ease-in-out"
+      >
+        <h1>Embedding</h1>
+      </RouterLink>
+      <div bg="neutral-200 dark:neutral-600" h="1lh" w="0.5" />
+      <RouterLink
+        to="/transcribe" px-3 py-2 bg="hover:neutral-200 dark:hover:neutral-700"
+        transition="all duration-250 ease-in-out"
+      >
+        <h1>Transcribe</h1>
+      </RouterLink>
+      <div bg="neutral-200 dark:neutral-600" h="1lh" w="0.5" />
+      <RouterLink
+        to="/speech" px-3 py-2 bg="hover:neutral-200 dark:hover:neutral-700"
+        transition="all duration-250 ease-in-out"
+      >
+        <h1>Speech</h1>
+      </RouterLink>
+    </nav>
+    <RouterView />
   </div>
 </template>
 

diff --git a/packages/provider-transformers/playground/src/main.ts b/packages/provider-transformers/playground/src/main.ts
@@ -1,8 +1,13 @@
 import { createApp } from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { routes } from 'vue-router/auto-routes'
 
 import App from './App.vue'
 import '@unocss/reset/tailwind.css'
 import 'uno.css'
 
+const router = createRouter({ routes, history: createWebHashHistory() })
+
 createApp(App)
+  .use(router)
   .mount('#app')
diff --git a/packages/provider-transformers/playground/src/pages/index.vue b/packages/provider-transformers/playground/src/pages/index.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import type { InitiateProgressInfo, ProgressStatusInfo } from '@proj-airi/utils-transformers/types'
+
+import { embed } from '@xsai/embed'
+import { serialize } from 'superjson'
+import { onMounted, ref } from 'vue'
+
+import { createTransformers } from '../../../src'
+import embedWorkerURL from '../../../src/worker?worker&url'
+import Progress from '../components/Progress.vue'
+
+const modelId = ref('Xenova/all-MiniLM-L6-v2')
+const input = ref('Hello, world!')
+const results = ref<any>()
+
+const loadingItems = ref<(InitiateProgressInfo | ProgressStatusInfo)[]>([])
+const loadingItemsSet = new Set<string>()
+
+const transformersProvider = createTransformers({ embedWorkerURL })
+
+onMounted(async () => {
+  await load()
+})
+
+async function load() {
+  await transformersProvider.loadEmbed(modelId.value, {
+    onProgress: (progress) => {
+      switch (progress.status) {
+        case 'initiate':
+          if (loadingItemsSet.has(progress.file)) {
+            return
+          }
+
+          loadingItemsSet.add(progress.file)
+          loadingItems.value.push(progress)
+          break
+
+        case 'progress':
+          loadingItems.value = loadingItems.value.map((item) => {
+            if (item.file === progress.file) {
+              return { ...item, ...progress }
+            }
+
+            return item
+          })
+
+          break
+
+        case 'done':
+          // loadingItems.value = loadingItems.value.filter(item => item.file !== progress.file)
+          break
+      }
+    },
+  })
+}
+
+async function execute() {
+  const result = await embed({
+    ...transformersProvider.embed(modelId.value),
+    input: input.value,
+  })
+
+  results.value = result
+}
+
+async function handleLoad() {
+  await transformersProvider.terminateEmbed()
+  await load()
+}
+</script>
+
+<template>
+  <div flex flex-col gap-2>
+    <h2 text-xl>
+      Options
+    </h2>
+    <div w-full flex flex-row gap-2>
+      <div w-full flex flex-row gap-2>
+        <label flex flex-1 flex-row items-center gap-2>
+          <div text-nowrap><span>Model ID</span></div>
+          <input v-model="modelId" bg="neutral-100 dark:neutral-800" block w-full rounded-lg p-2>
+        </label>
+        <button rounded-lg bg="blue-100 dark:blue-900" px-4 py-2 @click="() => handleLoad()">
+          Load
+        </button>
+      </div>
+    </div>
+    <div v-if="loadingItems.length > 0" class="w-full flex flex-col gap-2">
+      <Progress
+        v-for="(item, index) of loadingItems" :key="index" :text="item.file"
+        :percentage="'progress' in item ? item.progress || 0 : 0" :total="'total' in item ? item.total || 0 : 0"
+      />
+    </div>
+  </div>
+  <div flex flex-col gap-2>
+    <div flex flex-col gap-2>
+      <h2 text-xl>
+        Inference
+      </h2>
+      <div>
+        <textarea v-model="input" h-full w-full rounded-lg bg="neutral-100 dark:neutral-800" p-4 font-mono />
+      </div>
+      <div flex flex-row gap-2>
+        <button rounded-lg bg="blue-100 dark:blue-900" px-4 py-2 @click="execute">
+          Extract
+        </button>
+      </div>
+      <div flex flex-col gap-2>
+        <h2 text-xl>
+          Results
+        </h2>
+        <div max-h-100 of-y-scroll whitespace-pre-wrap p-4 font-mono>
+          {{ JSON.stringify(serialize(results).json, null, 2) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/provider-transformers/playground/src/pages/speech.vue b/packages/provider-transformers/playground/src/pages/speech.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Speech</h1>
+  </div>
+</template>
diff --git a/packages/provider-transformers/playground/src/pages/transcribe.vue b/packages/provider-transformers/playground/src/pages/transcribe.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Transcribe</h1>
+  </div>
+</template>
diff --git a/packages/provider-transformers/tsconfig.json b/packages/provider-transformers/tsconfig.json
@@ -13,7 +13,8 @@
       "vite/client",
       // @webgpu/types
       // https://www.npmjs.com/package/@webgpu/types
-      "@webgpu/types"
+      "@webgpu/types",
+      "unplugin-vue-router/client"
     ],
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
@@ -22,6 +23,12 @@
     "skipLibCheck": true
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.mts",
+    "playground/**/*.ts",
+    "playground/**/*.d.ts",
+    "playground/**/*.mts",
+    "playground/**/*.vue"
   ]
 }
diff --git a/packages/provider-transformers/vite.config.ts b/packages/provider-transformers/vite.config.ts
@@ -1,10 +1,20 @@
+import { resolve } from 'node:path'
 import Vue from '@vitejs/plugin-vue'
 import Unocss from 'unocss/vite'
+import VueRouter from 'unplugin-vue-router/vite'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
-  root: 'playground',
+  build: {
+    outDir: resolve(import.meta.dirname, 'playground', 'dist'),
+  },
   plugins: [
+    // https://github.com/posva/unplugin-vue-router
+    VueRouter({
+      root: 'playground',
+      extensions: ['.vue', '.md'],
+      dts: resolve(import.meta.dirname, 'playground', 'src', 'typed-router.d.ts'),
+    }),
     Vue(),
     // https://github.com/antfu/unocss
     // see uno.config.ts for config

diff --git a/packages/stage-ui/src/components/Live2D/Model.vue b/packages/stage-ui/src/components/Live2D/Model.vue
@@ -23,6 +23,7 @@ const props = withDefaults(defineProps<{
   paused: boolean
 }>(), {
   mouthOpenSize: 0,
+  motion: '',
 })
 
 const pixiApp = toRef(() => props.app)

diff --git a/packages/stage-ui/src/components/Widgets/Stage.vue b/packages/stage-ui/src/components/Widgets/Stage.vue
@@ -34,7 +34,7 @@ const db = ref<DuckDBWasmDrizzleDatabase>()
 // const transformersProvider = createTransformers({ embedWorkerURL })
 
 const vrmViewerRef = ref<{ setExpression: (expression: string) => void }>()
-const motion = ref('')
+const motion = ref<string>('')
 
 const { stageView, elevenLabsApiKey, elevenlabsVoiceEnglish, elevenlabsVoiceJapanese } = storeToRefs(useSettings())
 const { mouthOpenSize } = storeToRefs(useSpeakingStore())