phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

build(ui): fixes

Browse source
This commit is contained in:
Krrish Dholakia 2024-04-23 22:49:30 -07:00
parent aa08397e34
commit afba10c9c3
2 changed files with 112 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

180
ui/litellm-dashboard/src/components/model_dashboard.tsx
View file

@ -74,6 +74,96 @@ const provider_map: Record <string, string> = {
};
const handleSubmit = async (formValues: Record<string, any>, accessToken: string, form: any) => {
try {
/**
* For multiple litellm model names - create a separate deployment for each
* - get the list
* - iterate through it
* - create a new deployment for each
*
* For single model name -> make it a 1 item list
*/
// get the list of deployments
let deployments: Array<string> = Array.isArray(formValues["model"]) ? formValues["model"] : [formValues["model"]];
console.log(`received deployments: ${deployments}`)
console.log(`received type of deployments: ${typeof deployments}`)
deployments.forEach(async (litellm_model) => {
console.log(`litellm_model: ${litellm_model}`)
const litellmParamsObj: Record<string, any> = {};
const modelInfoObj: Record<string, any> = {};
// Iterate through the key-value pairs in formValues
litellmParamsObj["model"] = litellm_model
let modelName: string = "";
for (const [key, value] of Object.entries(formValues)) {
if (key == "model_name") {
modelName = modelName + value
}
else if (key == "custom_llm_provider") {
// const providerEnumValue = Providers[value as keyof typeof Providers];
// const mappingResult = provider_map[providerEnumValue]; // Get the corresponding value from the mapping
// modelName = mappingResult + "/" + modelName
continue
}
else if (key == "model") {
continue
}
// Check if key is "base_model"
else if (key === "base_model") {
// Add key-value pair to model_info dictionary
modelInfoObj[key] = value;
}
else if (key == "litellm_extra_params") {
console.log("litellm_extra_params:", value);
let litellmExtraParams = {};
if (value && value != undefined) {
try {
litellmExtraParams = JSON.parse(value);
}
catch (error) {
message.error("Failed to parse LiteLLM Extra Params: " + error, 20);
throw new Error("Failed to parse litellm_extra_params: " + error);
}
for (const [key, value] of Object.entries(litellmExtraParams)) {
litellmParamsObj[key] = value;
}
}
}
// Check if key is any of the specified API related keys
else {
// Add key-value pair to litellm_params dictionary
litellmParamsObj[key] = value;
}
}
const new_model: Model = {
"model_name": modelName,
"litellm_params": litellmParamsObj,
"model_info": modelInfoObj
}
const response: any = await modelCreateCall(
accessToken,
new_model
);
console.log(`response for model create call: ${response["data"]}`);
});
form.resetFields();
} catch (error) {
message.error("Failed to create model: " + error, 20);
}
}
const ModelDashboard: React.FC<ModelDashboardProps> = ({
accessToken,
token,
@ -295,93 +385,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
}
};
const handleSubmit = async (formValues: Record<string, any>) => {
try {
/**
* For multiple litellm model names - create a separate deployment for each
* - get the list
* - iterate through it
* - create a new deployment for each
*/
// get the list of deployments
let deployments: Array<string> = Object.values(formValues["model"])
console.log(`received deployments: ${deployments}`)
console.log(`received type of deployments: ${typeof deployments}`)
deployments.forEach(async (litellm_model) => {
console.log(`litellm_model: ${litellm_model}`)
const litellmParamsObj: Record<string, any> = {};
const modelInfoObj: Record<string, any> = {};
// Iterate through the key-value pairs in formValues
litellmParamsObj["model"] = litellm_model
let modelName: string = "";
for (const [key, value] of Object.entries(formValues)) {
if (key == "model_name") {
modelName = modelName + value
}
else if (key == "custom_llm_provider") {
// const providerEnumValue = Providers[value as keyof typeof Providers];
// const mappingResult = provider_map[providerEnumValue]; // Get the corresponding value from the mapping
// modelName = mappingResult + "/" + modelName
continue
}
else if (key == "model") {
continue
}
// Check if key is "base_model"
else if (key === "base_model") {
// Add key-value pair to model_info dictionary
modelInfoObj[key] = value;
}
else if (key == "litellm_extra_params") {
console.log("litellm_extra_params:", value);
let litellmExtraParams = {};
if (value && value != undefined) {
try {
litellmExtraParams = JSON.parse(value);
}
catch (error) {
message.error("Failed to parse LiteLLM Extra Params: " + error, 20);
throw new Error("Failed to parse litellm_extra_params: " + error);
}
for (const [key, value] of Object.entries(litellmExtraParams)) {
litellmParamsObj[key] = value;
}
}
}
// Check if key is any of the specified API related keys
else {
// Add key-value pair to litellm_params dictionary
litellmParamsObj[key] = value;
}
}
const new_model: Model = {
"model_name": modelName,
"litellm_params": litellmParamsObj,
"model_info": modelInfoObj
}
const response: any = await modelCreateCall(
accessToken,
new_model
);
console.log(`response for model create call: ${response["data"]}`);
});
form.resetFields();
} catch (error) {
message.error("Failed to create model: " + error, 20);
}
}
const getPlaceholder = (selectedProvider: string): string => {
if (selectedProvider === Providers.Vertex_AI) {
@ -401,7 +405,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
form
.validateFields()
.then((values) => {
handleSubmit(values);
handleSubmit(values, accessToken, form);
// form.resetFields();
})
.catch((error) => {
@ -686,4 +690,4 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
);
};
export default ModelDashboard;
export default ModelDashboard;

23
ui/litellm-dashboard/src/components/user_dashboard.tsx
View file

@ -32,6 +32,12 @@ interface UserDashboardProps {
setKeys: React.Dispatch<React.SetStateAction<Object[] | null>>;
}
type TeamInterface = {
models: any[];
team_id: null;
team_alias: String
}
const UserDashboard: React.FC<UserDashboardProps> = ({
userID,
userRole,
@ -56,8 +62,13 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
const [accessToken, setAccessToken] = useState<string | null>(null);
const [teamSpend, setTeamSpend] = useState<number | null>(null);
const [userModels, setUserModels] = useState<string[]>([]);
const defaultTeam: TeamInterface = {
"models": [],
"team_alias": "Default Team",
"team_id": null
}
const [selectedTeam, setSelectedTeam] = useState<any | null>(
teams ? teams[0] : null
teams ? teams[0] : defaultTeam
);
// check if window is not undefined
if (typeof window !== "undefined") {
@ -141,7 +152,13 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
}
setKeys(response["keys"]); // Assuming this is the correct path to your data
setTeams(response["teams"]);
setSelectedTeam(response["teams"] ? response["teams"][0] : null);
const teamsArray = [...response['teams']];
if (teamsArray.length > 0) {
console.log(`response['teams']: ${teamsArray}`);
setSelectedTeam(teamsArray[0]);
} else {
setSelectedTeam(defaultTeam);
}
sessionStorage.setItem(
"userData" + userID,
JSON.stringify(response["keys"])
@ -273,4 +290,4 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
);
};
export default UserDashboard;
export default UserDashboard;