fix(i18n): add i18n support for custom model feature in ModelSelector (#172)
* feat(models): add custom model name input with provider selector - Add custom model input field at bottom of model selector modal - Add provider dropdown to specify target provider for custom model - Track custom models in app store and display with CUSTOM badge - Merge custom model into provider group list - Fix custom provider models being overwritten by API response (keep both) * Upload screenshot * fix(i18n): add i18n support for custom model feature in ModelSelector Replace hardcoded English strings (CUSTOM badge, placeholder, hint) with vue-i18n t() calls and add corresponding translation keys to all 8 locales (en, zh, ja, ko, fr, es, de, pt). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: toller892 <892@users.noreply.github.com> Co-authored-by: Tony <125938283+toller892@users.noreply.github.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ekko
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { NModal, NInput } from 'naive-ui'
|
||||
import { NModal, NInput, NSelect } from 'naive-ui'
|
||||
import { useAppStore } from '@/stores/hermes/app'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
@@ -10,11 +10,37 @@ const appStore = useAppStore()
|
||||
const showModal = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const collapsedGroups = ref<Record<string, boolean>>({})
|
||||
const customInput = ref('')
|
||||
const customProvider = ref('')
|
||||
|
||||
const providerOptions = computed(() => {
|
||||
const current = appStore.selectedProvider
|
||||
customProvider.value = current
|
||||
return appStore.modelGroups.map(g => ({ label: g.label, value: g.provider }))
|
||||
})
|
||||
|
||||
const modelGroupsWithCustom = computed(() =>
|
||||
appStore.modelGroups.map(g => ({
|
||||
...g,
|
||||
models: [
|
||||
...g.models,
|
||||
...(appStore.customModels[g.provider] || []).filter(m => !g.models.includes(m)),
|
||||
],
|
||||
}))
|
||||
)
|
||||
|
||||
const customModelSet = computed(() => {
|
||||
const set = new Set<string>()
|
||||
for (const models of Object.values(appStore.customModels)) {
|
||||
models.forEach(m => set.add(m))
|
||||
}
|
||||
return set
|
||||
})
|
||||
|
||||
const filteredGroups = computed(() => {
|
||||
const q = searchQuery.value.toLowerCase().trim()
|
||||
if (!q) return appStore.modelGroups
|
||||
return appStore.modelGroups
|
||||
if (!q) return modelGroupsWithCustom.value
|
||||
return modelGroupsWithCustom.value
|
||||
.map(g => ({
|
||||
...g,
|
||||
models: g.models.filter(m => m.toLowerCase().includes(q)),
|
||||
@@ -36,9 +62,20 @@ function handleSelect(model: string, provider: string) {
|
||||
searchQuery.value = ''
|
||||
}
|
||||
|
||||
function handleCustomSubmit() {
|
||||
const model = customInput.value.trim()
|
||||
if (!model || !customProvider.value) return
|
||||
appStore.switchModel(model, customProvider.value)
|
||||
showModal.value = false
|
||||
searchQuery.value = ''
|
||||
customInput.value = ''
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
collapsedGroups.value = {}
|
||||
searchQuery.value = ''
|
||||
customInput.value = ''
|
||||
customProvider.value = appStore.selectedProvider
|
||||
showModal.value = true
|
||||
}
|
||||
</script>
|
||||
@@ -89,6 +126,7 @@ function openModal() {
|
||||
@click="handleSelect(model, group.provider)"
|
||||
>
|
||||
<span class="model-item-name">{{ model }}</span>
|
||||
<span v-if="customModelSet.has(model)" class="model-badge-custom">{{ t('models.customBadge') }}</span>
|
||||
<svg v-if="model === appStore.selectedModel && group.provider === appStore.selectedProvider" class="model-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
@@ -98,6 +136,26 @@ function openModal() {
|
||||
<div v-if="filteredGroups.length === 0" class="model-empty">
|
||||
{{ searchQuery ? 'No results' : 'No models' }}
|
||||
</div>
|
||||
<div class="model-custom">
|
||||
<div class="model-custom-row">
|
||||
<NSelect
|
||||
v-model:value="customProvider"
|
||||
:options="providerOptions"
|
||||
size="small"
|
||||
class="model-custom-provider"
|
||||
/>
|
||||
<NInput
|
||||
v-model:value="customInput"
|
||||
:placeholder="t('models.customModelPlaceholder')"
|
||||
size="small"
|
||||
class="model-custom-input"
|
||||
@keydown.enter="handleCustomSubmit"
|
||||
/>
|
||||
</div>
|
||||
<div class="model-custom-hint">
|
||||
{{ t('models.customModelHint') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NModal>
|
||||
</div>
|
||||
@@ -243,10 +301,48 @@ function openModal() {
|
||||
color: $accent-primary;
|
||||
}
|
||||
|
||||
.model-badge-custom {
|
||||
flex-shrink: 0;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: $accent-primary;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
margin-right: 4px;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.model-empty {
|
||||
padding: 24px 0;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.model-custom {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.model-custom-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.model-custom-provider {
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.model-custom-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.model-custom-hint {
|
||||
margin-top: 6px;
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -252,6 +252,9 @@ export default {
|
||||
nousApproved: 'Login erfolgreich',
|
||||
nousDenied: 'Autorisierung wurde abgelehnt',
|
||||
nousExpired: 'Autorisierung abgelaufen',
|
||||
customBadge: 'BENUTZERDEF.',
|
||||
customModelPlaceholder: 'Benutzerdefinierter Modellname',
|
||||
customModelHint: 'Enter zum Laden',
|
||||
noProviders: 'Keine Anbieter gefunden. Fugen Sie einen benutzerdefinierten Anbieter hinzu, um zu beginnen.',
|
||||
builtIn: 'Integriert',
|
||||
customType: 'Benutzerdefiniert',
|
||||
|
||||
@@ -277,6 +277,9 @@ export default {
|
||||
nousApproved: 'Login successful',
|
||||
nousDenied: 'Authorization was denied. Please try again.',
|
||||
nousExpired: 'Authorization expired. Please try again.',
|
||||
customBadge: 'CUSTOM',
|
||||
customModelPlaceholder: 'Custom model name',
|
||||
customModelHint: 'Enter to load',
|
||||
noProviders: 'No providers found. Add a custom provider to get started.',
|
||||
builtIn: 'Built-in',
|
||||
customType: 'Custom',
|
||||
|
||||
@@ -252,6 +252,9 @@ export default {
|
||||
nousApproved: 'Inicio de sesión exitoso',
|
||||
nousDenied: 'Autorización denegada',
|
||||
nousExpired: 'Autorización expirada',
|
||||
customBadge: 'PERSONALIZADO',
|
||||
customModelPlaceholder: 'Nombre del modelo personalizado',
|
||||
customModelHint: 'Enter para cargar',
|
||||
noProviders: 'No se encontraron proveedores. Anade un proveedor personalizado para comenzar.',
|
||||
builtIn: 'Integrado',
|
||||
customType: 'Personalizado',
|
||||
|
||||
@@ -252,6 +252,9 @@ export default {
|
||||
nousApproved: 'Connexion réussie',
|
||||
nousDenied: 'Autorisation refusée',
|
||||
nousExpired: 'Autorisation expirée',
|
||||
customBadge: 'PERSONNALISÉ',
|
||||
customModelPlaceholder: 'Nom du modèle personnalisé',
|
||||
customModelHint: 'Entrée pour charger',
|
||||
noProviders: 'Aucun fournisseur trouve. Ajoutez un fournisseur personnalise pour commencer.',
|
||||
builtIn: 'Integre',
|
||||
customType: 'Personnalise',
|
||||
|
||||
@@ -252,6 +252,9 @@ export default {
|
||||
nousApproved: 'ログイン成功',
|
||||
nousDenied: '認証が拒否されました',
|
||||
nousExpired: '認証の有効期限が切れました',
|
||||
customBadge: 'カスタム',
|
||||
customModelPlaceholder: 'カスタムモデル名',
|
||||
customModelHint: 'Enterで読み込み',
|
||||
noProviders: 'プロバイダーがありません。カスタムプロバイダーを追加して始めましょう。',
|
||||
builtIn: '組み込み',
|
||||
customType: 'カスタム',
|
||||
|
||||
@@ -252,6 +252,9 @@ export default {
|
||||
nousApproved: '로그인 성공',
|
||||
nousDenied: '인증이 거부되었습니다',
|
||||
nousExpired: '인증이 만료되었습니다',
|
||||
customBadge: '커스텀',
|
||||
customModelPlaceholder: '사용자 지정 모델 이름',
|
||||
customModelHint: 'Enter로 불러오기',
|
||||
noProviders: 'Provider가 없습니다. 사용자 지정 Provider를 추가하여 시작하세요.',
|
||||
builtIn: '내장',
|
||||
customType: '사용자 지정',
|
||||
|
||||
@@ -252,6 +252,9 @@ export default {
|
||||
nousApproved: 'Login bem-sucedido',
|
||||
nousDenied: 'Autorização negada',
|
||||
nousExpired: 'Autorização expirada',
|
||||
customBadge: 'PERSONALIZADO',
|
||||
customModelPlaceholder: 'Nome do modelo personalizado',
|
||||
customModelHint: 'Enter para carregar',
|
||||
noProviders: 'Nenhum provedor encontrado. Adicione um provedor personalizado para comecar.',
|
||||
builtIn: 'Integrado',
|
||||
customType: 'Personalizado',
|
||||
|
||||
@@ -277,6 +277,9 @@ export default {
|
||||
nousApproved: '登录成功',
|
||||
nousDenied: '授权被拒绝，请重试。',
|
||||
nousExpired: '授权已过期，请重试。',
|
||||
customBadge: '自定义',
|
||||
customModelPlaceholder: '自定义模型名称',
|
||||
customModelHint: '按回车加载',
|
||||
noProviders: '暂无 Provider，添加一个开始吧。',
|
||||
builtIn: '内置',
|
||||
customType: '自定义',
|
||||
|
||||
@@ -19,6 +19,7 @@ export const useAppStore = defineStore('app', () => {
|
||||
const modelGroups = ref<AvailableModelGroup[]>([])
|
||||
const selectedModel = ref('')
|
||||
const selectedProvider = ref('')
|
||||
const customModels = ref<Record<string, string[]>>({})
|
||||
const healthPollTimer = ref<ReturnType<typeof setInterval>>()
|
||||
const nodeVersion = ref('')
|
||||
|
||||
@@ -73,6 +74,13 @@ export const useAppStore = defineStore('app', () => {
|
||||
await updateDefaultModel({ default: modelId, provider })
|
||||
selectedModel.value = modelId
|
||||
selectedProvider.value = provider || ''
|
||||
// Track as custom if not already in the server-fetched list
|
||||
if (provider && !modelGroups.value.find(g => g.provider === provider)?.models.includes(modelId)) {
|
||||
if (!customModels.value[provider]) customModels.value[provider] = []
|
||||
if (!customModels.value[provider].includes(modelId)) {
|
||||
customModels.value[provider] = [...customModels.value[provider], modelId]
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Failed to switch model:', err)
|
||||
}
|
||||
@@ -122,6 +130,7 @@ export const useAppStore = defineStore('app', () => {
|
||||
updating,
|
||||
doUpdate,
|
||||
modelGroups,
|
||||
customModels,
|
||||
selectedModel,
|
||||
selectedProvider,
|
||||
streamEnabled,
|
||||
|
||||
@@ -83,7 +83,7 @@ export async function getAvailable(ctx: any) {
|
||||
const builtinPreset = PROVIDER_PRESETS.find(p => p.value === bareKey)
|
||||
let models = builtinPreset?.models?.length ? [...builtinPreset.models] : [cp.model]
|
||||
if (cp.api_key) {
|
||||
try { const fetched = await fetchProviderModels(baseUrl, cp.api_key); if (fetched.length > 0) models = fetched } catch { }
|
||||
try { const fetched = await fetchProviderModels(baseUrl, cp.api_key); if (fetched.length > 0) models = [...new Set([cp.model, ...fetched])] } catch { }
|
||||
}
|
||||
const label = builtinPreset?.label || cp.name
|
||||
const presetBaseUrl = builtinPreset?.base_url || ''
|
||||
|
||||
Reference in New Issue
Block a user