diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx index 499ddcd0a..b8605d8a9 100644 --- a/ui/litellm-dashboard/src/components/model_dashboard.tsx +++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx @@ -18,7 +18,7 @@ import { } from "@tremor/react"; import { TabPanel, TabPanels, TabGroup, TabList, Tab, TextInput, Icon } from "@tremor/react"; import { Select, SelectItem, MultiSelect, MultiSelectItem } from "@tremor/react"; -import { modelInfoCall, userGetRequesedtModelsCall, modelCreateCall, Model, modelCostMap, modelDeleteCall, healthCheckCall } from "./networking"; +import { modelInfoCall, userGetRequesedtModelsCall, modelCreateCall, Model, modelCostMap, modelDeleteCall, healthCheckCall, modelUpdateCall } from "./networking"; import { BarChart } from "@tremor/react"; import { Button as Button2, @@ -51,6 +51,13 @@ interface ModelDashboardProps { userID: string | null; } +interface EditModelModalProps { + visible: boolean; + onCancel: () => void; + model: any; // Assuming TeamType is a type representing your team object + onSubmit: (data: FormData) => void; // Assuming FormData is the type of data to be submitted +} + //["OpenAI", "Azure OpenAI", "Anthropic", "Gemini (Google AI Studio)", "Amazon Bedrock", "OpenAI-Compatible Endpoints (Groq, Together AI, Mistral AI, etc.)"] enum Providers { @@ -182,6 +189,169 @@ const ModelDashboard: React.FC = ({ const [selectedProvider, setSelectedProvider] = useState("OpenAI"); const [healthCheckResponse, setHealthCheckResponse] = useState(''); + const [editModalVisible, setEditModalVisible] = useState(false); + const [selectedModel, setSelectedModel] = useState(null); + + const EditModelModal: React.FC = ({ visible, onCancel, model, onSubmit }) => { + const [form] = Form.useForm(); + let litellm_params_to_edit = {} + let model_name = ""; + let model_id = ""; + if (model) { + litellm_params_to_edit = model.litellm_params + model_name = model.model_name; + let model_info = model.model_info; + if (model_info) { + model_id = model_info.id; + console.log(`model_id: ${model_id}`) + litellm_params_to_edit.model_id = model_id; + } + } + + + const handleOk = () => { + form + .validateFields() + .then((values) => { + onSubmit(values); + form.resetFields(); + }) + .catch((error) => { + console.error("Validation failed:", error); + }); + }; + + return ( + +
+ <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Save +
+
+
+ ); + }; + + + const handleEditClick = (model: any) => { + setSelectedModel(model); + setEditModalVisible(true); + }; + + const handleEditCancel = () => { + setEditModalVisible(false); + setSelectedModel(null); + }; + + +const handleEditSubmit = async (formValues: Record) => { + // Call API to update team with teamId and values + + console.log("handleEditSubmit:", formValues); + if (accessToken == null) { + return; + } + + let newLiteLLMParams = {} + let model_info_model_id = null; + + for (const [key, value] of Object.entries(formValues)) { + if (key !== "model_id") { + newLiteLLMParams[key] = value; + } else { + model_info_model_id = value; + } + } + + let payload = { + litellm_params: newLiteLLMParams, + model_info: { + "id": model_info_model_id + } + } + + console.log("handleEditSubmit payload:", payload); + + let newModelValue = await modelUpdateCall(accessToken, payload); + + // Update the teams state with the updated team data + // if (teams) { + // const updatedTeams = teams.map((team) => + // team.team_id === teamId ? newTeamValues.data : team + // ); + // setTeams(updatedTeams); + // } + message.success("Model updated successfully, restart server to see updates"); + + setEditModalVisible(false); + setSelectedModel(null); +}; + + + const props: UploadProps = { @@ -484,15 +654,27 @@ const ModelDashboard: React.FC = ({ {model.output_cost} {model.max_tokens} + handleEditClick(model)} + /> ))} + + Add new model