forked from BerriAI/litellm
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
(UI) Refactor Add Models for Specific Teams (BerriAI#8592)
* ui - use common team dropdown component * re-use team component * rename org field on add model * handle add model submit * working view model_id and team_id on root models page * cleaner * show all fields * working model info view * working team info selector * clean up team id * new component for model dashboard * ui show table with dropdown * make public model names like email * revert changes to litellm model name * fix litellm model name * ui fix public model * fix mappings * fix conditional text input * fix message * ui fix bulk add models
- Loading branch information
1 parent
1298be2
commit b63dd33
Showing
6 changed files
with
246 additions
and
149 deletions.
There are no files selected for viewing
138 changes: 138 additions & 0 deletions
138
ui/litellm-dashboard/src/components/add_model/add_model_tab.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| import React from "react"; | ||
| import { Card, Form, Button, Tooltip, Typography, Select as AntdSelect } from "antd"; | ||
| import type { FormInstance } from "antd"; | ||
| import type { UploadProps } from "antd/es/upload"; | ||
| import LiteLLMModelNameField from "./litellm_model_name"; | ||
| import ConditionalPublicModelName from "./conditional_public_model_name"; | ||
| import ProviderSpecificFields from "./provider_specific_fields"; | ||
| import AdvancedSettings from "./advanced_settings"; | ||
| import { Providers, providerLogoMap, getPlaceholder } from "../provider_info_helpers"; | ||
| import type { Team } from "../key_team_helpers/key_list"; | ||
|
|
||
| interface AddModelTabProps { | ||
| form: FormInstance; | ||
| handleOk: () => void; | ||
| selectedProvider: Providers; | ||
| setSelectedProvider: (provider: Providers) => void; | ||
| providerModels: string[]; | ||
| setProviderModelsFn: (provider: Providers) => void; | ||
| getPlaceholder: (provider: Providers) => string; | ||
| uploadProps: UploadProps; | ||
| showAdvancedSettings: boolean; | ||
| setShowAdvancedSettings: (show: boolean) => void; | ||
| teams: Team[] | null; | ||
| } | ||
|
|
||
| const { Title, Link } = Typography; | ||
|
|
||
| const AddModelTab: React.FC<AddModelTabProps> = ({ | ||
| form, | ||
| handleOk, | ||
| selectedProvider, | ||
| setSelectedProvider, | ||
| providerModels, | ||
| setProviderModelsFn, | ||
| getPlaceholder, | ||
| uploadProps, | ||
| showAdvancedSettings, | ||
| setShowAdvancedSettings, | ||
| teams, | ||
| }) => { | ||
| return ( | ||
| <> | ||
| <Title level={2}>Add new model</Title> | ||
| <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" | ||
| > | ||
| <AntdSelect | ||
| showSearch={true} | ||
| value={selectedProvider} | ||
| onChange={(value) => { | ||
| setSelectedProvider(value); | ||
| setProviderModelsFn(value); | ||
| form.setFieldsValue({ | ||
| model: [], | ||
| model_name: undefined | ||
| }); | ||
| }} | ||
| > | ||
| {Object.entries(Providers).map(([providerEnum, providerDisplayName]) => ( | ||
| <AntdSelect.Option | ||
| key={providerEnum} | ||
| value={providerEnum} | ||
| > | ||
| <div className="flex items-center space-x-2"> | ||
| <img | ||
| src={providerLogoMap[providerDisplayName]} | ||
| alt={`${providerEnum} 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 = providerDisplayName.charAt(0); | ||
| parent.replaceChild(fallbackDiv, target); | ||
| } | ||
| }} | ||
| /> | ||
| <span>{providerDisplayName}</span> | ||
| </div> | ||
| </AntdSelect.Option> | ||
| ))} | ||
| </AntdSelect> | ||
| </Form.Item> | ||
| <LiteLLMModelNameField | ||
| selectedProvider={selectedProvider} | ||
| providerModels={providerModels} | ||
| getPlaceholder={getPlaceholder} | ||
| /> | ||
|
|
||
| {/* Conditionally Render "Public Model Name" */} | ||
| <ConditionalPublicModelName /> | ||
|
|
||
| <ProviderSpecificFields | ||
| selectedProvider={selectedProvider} | ||
| uploadProps={uploadProps} | ||
| /> | ||
| <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> | ||
| <Button htmlType="submit">Add Model</Button> | ||
| </div> | ||
| </> | ||
| </Form> | ||
| </Card> | ||
|
|
||
|
|
||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default AddModelTab; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.