diff --git a/ui/litellm-dashboard/src/components/model_filters.tsx b/ui/litellm-dashboard/src/components/model_filters.tsx index 5b68d587599..c83699729af 100644 --- a/ui/litellm-dashboard/src/components/model_filters.tsx +++ b/ui/litellm-dashboard/src/components/model_filters.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect, useMemo, useRef } from "react"; +import { useTranslation } from "react-i18next"; import { Card, Text } from "@tremor/react"; interface ModelGroupInfo { @@ -32,6 +33,7 @@ const ModelFilters: React.FC = ({ showFiltersCard = true, className = "", }) => { + const { t } = useTranslation(); const [searchTerm, setSearchTerm] = useState(""); const [selectedProvider, setSelectedProvider] = useState(""); const [selectedMode, setSelectedMode] = useState(""); @@ -132,24 +134,24 @@ const ModelFilters: React.FC = ({ const filtersContent = (
- Search Models: + {t("modelFilters.searchModels")} setSearchTerm(e.target.value)} className="border rounded px-3 py-2 w-64 h-10 text-sm" />
- Provider: + {t("modelFilters.provider")}
- Mode: + {t("modelFilters.mode")}
- Features: + {t("modelFilters.features")} = ({ />
- + = ({ className={`flex items-center px-4 py-2 rounded-md text-sm ${!newAlias.aliasName || !newAlias.targetModelGroup ? "bg-gray-300 text-gray-500 cursor-not-allowed" : "bg-green-600 text-white hover:bg-green-700"}`} > - Add Alias + {t("modelGroupAliasSettings.addAlias")}
- Manage Existing Aliases + {t("modelGroupAliasSettings.manageExisting")}
- Alias Name - Target Model Group - Actions + {t("modelGroupAliasSettings.aliasName")} + + {t("modelGroupAliasSettings.targetModelGroup")} + + {t("common.actions")} @@ -263,13 +266,13 @@ const ModelGroupAliasSettings: React.FC = ({ onClick={handleUpdateAlias} className="text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded hover:bg-blue-100" > - Save + {t("common.save")} @@ -301,7 +304,7 @@ const ModelGroupAliasSettings: React.FC = ({ {aliases.length === 0 && ( - No aliases added yet. Add a new alias above. + {t("modelGroupAliasSettings.noAliases")} )} @@ -312,10 +315,8 @@ const ModelGroupAliasSettings: React.FC = ({ {/* Configuration Example */} - Configuration Example - - Here's how your current aliases would look in the config.yaml: - + {t("modelGroupAliasSettings.configExample")} + {t("modelGroupAliasSettings.configExampleDesc")}
router_settings: diff --git a/ui/litellm-dashboard/src/components/model_hub_table_columns.tsx b/ui/litellm-dashboard/src/components/model_hub_table_columns.tsx index 64de1dd98e8..8e886b570e9 100644 --- a/ui/litellm-dashboard/src/components/model_hub_table_columns.tsx +++ b/ui/litellm-dashboard/src/components/model_hub_table_columns.tsx @@ -2,6 +2,7 @@ import { ColumnDef } from "@tanstack/react-table"; import { Button, Badge, Text } from "@tremor/react"; import { Tooltip, Tag } from "antd"; import { CopyOutlined, InfoCircleOutlined } from "@ant-design/icons"; +import i18n from "@/lib/i18n"; interface ModelHubData { model_group: string; @@ -55,7 +56,7 @@ export const modelHubColumns = ( ): ColumnDef[] => { const allColumns: ColumnDef[] = [ { - header: "Public Model Name", + header: i18n.t("modelHubTableColumns.publicModelName"), accessorKey: "model_group", enableSorting: true, sortingFn: "alphanumeric", @@ -66,7 +67,7 @@ export const modelHubColumns = (
{model.model_group} - + copyToClipboard(model.model_group)} className="cursor-pointer text-gray-500 hover:text-blue-500 text-xs" @@ -82,7 +83,7 @@ export const modelHubColumns = ( }, }, { - header: "Provider", + header: i18n.t("modelHubTableColumns.provider"), accessorKey: "providers", enableSorting: true, sortingFn: (rowA, rowB) => { @@ -109,7 +110,7 @@ export const modelHubColumns = ( }, }, { - header: "Mode", + header: i18n.t("modelHubTableColumns.mode"), accessorKey: "mode", enableSorting: true, sortingFn: "alphanumeric", @@ -129,7 +130,7 @@ export const modelHubColumns = ( }, }, { - header: "Tokens", + header: i18n.t("modelHubTableColumns.tokens"), accessorKey: "max_input_tokens", enableSorting: true, sortingFn: (rowA, rowB) => { @@ -154,7 +155,7 @@ export const modelHubColumns = ( }, }, { - header: "Cost/1M", + header: i18n.t("modelHubTableColumns.costPerMillion"), accessorKey: "input_cost_per_token", enableSorting: true, sortingFn: (rowA, rowB) => { @@ -176,7 +177,7 @@ export const modelHubColumns = ( }, }, { - header: "Features", + header: i18n.t("modelHubTableColumns.features"), accessorKey: "capabilities", enableSorting: false, cell: ({ row }) => { @@ -200,7 +201,7 @@ export const modelHubColumns = ( }, }, { - header: "Public", + header: i18n.t("modelHubTableColumns.public"), accessorKey: "is_public_model_group", enableSorting: true, sortingFn: (rowA, rowB) => { @@ -213,11 +214,11 @@ export const modelHubColumns = ( return model.is_public_model_group === true ? ( - Yes + {i18n.t("common.yes")} ) : ( - No + {i18n.t("common.no")} ); }, @@ -226,7 +227,7 @@ export const modelHubColumns = ( }, }, { - header: "Details", + header: i18n.t("common.details"), id: "details", enableSorting: false, cell: ({ row }) => { @@ -234,8 +235,8 @@ export const modelHubColumns = ( return ( ); }, diff --git a/ui/litellm-dashboard/src/locales/en.json b/ui/litellm-dashboard/src/locales/en.json index be8cff829c9..97775079fbf 100644 --- a/ui/litellm-dashboard/src/locales/en.json +++ b/ui/litellm-dashboard/src/locales/en.json @@ -1259,6 +1259,46 @@ "allTools": "All tools", "infoShort": "Info" }, + "modelFilters": { + "searchModels": "Search Models:", + "searchPlaceholder": "Search model names...", + "provider": "Provider:", + "allProviders": "All Providers", + "mode": "Mode:", + "allModes": "All Modes", + "features": "Features:", + "allFeatures": "All Features", + "filtersLabel": "Filters" + }, + "modelGroupAliasSettings": { + "title": "Model Group Alias Settings", + "description": "Create aliases for your model groups to simplify API calls. For example, you can create an alias 'gpt-4o' that points to 'gpt-4o-mini-openai' model group.", + "addNewAlias": "Add New Alias", + "aliasName": "Alias Name", + "targetModelGroup": "Target Model Group", + "addAlias": "Add Alias", + "manageExisting": "Manage Existing Aliases", + "noAliases": "No aliases added yet. Add a new alias above.", + "configExample": "Configuration Example", + "configExampleDesc": "Here's how your current aliases would look in the config.yaml:", + "bothRequired": "Please provide both alias name and target model group", + "duplicateAlias": "An alias with this name already exists", + "saveFailed": "Failed to save model group alias settings", + "addSuccess": "Alias added successfully", + "updateSuccess": "Alias updated successfully", + "deleteSuccess": "Alias deleted successfully" + }, + "modelHubTableColumns": { + "publicModelName": "Public Model Name", + "copyModelName": "Copy model name", + "provider": "Provider", + "mode": "Mode", + "tokens": "Tokens", + "costPerMillion": "Cost/1M", + "features": "Features", + "public": "Public", + "infoShort": "Info" + }, "common": { "save": "Save", "cancel": "Cancel", diff --git a/ui/litellm-dashboard/src/locales/zh-CN.json b/ui/litellm-dashboard/src/locales/zh-CN.json index b6ba445d783..6eaab904dad 100644 --- a/ui/litellm-dashboard/src/locales/zh-CN.json +++ b/ui/litellm-dashboard/src/locales/zh-CN.json @@ -1259,6 +1259,46 @@ "allTools": "所有工具", "infoShort": "详情" }, + "modelFilters": { + "searchModels": "搜索模型:", + "searchPlaceholder": "搜索模型名称...", + "provider": "提供商:", + "allProviders": "所有提供商", + "mode": "模式:", + "allModes": "所有模式", + "features": "功能:", + "allFeatures": "所有功能", + "filtersLabel": "筛选" + }, + "modelGroupAliasSettings": { + "title": "模型组别名设置", + "description": "为您的模型组创建别名以简化 API 调用。例如,您可以创建别名 'gpt-4o' 指向 'gpt-4o-mini-openai' 模型组。", + "addNewAlias": "添加新别名", + "aliasName": "别名名称", + "targetModelGroup": "目标模型组", + "addAlias": "添加别名", + "manageExisting": "管理现有别名", + "noAliases": "暂无别名。请在上方添加新别名。", + "configExample": "配置示例", + "configExampleDesc": "以下是您当前别名在 config.yaml 中的样子:", + "bothRequired": "请同时提供别名名称和目标模型组", + "duplicateAlias": "同名别名已存在", + "saveFailed": "保存模型组别名设置失败", + "addSuccess": "别名添加成功", + "updateSuccess": "别名更新成功", + "deleteSuccess": "别名删除成功" + }, + "modelHubTableColumns": { + "publicModelName": "公开模型名称", + "copyModelName": "复制模型名称", + "provider": "提供商", + "mode": "模式", + "tokens": "Token", + "costPerMillion": "费用/百万", + "features": "功能", + "public": "公开", + "infoShort": "详情" + }, "common": { "save": "保存", "cancel": "取消",