Feature/add animation vrma

LICENSE

@@ -19,8 +19,8 @@ copy, modify, and distribute copies of the Software for **non-commercial purpose
   implied, including but not limited to the warranties of merchantability,
   fitness for a particular purpose, and noninfringement.
 
-*Note: This license applies only to non-commercial use. For commercial use,
-please refer to the Commercial License below.*
+_Note: This license applies only to non-commercial use. For commercial use,
+please refer to the Commercial License below._
 
 ===============================================================================
 Commercial License

locales/en/translation.json

@@ -344,6 +344,9 @@
   "CustomAPIDescription": "Note: Messages are automatically included in the request body. In streaming mode, the server must return text/event-stream.",
   "EditSlideScripts": "Edit Dialogue",
   "PleaseSelectSlide": "Please select a slide",
+  "QueueCheckDelay": "Queue Check Delay",
+  "QueueCheckDelayInfo": "Time to wait before resetting to neutral expression after speech queue becomes empty (in seconds).",
+  "QueueCheckDelayLabel": "Queue Check Delay: {{delay}}s",
   "XAIAPIKeyLabel": "xAI API Key",
   "DynamicRetrievalDescription": "Sets the threshold for when the model performs a search. If 0, the search is always performed; if 1, the search is never performed.",
   "DynamicRetrieval": "Dynamic Search",

locales/ja/translation.json

@@ -367,6 +367,9 @@
   "XAIAPIKeyLabel": "xAI APIキー",
   "OpenRouterAPIKeyLabel": "OpenRouter APIキー",
   "OpenRouterModelNameInstruction": "OpenRouterからモデル識別子を入力してください（例： \"openai/gpt-4o\", \"mistralai/mistral-large-latest\"）。モデル識別子はOpenRouterモデルページで確認できます。",
+  "QueueCheckDelay": "キューチェック遅延",
+  "QueueCheckDelayInfo": "音声キューが空になった後、ニュートラル表情にリセットするまでの待機時間（秒）。",
+  "QueueCheckDelayLabel": "キューチェック遅延: {{delay}}秒",
   "ImageDisplayPosition": "画像表示位置",
   "ImageDisplayPositionDescription": "アップロードした画像を表示する位置を選択してください",
   "InputArea": "入力エリア",

src/components/settings/character.tsx

@@ -787,6 +787,31 @@ const Character = () => {
             )
           })}
         </div>
+
+        <div className="my-6">
+          <div className="my-4 text-xl font-bold">{t('QueueCheckDelay')}</div>
+          <div className="my-4 text-base whitespace-pre-line">
+            {t('QueueCheckDelayInfo')}
+          </div>
+          <div className="select-none">
+            {t('QueueCheckDelayLabel', {
+              delay: settingsStore((s) => s.queueCheckDelay),
+            })}
+          </div>
+          <input
+            type="range"
+            min="0.5"
+            max="60"
+            step="0.1"
+            value={settingsStore((s) => s.queueCheckDelay)}
+            onChange={(e) =>
+              settingsStore.setState({
+                queueCheckDelay: parseFloat(e.target.value),
+              })
+            }
+            className="mt-2 mb-4 input-range"
+          />
+        </div>
       </div>
     </>
   )

src/components/vrmViewer.tsx

@@ -40,6 +40,10 @@ export default function VrmViewer() {
             const image = reader.result as string
             image !== '' && homeStore.setState({ modalImage: image })
           }
+        } else if (file_type === 'vrma') {
+          const blob = new Blob([file], { type: 'application/octet-stream' })
+          const url = window.URL.createObjectURL(blob)
+          viewer.loadVrma(url)
         }
       })
     }

src/features/messages/speakCharacter.ts

@@ -206,6 +206,7 @@ const createSpeakCharacter = () => {
   ) => {
     let called = false
     const ss = settingsStore.getState()
+    const hs = homeStore.getState()
     onStart?.()
 
     const initialToken = SpeakQueue.currentStopToken
@@ -327,6 +328,15 @@ const createSpeakCharacter = () => {
           isNeedDecode: result.isNeedDecode,
           onComplete: guardedOnComplete, // Pass the guarded function
         })
+
+        // VRMの場合、ここで感情アニメーションを再生
+        if (ss.modelType === 'vrm') {
+          if (hs.viewer && talk.emotion && talk.emotion !== 'neutral') {
+            // neutral は常時アイドルアニメーションが流れているため、個別に再生しない
+            hs.viewer.playEmotionAnimation(talk.emotion, 0.3)
+            console.log(`VRM emotion animation started: ${talk.emotion}`)
+          }
+        }
       })
       .catch((error) => {
         console.error('Error in processAndSynthesizePromise chain:', error)

src/features/messages/speakQueue.ts

@@ -12,7 +12,6 @@ type SpeakTask = {
 }
 
 export class SpeakQueue {
-  private static readonly QUEUE_CHECK_DELAY = 1500
   private queue: SpeakTask[] = []
   private isProcessing = false
   private currentSessionId: string | null = null
@@ -148,8 +147,9 @@ export class SpeakQueue {
 
   private async scheduleNeutralExpression() {
     const initialLength = this.queue.length
+    const ss = settingsStore.getState()
     await new Promise((resolve) =>
-      setTimeout(resolve, SpeakQueue.QUEUE_CHECK_DELAY)
+      setTimeout(resolve, ss.queueCheckDelay * 1000)
     )
 
     if (this.shouldResetToNeutral(initialLength)) {
@@ -159,6 +159,7 @@ export class SpeakQueue {
         await Live2DHandler.resetToIdle()
       } else {
         await hs.viewer.model?.playEmotion('neutral')
+        hs.viewer.switchToIdleAnimation()
       }
     }
   }

src/features/stores/settings.ts

@@ -206,6 +206,7 @@ interface General {
   whisperTranscriptionModel: WhisperTranscriptionModel
   initialSpeechTimeout: number
   chatLogWidth: number
+  queueCheckDelay: number
   imageDisplayPosition: 'input' | 'side' | 'icon'
   multiModalMode: 'ai-decide' | 'always' | 'never'
   multiModalAiDecisionPrompt: string
@@ -538,6 +539,8 @@ const getInitialValuesFromEnv = (): SettingsState => ({
   angryMotionGroup: process.env.NEXT_PUBLIC_ANGRY_MOTION_GROUP || '',
   relaxedMotionGroup: process.env.NEXT_PUBLIC_RELAXED_MOTION_GROUP || '',
   surprisedMotionGroup: process.env.NEXT_PUBLIC_SURPRISED_MOTION_GROUP || '',
+  queueCheckDelay:
+    parseFloat(process.env.NEXT_PUBLIC_QUEUE_CHECK_DELAY || '1.5') || 1.5,
 })
 
 const settingsStore = create<SettingsState>()(
@@ -710,6 +713,7 @@ const settingsStore = create<SettingsState>()(
       enableMultiModal: state.enableMultiModal,
       colorTheme: state.colorTheme,
       customModel: state.customModel,
+      queueCheckDelay: state.queueCheckDelay,
     }),
   })
 )