From 1aaf231969c20953b07f461cae2b3f8fe8b6818d Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Wed, 30 Apr 2025 10:13:35 +0900
Subject: [PATCH] refactor(stage-web): remove load models button (#148)

---
 apps/stage-web/locales/en.yml                 |  5 ---
 apps/stage-web/locales/zh-CN.yml              |  5 ---
 .../components/Layouts/InteractiveArea.vue    | 41 ++++---------------
 3 files changed, 8 insertions(+), 43 deletions(-)

diff --git a/apps/stage-web/locales/en.yml b/apps/stage-web/locales/en.yml
index 86a5db1d6..4c70b4ab5 100644
--- a/apps/stage-web/locales/en.yml
+++ b/apps/stage-web/locales/en.yml
@@ -451,11 +451,6 @@ stage:
       clothes: Clothes
       custom: Custom
   message: Message
-  operations:
-    load-models: Load Models
-    load-models-status:
-      loading: Loading
-      ready: Ready
   select-a-audio-input: Select a Audio Input
   select-a-model: Select a model
   select-a-voice: Choose a voice
diff --git a/apps/stage-web/locales/zh-CN.yml b/apps/stage-web/locales/zh-CN.yml
index 73c0416a5..27b01ed4d 100644
--- a/apps/stage-web/locales/zh-CN.yml
+++ b/apps/stage-web/locales/zh-CN.yml
@@ -433,11 +433,6 @@ stage:
       clothes: 换装
       custom: 自定义
   message: 消息
-  operations:
-    load-models: 加载推理模型
-    load-models-status:
-      loading: 加载中
-      ready: 已就绪
   select-a-audio-input: 选择一个音频输入设备
   select-a-model: 选择一个模型
   select-a-voice: 选择一个声线
diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea.vue b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
index 38dc3c6b3..6365e1ab3 100644
--- a/apps/stage-web/src/components/Layouts/InteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
@@ -7,7 +7,7 @@ import { useAudioContext, useChatStore, useConsciousnessStore, useProvidersStore
 import { BasicTextarea, TransitionVertical } from '@proj-airi/ui'
 import { useDevicesList } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { encodeWAVToBase64 } from '../../utils/binary'
@@ -29,7 +29,7 @@ const { messages } = storeToRefs(useChatStore())
 const { audioContext } = useAudioContext()
 const { t } = useI18n()
 
-const { transcribe: generate, load: loadWhisper, status: whisperStatus, terminate } = useWhisper(WhisperWorker, {
+const { transcribe: generate, terminate } = useWhisper(WhisperWorker, {
   onComplete: async (res) => {
     if (!res || !res.trim()) {
       return
@@ -94,14 +94,6 @@ const { destroy, start } = useMicVAD(selectedAudioDeviceId, {
   auto: false,
 })
 
-function handleLoadWhisper() {
-  if (whisperStatus.value === 'loading')
-    return
-
-  loadWhisper()
-  start()
-}
-
 async function handleTranscription(buffer: Float32Array) {
   await audioContext.resume()
 
@@ -134,6 +126,11 @@ watch(showMicrophoneSelect, async (value) => {
   }
 })
 
+onMounted(() => {
+  // loadWhisper()
+  start()
+})
+
 onAfterSend(async () => {
   messageInput.value = ''
 })
@@ -231,29 +228,7 @@ onAfterSend(async () => {
         </div>
       </div>
     </div>
-    <div flex="~ row" hidden gap-2>
-      <button
-        bg="complementary-100 hover:complementary-200 dark:complementary-800 dark:hover:complementary-700"
-        transition="all duration-250 ease-in-out"
-        :class="{ 'transition-colors-none': themeColorsHueDynamic }"
-        text="complementary-400"
-        mb-6 flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
-        @click="handleLoadWhisper"
-      >
-        <Transition mode="out-in">
-          <div v-if="whisperStatus === null" flex="~ row" items-center justify-center space-x-1>
-            {{ t('stage.operations.load-models') }}
-          </div>
-          <div v-else-if="whisperStatus === 'loading'" flex="~ row" items-center justify-center space-x-1>
-            <div i-svg-spinners:bouncing-ball class="text-cyan" />
-            <span>{{ t('stage.operations.load-models-status.loading') }}</span>
-          </div>
-          <div v-else-if="whisperStatus === 'ready'" flex="~ row" items-center justify-center space-x-1>
-            <div i-lucide:check class="text-cyan" />
-            <span>{{ t('stage.operations.load-models-status.ready') }}</span>
-          </div>
-        </Transition>
-      </button>
+    <div flex="~ row" gap-2 hidden>
       <div flex="~ row" relative text-white font-bold>
         <TransitionVertical>
           <fieldset