phoenix/litellm-mirror
0
0
Fork 1
mirror of https://github.com/BerriAI/litellm.git synced 2025-04-26 11:14:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(model_info_view.tsx): call db for model info

Browse source
This commit is contained in:
Krrish Dholakia 2025-03-14 17:44:45 -07:00
parent 8bf395f9d0
commit bee72d03c6
2 changed files with 66 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

49
ui/litellm-dashboard/src/components/model_info_view.tsx
View file

@ -15,7 +15,7 @@ import {
NumberInput,
} from "@tremor/react";
import { ArrowLeftIcon, TrashIcon, KeyIcon } from "@heroicons/react/outline";
import { modelDeleteCall, modelUpdateCall, CredentialItem, credentialGetCall, credentialCreateCall } from "./networking";
import { modelDeleteCall, modelUpdateCall, CredentialItem, credentialGetCall, credentialCreateCall, modelInfoCall, modelInfoV1Call } from "./networking";
import { Button, Form, Input, InputNumber, message, Select, Modal } from "antd";
import EditModelModal from "./edit_model/edit_model_modal";
import { handleEditModelSubmit } from "./edit_model/edit_model_modal";
@ -48,7 +48,7 @@ export default function ModelInfoView({
setSelectedModel
}: ModelInfoViewProps) {
const [form] = Form.useForm();
const [localModelData, setLocalModelData] = useState(modelData);
const [localModelData, setLocalModelData] = useState<any>(null);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [isCredentialModalOpen, setIsCredentialModalOpen] = useState(false);
const [isDirty, setIsDirty] = useState(false);
@ -77,7 +77,16 @@ export default function ModelInfoView({
credential_info: existingCredentialResponse["credential_info"]
});
}
const getModelInfo = async () => {
if (!accessToken) return;
let modelInfoResponse = await modelInfoV1Call(accessToken, modelId);
console.log("modelInfoResponse, ", modelInfoResponse);
let specificModelData = modelInfoResponse.data[0];
setLocalModelData(specificModelData);
}
getExistingCredential();
getModelInfo();
}, [accessToken, modelId]);
const handleReuseCredential = async (values: any) => {
@ -292,24 +301,25 @@ export default function ModelInfoView({
</TremorButton>
)}
</div>
{localModelData ? (
<Form
form={form}
onFinish={handleModelUpdate}
initialValues={{
model_name: localModelData.model_name,
litellm_model_name: localModelData.litellm_model_name,
api_base: localModelData.litellm_params?.api_base,
custom_llm_provider: localModelData.litellm_params?.custom_llm_provider,
organization: localModelData.litellm_params?.organization,
tpm: localModelData.litellm_params?.tpm,
rpm: localModelData.litellm_params?.rpm,
max_retries: localModelData.litellm_params?.max_retries,
timeout: localModelData.litellm_params?.timeout,
stream_timeout: localModelData.litellm_params?.stream_timeout,
input_cost: localModelData.litellm_params?.input_cost_per_token ?
(localModelData.litellm_params.input_cost_per_token * 1_000_000) : modelData.input_cost * 1_000_000,
api_base: localModelData.litellm_params.api_base,
custom_llm_provider: localModelData.litellm_params.custom_llm_provider,
organization: localModelData.litellm_params.organization,
tpm: localModelData.litellm_params.tpm,
rpm: localModelData.litellm_params.rpm,
max_retries: localModelData.litellm_params.max_retries,
timeout: localModelData.litellm_params.timeout,
stream_timeout: localModelData.litellm_params.stream_timeout,
input_cost: localModelData.litellm_params.input_cost_per_token ?
(localModelData.litellm_params.input_cost_per_token * 1_000_000) : localModelData.model_info?.input_cost_per_token * 1_000_000 || null,
output_cost: localModelData.litellm_params?.output_cost_per_token ?
(localModelData.litellm_params.output_cost_per_token * 1_000_000) : modelData.output_cost * 1_000_000,
(localModelData.litellm_params.output_cost_per_token * 1_000_000) : localModelData.model_info?.output_cost_per_token * 1_000_000 || null,
}}
layout="vertical"
onValuesChange={() => setIsDirty(true)}
@ -346,9 +356,9 @@ export default function ModelInfoView({
</Form.Item>
) : (
<div className="mt-1 p-2 bg-gray-50 rounded">
{localModelData.litellm_params?.input_cost_per_token
? (localModelData.litellm_params.input_cost_per_token * 1_000_000).toFixed(4)
: modelData.input_cost * 1_000_000}
{localModelData?.litellm_params?.input_cost_per_token
? (localModelData.litellm_params?.input_cost_per_token * 1_000_000).toFixed(4)
: localModelData?.model_info?.input_cost_per_token ? (localModelData.model_info.input_cost_per_token * 1_000_000).toFixed(4) : null}
</div>
)}
</div>
@ -361,9 +371,9 @@ export default function ModelInfoView({
</Form.Item>
) : (
<div className="mt-1 p-2 bg-gray-50 rounded">
{localModelData.litellm_params?.output_cost_per_token
{localModelData?.litellm_params?.output_cost_per_token
? (localModelData.litellm_params.output_cost_per_token * 1_000_000).toFixed(4)
: modelData.output_cost * 1_000_000}
: localModelData?.model_info?.output_cost_per_token ? (localModelData.model_info.output_cost_per_token * 1_000_000).toFixed(4) : null}
</div>
)}
</div>
@ -503,6 +513,9 @@ export default function ModelInfoView({
)}
</div>
</Form>
) : (
<Text>Loading...</Text>
)}
</Card>
</TabPanel>

30
ui/litellm-dashboard/src/components/networking.tsx
View file

@ -1254,6 +1254,36 @@ export const modelInfoCall = async (
}
};
export const modelInfoV1Call = async (accessToken: String, modelId: String) => {
/**
* Get all models on proxy
*/
try {
let url = proxyBaseUrl ? `${proxyBaseUrl}/v1/model/info` : `/v1/model/info`;
url += `?litellm_model_id=${modelId}`;
const response = await fetch(url, {
method: "GET",
headers: {
[globalLitellmHeaderName]: `Bearer ${accessToken}`,
"Content-Type": "application/json",
},
});
if (!response.ok) {
const errorData = await response.text();
throw new Error("Network response was not ok");
}
const data = await response.json();
console.log("modelInfoV1Call:", data);
return data;
} catch (error) {
console.error("Failed to create key:", error);
throw error;
}
};
export const modelHubCall = async (accessToken: String) => {
/**
* Get all models on proxy