mirror of
https://github.com/BerriAI/litellm.git
synced 2026-10-08 03:08:45 +00:00
(UI) Allow using a model / credentials for pass through routes (#8099)
* test_add_vertex_pass_through_deployment * VertexPassThroughRouter * fix use_in_pass_through * VertexPassThroughRouter * fix vertex_credentials * allow using _initialize_deployment_for_pass_through * test_add_vertex_pass_through_deployment * _set_default_vertex_config * fix verbose_proxy_logger * fix use_in_pass_through * fix _get_token_and_url * test_get_vertex_location_from_url * test_get_vertex_credentials_none * run pt unit testing again * fix add_vertex_credentials * test_adding_deployments.py * rename file * revert to og add model flow * move placement * ui somewhat working wildcard * separate out code for slecting model name * fix ConditionalPublicModelName * ui fix confitional render public model name * fix litellm model name page * fix advanced settings page page * ui fix litellm model name flow * adding pas through models ui * fix passing litellm params * ui fix advanced settings * ui fix order of provider info
This commit is contained in:
Ishaan Jaff
GitHub
parent
b6d61ec22b
commit
79c54256a0
5 changed files with 511 additions and 567 deletions
|
|
@ -0,0 +1,123 @@
|
|||
import React from "react";
|
||||
import { Form, Switch } from "antd";
|
||||
import { Text, Button, Accordion, AccordionHeader, AccordionBody } from "@tremor/react";
|
||||
import { Row, Col, Typography, Card } from "antd";
|
||||
import TextArea from "antd/es/input/TextArea";
|
||||
const { Link } = Typography;
|
||||
|
||||
interface AdvancedSettingsProps {
|
||||
showAdvancedSettings: boolean;
|
||||
setShowAdvancedSettings: (show: boolean) => void;
|
||||
}
|
||||
|
||||
const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
|
||||
showAdvancedSettings,
|
||||
setShowAdvancedSettings,
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const handlePassThroughChange = (checked: boolean) => {
|
||||
const currentParams = form.getFieldValue('litellm_extra_params');
|
||||
try {
|
||||
let paramsObj = currentParams ? JSON.parse(currentParams) : {};
|
||||
if (checked) {
|
||||
paramsObj.use_in_pass_through = true;
|
||||
} else {
|
||||
delete paramsObj.use_in_pass_through;
|
||||
}
|
||||
// Only set the field value if there are remaining parameters
|
||||
if (Object.keys(paramsObj).length > 0) {
|
||||
form.setFieldValue('litellm_extra_params', JSON.stringify(paramsObj, null, 2));
|
||||
} else {
|
||||
form.setFieldValue('litellm_extra_params', '');
|
||||
}
|
||||
} catch (error) {
|
||||
// If JSON parsing fails, only create new object if checked is true
|
||||
if (checked) {
|
||||
form.setFieldValue('litellm_extra_params', JSON.stringify({ use_in_pass_through: true }, null, 2));
|
||||
} else {
|
||||
form.setFieldValue('litellm_extra_params', '');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Accordion className="mt-2 mb-4">
|
||||
|
||||
<AccordionHeader>
|
||||
<b>Advanced Settings</b>
|
||||
</AccordionHeader>
|
||||
<AccordionBody>
|
||||
<div className="bg-white rounded-lg">
|
||||
<Form.Item
|
||||
label="Use in pass through routes"
|
||||
name="use_in_pass_through"
|
||||
valuePropName="checked"
|
||||
className="mb-4 mt-4"
|
||||
tooltip={
|
||||
<span>
|
||||
Allow using these credentials in pass through routes.{" "}
|
||||
<Link href="https://docs.litellm.ai/docs/pass_through/vertex_ai" target="_blank">
|
||||
Learn more
|
||||
</Link>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Switch
|
||||
onChange={handlePassThroughChange}
|
||||
className="bg-gray-600"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="LiteLLM Params"
|
||||
name="litellm_extra_params"
|
||||
tooltip="Optional litellm params used for making a litellm.completion() call."
|
||||
className="mb-4 mt-4"
|
||||
>
|
||||
<TextArea
|
||||
rows={4}
|
||||
placeholder='{
|
||||
"rpm": 100,
|
||||
"timeout": 0,
|
||||
"stream_timeout": 0
|
||||
}'
|
||||
/>
|
||||
</Form.Item>
|
||||
<Row className="mb-4">
|
||||
<Col span={10}></Col>
|
||||
<Col span={10}>
|
||||
<Text className="text-gray-600 text-sm">
|
||||
Pass JSON of litellm supported params{" "}
|
||||
<Link
|
||||
href="https://docs.litellm.ai/docs/completion/input"
|
||||
target="_blank"
|
||||
>
|
||||
litellm.completion() call
|
||||
</Link>
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item
|
||||
label="Model Info"
|
||||
name="model_info_params"
|
||||
tooltip="Optional model info params. Returned when calling `/model/info` endpoint."
|
||||
className="mb-0"
|
||||
>
|
||||
<TextArea
|
||||
rows={4}
|
||||
placeholder='{
|
||||
"mode": "chat"
|
||||
}'
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</AccordionBody>
|
||||
</Accordion>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvancedSettings;
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import React from "react";
|
||||
import { Form } from "antd";
|
||||
import { TextInput, Text } from "@tremor/react";
|
||||
import { Row, Col } from "antd";
|
||||
|
||||
const ConditionalPublicModelName: React.FC = () => {
|
||||
// Access the form instance
|
||||
const form = Form.useFormInstance();
|
||||
|
||||
// Watch the 'model' field for changes
|
||||
const selectedModels = Form.useWatch('model', form) || [];
|
||||
const showPublicModelName = !selectedModels.includes('all-wildcard');
|
||||
|
||||
if (!showPublicModelName) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label="Public Model Name"
|
||||
name="model_name"
|
||||
tooltip="Model name your users will pass in. Also used for load-balancing, LiteLLM will load balance between all models with this public name."
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
labelAlign="left"
|
||||
required={false}
|
||||
className="mb-0"
|
||||
rules={[
|
||||
({ getFieldValue }) => ({
|
||||
validator(_, value) {
|
||||
const selectedModels = getFieldValue('model') || [];
|
||||
if (!selectedModels.includes('all-wildcard') || value) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(new Error('Public Model Name is required unless "All Models" is selected.'));
|
||||
},
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<TextInput placeholder="my-gpt-4" />
|
||||
</Form.Item>
|
||||
<Row>
|
||||
<Col span={10}></Col>
|
||||
<Col span={10}>
|
||||
<Text className="mb-2">
|
||||
Model name your users will pass in.
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConditionalPublicModelName;
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
import React from "react";
|
||||
import { Form, Select as AntSelect } from "antd";
|
||||
import { TextInput, Text } from "@tremor/react";
|
||||
import { Row, Col } from "antd";
|
||||
import { Providers } from "../provider_info_helpers";
|
||||
|
||||
interface LiteLLMModelNameFieldProps {
|
||||
selectedProvider: string;
|
||||
providerModels: string[];
|
||||
getPlaceholder: (provider: string) => string;
|
||||
}
|
||||
|
||||
const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
|
||||
selectedProvider,
|
||||
providerModels,
|
||||
getPlaceholder,
|
||||
}) => {
|
||||
const form = Form.useFormInstance();
|
||||
|
||||
const handleModelChange = (value: string[]) => {
|
||||
// If "all-wildcard" is selected, clear the model_name field
|
||||
if (value.includes("all-wildcard")) {
|
||||
form.setFieldsValue({ model_name: undefined });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label="LiteLLM Model Name(s)"
|
||||
tooltip="Actual model name used for making litellm.completion() / litellm.embedding() call."
|
||||
className="mb-0"
|
||||
>
|
||||
<Form.Item
|
||||
name="model"
|
||||
rules={[{ required: true, message: "Please select at least one model." }]}
|
||||
noStyle
|
||||
>
|
||||
{(selectedProvider === Providers.Azure) ||
|
||||
(selectedProvider === Providers.OpenAI_Compatible) ||
|
||||
(selectedProvider === Providers.Ollama) ? (
|
||||
<TextInput placeholder={getPlaceholder(selectedProvider.toString())} />
|
||||
) : providerModels.length > 0 ? (
|
||||
<AntSelect
|
||||
allowClear
|
||||
showSearch
|
||||
placeholder="Select models"
|
||||
onChange={handleModelChange}
|
||||
optionFilterProp="children"
|
||||
filterOption={(input, option) =>
|
||||
(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
|
||||
}
|
||||
options={[
|
||||
{
|
||||
label: `All ${selectedProvider} Models (Wildcard)`,
|
||||
value: 'all-wildcard'
|
||||
},
|
||||
...providerModels.map(model => ({
|
||||
label: model,
|
||||
value: model
|
||||
})),
|
||||
{
|
||||
label: 'Custom Model Name (Enter below)',
|
||||
value: 'custom'
|
||||
}
|
||||
]}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
) : (
|
||||
<TextInput placeholder={getPlaceholder(selectedProvider.toString())} />
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
{/* Custom Model Name field */}
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prevValues, currentValues) =>
|
||||
prevValues.model !== currentValues.model
|
||||
}
|
||||
>
|
||||
{({ getFieldValue }) => {
|
||||
const selectedModels = getFieldValue('model') || [];
|
||||
return selectedModels.includes('custom') && (
|
||||
<Form.Item
|
||||
name="custom_model_name"
|
||||
rules={[{ required: true, message: "Please enter a custom model name." }]}
|
||||
className="mt-2"
|
||||
>
|
||||
<TextInput placeholder="Enter custom model name" />
|
||||
</Form.Item>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
<Row>
|
||||
<Col span={10}></Col>
|
||||
<Col span={10}>
|
||||
<Text className="mb-3 mt-1">
|
||||
Actual model name used for making litellm.completion() call. We'll loadbalance models with the same 'public name'
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LiteLLMModelNameField;
|
||||
|
|
@ -16,6 +16,9 @@ import {
|
|||
AccordionHeader,
|
||||
AccordionBody,
|
||||
} from "@tremor/react";
|
||||
import ConditionalPublicModelName from "./add_model/conditional_public_model_name";
|
||||
import LiteLLMModelNameField from "./add_model/litellm_model_name";
|
||||
import AdvancedSettings from "./add_model/advanced_settings";
|
||||
import {
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
|
|
@ -156,14 +159,10 @@ export const handleSubmit = async (
|
|||
) => {
|
||||
try {
|
||||
// If model_name is not provided, use provider.toLowerCase() + "/*"
|
||||
if (!formValues["model_name"]) {
|
||||
if (formValues["model"] && formValues["model"].includes("all-wildcard")) {
|
||||
formValues["model_name"] = formValues["custom_llm_provider"].toLowerCase() + "/*";
|
||||
}
|
||||
|
||||
// If model is not provided, use provider.toLowerCase() + "/*"
|
||||
if (!formValues["model"]) {
|
||||
formValues["model"] = [formValues["custom_llm_provider"].toLowerCase() + "/*"];
|
||||
}
|
||||
|
||||
/**
|
||||
* For multiple litellm model names - create a separate deployment for each
|
||||
|
|
@ -284,7 +283,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
|
|||
const [form] = Form.useForm();
|
||||
const [modelMap, setModelMap] = useState<any>(null);
|
||||
const [lastRefreshed, setLastRefreshed] = useState("");
|
||||
|
||||
|
||||
const [providerModels, setProviderModels] = useState<Array<string>>([]); // Explicitly typing providerModels as a string array
|
||||
|
||||
const providers = Object.values(Providers).filter((key) =>
|
||||
|
|
@ -1761,580 +1760,242 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
|
|||
</TabPanel>
|
||||
<TabPanel className="h-full">
|
||||
<Title2 level={2}>Add new model</Title2>
|
||||
<TabGroup>
|
||||
<TabList>
|
||||
<Tab>Basic Setup</Tab>
|
||||
<Tab>Wildcard Setup (All Models)</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
{/* Advanced Setup Tab - Now First */}
|
||||
<TabPanel>
|
||||
<Card>
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={handleOk}
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
labelAlign="left"
|
||||
<Card>
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={handleOk}
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
labelAlign="left"
|
||||
>
|
||||
<>
|
||||
{/* Provider Selection */}
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="Provider:"
|
||||
name="custom_llm_provider"
|
||||
tooltip="E.g. OpenAI, Azure OpenAI, Anthropic, Bedrock, etc."
|
||||
labelCol={{ span: 10 }}
|
||||
labelAlign="left"
|
||||
>
|
||||
<Select
|
||||
value={selectedProvider as string}
|
||||
onChange={(value) => {
|
||||
// Set the selected provider
|
||||
setSelectedProvider(value);
|
||||
// Update provider-specific models
|
||||
setProviderModelsFn(provider_map[value]);
|
||||
// Reset the 'model' field
|
||||
form.setFieldsValue({ model: [] });
|
||||
// Reset the 'model_name' field
|
||||
form.setFieldsValue({ model_name: undefined });
|
||||
}}
|
||||
>
|
||||
<>
|
||||
{/* Provider selection and advanced fields content */}
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="Provider:"
|
||||
name="custom_llm_provider"
|
||||
tooltip="E.g. OpenAI, Azure OpenAI, Anthropic, Bedrock, etc."
|
||||
labelCol={{ span: 10 }}
|
||||
labelAlign="left"
|
||||
{Object.keys(Providers).map((providerKey) => (
|
||||
<SelectItem
|
||||
key={providerKey}
|
||||
value={Providers[providerKey as keyof typeof Providers]}
|
||||
onClick={() => {
|
||||
setProviderModelsFn(provider_map[providerKey as keyof typeof Providers]);
|
||||
setSelectedProvider(Providers[providerKey as keyof typeof Providers]);
|
||||
}}
|
||||
>
|
||||
<Select value={selectedProvider as string}>
|
||||
{Object.keys(Providers).map((providerKey) => (
|
||||
<SelectItem
|
||||
key={providerKey}
|
||||
value={Providers[providerKey as keyof typeof Providers]}
|
||||
onClick={() => {
|
||||
setProviderModelsFn(provider_map[providerKey as keyof typeof Providers]);
|
||||
setSelectedProvider(Providers[providerKey as keyof typeof Providers]);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<img
|
||||
src={providerLogoMap[Providers[providerKey as keyof typeof Providers]]}
|
||||
alt={`${Providers[providerKey as keyof typeof Providers]} logo`}
|
||||
className="w-5 h-5"
|
||||
onError={(e) => {
|
||||
// Create a div with provider initial as fallback
|
||||
const target = e.target as HTMLImageElement;
|
||||
const parent = target.parentElement;
|
||||
if (parent) {
|
||||
const fallbackDiv = document.createElement('div');
|
||||
fallbackDiv.className = 'w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-xs';
|
||||
fallbackDiv.textContent = Providers[providerKey as keyof typeof Providers].charAt(0);
|
||||
parent.replaceChild(fallbackDiv, target);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span>{Providers[providerKey as keyof typeof Providers]}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
{/* Provider-specific fields */}
|
||||
{dynamicProviderForm !== undefined &&
|
||||
dynamicProviderForm.fields.length > 0 && (
|
||||
<DynamicFields
|
||||
fields={dynamicProviderForm.fields}
|
||||
selectedProvider={dynamicProviderForm.name}
|
||||
<div className="flex items-center space-x-2">
|
||||
<img
|
||||
src={providerLogoMap[Providers[providerKey as keyof typeof Providers]]}
|
||||
alt={`${Providers[providerKey as keyof typeof Providers]} logo`}
|
||||
className="w-5 h-5"
|
||||
onError={(e) => {
|
||||
// Create a div with provider initial as fallback
|
||||
const target = e.target as HTMLImageElement;
|
||||
const parent = target.parentElement;
|
||||
if (parent) {
|
||||
const fallbackDiv = document.createElement('div');
|
||||
fallbackDiv.className = 'w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-xs';
|
||||
fallbackDiv.textContent = Providers[providerKey as keyof typeof Providers].charAt(0);
|
||||
parent.replaceChild(fallbackDiv, target);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<span>{Providers[providerKey as keyof typeof Providers]}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<LiteLLMModelNameField
|
||||
selectedProvider={selectedProvider as string}
|
||||
providerModels={providerModels}
|
||||
getPlaceholder={getPlaceholder}
|
||||
/>
|
||||
|
||||
{/* Conditionally Render "Public Model Name" */}
|
||||
<ConditionalPublicModelName />
|
||||
|
||||
{/* Advanced fields */}
|
||||
<Form.Item
|
||||
label="Public Model Name"
|
||||
name="model_name"
|
||||
tooltip="Model name your users will pass in. Also used for load-balancing, LiteLLM will load balance between all models with this public name."
|
||||
className="mb-0"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<TextInput />
|
||||
</Form.Item>
|
||||
<Row>
|
||||
<Col span={10}></Col>
|
||||
<Col span={10}>
|
||||
<Text className="mb-3 mt-1">
|
||||
Model name your users will pass in.
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Provider-specific fields */}
|
||||
{dynamicProviderForm !== undefined &&
|
||||
dynamicProviderForm.fields.length > 0 && (
|
||||
<DynamicFields
|
||||
fields={dynamicProviderForm.fields}
|
||||
selectedProvider={dynamicProviderForm.name}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Form.Item
|
||||
label="LiteLLM Model Name(s)"
|
||||
tooltip="Actual model name used for making litellm.completion() / litellm.embedding() call."
|
||||
className="mb-0"
|
||||
>
|
||||
<Form.Item
|
||||
name="model"
|
||||
rules={[{ required: false }]}
|
||||
noStyle
|
||||
>
|
||||
{(selectedProvider === Providers.Azure) || (selectedProvider === Providers.OpenAI_Compatible) || (selectedProvider === Providers.Ollama) ? (
|
||||
<TextInput placeholder={getPlaceholder(selectedProvider.toString())} />
|
||||
) : providerModels.length > 0 ? (
|
||||
<MultiSelect>
|
||||
<MultiSelectItem value="custom">Custom Model Name (Enter below)</MultiSelectItem>
|
||||
{providerModels.map((model, index) => (
|
||||
<MultiSelectItem key={index} value={model}>
|
||||
{model}
|
||||
</MultiSelectItem>
|
||||
))}
|
||||
</MultiSelect>
|
||||
) : (
|
||||
<TextInput placeholder={getPlaceholder(selectedProvider.toString())} />
|
||||
)}
|
||||
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prevValues, currentValues) => prevValues.model !== currentValues.model}
|
||||
>
|
||||
{({ getFieldValue }) => {
|
||||
const selectedModels = getFieldValue('model') || [];
|
||||
return selectedModels.includes('custom') && (
|
||||
<Form.Item
|
||||
name="custom_model_name"
|
||||
rules={[{ required: true, message: "Please enter a custom model name" }]}
|
||||
className="mt-2"
|
||||
>
|
||||
<TextInput placeholder="Enter custom model name" />
|
||||
</Form.Item>
|
||||
)
|
||||
}}
|
||||
</Form.Item>
|
||||
|
||||
</Form.Item>
|
||||
<Row>
|
||||
{selectedProvider != Providers.Bedrock &&
|
||||
selectedProvider != Providers.Vertex_AI &&
|
||||
selectedProvider != Providers.Ollama &&
|
||||
(dynamicProviderForm === undefined ||
|
||||
dynamicProviderForm.fields.length == 0) && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="API Key"
|
||||
name="api_key"
|
||||
tooltip="LLM API Credentials"
|
||||
>
|
||||
<TextInput placeholder="sk-" type="password" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.OpenAI && (
|
||||
<Form.Item label="Organization ID" name="organization">
|
||||
<TextInput placeholder="[OPTIONAL] my-unique-org" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Vertex_AI && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="Vertex Project"
|
||||
name="vertex_project"
|
||||
>
|
||||
<TextInput placeholder="adroit-cadet-1234.." />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Vertex_AI && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="Vertex Location"
|
||||
name="vertex_location"
|
||||
>
|
||||
<TextInput placeholder="us-east-1" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Vertex_AI && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="Vertex Credentials"
|
||||
name="vertex_credentials"
|
||||
className="mb-0"
|
||||
>
|
||||
<Upload {...props}>
|
||||
<Button2 icon={<UploadOutlined />}>
|
||||
Click to Upload
|
||||
</Button2>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Vertex_AI && (
|
||||
<Row>
|
||||
<Col span={10}></Col>
|
||||
<Col span={10}>
|
||||
<Text className="mb-3 mt-1">
|
||||
Actual model name used for making{" "}
|
||||
<Link
|
||||
href="https://docs.litellm.ai/docs/providers"
|
||||
target="_blank"
|
||||
>
|
||||
litellm.completion() call
|
||||
</Link>
|
||||
. We'll{" "}
|
||||
<Link
|
||||
href="https://docs.litellm.ai/docs/proxy/reliability#step-1---set-deployments-on-config"
|
||||
target="_blank"
|
||||
>
|
||||
loadbalance
|
||||
</Link>{" "}
|
||||
models with the same 'public name'
|
||||
Give litellm a gcp service account(.json file), so it
|
||||
can make the relevant calls
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
{/* All the provider-specific fields */}
|
||||
{dynamicProviderForm !== undefined &&
|
||||
dynamicProviderForm.fields.length > 0 && (
|
||||
<DynamicFields
|
||||
fields={dynamicProviderForm.fields}
|
||||
selectedProvider={dynamicProviderForm.name}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedProvider != Providers.Bedrock &&
|
||||
selectedProvider != Providers.Vertex_AI &&
|
||||
selectedProvider != Providers.Ollama &&
|
||||
(dynamicProviderForm === undefined ||
|
||||
dynamicProviderForm.fields.length == 0) && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="API Key"
|
||||
name="api_key"
|
||||
tooltip="LLM API Credentials"
|
||||
>
|
||||
<TextInput placeholder="sk-" type="password" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.OpenAI && (
|
||||
<Form.Item label="Organization ID" name="organization">
|
||||
<TextInput placeholder="[OPTIONAL] my-unique-org" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Vertex_AI && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="Vertex Project"
|
||||
name="vertex_project"
|
||||
>
|
||||
<TextInput placeholder="adroit-cadet-1234.." />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Vertex_AI && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="Vertex Location"
|
||||
name="vertex_location"
|
||||
>
|
||||
<TextInput placeholder="us-east-1" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Vertex_AI && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="Vertex Credentials"
|
||||
name="vertex_credentials"
|
||||
className="mb-0"
|
||||
>
|
||||
<Upload {...props}>
|
||||
<Button2 icon={<UploadOutlined />}>
|
||||
Click to Upload
|
||||
</Button2>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Vertex_AI && (
|
||||
<Row>
|
||||
<Col span={10}></Col>
|
||||
<Col span={10}>
|
||||
<Text className="mb-3 mt-1">
|
||||
Give litellm a gcp service account(.json file), so it
|
||||
can make the relevant calls
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
{(selectedProvider == Providers.Azure ||
|
||||
selectedProvider == Providers.OpenAI_Compatible) && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="API Base"
|
||||
name="api_base"
|
||||
>
|
||||
<TextInput placeholder="https://..." />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Azure && (
|
||||
<Form.Item
|
||||
label="API Version"
|
||||
name="api_version"
|
||||
tooltip="By default litellm will use the latest version. If you want to use a different version, you can specify it here"
|
||||
>
|
||||
<TextInput placeholder="2023-07-01-preview" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Azure && (
|
||||
<div>
|
||||
<Form.Item
|
||||
label="Base Model"
|
||||
name="base_model"
|
||||
className="mb-0"
|
||||
>
|
||||
<TextInput placeholder="azure/gpt-3.5-turbo" />
|
||||
</Form.Item>
|
||||
<Row>
|
||||
<Col span={10}></Col>
|
||||
<Col span={10}>
|
||||
<Text className="mb-2">
|
||||
The actual model your azure deployment uses. Used
|
||||
for accurate cost tracking. Select name from{" "}
|
||||
<Link
|
||||
href="https://github.com/BerriAI/litellm/blob/main/model_prices_and_context_window.json"
|
||||
target="_blank"
|
||||
>
|
||||
here
|
||||
</Link>
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)}
|
||||
{selectedProvider == Providers.Bedrock && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="AWS Access Key ID"
|
||||
name="aws_access_key_id"
|
||||
tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
|
||||
>
|
||||
<TextInput placeholder="" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Bedrock && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="AWS Secret Access Key"
|
||||
name="aws_secret_access_key"
|
||||
tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
|
||||
>
|
||||
<TextInput placeholder="" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Bedrock && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="AWS Region Name"
|
||||
name="aws_region_name"
|
||||
tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
|
||||
>
|
||||
<TextInput placeholder="us-east-1" />
|
||||
</Form.Item>
|
||||
)}
|
||||
<Form.Item
|
||||
label="LiteLLM Params"
|
||||
name="litellm_extra_params"
|
||||
tooltip="Optional litellm params used for making a litellm.completion() call."
|
||||
className="mb-0"
|
||||
>
|
||||
<TextArea
|
||||
rows={4}
|
||||
placeholder='{
|
||||
"rpm": 100,
|
||||
"timeout": 0,
|
||||
"stream_timeout": 0
|
||||
}'
|
||||
/>
|
||||
</Form.Item>
|
||||
<Row>
|
||||
<Col span={10}></Col>
|
||||
<Col span={10}>
|
||||
<Text className="mb-3 mt-1">
|
||||
Pass JSON of litellm supported params{" "}
|
||||
<Link
|
||||
href="https://docs.litellm.ai/docs/completion/input"
|
||||
target="_blank"
|
||||
>
|
||||
litellm.completion() call
|
||||
</Link>
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item
|
||||
label="Model Info"
|
||||
name="model_info_params"
|
||||
tooltip="Optional model info params. Returned when calling `/model/info` endpoint."
|
||||
className="mb-0"
|
||||
>
|
||||
<TextArea
|
||||
rows={4}
|
||||
placeholder='{
|
||||
"mode": "chat"
|
||||
}'
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<Tooltip title="Get help on our github">
|
||||
<Typography.Link href="https://github.com/BerriAI/litellm/issues">
|
||||
Need Help?
|
||||
</Typography.Link>
|
||||
</Tooltip>
|
||||
<Button2 htmlType="submit">Add Model</Button2>
|
||||
</div>
|
||||
</>
|
||||
</Form>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
|
||||
{/* Basic Setup Tab - Now Second */}
|
||||
<TabPanel>
|
||||
<Card>
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={handleOk}
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
labelAlign="left"
|
||||
)}
|
||||
{(selectedProvider == Providers.Azure ||
|
||||
selectedProvider == Providers.OpenAI_Compatible) && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="API Base"
|
||||
name="api_base"
|
||||
>
|
||||
<>
|
||||
{/* Basic setup content */}
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="Provider:"
|
||||
name="custom_llm_provider"
|
||||
tooltip="E.g. OpenAI, Azure OpenAI, Anthropic, Bedrock, etc."
|
||||
labelCol={{ span: 10 }}
|
||||
labelAlign="left"
|
||||
>
|
||||
<Select value={selectedProvider as string}>
|
||||
{Object.keys(Providers).map((providerKey) => (
|
||||
<SelectItem
|
||||
key={providerKey}
|
||||
value={Providers[providerKey as keyof typeof Providers]}
|
||||
onClick={() => {
|
||||
setProviderModelsFn(provider_map[providerKey as keyof typeof Providers]);
|
||||
setSelectedProvider(Providers[providerKey as keyof typeof Providers]);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<img
|
||||
src={providerLogoMap[Providers[providerKey as keyof typeof Providers]]}
|
||||
alt={`${Providers[providerKey as keyof typeof Providers]} logo`}
|
||||
className="w-5 h-5"
|
||||
onError={(e) => {
|
||||
// Create a div with provider initial as fallback
|
||||
const target = e.target as HTMLImageElement;
|
||||
const parent = target.parentElement;
|
||||
if (parent) {
|
||||
const fallbackDiv = document.createElement('div');
|
||||
fallbackDiv.className = 'w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-xs';
|
||||
fallbackDiv.textContent = Providers[providerKey as keyof typeof Providers].charAt(0);
|
||||
parent.replaceChild(fallbackDiv, target);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span>{Providers[providerKey as keyof typeof Providers]}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
{/* All the provider-specific fields */}
|
||||
{dynamicProviderForm !== undefined &&
|
||||
dynamicProviderForm.fields.length > 0 && (
|
||||
<DynamicFields
|
||||
fields={dynamicProviderForm.fields}
|
||||
selectedProvider={dynamicProviderForm.name}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedProvider != Providers.Bedrock &&
|
||||
selectedProvider != Providers.Vertex_AI &&
|
||||
selectedProvider != Providers.Ollama &&
|
||||
(dynamicProviderForm === undefined ||
|
||||
dynamicProviderForm.fields.length == 0) && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="API Key"
|
||||
name="api_key"
|
||||
tooltip="LLM API Credentials"
|
||||
<TextInput placeholder="https://..." />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Azure && (
|
||||
<Form.Item
|
||||
label="API Version"
|
||||
name="api_version"
|
||||
tooltip="By default litellm will use the latest version. If you want to use a different version, you can specify it here"
|
||||
>
|
||||
<TextInput placeholder="2023-07-01-preview" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Azure && (
|
||||
<div>
|
||||
<Form.Item
|
||||
label="Base Model"
|
||||
name="base_model"
|
||||
className="mb-0"
|
||||
>
|
||||
<TextInput placeholder="azure/gpt-3.5-turbo" />
|
||||
</Form.Item>
|
||||
<Row>
|
||||
<Col span={10}></Col>
|
||||
<Col span={10}>
|
||||
<Text className="mb-2">
|
||||
The actual model your azure deployment uses. Used
|
||||
for accurate cost tracking. Select name from{" "}
|
||||
<Link
|
||||
href="https://github.com/BerriAI/litellm/blob/main/model_prices_and_context_window.json"
|
||||
target="_blank"
|
||||
>
|
||||
<TextInput placeholder="sk-" type="password" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.OpenAI && (
|
||||
<Form.Item label="Organization ID" name="organization">
|
||||
<TextInput placeholder="[OPTIONAL] my-unique-org" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Vertex_AI && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="Vertex Project"
|
||||
name="vertex_project"
|
||||
>
|
||||
<TextInput placeholder="adroit-cadet-1234.." />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Vertex_AI && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="Vertex Location"
|
||||
name="vertex_location"
|
||||
>
|
||||
<TextInput placeholder="us-east-1" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Vertex_AI && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="Vertex Credentials"
|
||||
name="vertex_credentials"
|
||||
className="mb-0"
|
||||
>
|
||||
<Upload {...props}>
|
||||
<Button2 icon={<UploadOutlined />}>
|
||||
Click to Upload
|
||||
</Button2>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Vertex_AI && (
|
||||
<Row>
|
||||
<Col span={10}></Col>
|
||||
<Col span={10}>
|
||||
<Text className="mb-3 mt-1">
|
||||
Give litellm a gcp service account(.json file), so it
|
||||
can make the relevant calls
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
{(selectedProvider == Providers.Azure ||
|
||||
selectedProvider == Providers.OpenAI_Compatible) && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="API Base"
|
||||
name="api_base"
|
||||
>
|
||||
<TextInput placeholder="https://..." />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Azure && (
|
||||
<Form.Item
|
||||
label="API Version"
|
||||
name="api_version"
|
||||
tooltip="By default litellm will use the latest version. If you want to use a different version, you can specify it here"
|
||||
>
|
||||
<TextInput placeholder="2023-07-01-preview" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Azure && (
|
||||
<div>
|
||||
<Form.Item
|
||||
label="Base Model"
|
||||
name="base_model"
|
||||
className="mb-0"
|
||||
>
|
||||
<TextInput placeholder="azure/gpt-3.5-turbo" />
|
||||
</Form.Item>
|
||||
<Row>
|
||||
<Col span={10}></Col>
|
||||
<Col span={10}>
|
||||
<Text className="mb-2">
|
||||
The actual model your azure deployment uses. Used
|
||||
for accurate cost tracking. Select name from{" "}
|
||||
<Link
|
||||
href="https://github.com/BerriAI/litellm/blob/main/model_prices_and_context_window.json"
|
||||
target="_blank"
|
||||
>
|
||||
here
|
||||
</Link>
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)}
|
||||
{selectedProvider == Providers.Bedrock && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="AWS Access Key ID"
|
||||
name="aws_access_key_id"
|
||||
tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
|
||||
>
|
||||
<TextInput placeholder="" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Bedrock && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="AWS Secret Access Key"
|
||||
name="aws_secret_access_key"
|
||||
tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
|
||||
>
|
||||
<TextInput placeholder="" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Bedrock && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="AWS Region Name"
|
||||
name="aws_region_name"
|
||||
tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
|
||||
>
|
||||
<TextInput placeholder="us-east-1" />
|
||||
</Form.Item>
|
||||
)}
|
||||
here
|
||||
</Link>
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)}
|
||||
{selectedProvider == Providers.Bedrock && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="AWS Access Key ID"
|
||||
name="aws_access_key_id"
|
||||
tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
|
||||
>
|
||||
<TextInput placeholder="" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Bedrock && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="AWS Secret Access Key"
|
||||
name="aws_secret_access_key"
|
||||
tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
|
||||
>
|
||||
<TextInput placeholder="" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedProvider == Providers.Bedrock && (
|
||||
<Form.Item
|
||||
rules={[{ required: true, message: "Required" }]}
|
||||
label="AWS Region Name"
|
||||
name="aws_region_name"
|
||||
tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
|
||||
>
|
||||
<TextInput placeholder="us-east-1" />
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<Tooltip title="Get help on our github">
|
||||
<Typography.Link href="https://github.com/BerriAI/litellm/issues">
|
||||
Need Help?
|
||||
</Typography.Link>
|
||||
</Tooltip>
|
||||
<Button2 htmlType="submit">Add Model</Button2>
|
||||
</div>
|
||||
</>
|
||||
</Form>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</TabGroup>
|
||||
<AdvancedSettings
|
||||
showAdvancedSettings={showAdvancedSettings}
|
||||
setShowAdvancedSettings={setShowAdvancedSettings}
|
||||
/>
|
||||
|
||||
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<Tooltip title="Get help on our github">
|
||||
<Typography.Link href="https://github.com/BerriAI/litellm/issues">
|
||||
Need Help?
|
||||
</Typography.Link>
|
||||
</Tooltip>
|
||||
<Button2 htmlType="submit">Add Model</Button2>
|
||||
</div>
|
||||
</>
|
||||
</Form>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Card>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@ export enum Providers {
|
|||
Azure = "Azure",
|
||||
Azure_AI_Studio = "Azure AI Studio",
|
||||
Anthropic = "Anthropic",
|
||||
Vertex_AI = "Vertex AI (Anthropic, Gemini, etc.)",
|
||||
Google_AI_Studio = "Google AI Studio",
|
||||
Bedrock = "Amazon Bedrock",
|
||||
Groq = "Groq",
|
||||
MistralAI = "Mistral AI",
|
||||
Deepseek = "Deepseek",
|
||||
OpenAI_Compatible = "OpenAI-Compatible Endpoints (Together AI, etc.)",
|
||||
Vertex_AI = "Vertex AI (Anthropic, Gemini, etc.)",
|
||||
Cohere = "Cohere",
|
||||
Databricks = "Databricks",
|
||||
Ollama = "Ollama",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue