fix(stage): logo for providers, added support for anthropic
This commit is contained in:
@@ -67,6 +67,8 @@ settings:
|
|||||||
models:
|
models:
|
||||||
description: Live2D, VRM, etc.
|
description: Live2D, VRM, etc.
|
||||||
title: Models
|
title: Models
|
||||||
|
memory:
|
||||||
|
description: Where memories got stored, and organized
|
||||||
modules:
|
modules:
|
||||||
consciousness:
|
consciousness:
|
||||||
description: Personality, desired model, etc.
|
description: Personality, desired model, etc.
|
||||||
@@ -177,6 +179,9 @@ settings:
|
|||||||
title: Voice Settings
|
title: Voice Settings
|
||||||
description: LLMs, speech providers, etc.
|
description: LLMs, speech providers, etc.
|
||||||
provider:
|
provider:
|
||||||
|
anthropic:
|
||||||
|
description: anthropic.com
|
||||||
|
title: Anthropic | Claude
|
||||||
cloudflare-workers-ai:
|
cloudflare-workers-ai:
|
||||||
description: cloudflare.com
|
description: cloudflare.com
|
||||||
fields:
|
fields:
|
||||||
@@ -248,11 +253,13 @@ settings:
|
|||||||
description: fireworks.ai
|
description: fireworks.ai
|
||||||
title: Fireworks.ai
|
title: Fireworks.ai
|
||||||
microsoft-speech:
|
microsoft-speech:
|
||||||
|
description: speech.microsoft.com
|
||||||
fields:
|
fields:
|
||||||
field:
|
field:
|
||||||
region:
|
region:
|
||||||
description: Speech Service region
|
description: Speech Service region
|
||||||
label: Region
|
label: Region
|
||||||
|
title: Microsoft / Azure Speech
|
||||||
mistral:
|
mistral:
|
||||||
description: mistral.ai
|
description: mistral.ai
|
||||||
title: Mistral
|
title: Mistral
|
||||||
@@ -271,6 +278,9 @@ settings:
|
|||||||
openrouter:
|
openrouter:
|
||||||
description: openrouter.ai
|
description: openrouter.ai
|
||||||
title: OpenRouter
|
title: OpenRouter
|
||||||
|
perplexity:
|
||||||
|
description: perplexity.ai
|
||||||
|
title: Perplexity
|
||||||
together:
|
together:
|
||||||
description: together.ai
|
description: together.ai
|
||||||
title: Together.ai
|
title: Together.ai
|
||||||
@@ -316,30 +326,11 @@ settings:
|
|||||||
title: Nordic Colors
|
title: Nordic Colors
|
||||||
title: Theme Presets
|
title: Theme Presets
|
||||||
title: Themes
|
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:
|
sections:
|
||||||
section:
|
section:
|
||||||
general:
|
general:
|
||||||
title: General
|
title: General
|
||||||
dark-mode: Dark mode
|
theme: Theme
|
||||||
stage-transitions: Stage Transitions
|
|
||||||
title: Settings
|
title: Settings
|
||||||
voices: Voice
|
voices: Voice
|
||||||
stage:
|
stage:
|
||||||
|
|||||||
@@ -50,6 +50,9 @@ settings:
|
|||||||
microphone: 麦克风
|
microphone: 麦克风
|
||||||
models: 模型
|
models: 模型
|
||||||
pages:
|
pages:
|
||||||
|
memory:
|
||||||
|
description: 存放记忆的地方,以及策略
|
||||||
|
title: 记忆体
|
||||||
models:
|
models:
|
||||||
description: 切换角色的 Live2D,VRM 模型
|
description: 切换角色的 Live2D,VRM 模型
|
||||||
title: 角色模型
|
title: 角色模型
|
||||||
@@ -165,6 +168,9 @@ settings:
|
|||||||
title: 声音配置
|
title: 声音配置
|
||||||
description: LLM,语音合成,语音识别提供商等
|
description: LLM,语音合成,语音识别提供商等
|
||||||
provider:
|
provider:
|
||||||
|
anthropic:
|
||||||
|
description: anthropic.com
|
||||||
|
title: Anthropic | Claude
|
||||||
cloudflare-workers-ai:
|
cloudflare-workers-ai:
|
||||||
description: Cloudflare.com
|
description: Cloudflare.com
|
||||||
fields:
|
fields:
|
||||||
@@ -234,11 +240,13 @@ settings:
|
|||||||
description: Fireworks.ai
|
description: Fireworks.ai
|
||||||
title: Fireworks.ai
|
title: Fireworks.ai
|
||||||
microsoft-speech:
|
microsoft-speech:
|
||||||
|
description: speech.microsoft.com
|
||||||
fields:
|
fields:
|
||||||
field:
|
field:
|
||||||
region:
|
region:
|
||||||
description: 服务 Endpoint 地区(比如亚太 eastasia 区域)
|
description: 服务 Endpoint 地区(比如亚太 eastasia 区域)
|
||||||
label: Endpoint 地区
|
label: Endpoint 地区
|
||||||
|
title: Microsoft / Azure 语音服务
|
||||||
mistral:
|
mistral:
|
||||||
description: mistral.ai
|
description: mistral.ai
|
||||||
title: Mistral
|
title: Mistral
|
||||||
@@ -257,6 +265,9 @@ settings:
|
|||||||
openrouter:
|
openrouter:
|
||||||
description: OpenRouter.ai
|
description: OpenRouter.ai
|
||||||
title: OpenRouter
|
title: OpenRouter
|
||||||
|
perplexity:
|
||||||
|
description: perplexity.ai
|
||||||
|
title: Perplexity
|
||||||
together:
|
together:
|
||||||
description: 一起
|
description: 一起
|
||||||
title: Together.ai
|
title: Together.ai
|
||||||
@@ -295,29 +306,11 @@ settings:
|
|||||||
title: 北欧颜色
|
title: 北欧颜色
|
||||||
title: 主题预设
|
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:
|
sections:
|
||||||
section:
|
section:
|
||||||
general:
|
general:
|
||||||
title: 通用
|
title: 通用
|
||||||
dark-mode: 暗黑模式
|
theme: 主题颜色
|
||||||
stage-transitions: 动画效果
|
|
||||||
title: 设置
|
title: 设置
|
||||||
voices: 声线
|
voices: 声线
|
||||||
stage:
|
stage:
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -80,6 +80,7 @@ export default defineConfig({
|
|||||||
/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
|
/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
|
||||||
// include js/ts files
|
// include js/ts files
|
||||||
'(components|src)/**/*.{js,ts}',
|
'(components|src)/**/*.{js,ts}',
|
||||||
|
'**/stage-ui/**/*.{js,ts}',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -179,6 +179,9 @@ settings:
|
|||||||
title: Voice Settings
|
title: Voice Settings
|
||||||
description: LLMs, speech providers, etc.
|
description: LLMs, speech providers, etc.
|
||||||
provider:
|
provider:
|
||||||
|
anthropic:
|
||||||
|
description: anthropic.com
|
||||||
|
title: Anthropic | Claude
|
||||||
cloudflare-workers-ai:
|
cloudflare-workers-ai:
|
||||||
description: cloudflare.com
|
description: cloudflare.com
|
||||||
fields:
|
fields:
|
||||||
@@ -250,11 +253,13 @@ settings:
|
|||||||
description: fireworks.ai
|
description: fireworks.ai
|
||||||
title: Fireworks.ai
|
title: Fireworks.ai
|
||||||
microsoft-speech:
|
microsoft-speech:
|
||||||
|
description: speech.microsoft.com
|
||||||
fields:
|
fields:
|
||||||
field:
|
field:
|
||||||
region:
|
region:
|
||||||
description: Speech Service region
|
description: Speech Service region
|
||||||
label: Region
|
label: Region
|
||||||
|
title: Microsoft / Azure Speech
|
||||||
mistral:
|
mistral:
|
||||||
description: mistral.ai
|
description: mistral.ai
|
||||||
title: Mistral
|
title: Mistral
|
||||||
@@ -273,6 +278,9 @@ settings:
|
|||||||
openrouter:
|
openrouter:
|
||||||
description: openrouter.ai
|
description: openrouter.ai
|
||||||
title: OpenRouter
|
title: OpenRouter
|
||||||
|
perplexity:
|
||||||
|
description: perplexity.ai
|
||||||
|
title: Perplexity
|
||||||
together:
|
together:
|
||||||
description: together.ai
|
description: together.ai
|
||||||
title: Together.ai
|
title: Together.ai
|
||||||
|
|||||||
@@ -168,6 +168,9 @@ settings:
|
|||||||
title: 声音配置
|
title: 声音配置
|
||||||
description: LLM,语音合成,语音识别提供商等
|
description: LLM,语音合成,语音识别提供商等
|
||||||
provider:
|
provider:
|
||||||
|
anthropic:
|
||||||
|
description: anthropic.com
|
||||||
|
title: Anthropic | Claude
|
||||||
cloudflare-workers-ai:
|
cloudflare-workers-ai:
|
||||||
description: Cloudflare.com
|
description: Cloudflare.com
|
||||||
fields:
|
fields:
|
||||||
@@ -237,11 +240,13 @@ settings:
|
|||||||
description: Fireworks.ai
|
description: Fireworks.ai
|
||||||
title: Fireworks.ai
|
title: Fireworks.ai
|
||||||
microsoft-speech:
|
microsoft-speech:
|
||||||
|
description: speech.microsoft.com
|
||||||
fields:
|
fields:
|
||||||
field:
|
field:
|
||||||
region:
|
region:
|
||||||
description: 服务 Endpoint 地区(比如亚太 eastasia 区域)
|
description: 服务 Endpoint 地区(比如亚太 eastasia 区域)
|
||||||
label: Endpoint 地区
|
label: Endpoint 地区
|
||||||
|
title: Microsoft / Azure 语音服务
|
||||||
mistral:
|
mistral:
|
||||||
description: mistral.ai
|
description: mistral.ai
|
||||||
title: Mistral
|
title: Mistral
|
||||||
@@ -260,6 +265,9 @@ settings:
|
|||||||
openrouter:
|
openrouter:
|
||||||
description: OpenRouter.ai
|
description: OpenRouter.ai
|
||||||
title: OpenRouter
|
title: OpenRouter
|
||||||
|
perplexity:
|
||||||
|
description: perplexity.ai
|
||||||
|
title: Perplexity
|
||||||
together:
|
together:
|
||||||
description: 一起
|
description: 一起
|
||||||
title: Together.ai
|
title: Together.ai
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -80,6 +80,7 @@ export default defineConfig({
|
|||||||
/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
|
/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
|
||||||
// include js/ts files
|
// include js/ts files
|
||||||
'(components|src)/**/*.{js,ts}',
|
'(components|src)/**/*.{js,ts}',
|
||||||
|
'**/stage-ui/**/*.{js,ts}',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -47,8 +47,10 @@ settings:
|
|||||||
stage-transitions:
|
stage-transitions:
|
||||||
title: Disable Stage Transitions
|
title: Disable Stage Transitions
|
||||||
use-page-specific-transitions:
|
use-page-specific-transitions:
|
||||||
|
description: >-
|
||||||
|
Some pages will have their own transitions, this will override the stage
|
||||||
|
transitions
|
||||||
title: Use Page Specific Transitions
|
title: Use Page Specific Transitions
|
||||||
description: Some pages will have their own transitions, this will override the stage transitions
|
|
||||||
language:
|
language:
|
||||||
chinese: 简体中文
|
chinese: 简体中文
|
||||||
english: English
|
english: English
|
||||||
@@ -71,30 +73,30 @@ settings:
|
|||||||
models: Model
|
models: Model
|
||||||
pages:
|
pages:
|
||||||
card:
|
card:
|
||||||
title: Airi Card
|
|
||||||
description: Use Airi character card presets
|
|
||||||
upload: Upload
|
|
||||||
delete: Delete
|
|
||||||
active: Active
|
|
||||||
activate: Activate
|
activate: Activate
|
||||||
delete_card: Delete Card
|
active: Active
|
||||||
delete_confirmation: Are you sure you want to delete this card?
|
cancel: Cancel
|
||||||
card_not_found: Card not found
|
card_not_found: Card not found
|
||||||
created_by: created by
|
|
||||||
creator_notes: Creator Notes
|
|
||||||
description_label: Description
|
|
||||||
character: Character
|
character: Character
|
||||||
personality: Personality
|
|
||||||
scenario: Scenario
|
|
||||||
systemprompt: System Prompt
|
|
||||||
posthistoryinstructions: Post-History Instructions
|
|
||||||
modules: Modules
|
|
||||||
consciousness:
|
consciousness:
|
||||||
model: Consciousness / Model
|
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:
|
speech:
|
||||||
model: Speech / Model
|
model: Speech / Model
|
||||||
voice: Speech / Voice
|
voice: Speech / Voice
|
||||||
cancel: Cancel
|
systemprompt: System Prompt
|
||||||
|
title: Airi Card
|
||||||
|
upload: Upload
|
||||||
memory:
|
memory:
|
||||||
description: Where memories got stored, and organized
|
description: Where memories got stored, and organized
|
||||||
title: Memory
|
title: Memory
|
||||||
@@ -211,6 +213,9 @@ settings:
|
|||||||
title: Voice Settings
|
title: Voice Settings
|
||||||
description: LLMs, speech providers, etc.
|
description: LLMs, speech providers, etc.
|
||||||
provider:
|
provider:
|
||||||
|
anthropic:
|
||||||
|
description: anthropic.com
|
||||||
|
title: Anthropic | Claude
|
||||||
cloudflare-workers-ai:
|
cloudflare-workers-ai:
|
||||||
description: cloudflare.com
|
description: cloudflare.com
|
||||||
fields:
|
fields:
|
||||||
@@ -282,11 +287,13 @@ settings:
|
|||||||
description: fireworks.ai
|
description: fireworks.ai
|
||||||
title: Fireworks.ai
|
title: Fireworks.ai
|
||||||
microsoft-speech:
|
microsoft-speech:
|
||||||
|
description: speech.microsoft.com
|
||||||
fields:
|
fields:
|
||||||
field:
|
field:
|
||||||
region:
|
region:
|
||||||
description: Speech Service region
|
description: Speech Service region
|
||||||
label: Region
|
label: Region
|
||||||
|
title: Microsoft / Azure Speech
|
||||||
mistral:
|
mistral:
|
||||||
description: mistral.ai
|
description: mistral.ai
|
||||||
title: Mistral
|
title: Mistral
|
||||||
@@ -305,6 +312,9 @@ settings:
|
|||||||
openrouter:
|
openrouter:
|
||||||
description: openrouter.ai
|
description: openrouter.ai
|
||||||
title: OpenRouter
|
title: OpenRouter
|
||||||
|
perplexity:
|
||||||
|
description: perplexity.ai
|
||||||
|
title: Perplexity
|
||||||
together:
|
together:
|
||||||
description: together.ai
|
description: together.ai
|
||||||
title: Together.ai
|
title: Together.ai
|
||||||
|
|||||||
@@ -199,6 +199,9 @@ settings:
|
|||||||
title: 声音配置
|
title: 声音配置
|
||||||
description: LLM,语音合成,语音识别提供商等
|
description: LLM,语音合成,语音识别提供商等
|
||||||
provider:
|
provider:
|
||||||
|
anthropic:
|
||||||
|
description: anthropic.com
|
||||||
|
title: Anthropic | Claude
|
||||||
cloudflare-workers-ai:
|
cloudflare-workers-ai:
|
||||||
description: Cloudflare.com
|
description: Cloudflare.com
|
||||||
fields:
|
fields:
|
||||||
@@ -268,11 +271,13 @@ settings:
|
|||||||
description: Fireworks.ai
|
description: Fireworks.ai
|
||||||
title: Fireworks.ai
|
title: Fireworks.ai
|
||||||
microsoft-speech:
|
microsoft-speech:
|
||||||
|
description: speech.microsoft.com
|
||||||
fields:
|
fields:
|
||||||
field:
|
field:
|
||||||
region:
|
region:
|
||||||
description: 服务 Endpoint 地区(比如亚太 eastasia 区域)
|
description: 服务 Endpoint 地区(比如亚太 eastasia 区域)
|
||||||
label: Endpoint 地区
|
label: Endpoint 地区
|
||||||
|
title: Microsoft / Azure 语音服务
|
||||||
mistral:
|
mistral:
|
||||||
description: mistral.ai
|
description: mistral.ai
|
||||||
title: Mistral
|
title: Mistral
|
||||||
@@ -291,6 +296,9 @@ settings:
|
|||||||
openrouter:
|
openrouter:
|
||||||
description: OpenRouter.ai
|
description: OpenRouter.ai
|
||||||
title: OpenRouter
|
title: OpenRouter
|
||||||
|
perplexity:
|
||||||
|
description: perplexity.ai
|
||||||
|
title: Perplexity
|
||||||
together:
|
together:
|
||||||
description: 一起
|
description: 一起
|
||||||
title: Together.ai
|
title: Together.ai
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -74,6 +74,7 @@ export default defineConfig({
|
|||||||
/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
|
/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
|
||||||
// include js/ts files
|
// include js/ts files
|
||||||
'(components|src)/**/*.{js,ts}',
|
'(components|src)/**/*.{js,ts}',
|
||||||
|
'**/stage-ui/**/*.{js,ts}',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
+1
-1
@@ -11,7 +11,7 @@
|
|||||||
},
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"postinstall": "npx simple-git-hooks",
|
"postinstall": "npx simple-git-hooks && pnpm packages:build",
|
||||||
"dev": "pnpm -rF=\"./packages/*\" -F=\"./apps/*\" run --parallel dev",
|
"dev": "pnpm -rF=\"./packages/*\" -F=\"./apps/*\" run --parallel dev",
|
||||||
"build": "pnpm -rF=\"./packages/*\" -F=\"./apps/*\" run build",
|
"build": "pnpm -rF=\"./packages/*\" -F=\"./apps/*\" run build",
|
||||||
"apps:dev": "pnpm packages:stub && pnpm -rF=\"./apps/*\" run --parallel dev",
|
"apps:dev": "pnpm packages:stub && pnpm -rF=\"./apps/*\" run --parallel dev",
|
||||||
|
|||||||
Reference in New Issue
Block a user