From 3adc6921d7f28877abe9059f9150a51fd2164ac0 Mon Sep 17 00:00:00 2001
From: lorisj <lorisjautakas@gmail.com>
Date: Fri, 13 Jun 2025 14:57:13 -0400
Subject: [PATCH 1/3] rename player2-api -> player2, fix ts err

---
 .../providers/{player2-api.vue => player2.vue}         | 10 ++++++----
 packages/stage-ui/src/stores/modules/consciousness.ts  |  2 +-
 packages/stage-ui/src/stores/providers.ts              |  6 +++---
 3 files changed, 10 insertions(+), 8 deletions(-)
 rename apps/stage-web/src/pages/settings/providers/{player2-api.vue => player2.vue} (86%)

diff --git a/apps/stage-web/src/pages/settings/providers/player2-api.vue b/apps/stage-web/src/pages/settings/providers/player2.vue
similarity index 86%
rename from apps/stage-web/src/pages/settings/providers/player2-api.vue
rename to apps/stage-web/src/pages/settings/providers/player2.vue
index c0db6537a..5cee244e2 100644
--- a/apps/stage-web/src/pages/settings/providers/player2-api.vue
+++ b/apps/stage-web/src/pages/settings/providers/player2.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { RemovableRef } from '@vueuse/shared'
+
 import {
   ProviderBaseUrlInput,
   ProviderSettingsContainer,
@@ -13,14 +15,14 @@ import { useRouter } from 'vue-router'
 const { t } = useI18n()
 const router = useRouter()
 const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore)
+const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
 
 // Get provider metadata
-const providerId = 'player2-api'
+const providerId = 'player2'
 const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
 
 const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl as string || '',
