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

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

@ -15,7 +15,7 @@ import {
NumberInput, NumberInput,
} from "@tremor/react"; } from "@tremor/react";
import { ArrowLeftIcon, TrashIcon, KeyIcon } from "@heroicons/react/outline"; 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 { Button, Form, Input, InputNumber, message, Select, Modal } from "antd";
import EditModelModal from "./edit_model/edit_model_modal"; import EditModelModal from "./edit_model/edit_model_modal";
import { handleEditModelSubmit } from "./edit_model/edit_model_modal"; import { handleEditModelSubmit } from "./edit_model/edit_model_modal";
@ -48,7 +48,7 @@ export default function ModelInfoView({
setSelectedModel setSelectedModel
}: ModelInfoViewProps) { }: ModelInfoViewProps) {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [localModelData, setLocalModelData] = useState(modelData); const [localModelData, setLocalModelData] = useState<any>(null);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [isCredentialModalOpen, setIsCredentialModalOpen] = useState(false); const [isCredentialModalOpen, setIsCredentialModalOpen] = useState(false);
const [isDirty, setIsDirty] = useState(false); const [isDirty, setIsDirty] = useState(false);
@ -77,7 +77,16 @@ export default function ModelInfoView({
credential_info: existingCredentialResponse["credential_info"] 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(); getExistingCredential();
getModelInfo();
}, [accessToken, modelId]); }, [accessToken, modelId]);
const handleReuseCredential = async (values: any) => { const handleReuseCredential = async (values: any) => {
@ -292,24 +301,25 @@ export default function ModelInfoView({
</TremorButton> </TremorButton>
)} )}
</div> </div>
<Form {localModelData ? (
form={form} <Form
onFinish={handleModelUpdate} form={form}
initialValues={{ onFinish={handleModelUpdate}
initialValues={{
model_name: localModelData.model_name, model_name: localModelData.model_name,
litellm_model_name: localModelData.litellm_model_name, litellm_model_name: localModelData.litellm_model_name,
api_base: localModelData.litellm_params?.api_base, api_base: localModelData.litellm_params.api_base,
custom_llm_provider: localModelData.litellm_params?.custom_llm_provider, custom_llm_provider: localModelData.litellm_params.custom_llm_provider,
organization: localModelData.litellm_params?.organization, organization: localModelData.litellm_params.organization,
tpm: localModelData.litellm_params?.tpm, tpm: localModelData.litellm_params.tpm,
rpm: localModelData.litellm_params?.rpm, rpm: localModelData.litellm_params.rpm,
max_retries: localModelData.litellm_params?.max_retries, max_retries: localModelData.litellm_params.max_retries,
timeout: localModelData.litellm_params?.timeout, timeout: localModelData.litellm_params.timeout,
stream_timeout: localModelData.litellm_params?.stream_timeout, stream_timeout: localModelData.litellm_params.stream_timeout,
input_cost: localModelData.litellm_params?.input_cost_per_token ? 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, (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 ? 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" layout="vertical"
onValuesChange={() => setIsDirty(true)} onValuesChange={() => setIsDirty(true)}
@ -346,9 +356,9 @@ export default function ModelInfoView({
</Form.Item> </Form.Item>
) : ( ) : (
<div className="mt-1 p-2 bg-gray-50 rounded"> <div className="mt-1 p-2 bg-gray-50 rounded">
{localModelData.litellm_params?.input_cost_per_token {localModelData?.litellm_params?.input_cost_per_token
? (localModelData.litellm_params.input_cost_per_token * 1_000_000).toFixed(4) ? (localModelData.litellm_params?.input_cost_per_token * 1_000_000).toFixed(4)
: modelData.input_cost * 1_000_000} : localModelData?.model_info?.input_cost_per_token ? (localModelData.model_info.input_cost_per_token * 1_000_000).toFixed(4) : null}
</div> </div>
)} )}
</div> </div>
@ -361,9 +371,9 @@ export default function ModelInfoView({
</Form.Item> </Form.Item>
) : ( ) : (
<div className="mt-1 p-2 bg-gray-50 rounded"> <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) ? (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>
)} )}
</div> </div>
@ -502,7 +512,10 @@ export default function ModelInfoView({
</div> </div>
)} )}
</div> </div>
</Form> </Form>
) : (
<Text>Loading...</Text>
)}
</Card> </Card>
</TabPanel> </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) => { export const modelHubCall = async (accessToken: String) => {
/** /**
* Get all models on proxy * Get all models on proxy