From b8a70e41cc379fed450c3d66dabba023a24aff14 Mon Sep 17 00:00:00 2001 From: tanjiro <56165694+NANDINI-star@users.noreply.github.com> Date: Sun, 17 Aug 2025 10:06:58 +0900 Subject: [PATCH] preset azure provider --- .../conditional_public_model_name.tsx | 28 +++++++++-- .../add_model/litellm_model_name.tsx | 48 ++++++++++++++++--- 2 files changed, 66 insertions(+), 10 deletions(-) diff --git a/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx b/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx index 03eefd52845..c1e8c32a94a 100644 --- a/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx +++ b/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"; import { Form, Table } from "antd"; import { TextInput } from "@tremor/react"; import { Tooltip } from "../atoms/index"; +import { Providers } from "../provider_info_helpers"; const ConditionalPublicModelName: React.FC = () => { const form = Form.useFormInstance(); @@ -12,13 +13,19 @@ const ConditionalPublicModelName: React.FC = () => { const selectedModels = Array.isArray(modelValue) ? modelValue : [modelValue]; const customModelName = Form.useWatch('custom_model_name', form); const showPublicModelName = !selectedModels.includes('all-wildcard'); - + const selectedProvider = Form.useWatch('custom_llm_provider', form); // Force table to re-render when custom model name changes useEffect(() => { if (customModelName && selectedModels.includes('custom')) { const currentMappings = form.getFieldValue('model_mappings') || []; const updatedMappings = currentMappings.map((mapping: any) => { if (mapping.public_name === 'custom' || mapping.litellm_model === 'custom') { + if (selectedProvider === Providers.Azure) { + return { + public_name: customModelName, + litellm_model: `azure/${customModelName}` + }; + } return { public_name: customModelName, litellm_model: customModelName @@ -29,7 +36,7 @@ const ConditionalPublicModelName: React.FC = () => { form.setFieldValue('model_mappings', updatedMappings); setTableKey(prev => prev + 1); // Force table re-render } - }, [customModelName, selectedModels, form]); + }, [customModelName, selectedModels, selectedProvider, form]); // Initial setup of model mappings when models are selected useEffect(() => { @@ -44,17 +51,32 @@ const ConditionalPublicModelName: React.FC = () => { if (model === 'custom') { return mapping.litellm_model === 'custom' || mapping.litellm_model === customModelName; } + if (selectedProvider === Providers.Azure) { + return mapping.litellm_model === `azure/${model}`; + } return mapping.litellm_model === model; })); if (shouldUpdateMappings) { const mappings = selectedModels.map((model: string) => { if (model === 'custom' && customModelName) { + if (selectedProvider === Providers.Azure) { + return { + public_name: customModelName, + litellm_model: `azure/${customModelName}` + }; + } return { public_name: customModelName, litellm_model: customModelName }; } + if (selectedProvider === Providers.Azure) { + return { + public_name: model, + litellm_model: `azure/${model}` + }; + } return { public_name: model, litellm_model: model @@ -65,7 +87,7 @@ const ConditionalPublicModelName: React.FC = () => { setTableKey(prev => prev + 1); // Force table re-render } } - }, [selectedModels, customModelName, form]); + }, [selectedModels, customModelName, selectedProvider,form]); if (!showPublicModelName) return null; diff --git a/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx b/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx index 27dc5047539..ad12629ca16 100644 --- a/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx +++ b/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx @@ -32,10 +32,18 @@ const LiteLLMModelNameField: React.FC = ({ if (JSON.stringify(currentModel) !== JSON.stringify(values)) { // Create mappings first - const mappings = values.map(model => ({ - public_name: model, - litellm_model: model - })); + const mappings = values.map(model => { + if (selectedProvider === Providers.Azure) { + return { + public_name: model, + litellm_model: `azure/${model}` + }; + } + return { + public_name: model, + litellm_model: model + }; + }); // Update both fields in one call to reduce re-renders form.setFieldsValue({ @@ -47,6 +55,22 @@ const LiteLLMModelNameField: React.FC = ({ } }; + const handleAzureDeploymentNameChange = (e: React.ChangeEvent) => { + const deploymentName = e.target.value; + + // Create mapping with Azure-specific format + const mappings = deploymentName ? [{ + public_name: deploymentName, + litellm_model: `azure/${deploymentName}` + }] : []; + + // Update both fields + form.setFieldsValue({ + model: deploymentName, + model_mappings: mappings + }); + }; + // Handle custom model name changes const handleCustomModelNameChange = (e: React.ChangeEvent) => { const customName = e.target.value; @@ -55,6 +79,12 @@ const LiteLLMModelNameField: React.FC = ({ const currentMappings = form.getFieldValue('model_mappings') || []; const updatedMappings = currentMappings.map((mapping: any) => { if (mapping.public_name === 'custom' || mapping.litellm_model === 'custom') { + if (selectedProvider === Providers.Azure) { + return { + public_name: customName, + litellm_model: `azure/${customName}` + }; + } return { public_name: customName, litellm_model: customName @@ -75,7 +105,7 @@ const LiteLLMModelNameField: React.FC = ({ > {(selectedProvider === Providers.Azure) || @@ -84,6 +114,7 @@ const LiteLLMModelNameField: React.FC = ({ <> ) : providerModels.length > 0 ? ( @@ -135,7 +166,7 @@ const LiteLLMModelNameField: React.FC = ({ className="mt-2" > @@ -147,7 +178,10 @@ const LiteLLMModelNameField: React.FC = ({ - The model name LiteLLM will send to the LLM API + {selectedProvider === Providers.Azure + ? "Your deployment name will be saved as the public model name, and LiteLLM will use 'azure/deployment-name' internally" + : "The model name LiteLLM will send to the LLM API" + }