From b5a3d8158ddf28dc2c083e83dc633fb5fa65f4a5 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Thu, 27 Feb 2025 20:10:37 +0800
Subject: [PATCH] style(provider-transformers): imporve ui

Signed-off-by: Neko Ayaka <neko@ayaka.moe>
---
 .../playground/src/App.vue                    | 46 ++++++++++++-------
 packages/provider-transformers/src/index.ts   |  7 +++
 packages/utils-transformers/package.json      |  3 ++
 pnpm-lock.yaml                                |  4 ++
 4 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/packages/provider-transformers/playground/src/App.vue b/packages/provider-transformers/playground/src/App.vue
index 76b9871f3..85f4faa14 100644
--- a/packages/provider-transformers/playground/src/App.vue
+++ b/packages/provider-transformers/playground/src/App.vue
@@ -21,6 +21,10 @@ const loadingItems = ref<(InitiateProgressInfo | ProgressStatusInfo)[]>([])
 const transformersProvider = createTransformers({ embedWorkerURL })
 
 onMounted(async () => {
+  await load()
+})
+
+async function load() {
   await transformersProvider.loadEmbed(modelId.value, {
     onProgress: (progress) => {
       switch (progress.status) {
@@ -43,7 +47,7 @@ onMounted(async () => {
       }
     },
   })
-})
+}
 
 async function execute() {
   const result = await embed({
@@ -53,20 +57,30 @@ async function execute() {
 
   results.value = result
 }
+
+async function handleLoad() {
+  await transformersProvider.terminateEmbed()
+  await load()
+}
 </script>
 
 <template>
-  <div flex flex-col gap-2 p-4>
+  <div mx-auto max-w-screen-lg flex flex-col gap-2 p-4>
     <header flex flex-row items-center justify-between>
       <h1 text-2xl>
         <a href="https://huggingface.co/docs/transformers.js/index">🤗 Transformers.js</a> + <a
           href="https://github.com/moeru-ai/xsai"
         >xsai</a> Playground
       </h1>
-      <button text-lg @click="() => toggleDark()">
-        <div v-if="isDark" i-solar:moon-stars-bold-duotone />
-        <div v-else i-solar:sun-bold />
-      </button>
+      <div flex flex-row gap-2>
+        <button text-lg @click="() => toggleDark()">
+          <div v-if="isDark" i-solar:moon-stars-bold-duotone />
+          <div v-else i-solar:sun-bold />
+        </button>
+        <a href="https://github.com/moeru-ai/airi/tree/main/packages/provider-transformers">
+          <div i-simple-icons:github />
+        </a>
+      </div>
     </header>
     <div flex flex-col gap-2>
       <h2 text-xl>
@@ -74,23 +88,23 @@ async function execute() {
       </h2>
       <div w-full flex flex-row gap-2>
         <div w-full flex flex-row gap-2>
-          <label flex flex-row items-center 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 min-w-full w-full rounded-lg p-2>
+            <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-[50%] flex flex-col gap-2">
+      <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"
+          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 grid grid-cols-2 gap-2>
+    <div flex flex-col gap-2>
       <div flex flex-col gap-2>
         <h2 text-xl>
           Inference
@@ -100,7 +114,7 @@ async function execute() {
         </div>
         <div flex flex-row gap-2>
           <button rounded-lg bg="blue-100 dark:blue-900" px-4 py-2 @click="execute">
-            Execute
+            Extract
           </button>
         </div>
         <div flex flex-col gap-2>
diff --git a/packages/provider-transformers/src/index.ts b/packages/provider-transformers/src/index.ts
index d780194d7..4e48dd89d 100644
--- a/packages/provider-transformers/src/index.ts
+++ b/packages/provider-transformers/src/index.ts
@@ -7,6 +7,7 @@ import { merge } from '@xsai-ext/shared-providers'
 
 export type Loadable<P, T = string, T2 = undefined> = P & {
   loadEmbed: (model: (string & {}) | T, options?: T2) => Promise<void>
+  terminateEmbed: () => void
 }
 
 export function createEmbedProvider<T extends string, T2 extends Omit<CommonRequestOptions, 'baseURL' | 'model'> & LoadOptions>(createOptions: CreateProviderOptions): Loadable<EmbedProviderWithExtraOptions<T, T2>, T, T2> {
@@ -111,6 +112,12 @@ export function createEmbedProvider<T extends string, T2 extends Omit<CommonRequ
       },
     }) as unknown as Omit<CommonRequestOptions, 'baseURL'> & Partial<T2> as any,
     loadEmbed: loadModel,
+    terminateEmbed: () => {
+      if (worker) {
+        worker.terminate()
+        worker = undefined
+      }
+    },
   }
 }
 
diff --git a/packages/utils-transformers/package.json b/packages/utils-transformers/package.json
index 9fe09d509..c5d08b7a8 100644
--- a/packages/utils-transformers/package.json
+++ b/packages/utils-transformers/package.json
@@ -34,5 +34,8 @@
   "dependencies": {
     "@huggingface/transformers": "^3.3.3",
     "onnxruntime-common": "^1.20.1"
+  },
+  "devDependencies": {
+    "@iconify-json/simple-icons": "^1.2.26"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1696194a4..5feb5cbba 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1044,6 +1044,10 @@ importers:
       onnxruntime-common:
         specifier: ^1.20.1
         version: 1.20.1
+    devDependencies:
+      '@iconify-json/simple-icons':
+        specifier: ^1.2.26
+        version: 1.2.26
 
   services/discord-bot:
     dependencies: