nanakura/moeka-project
0
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(stage): logo for providers, added support for anthropic

Browse Source
This commit is contained in:
Neko Ayaka
2025-04-01 19:45:54 +08:00
parent 999a8be133
commit 66bc92e439
13 changed files with 435 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/stage-tamagotchi-tauri/locales/en.yml
+11 -20
View File
@@ -67,6 +67,8 @@ settings:
models:
description: Live2D, VRM, etc.
title: Models
memory:
description: Where memories got stored, and organized
modules:
consciousness:
description: Personality, desired model, etc.
@@ -177,6 +179,9 @@ settings:
title: Voice Settings
description: LLMs, speech providers, etc.
provider:
anthropic:
description: anthropic.com
title: Anthropic | Claude
cloudflare-workers-ai:
description: cloudflare.com
fields:
@@ -248,11 +253,13 @@ settings:
description: fireworks.ai
title: Fireworks.ai
microsoft-speech:
description: speech.microsoft.com
fields:
field:
region:
description: Speech Service region
label: Region
title: Microsoft / Azure Speech
mistral:
description: mistral.ai
title: Mistral
@@ -271,6 +278,9 @@ settings:
openrouter:
description: openrouter.ai
title: OpenRouter
perplexity:
description: perplexity.ai
title: Perplexity
together:
description: together.ai
title: Together.ai
@@ -316,30 +326,11 @@ settings:
title: Nordic Colors
title: Theme Presets
title: Themes
shortcuts:
title: Shortcuts
description: Configure the shortcuts for the stage
sections:
section:
window-controls:
title: Window Controls
press-keys-hint:
label: Press Keys...Or Escape to cancel
fields:
field:
toggle-resize:
label: Toggle Resize
toggle-move:
label: Toggle Move
toggle-ignore-mouse-event: # TODO: Add this feature
label: Toggle Ignore Mouse Event
sections:
section:
general:
title: General
dark-mode: Dark mode
stage-transitions: Stage Transitions
theme: Theme
title: Settings
voices: Voice
stage:
apps/stage-tamagotchi-tauri/locales/zh-CN.yml
+12 -19
View File
@@ -50,6 +50,9 @@ settings:
microphone: 麦克风
models: 模型
pages:
memory:
description: 存放记忆的地方，以及策略
title: 记忆体
models:
description: 切换角色的 Live2D，VRM 模型
title: 角色模型
@@ -165,6 +168,9 @@ settings:
title: 声音配置
description: LLM，语音合成，语音识别提供商等
provider:
anthropic:
description: anthropic.com
title: Anthropic | Claude
cloudflare-workers-ai:
description: Cloudflare.com
fields:
@@ -234,11 +240,13 @@ settings:
description: Fireworks.ai
title: Fireworks.ai
microsoft-speech:
description: speech.microsoft.com
fields:
field:
region:
description: 服务 Endpoint 地区（比如亚太 eastasia 区域）
label: Endpoint 地区
title: Microsoft / Azure 语音服务
mistral:
description: mistral.ai
title: Mistral
@@ -257,6 +265,9 @@ settings:
openrouter:
description: OpenRouter.ai
title: OpenRouter
perplexity:
description: perplexity.ai
title: Perplexity
together:
description: 一起
title: Together.ai
@@ -295,29 +306,11 @@ settings:
title: 北欧颜色
title: 主题预设
title: 舞台主题
shortcuts:
title: 快捷键
description: 配置舞台快捷键
sections:
section:
window-controls:
title: 窗口控制
press-keys-hint:
label: 按下快捷键...或按下 Esc 取消
fields:
field:
toggle-resize:
label: 切换大小
toggle-move:
label: 切换移动
toggle-ignore-mouse-event: # TODO: Add this feature
label: 切换鼠标穿透
sections:
section:
general:
title: 通用
dark-mode: 暗黑模式
stage-transitions: 动画效果
theme: 主题颜色
title: 设置
voices: 声线
stage:
apps/stage-tamagotchi-tauri/src/pages/settings/providers/anthropic.vue
+119
View File
@@ -0,0 +1,119 @@
<script setup lang="ts">
import type { RemovableRef } from '@vueuse/core'
import {
ProviderAdvancedSettings,
ProviderApiKeyInput,
ProviderBaseUrlInput,
ProviderBasicSettings,
ProviderSettingsContainer,
ProviderSettingsLayout,
} 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 { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
const { t } = useI18n()
const router = useRouter()
const providersStore = useProvidersStore()
const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
// Get provider metadata
const providerId = 'anthropic'
const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
// Use computed properties for settings
const apiKey = computed({
get: () => providers.value[providerId]?.apiKey || '',
set: (value) => {
if (!providers.value[providerId])
providers.value[providerId] = {}
providers.value[providerId].apiKey = value
},
})
const baseUrl = computed({
get: () => providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/',
set: (value) => {
if (!providers.value[providerId])
providers.value[providerId] = {}
providers.value[providerId].baseUrl = value
},
})
onMounted(() => {
// Initialize provider if it doesn't exist
if (!providers.value[providerId]) {
providers.value[providerId] = {
baseUrl: 'https://api.anthropic.com/v1/',
}
}
// Initialize refs with current values
apiKey.value = providers.value[providerId]?.apiKey || ''
baseUrl.value = providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/'
})
// Watch settings and update the provider configuration
watch([apiKey, baseUrl], () => {
providers.value[providerId] = {
...providers.value[providerId],
apiKey: apiKey.value,
baseUrl: baseUrl.value || 'https://api.anthropic.com/v1/',
}
})
function handleResetSettings() {
providers.value[providerId] = {
baseUrl: 'https://api.anthropic.com/v1/',
}
}
</script>
<template>
<ProviderSettingsLayout
:provider-name="providerMetadata?.localizedName || 'Anthropic | Claude'"
:provider-icon="providerMetadata?.icon"
:on-back="() => router.back()"
>
<div bg="orange-50 dark:orange-900/20" rounded-xl p-4 flex="~ col gap-3">
<h2 text-xl font-bold text="orange-700 dark:orange-500">
Before you start
</h2>
<p>
While Anthropic recently did announce that they are having a beta support for
OpenAI SDK compatibility <a underline href="https://docs.anthropic.com/en/api/openai-sdk">(you can read more here)</a>,
but due to the implementation details comes with <a underline href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS">CORS</a>
restrictions which not aligned with the OpenAI SDK, it's currently not possible to use this provider in the browser.
</p>
<p>
If you do need to use this provider, you will need a dedicated proxy backend like a Serverless Function running on
<a underline href="https://workers.cloudflare.com/">Cloudflare Workers</a> or some CORS bypassing services to bypass the CORS restrictions.
</p>
</div>
<ProviderSettingsContainer>
<ProviderBasicSettings
:title="t('settings.pages.providers.common.section.basic.title')"
:description="t('settings.pages.providers.common.section.basic.description')"
:on-reset="handleResetSettings"
>
<ProviderApiKeyInput
v-model="apiKey"
:provider-name="providerMetadata?.localizedName || 'Anthropic'"
placeholder="sk-..."
/>
</ProviderBasicSettings>
<ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
<ProviderBaseUrlInput
v-model="baseUrl"
placeholder="https://api.anthropic.com/v1/"
/>
</ProviderAdvancedSettings>
</ProviderSettingsContainer>
</ProviderSettingsLayout>
</template>
apps/stage-tamagotchi-tauri/uno.config.ts
+1
View File
@@ -80,6 +80,7 @@ export default defineConfig({
/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
// include js/ts files
'(components|src)/**/*.{js,ts}',
'**/stage-ui/**/*.{js,ts}',
],
},
},
apps/stage-tamagotchi/src/renderer/locales/en.yml
+8
View File
@@ -179,6 +179,9 @@ settings:
title: Voice Settings
description: LLMs, speech providers, etc.
provider:
anthropic:
description: anthropic.com
title: Anthropic | Claude
cloudflare-workers-ai:
description: cloudflare.com
fields:
@@ -250,11 +253,13 @@ settings:
description: fireworks.ai
title: Fireworks.ai
microsoft-speech:
description: speech.microsoft.com
fields:
field:
region:
description: Speech Service region
label: Region
title: Microsoft / Azure Speech
mistral:
description: mistral.ai
title: Mistral
@@ -273,6 +278,9 @@ settings:
openrouter:
description: openrouter.ai
title: OpenRouter
perplexity:
description: perplexity.ai
title: Perplexity
together:
description: together.ai
title: Together.ai
apps/stage-tamagotchi/src/renderer/locales/zh-CN.yml
+8
View File
@@ -168,6 +168,9 @@ settings:
title: 声音配置
description: LLM，语音合成，语音识别提供商等
provider:
anthropic:
description: anthropic.com
title: Anthropic | Claude
cloudflare-workers-ai:
description: Cloudflare.com
fields:
@@ -237,11 +240,13 @@ settings:
description: Fireworks.ai
title: Fireworks.ai
microsoft-speech:
description: speech.microsoft.com
fields:
field:
region:
description: 服务 Endpoint 地区（比如亚太 eastasia 区域）
label: Endpoint 地区
title: Microsoft / Azure 语音服务
mistral:
description: mistral.ai
title: Mistral
@@ -260,6 +265,9 @@ settings:
openrouter:
description: OpenRouter.ai
title: OpenRouter
perplexity:
description: perplexity.ai
title: Perplexity
together:
description: 一起
title: Together.ai
apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/anthropic.vue
+119
View File
@@ -0,0 +1,119 @@
<script setup lang="ts">
import type { RemovableRef } from '@vueuse/core'
import {
ProviderAdvancedSettings,
ProviderApiKeyInput,
ProviderBaseUrlInput,
ProviderBasicSettings,
ProviderSettingsContainer,
ProviderSettingsLayout,
} 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 { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
const { t } = useI18n()
const router = useRouter()
const providersStore = useProvidersStore()
const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
// Get provider metadata
const providerId = 'anthropic'
const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
// Use computed properties for settings
const apiKey = computed({
get: () => providers.value[providerId]?.apiKey || '',
set: (value) => {
if (!providers.value[providerId])
providers.value[providerId] = {}
providers.value[providerId].apiKey = value
},
})
const baseUrl = computed({
get: () => providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/',
set: (value) => {
if (!providers.value[providerId])
providers.value[providerId] = {}
providers.value[providerId].baseUrl = value
},
})
onMounted(() => {
// Initialize provider if it doesn't exist
if (!providers.value[providerId]) {
providers.value[providerId] = {
baseUrl: 'https://api.anthropic.com/v1/',
}
}
// Initialize refs with current values
apiKey.value = providers.value[providerId]?.apiKey || ''
baseUrl.value = providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/'
})
// Watch settings and update the provider configuration
watch([apiKey, baseUrl], () => {
providers.value[providerId] = {
...providers.value[providerId],
apiKey: apiKey.value,
baseUrl: baseUrl.value || 'https://api.anthropic.com/v1/',
}
})
function handleResetSettings() {
providers.value[providerId] = {
baseUrl: 'https://api.anthropic.com/v1/',
}
}
</script>
<template>
<ProviderSettingsLayout
:provider-name="providerMetadata?.localizedName || 'Anthropic | Claude'"
:provider-icon="providerMetadata?.icon"
:on-back="() => router.back()"
>
<div bg="orange-50 dark:orange-900/20" rounded-xl p-4 flex="~ col gap-3">
<h2 text-xl font-bold text="orange-700 dark:orange-500">
Before you start
</h2>
<p>
While Anthropic recently did announce that they are having a beta support for
OpenAI SDK compatibility <a underline href="https://docs.anthropic.com/en/api/openai-sdk">(you can read more here)</a>,
but due to the implementation details comes with <a underline href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS">CORS</a>
restrictions which not aligned with the OpenAI SDK, it's currently not possible to use this provider in the browser.
</p>
<p>
If you do need to use this provider, you will need a dedicated proxy backend like a Serverless Function running on
<a underline href="https://workers.cloudflare.com/">Cloudflare Workers</a> or some CORS bypassing services to bypass the CORS restrictions.
</p>
</div>
<ProviderSettingsContainer>
<ProviderBasicSettings
:title="t('settings.pages.providers.common.section.basic.title')"
:description="t('settings.pages.providers.common.section.basic.description')"
:on-reset="handleResetSettings"
>
<ProviderApiKeyInput
v-model="apiKey"
:provider-name="providerMetadata?.localizedName || 'Anthropic'"
placeholder="sk-..."
/>
</ProviderBasicSettings>
<ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
<ProviderBaseUrlInput
v-model="baseUrl"
placeholder="https://api.anthropic.com/v1/"
/>
</ProviderAdvancedSettings>
</ProviderSettingsContainer>
</ProviderSettingsLayout>
</template>
apps/stage-tamagotchi/uno.config.ts
+1
View File
@@ -80,6 +80,7 @@ export default defineConfig({
/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
// include js/ts files
'(components|src)/**/*.{js,ts}',
'**/stage-ui/**/*.{js,ts}',
],
},
},
apps/stage-web/locales/en.yml
+27 -17
View File
@@ -47,8 +47,10 @@ settings:
stage-transitions:
title: Disable Stage Transitions
use-page-specific-transitions:
description: >-
Some pages will have their own transitions, this will override the stage
transitions
title: Use Page Specific Transitions
description: Some pages will have their own transitions, this will override the stage transitions
language:
chinese: 简体中文
english: English
@@ -71,30 +73,30 @@ settings:
models: Model
pages:
card:
title: Airi Card
description: Use Airi character card presets
upload: Upload
delete: Delete
active: Active
activate: Activate
delete_card: Delete Card
delete_confirmation: Are you sure you want to delete this card?
active: Active
cancel: Cancel
card_not_found: Card not found
created_by: created by
creator_notes: Creator Notes
description_label: Description
character: Character
personality: Personality
scenario: Scenario
systemprompt: System Prompt
posthistoryinstructions: Post-History Instructions
modules: Modules
consciousness:
model: Consciousness / Model
created_by: created by
creator_notes: Creator Notes
delete: Delete
delete_card: Delete Card
delete_confirmation: Are you sure you want to delete this card?
description: Use Airi character card presets
description_label: Description
modules: Modules
personality: Personality
posthistoryinstructions: Post-History Instructions
scenario: Scenario
speech:
model: Speech / Model
voice: Speech / Voice
cancel: Cancel
systemprompt: System Prompt
title: Airi Card
upload: Upload
memory:
description: Where memories got stored, and organized
title: Memory
@@ -211,6 +213,9 @@ settings:
title: Voice Settings
description: LLMs, speech providers, etc.
provider:
anthropic:
description: anthropic.com
title: Anthropic | Claude
cloudflare-workers-ai:
description: cloudflare.com
fields:
@@ -282,11 +287,13 @@ settings:
description: fireworks.ai
title: Fireworks.ai
microsoft-speech:
description: speech.microsoft.com
fields:
field:
region:
description: Speech Service region
label: Region
title: Microsoft / Azure Speech
mistral:
description: mistral.ai
title: Mistral
@@ -305,6 +312,9 @@ settings:
openrouter:
description: openrouter.ai
title: OpenRouter
perplexity:
description: perplexity.ai
title: Perplexity
together:
description: together.ai
title: Together.ai
apps/stage-web/locales/zh-CN.yml
+8
View File
@@ -199,6 +199,9 @@ settings:
title: 声音配置
description: LLM，语音合成，语音识别提供商等
provider:
anthropic:
description: anthropic.com
title: Anthropic | Claude
cloudflare-workers-ai:
description: Cloudflare.com
fields:
@@ -268,11 +271,13 @@ settings:
description: Fireworks.ai
title: Fireworks.ai
microsoft-speech:
description: speech.microsoft.com
fields:
field:
region:
description: 服务 Endpoint 地区（比如亚太 eastasia 区域）
label: Endpoint 地区
title: Microsoft / Azure 语音服务
mistral:
description: mistral.ai
title: Mistral
@@ -291,6 +296,9 @@ settings:
openrouter:
description: OpenRouter.ai
title: OpenRouter
perplexity:
description: perplexity.ai
title: Perplexity
together:
description: 一起
title: Together.ai
apps/stage-web/src/pages/settings/providers/anthropic.vue
+119
View File
@@ -0,0 +1,119 @@
<script setup lang="ts">
import type { RemovableRef } from '@vueuse/core'
import {
ProviderAdvancedSettings,
ProviderApiKeyInput,
ProviderBaseUrlInput,
ProviderBasicSettings,
ProviderSettingsContainer,
ProviderSettingsLayout,
} 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 { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
const { t } = useI18n()
const router = useRouter()
const providersStore = useProvidersStore()
const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
// Get provider metadata
const providerId = 'anthropic'
const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
// Use computed properties for settings
const apiKey = computed({
get: () => providers.value[providerId]?.apiKey || '',
set: (value) => {
if (!providers.value[providerId])
providers.value[providerId] = {}
providers.value[providerId].apiKey = value
},
})
const baseUrl = computed({
get: () => providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/',
set: (value) => {
if (!providers.value[providerId])
providers.value[providerId] = {}
providers.value[providerId].baseUrl = value
},
})
onMounted(() => {
// Initialize provider if it doesn't exist
if (!providers.value[providerId]) {
providers.value[providerId] = {
baseUrl: 'https://api.anthropic.com/v1/',
}
}
// Initialize refs with current values
apiKey.value = providers.value[providerId]?.apiKey || ''
baseUrl.value = providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/'
})
// Watch settings and update the provider configuration
watch([apiKey, baseUrl], () => {
providers.value[providerId] = {
...providers.value[providerId],
apiKey: apiKey.value,
baseUrl: baseUrl.value || 'https://api.anthropic.com/v1/',
}
})
function handleResetSettings() {
providers.value[providerId] = {
baseUrl: 'https://api.anthropic.com/v1/',
}
}
</script>
<template>
<ProviderSettingsLayout
:provider-name="providerMetadata?.localizedName || 'Anthropic | Claude'"
:provider-icon="providerMetadata?.icon"
:on-back="() => router.back()"
>
<div bg="orange-50 dark:orange-900/20" rounded-xl p-4 flex="~ col gap-3">
<h2 text-xl font-bold text="orange-700 dark:orange-500">
Before you start
</h2>
<p>
While Anthropic recently did announce that they are having a beta support for
OpenAI SDK compatibility <a underline href="https://docs.anthropic.com/en/api/openai-sdk">(you can read more here)</a>,
but due to the implementation details comes with <a underline href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS">CORS</a>
restrictions which not aligned with the OpenAI SDK, it's currently not possible to use this provider in the browser.
</p>
<p>
If you do need to use this provider, you will need a dedicated proxy backend like a Serverless Function running on
<a underline href="https://workers.cloudflare.com/">Cloudflare Workers</a> or some CORS bypassing services to bypass the CORS restrictions.
</p>
</div>
<ProviderSettingsContainer>
<ProviderBasicSettings
:title="t('settings.pages.providers.common.section.basic.title')"
:description="t('settings.pages.providers.common.section.basic.description')"
:on-reset="handleResetSettings"
>
<ProviderApiKeyInput
v-model="apiKey"
:provider-name="providerMetadata?.localizedName || 'Anthropic'"
placeholder="sk-..."
/>
</ProviderBasicSettings>
<ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
<ProviderBaseUrlInput
v-model="baseUrl"
placeholder="https://api.anthropic.com/v1/"
/>
</ProviderAdvancedSettings>
</ProviderSettingsContainer>
</ProviderSettingsLayout>
</template>
apps/stage-web/uno.config.ts
+1
View File
@@ -74,6 +74,7 @@ export default defineConfig({
/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
// include js/ts files
'(components|src)/**/*.{js,ts}',
'**/stage-ui/**/*.{js,ts}',
],
},
},
package.json
+1 -1
View File
@@ -11,7 +11,7 @@
},
"license": "MIT",
"scripts": {
"postinstall": "npx simple-git-hooks",
"postinstall": "npx simple-git-hooks && pnpm packages:build",
"dev": "pnpm -rF=\"./packages/*\" -F=\"./apps/*\" run --parallel dev",
"build": "pnpm -rF=\"./packages/*\" -F=\"./apps/*\" run build",
"apps:dev": "pnpm packages:stub && pnpm -rF=\"./apps/*\" run --parallel dev",