+  get: () => providers.value[providerId]?.baseUrl || '',
   set: (value) => {
     if (!providers.value[providerId])
       providers.value[providerId] = {}
@@ -34,7 +36,7 @@ onMounted(() => {
   providersStore.initializeProvider(providerId)
 
   // Initialize refs with current values
-  baseUrl.value = providers.value[providerId]?.baseUrl as string || ''
+  baseUrl.value = providers.value[providerId]?.baseUrl || ''
 })
 
 // Watch settings and update the provider configuration
diff --git a/packages/stage-ui/src/stores/modules/consciousness.ts b/packages/stage-ui/src/stores/modules/consciousness.ts
index fab4429d7..dee641d25 100644
--- a/packages/stage-ui/src/stores/modules/consciousness.ts
+++ b/packages/stage-ui/src/stores/modules/consciousness.ts
@@ -64,7 +64,7 @@ export const useConsciousnessStore = defineStore('consciousness', () => {
     await loadModelsForProvider(newProvider)
     resetModelSelection()
 
-    if (newProvider === 'player2-api') {
+    if (newProvider === 'player2') {
       // Ping heal check every 60 seconds if Player2 is being used
       player2Interval = setInterval(() => {
         // eslint-disable-next-line no-console
diff --git a/packages/stage-ui/src/stores/providers.ts b/packages/stage-ui/src/stores/providers.ts
index 5a27f27cf..4e64a3954 100644
--- a/packages/stage-ui/src/stores/providers.ts
+++ b/packages/stage-ui/src/stores/providers.ts
@@ -891,8 +891,8 @@ export const useProvidersStore = defineStore('providers', () => {
         },
       },
     },
-    'player2-api': {
-      id: 'player2-api',
+    'player2': {
+      id: 'player2',
       category: 'chat',
       tasks: ['text-generation'],
       nameKey: 'settings.pages.providers.provider.player2.title',
@@ -910,7 +910,7 @@ export const useProvidersStore = defineStore('providers', () => {
           {
             id: 'player2-model',
             name: 'Player2 Model',
-            provider: 'player2-api',
+            provider: 'player2',
           },
         ],
       },

From 10b11903534ab3ecde616787f23c784ad27b897c Mon Sep 17 00:00:00 2001
From: lorisj <lorisjautakas@gmail.com>
Date: Fri, 13 Jun 2025 15:20:01 -0400
Subject: [PATCH 2/3] add "airi" header to health check

---
 packages/stage-ui/src/stores/modules/consciousness.ts | 8 +++++++-
 packages/stage-ui/src/stores/providers.ts             | 9 ++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/stage-ui/src/stores/modules/consciousness.ts b/packages/stage-ui/src/stores/modules/consciousness.ts
index dee641d25..988c97e71 100644
--- a/packages/stage-ui/src/stores/modules/consciousness.ts
+++ b/packages/stage-ui/src/stores/modules/consciousness.ts
@@ -69,7 +69,13 @@ export const useConsciousnessStore = defineStore('consciousness', () => {
       player2Interval = setInterval(() => {
         // eslint-disable-next-line no-console
         console.log('Sending Player2 Health check if it is being used')
-        fetch('http://localhost:4315/v1/health').catch(() => {})
+        fetch(`localhost:4315/v1/health`, {
+          method: 'GET',
+          headers: {
+            'player2-game-key': 'airi',
+          },
+        })
+          .catch(() => {})
       }, 60_000)
     }
     else {
diff --git a/packages/stage-ui/src/stores/providers.ts b/packages/stage-ui/src/stores/providers.ts
index 4e64a3954..4a0b7ca17 100644
--- a/packages/stage-ui/src/stores/providers.ts
+++ b/packages/stage-ui/src/stores/providers.ts
@@ -918,7 +918,14 @@ export const useProvidersStore = defineStore('providers', () => {
         validateProviderConfig: (config) => {
           const url: string = config.baseUrl ? config.baseUrl as string : 'http://localhost:4315/v1/'
           // checks if health status is there, so it green if and only if you actually have the player2 app running
-          return (fetch(`${url}health`).then(r => r.status === 200).catch(() => false))
+          return fetch(`${url}health`, {
+            method: 'GET',
+            headers: {
+              'player2-game-key': 'airi',
+            },
+          })
+            .then(r => r.status === 200)
+            .catch(() => false)
         },
       },
     },

From 837fce986c0e5e801e7a4c20832c76c25db7e146 Mon Sep 17 00:00:00 2001
From: lorisj <lorisjautakas@gmail.com>
Date: Tue, 17 Jun 2025 14:36:48 -0400
Subject: [PATCH 3/3] player2 as speech provider

---
 README.ja-JP.md                               |   1 +
 README.md                                     |   2 +-
 README.zh-CN.md                               |   1 +
 .../src/pages/settings/modules/speech.vue     |   1 -
 .../src/pages/settings/modules/speech.vue     |   2 +-
 .../settings/providers/player2-speech.vue     | 133 +++++++++++++++++
 .../src/pages/settings/providers/player2.vue  |  41 +++++-
 .../stage-ui/src/stores/modules/speech.ts     |   2 +-
 packages/stage-ui/src/stores/providers.ts     | 139 +++++++++++++-----
 9 files changed, 274 insertions(+), 48 deletions(-)
 create mode 100644 apps/stage-web/src/pages/settings/providers/player2-speech.vue

diff --git a/README.ja-JP.md b/README.ja-JP.md
index a98278c14..26f1c73d5 100644
--- a/README.ja-JP.md
+++ b/README.ja-JP.md
@@ -139,6 +139,7 @@ pnpm -F @proj-airi/stage-tamagotchi dev
 
 ## サポートされているLLM APIプロバイダー（[xsai](https://github.com/moeru-ai/xsai)によって提供）
 
+- [x] [Player2](https://player2.game/)
 - [x] [OpenRouter](https://openrouter.ai/)
 - [x] [vLLM](https://github.com/vllm-project/vllm)
 - [x] [SGLang](https://github.com/sgl-project/sglang)
diff --git a/README.md b/README.md
index 29e55ad67..daea374a6 100644
--- a/README.md
+++ b/README.md
@@ -146,7 +146,7 @@ npx bumpp --no-commit --no-tag
 ```
 
 ## Supported the following LLM API Providers (powered by [xsai](https://github.com/moeru-ai/xsai))
-
+- [x] [Player2](https://player2.game/)
 - [x] [OpenRouter](https://openrouter.ai/)
 - [x] [vLLM](https://github.com/vllm-project/vllm)
 - [x] [SGLang](https://github.com/sgl-project/sglang)
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 91fcefde0..f9adb2b29 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -137,6 +137,7 @@ pnpm -F @proj-airi/stage-tamagotchi dev
 
 ## 原生支持的 LLM API 提供商列表（由 [xsai](https://github.com/moeru-ai/xsai) 驱动）
 
+- [x] [Player2](https://player2.game/)
 - [x] [OpenRouter](https://openrouter.ai/)
 - [x] [vLLM](https://github.com/vllm-project/vllm)
 - [x] [SGLang](https://github.com/sgl-project/sglang)
diff --git a/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue b/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
index e20a11662..af28255f0 100644
--- a/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
@@ -98,7 +98,6 @@ async function generateTestSpeech() {
     if (audioUrl.value) {
       stopTestAudio()
     }
-
     const input = useSSML.value
       ? ssmlText.value
       : speechStore.generateSSML(testText.value, activeSpeechVoice.value, { ...providerConfig, pitch: pitch.value })
diff --git a/apps/stage-web/src/pages/settings/modules/speech.vue b/apps/stage-web/src/pages/settings/modules/speech.vue
index e20a11662..e26f08bc2 100644
--- a/apps/stage-web/src/pages/settings/modules/speech.vue
+++ b/apps/stage-web/src/pages/settings/modules/speech.vue
@@ -101,7 +101,7 @@ async function generateTestSpeech() {
 
     const input = useSSML.value
       ? ssmlText.value
-      : speechStore.generateSSML(testText.value, activeSpeechVoice.value, { ...providerConfig, pitch: pitch.value })
+      : speechStore.supportsSSML ? speechStore.generateSSML(testText.value, activeSpeechVoice.value, { ...providerConfig, pitch: pitch.value }) : testText.value
 
     const response = await generateSpeech({
       ...provider.speech(activeSpeechModel.value, providerConfig),
diff --git a/apps/stage-web/src/pages/settings/providers/player2-speech.vue b/apps/stage-web/src/pages/settings/providers/player2-speech.vue
new file mode 100644
index 000000000..3faa9fb58
--- /dev/null
+++ b/apps/stage-web/src/pages/settings/providers/player2-speech.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
+import type { UnElevenLabsOptions } from 'unspeech'
+
+import {
+  SpeechPlayground,
+  SpeechProviderSettings,
+} from '@proj-airi/stage-ui/components'
+import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+import { FieldRange } from '@proj-airi/ui'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const providerId = 'player2-speech'
+const defaultModel = 'v1'
+
+const speedRatio = ref<number>(1.0)
+
+const speechStore = useSpeechStore()
+const providersStore = useProvidersStore()
+const { t } = useI18n()
+
+// Get available voices for ElevenLabs
+const availableVoices = computed(() => {
+  return speechStore.availableVoices[providerId] || []
+})
+
+// Generate speech with ElevenLabs-specific parameters
+async function handleGenerateSpeech(input: string, voiceId: string, _useSSML: boolean) {
+  const provider = providersStore.getProviderInstance(providerId) as SpeechProviderWithExtraOptions<string, UnElevenLabsOptions>
+  if (!provider) {
+    throw new Error('Failed to initialize speech provider')
+  }
+
+  // Get provider configuration
+  const providerConfig = providersStore.getProviderConfig(providerId)
+
+  // Get model from configuration or use default
+  const model = providerConfig.model as string | undefined || defaultModel
+
+  // ElevenLabs doesn't need SSML conversion, but if SSML is provided, use it directly
+  return await speechStore.speech(
+    provider,
+    model,
+    input,
+    voiceId,
+    {
+      ...providerConfig,
+    },
+  )
+}
+
+const hasPlayer2 = ref(true)
+
+onMounted(async () => {
+  const providerConfig = providersStore.getProviderConfig(providerId)
+  const providerMetadata = providersStore.getProviderMetadata(providerId)
+  if (await providerMetadata.validators.validateProviderConfig(providerConfig)) {
+    await speechStore.loadVoicesForProvider(providerId)
+  }
+  else {
+    console.error('Failed to validate provider config', providerConfig)
+  }
+  try {
+    const res = await fetch(`http://localhost:4315/v1/health`, {
+      method: 'GET',
+      headers: {
+        'player2-game-key': 'airi',
+      },
+    })
+    hasPlayer2.value = res.status === 200
+  }
+  catch (e) {
+    console.error(e)
+    hasPlayer2.value = false
+  }
+})
+
+watch(speedRatio, async () => {
+  const providerConfig = providersStore.getProviderConfig(providerId)
+  providerConfig.speed = speedRatio.value
+})
+</script>
+
+<template>
+  <div v-if="!hasPlayer2" style="color: red; margin-bottom: 1rem;">
+    <div>
+      Please download and run the Player2 App:
+      <a href="https://player2.game" target="_blank" rel="noopener noreferrer">
+        https://player2.game
+      </a>
+
+      <div>
+        After downloading, if you still are having trouble, please reach out to us on Discord:
+        <a href="https://player2.game/discord" target="_blank" rel="noopener noreferrer">
+          https://player2.game/discord
+        </a>.
+      </div>
+    </div>
+  </div>
+  <SpeechProviderSettings
+    :provider-id="providerId"
+    :default-model="defaultModel"
+  >
+    <template #voice-settings>
+      <!-- Speed control - common to most providers -->
+      <FieldRange
+        v-model="speedRatio"
+        :label="t('settings.pages.providers.provider.common.fields.field.speed.label')"
+        :description="t('settings.pages.providers.provider.common.fields.field.speed.description')"
+        :min="0.5"
+        :max="5.0" :step="0.01"
+      />
+    </template>
+
+    <!-- Replace the default playground with our standalone component -->
+    <template #playground>
+      <SpeechPlayground
+        :available-voices="availableVoices"
+        :generate-speech="handleGenerateSpeech"
+        :api-key-configured="true"
+        default-text="Hello! This is a test of the Player 2 voice synthesis."
+      />
+    </template>
+  </SpeechProviderSettings>
+</template>
+
+<route lang="yaml">
+  meta:
+    layout: settings
+    stageTransition:
+      name: slide
+  </route>
diff --git a/apps/stage-web/src/pages/settings/providers/player2.vue b/apps/stage-web/src/pages/settings/providers/player2.vue
index 5cee244e2..6431d4009 100644
--- a/apps/stage-web/src/pages/settings/providers/player2.vue
+++ b/apps/stage-web/src/pages/settings/providers/player2.vue
@@ -8,7 +8,7 @@ import {
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
@@ -30,13 +30,25 @@ const baseUrl = computed({
     providers.value[providerId].baseUrl = value
   },
 })
+const hasPlayer2 = ref(true)
 
-onMounted(() => {
-  // Initialize provider if it doesn't exist
+onMounted(async () => {
   providersStore.initializeProvider(providerId)
-
-  // Initialize refs with current values
   baseUrl.value = providers.value[providerId]?.baseUrl || ''
+
+  try {
+    const res = await fetch(`${baseUrl.value}health`, {
+      method: 'GET',
+      headers: {
+        'player2-game-key': 'airi',
+      },
+    })
+    hasPlayer2.value = res.status === 200
+  }
+  catch (e) {
+    console.error(e)
+    hasPlayer2.value = false
+  }
 })
 
 // Watch settings and update the provider configuration
@@ -55,8 +67,25 @@ function handleResetSettings() {
 </script>
 
 <template>
+  <div v-if="!hasPlayer2" style="color: red; margin-bottom: 1rem;">
+    <div>
+      Please download and run the Player2 App:
+      <a href="https://player2.game" target="_blank" rel="noopener noreferrer">
+        https://player2.game
+      </a>
+
+      <div>
+        After downloading, if you still are having trouble, please reach out to us on Discord:
+        <a href="https://player2.game/discord" target="_blank" rel="noopener noreferrer">
+          https://player2.game/discord
+        </a>.
+      </div>
+    </div>
+  </div>
+
   <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName" :provider-icon="providerMetadata?.icon"
+    :provider-name="providerMetadata?.localizedName"
+    :provider-icon="providerMetadata?.icon"
     :on-back="() => router.back()"
   >
     <ProviderSettingsContainer>
diff --git a/packages/stage-ui/src/stores/modules/speech.ts b/packages/stage-ui/src/stores/modules/speech.ts
index 90be93620..cd27f922b 100644
--- a/packages/stage-ui/src/stores/modules/speech.ts
+++ b/packages/stage-ui/src/stores/modules/speech.ts
@@ -73,7 +73,7 @@ export const useSpeechStore = defineStore('speech', () => {
 
   // Helper function to determine if a provider is a speech provider
   function isSpeechProvider(providerId: string): boolean {
-    return ['elevenlabs', 'microsoft-speech', 'azure-speech', 'google', 'amazon', 'alibaba-cloud-model-studio', 'volcengine'].includes(providerId)
+    return ['elevenlabs', 'microsoft-speech', 'azure-speech', 'google', 'amazon', 'alibaba-cloud-model-studio', 'volcengine', 'player2-speech'].includes(providerId)
   }
 
   async function loadVoicesForProvider(provider: string) {
diff --git a/packages/stage-ui/src/stores/providers.ts b/packages/stage-ui/src/stores/providers.ts
index 4a0b7ca17..c3a9b8e87 100644
--- a/packages/stage-ui/src/stores/providers.ts
+++ b/packages/stage-ui/src/stores/providers.ts
@@ -128,6 +128,106 @@ export const useProvidersStore = defineStore('providers', () => {
 
   // Centralized provider metadata with provider factory functions
   const providerMetadata: Record<string, ProviderMetadata> = {
+    'player2': {
+      id: 'player2',
+      category: 'chat',
+      tasks: ['text-generation'],
+      nameKey: 'settings.pages.providers.provider.player2.title',
+      name: 'Player2 API',
+      descriptionKey: 'settings.pages.providers.provider.player2.description',
+      description: 'player2.game',
+      defaultOptions: {
+        baseUrl: 'http://localhost:4315/v1/',
+      },
+      createProvider: config => createPlayer2((config.baseUrl as string).trim(), 'airi'),
+      capabilities: {
+        listModels: async () => [
+          {
+            id: 'player2-model',
+            name: 'Player2 Model',
+            provider: 'player2',
+          },
+        ],
+      },
+      validators: {
+        validateProviderConfig: async (config: any) => {
+          return !!config.baseUrl
+        },
+      },
+    },
+    'player2-speech': {
+      id: 'player2-speech',
+      category: 'speech',
+      tasks: ['text-to-speech'],
+      nameKey: 'settings.pages.providers.provider.player2.title',
+      name: 'Player2 Speech',
+      descriptionKey: 'settings.pages.providers.provider.player2.description',
+      description: 'player2.game',
+      icon: 'i-lobe-icons:player2',
+      defaultOptions: {
+        baseUrl: 'http://localhost:4315/v1/',
+      },
+      createProvider: config => createPlayer2((config.baseUrl as string).trim(), 'airi'),
+      capabilities: {
+        listVoices: async () => {
+          return await fetch('http://localhost:4315/v1/tts/voices').then(res => res.json()).then(({ voices }) => (voices as { id: string, language: 'american_english' | 'british_english' | 'japanese' | 'mandarin_chinese' | 'spanish' | 'french' | 'hindi' | 'italian' | 'brazilian_portuguese', name: string, gender: string }[]).map(({ id, language, name, gender }) => (
+            {
+
+              id,
+              name,
+              provider: 'player2-speech',
+              gender,
+              languages: [{
+                american_english: {
+                  code: 'en',
+                  title: 'English',
+                },
+                british_english: {
+                  code: 'en',
+                  title: 'English',
+                },
+                japanese: {
+                  code: 'ja',
+                  title: 'Japanese',
+                },
+                mandarin_chinese: {
+                  code: 'zh',
+                  title: 'Chinese',
+                },
+                spanish: {
+                  code: 'es',
+                  title: 'Spanish',
+                },
+                french: {
+                  code: 'fr',
+                  title: 'French',
+                },
+                hindi: {
+                  code: 'hi',
+                  title: 'Hindi',
+                },
+
+                italian: {
+                  code: 'it',
+                  title: 'Italian',
+                },
+                brazilian_portuguese:
+                {
+                  code: 'pt',
+                  title: 'Portuguese',
+                },
+
+              }[language]],
+            }
+          )))
+        },
+      },
+      validators: {
+        validateProviderConfig: (config: any) => {
+          return !!config.baseUrl
+        },
+      },
+    },
     'openrouter-ai': {
       id: 'openrouter-ai',
       category: 'chat',
@@ -891,44 +991,7 @@ export const useProvidersStore = defineStore('providers', () => {
         },
       },
     },
-    'player2': {
-      id: 'player2',
-      category: 'chat',
-      tasks: ['text-generation'],
-      nameKey: 'settings.pages.providers.provider.player2.title',
-      name: 'Player2 API',
-      descriptionKey: 'settings.pages.providers.provider.player2.description',
-      description: 'player2.game',
-      defaultOptions: {
-        baseUrl: 'http://localhost:4315/v1/',
-      },
-      createProvider: (config) => {
-        return createPlayer2((config.baseUrl as string).trim())
-      },
-      capabilities: {
-        listModels: async () => [
-          {
-            id: 'player2-model',
-            name: 'Player2 Model',
-            provider: 'player2',
-          },
-        ],
-      },
-      validators: {
-        validateProviderConfig: (config) => {
-          const url: string = config.baseUrl ? config.baseUrl as string : 'http://localhost:4315/v1/'
-          // checks if health status is there, so it green if and only if you actually have the player2 app running
-          return fetch(`${url}health`, {
-            method: 'GET',
-            headers: {
-              'player2-game-key': 'airi',
-            },
-          })
-            .then(r => r.status === 200)
-            .catch(() => false)
-        },
-      },
-    },
+
     'cloudflare-workers-ai': {
       id: 'cloudflare-workers-ai',
       category: 'chat',