refactor: have stage-ui dedicated (#11)

* tmp commit
* now it works
* fix: various of type and import issues
* refactor: move test
* refactor: rename with stage- prefix
* refactor: all monorepo packages
* refactor: fix all build
* refactor: fix missing dep
* fix: remove unnecessary deps
* fix: netlify publish
* fix: hf space deploy

---------

Co-authored-by: LemonNeko <[email protected]>

.github/workflows/deploy-huggingface-spaces.yml

@@ -27,7 +27,7 @@ jobs:
           HF_USERNAME: ${{ secrets.HF_USERNAME }}
 
       - run: |-
-          git clone https://$HF_USERNAME:[email protected]/spaces/moeru-ai/airi --depth 1 packages/stage/dist
+          git clone https://$HF_USERNAME:[email protected]/spaces/moeru-ai/airi --depth 1 packages/stage-web/dist
         env:
           HF_TOKEN: ${{ secrets.HF_TOKEN }}
           HF_USERNAME: ${{ secrets.HF_USERNAME }}
@@ -87,7 +87,7 @@ jobs:
           git push -f
 
       - id: airi_diff
-        working-directory: ./packages/stage/dist
+        working-directory: ./packages/stage-web/dist
         run: |-
           git lfs ls-files --all
           git add .
@@ -96,7 +96,7 @@ jobs:
           fi
 
       - if: steps.airi_diff.outputs.changes == 'true'
-        working-directory: ./packages/stage/dist
+        working-directory: ./packages/stage-web/dist
         env:
           HF_TOKEN: ${{ secrets.HF_TOKEN }}
           HF_USERNAME: ${{ secrets.HF_USERNAME }}

cspell.config.yaml

@@ -8,6 +8,7 @@ words:
   - airi
   - airi-vtuber
   - Attributify
+  - audioworklet
   - Ayaka
   - Bitstream
   - bumpp
@@ -55,6 +56,7 @@ words:
   - logg
   - Maru
   - micvad
+  - mkdist
   - Morioki
   - Myriam
   - Neko

package.json

@@ -1,7 +1,7 @@
 {
   "name": "airi-vtuber",
   "type": "module",
-  "packageManager": "[email protected].2",
+  "packageManager": "[email protected].3",
   "description": "LLM powered virtual character",
   "author": {
     "name": "Neko Ayaka",
@@ -28,27 +28,27 @@
     "sizecheck": "npx vite-bundle-visualizer"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.12.1",
-    "@antfu/ni": "^0.23.2",
+    "@antfu/eslint-config": "^3.13.0",
+    "@antfu/ni": "^23.2.0",
     "@cspell/dict-ru_ru": "^2.2.4",
     "@types/node": "^22.10.5",
-    "@unocss/eslint-config": "^0.65.3",
-    "@unocss/eslint-plugin": "^0.65.3",
-    "bumpp": "^9.9.2",
+    "@unocss/eslint-config": "^0.65.4",
+    "@unocss/eslint-plugin": "^0.65.4",
+    "bumpp": "^9.10.0",
     "cross-env": "^7.0.3",
     "eslint": "^9.17.0",
     "eslint-plugin-cypress": "^4.1.0",
-    "eslint-plugin-format": "^0.1.3",
+    "eslint-plugin-format": "^1.0.1",
     "lint-staged": "^15.3.0",
-    "pnpm": "^9.15.2",
-    "rollup": "^4.29.1",
+    "pnpm": "^9.15.3",
+    "rollup": "^4.30.1",
     "simple-git-hooks": "^2.11.1",
-    "taze": "^0.18.0",
-    "typescript": "~5.7.2",
+    "taze": "^18.1.0",
+    "typescript": "~5.7.3",
     "unbuild": "3.0.0-rc.11",
-    "unocss": "^0.65.3",
+    "unocss": "^0.65.4",
     "vite": "^6.0.7",
-    "vite-plugin-inspect": "^0.10.6",
+    "vite-plugin-inspect": "^10.0.6",
     "vitest": "^2.1.8"
   },
   "workspaces": [

packages/hfup/package.json

@@ -16,6 +16,11 @@
     "directory": "packages/huggingspace"
   },
   "exports": {
+    ".": {
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite/index.mjs",
+      "require": "./dist/vite/index.cjs"
+    },
     "./vite": {
       "types": "./dist/vite/index.d.ts",
       "import": "./dist/vite/index.mjs",

packages/moonshine-web/package.json

@@ -2,7 +2,7 @@
   "name": "@proj-airi/moonshine-web",
   "type": "module",
   "private": true,
-  "packageManager": "[email protected].2",
+  "packageManager": "[email protected].3",
   "description": "Yet another WebGPU based STT + VAD with Moonshine model re-implemented",
   "author": {
     "name": "Neko Ayaka",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@tresjs/core": "^4.3.2",
-    "@unocss/reset": "^0.65.3",
+    "@unocss/reset": "^0.65.4",
     "@vueuse/core": "^12.3.0",
     "@vueuse/motion": "^2.2.6",
     "ofetch": "^1.4.1",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@huggingface/transformers": "^3.2.4",
     "@types/audioworklet": "^0.0.65",
-    "@types/three": "^0.171.0",
+    "@types/three": "^0.172.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@webgpu/types": "^0.1.52",
     "hfup": "workspace:^",

packages/stage-tamagotchi/electron.vite.config.ts

@@ -0,0 +1,36 @@
+import { join, resolve } from 'node:path'
+import { Download } from '@proj-airi/unplugin-download'
+import { DownloadLive2DSDK } from '@proj-airi/unplugin-live2d-sdk'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import unocss from 'unocss/vite'
+
+export default defineConfig({
+  main: {
+    plugins: [externalizeDepsPlugin()],
+  },
+  preload: {
+    plugins: [externalizeDepsPlugin()],
+  },
+  renderer: {
+    optimizeDeps: {
+      exclude: [
+        '@proj-airi/stage-ui/*',
+      ],
+    },
+    resolve: {
+      alias: {
+        '@renderer': resolve(join('src', 'renderer', 'src')),
+        '@proj-airi/stage-ui': resolve(join(import.meta.dirname, '..', 'stage-ui', 'dist')),
+        '@proj-airi/stage-ui/stores': resolve(join(import.meta.dirname, '..', 'stage-ui', 'dist', 'stores')),
+      },
+    },
+    plugins: [
+      vue(),
+      unocss(),
+      DownloadLive2DSDK(),
+      Download('https://dist.ayaka.moe/live2d-models/hiyori_free_zh.zip', 'hiyori_free_zh.zip', 'assets/live2d/models'),
+      Download('https://dist.ayaka.moe/live2d-models/hiyori_pro_zh.zip', 'hiyori_pro_zh.zip', 'assets/live2d/models'),
+    ],
+  },
+})

packages/stage-tamagotchi/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@proj-airi/stage-tamagotchi",
+  "version": "1.0.0",
+  "description": "An Electron application with Vue and TypeScript",
+  "author": "LemonNekoGH",
+  "homepage": "https://electron-vite.org",
+  "main": "./out/main/index.js",
+  "scripts": {
+    "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
+    "typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false",
+    "typecheck": "npm run typecheck:node && npm run typecheck:web",
+    "start": "electron-vite preview",
+    "dev": "electron-vite dev",
+    "build": "npm run typecheck && electron-vite build",
+    "postinstall": "electron-builder install-app-deps",
+    "build:unpack": "npm run build && electron-builder --dir",
+    "build:win": "npm run build && electron-builder --win",
+    "build:mac": "npm run build && electron-builder --mac",
+    "build:linux": "npm run build && electron-builder --linux"
+  },
+  "dependencies": {
+    "@11labs/client": "^0.0.4",
+    "@electron-toolkit/preload": "^3.0.1",
+    "@electron-toolkit/utils": "^3.0.0",
+    "@formkit/auto-animate": "^0.8.2",
+    "@gcornut/valibot-json-schema": "^0.42.0",
+    "@huggingface/transformers": "^3.2.4",
+    "@pixi/app": "6",
+    "@pixi/constants": "6",
+    "@pixi/core": "6",
+    "@pixi/display": "6",
+    "@pixi/extensions": "6",
+    "@pixi/loaders": "6",
+    "@pixi/math": "6",
+    "@pixi/runner": "6",
+    "@pixi/settings": "6",
+    "@pixi/sprite": "6",
+    "@pixi/ticker": "6",
+    "@pixi/utils": "6",
+    "@pixiv/three-vrm": "^3.3.2",
+    "@pixiv/three-vrm-animation": "^3.3.2",
+    "@pixiv/three-vrm-core": "^3.3.2",
+    "@proj-airi/stage-ui": "workspace:^",
+    "@ricky0123/vad-web": "^0.0.22",
+    "@tresjs/cientos": "^4.0.3",
+    "@tresjs/core": "^4.3.2",
+    "@types/yauzl": "^2.10.3",
+    "@typeschema/valibot": "^0.14.0",
+    "@unhead/vue": "^1.11.15",
+    "@unocss/reset": "^0.65.4",
+    "@vueuse/core": "^12.3.0",
+    "@vueuse/head": "^2.0.0",
+    "@vueuse/shared": "^12.3.0",
+    "@xsai/generate-speech": "^0.0.24",
+    "@xsai/generate-text": "^0.0.24",
+    "@xsai/model": "^0.0.24",
+    "@xsai/providers": "^0.0.24",
+    "@xsai/shared-chat": "^0.0.24",
+    "@xsai/stream-text": "^0.0.24",
+    "defu": "^6.1.4",
+    "jszip": "^3.10.1",
+    "nprogress": "^0.2.0",
+    "ofetch": "^1.4.1",
+    "onnxruntime-web": "^1.20.1",
+    "pinia": "^2.3.0",
+    "pixi-filters": "^4.2.0",
+    "pixi-live2d-display": "^0.4.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
+    "shiki": "^1.26.1",
+    "three": "^0.172.0",
+    "unified": "^11.0.5",
+    "valibot": "1.0.0-beta.9",
+    "vaul-vue": "^0.2.0",
+    "vue": "^3.5.13",
+    "vue-demi": "^0.14.10",
+    "vue-i18n": "^11.0.1",
+    "vue-router": "^4.5.0",
+    "yauzl": "^3.2.0",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@electron-toolkit/tsconfig": "^1.0.1",
+    "@iconify-json/carbon": "^1.2.5",
+    "@iconify-json/eos-icons": "^1.2.2",
+    "@iconify-json/lucide": "^1.2.22",
+    "@iconify-json/mingcute": "^1.2.3",
+    "@iconify-json/solar": "^1.2.2",
+    "@iconify-json/svg-spinners": "^1.2.2",
+    "@intlify/unplugin-vue-i18n": "^6.0.3",
+    "@proj-airi/elevenlabs": "workspace:^",
+    "@proj-airi/unplugin-download": "workspace:^",
+    "@proj-airi/unplugin-live2d-sdk": "workspace:^",
+    "@shikijs/markdown-it": "^1.26.1",
+    "@types/markdown-it-link-attributes": "^3.0.5",
+    "@types/nprogress": "^0.2.3",
+    "@types/three": "^0.172.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue-macros/volar": "^0.30.9",
+    "@vueuse/motion": "^2.2.6",
+    "electron": "^31.7.6",
+    "electron-builder": "^24.13.3",
+    "electron-vite": "^2.3.0",
+    "markdown-it-link-attributes": "^4.0.1",
+    "unocss-preset-animations": "^1.1.0",
+    "unocss-preset-shadcn": "^0.3.1",
+    "unocss-preset-theme": "^0.14.1",
+    "unplugin-auto-import": "^19.0.0",
+    "unplugin-vue-components": "^28.0.0",
+    "unplugin-vue-macros": "^2.13.7",
+    "unplugin-vue-markdown": "^28.0.0",
+    "unplugin-vue-router": "^0.10.9",
+    "vite-bundle-visualizer": "^1.2.1",
+    "vite-plugin-pwa": "^0.21.1",
+    "vite-plugin-vue-devtools": "^7.7.0",
+    "vite-plugin-vue-layouts": "^0.11.0",
+    "vite-plugin-webfont-dl": "^3.10.4",
+    "vue-tsc": "^2.2.0"
+  }
+}

packages/tamagotchi/src/main/index.ts → packages/stage-tamagotchi/src/main/index.ts

@@ -1,6 +1,5 @@
-import { readFileSync } from 'node:fs'
 import { join } from 'node:path'
-import { platform } from 'node:process'
+import { env, platform } from 'node:process'
 import { electronApp, is, optimizer } from '@electron-toolkit/utils'
 import { app, BrowserWindow, ipcMain, shell } from 'electron'
 import icon from '../../build/icon.png?asset'
@@ -38,13 +37,8 @@ function createWindow(): void {
   // HMR for renderer base on electron-vite cli.
   // Load the remote URL for development or the local html file for production.
 
-  if (is.dev) {
-    // try to read port number from stage.dev.json
-    const devFile = readFileSync(join(import.meta.dirname, '../../../stage/stage.dev.json'), 'utf-8')
-    const devInfo = JSON.parse(devFile) as { address: { address: string, family: string, port: number } }
-    mainWindow.loadURL(`http://localhost:${devInfo.address.port}`).catch((e) => {
-      console.error('Failed to load URL', e)
-    })
+  if (is.dev && env.ELECTRON_RENDERER_URL) {
+    mainWindow.loadURL(env.ELECTRON_RENDERER_URL)
   }
   else {
     mainWindow.loadFile(join(import.meta.dirname, '..', '..', 'out', 'renderer', 'index.html'))

packages/stage-tamagotchi/src/renderer/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>アイリ</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="
+      default-src 'self';
+      script-src-elem 'self' 'unsafe-eval' https://cdn.jsdelivr.net/;
+      script-src 'self' 'unsafe-eval';
+      style-src 'self' 'unsafe-inline';
+      img-src 'self' data: blob:;
+      font-src 'self' https://fonts.gstatic.com/;
+      connect-src 'self' https://cdn.jsdelivr.net/ blob: https://openrouter.ai/"
+    />
+    <script src="/assets/js/CubismSdkForWeb-5-r.1/Core/live2dcubismcore.min.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

packages/stage/tamagotchi/App.vue → packages/stage-tamagotchi/src/renderer/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { WidgetStage } from '@proj-airi/stage-ui/components'
 import { ref } from 'vue'
-import TamagotchiInteractiveArea from '../src/components/Layouts/TamagotchiInteractiveArea.vue'
-import Stage from '../src/components/Widgets/Stage.vue'
+import InteractiveArea from './components/InteractiveArea.vue'
 
 const dragDelay = ref(0)
 const isDragging = ref(false)
@@ -31,8 +31,8 @@ function handleMouseMove(event: MouseEvent) {
 <template>
   <div relative max-h="[100vh]" max-w="[100vw]" p="2" flex="~ col" z-2 h-full overflow-hidden @mousedown="handleMouseDown" @mouseup="handleMouseUp" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
     <div relative h-full w-full items-end gap-2 class="view">
-      <Stage h-full w-full flex-1 mb="<md:18" />
-      <TamagotchiInteractiveArea class="interaction-area block" pointer-events-none absolute bottom-0 w-full opacity-0 transition="opacity duration-250" />
+      <WidgetStage h-full w-full flex-1 mb="<md:18" />
+      <InteractiveArea class="interaction-area block" pointer-events-none absolute bottom-0 w-full opacity-0 transition="opacity duration-250" />
     </div>
   </div>
 </template>

packages/stage/src/components/Widgets/TamagotchiChatHistory.vue → packages/stage-tamagotchi/src/renderer/src/components/ChatHistory.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { useMarkdown } from '@proj-airi/stage-ui/composables'
+import { useChatStore } from '@proj-airi/stage-ui/stores'
+
 import { useElementBounding, useScroll } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-
 import { nextTick, ref } from 'vue'
-import { useMarkdown } from '../../composables/markdown'
-import { useChatStore } from '../../stores/chat'
 
 const chatHistoryRef = ref<HTMLDivElement>()