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

feat(model_hub.tsx): enable admin to expose a public model hub

Browse source
This commit is contained in:
Krrish Dholakia 2024-05-27 17:45:45 -07:00
parent f69f372135
commit 4516daec90
6 changed files with 193 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

9
litellm/proxy/_types.py
View file

@ -928,6 +928,10 @@ class ConfigGeneralSettings(LiteLLMBase):
allowed_routes: Optional[List] = Field(
None, description="Proxy API Endpoints you want users to be able to access"
)
enable_public_model_hub: bool = Field(
default=False,
description="Public model hub for users to see what models they have access to, supported openai params, etc.",
)
class ConfigYAML(LiteLLMBase):
@ -1154,3 +1158,8 @@ class WebhookEvent(CallInfo):
class SpecialModelNames(enum.Enum):
all_team_models = "all-team-models"
all_proxy_models = "all-proxy-models"
class ConfigFieldInfo(LiteLLMBase):
field_name: str
field_value: Any

8
litellm/proxy/proxy_server.py
View file

@ -11061,6 +11061,7 @@ async def update_config_general_settings(
"/config/field/info",
tags=["config.yaml"],
dependencies=[Depends(user_api_key_auth)],
response_model=ConfigFieldInfo,
)
async def get_config_general_settings(
field_name: str,
@ -11107,10 +11108,9 @@ async def get_config_general_settings(
general_settings = dict(db_general_settings.param_value)
if field_name in general_settings:
return {
"field_name": field_name,
"field_value": general_settings[field_name],
}
return ConfigFieldInfo(
field_name=field_name, field_value=general_settings[field_name]
)
else:
raise HTTPException(
status_code=400,

4
ui/litellm-dashboard/src/app/model_hub/page.tsx
View file

@ -19,5 +19,7 @@ export default function PublicModelHub() {
* populate navbar
*
*/
return <ModelHub accessToken={accessToken} publicPage={true} />;
return (
<ModelHub accessToken={accessToken} publicPage={true} premiumUser={false} />
);
}

5
ui/litellm-dashboard/src/app/page.tsx
View file

@ -196,11 +196,8 @@ const CreateKeyPage = () => {
/>
) : page == "model-hub" ? (
<ModelHub
userID={userID}
userRole={userRole}
token={token}
accessToken={accessToken}
keys={keys}
publicPage={false}
premiumUser={premiumUser}
/>
) : (

98
ui/litellm-dashboard/src/components/model_hub.tsx
View file

@ -1,7 +1,8 @@
import React, { useEffect, useState } from "react";
import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { modelHubCall } from "./networking";
import { getConfigFieldSetting, updateConfigFieldSetting } from "./networking";
import {
Card,
Text,
@ -15,15 +16,15 @@ import {
TabPanel,
TabPanels,
} from "@tremor/react";
import { RightOutlined, CopyOutlined } from "@ant-design/icons";
import { Modal, Tooltip } from "antd";
import { Modal, Tooltip, message } from "antd";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
interface ModelHubProps {
accessToken: string | null;
publicPage: boolean;
premiumUser: boolean;
}
interface ModelInfo {
@ -36,10 +37,18 @@ interface ModelInfo {
supported_openai_params?: string[];
}
const ModelHub: React.FC<ModelHubProps> = ({ accessToken, publicPage }) => {
const ModelHub: React.FC<ModelHubProps> = ({
accessToken,
publicPage,
premiumUser,
}) => {
const [publicPageAllowed, setPublicPageAllowed] = useState<boolean>(false);
const [modelHubData, setModelHubData] = useState<ModelInfo[] | null>(null);
const [isModalVisible, setIsModalVisible] = useState(false);
const [isPublicPageModalVisible, setIsPublicPageModalVisible] =
useState(false);
const [selectedModel, setSelectedModel] = useState<null | ModelInfo>(null);
const router = useRouter();
useEffect(() => {
if (!accessToken) {
@ -53,13 +62,24 @@ const ModelHub: React.FC<ModelHubProps> = ({ accessToken, publicPage }) => {
console.log("ModelHubData:", _modelHubData);
setModelHubData(_modelHubData.data);
getConfigFieldSetting(accessToken, "enable_public_model_hub")
.then((data) => {
console.log(`data: ${JSON.stringify(data)}`);
if (data.field_value == true) {
setPublicPageAllowed(true);
}
})
.catch((error) => {
// do nothing
});
} catch (error) {
console.error("There was an error fetching the model data", error);
}
};
fetchData();
}, [accessToken]);
}, [accessToken, publicPage]);
const showModal = (model: ModelInfo) => {
setSelectedModel(model);
@ -67,15 +87,29 @@ const ModelHub: React.FC<ModelHubProps> = ({ accessToken, publicPage }) => {
setIsModalVisible(true);
};
const goToPublicModelPage = () => {
router.replace(`/model_hub?key=${accessToken}`);
};
const handleMakePublicPage = async () => {
if (!accessToken) {
return;
}
updateConfigFieldSetting(accessToken, "enable_public_model_hub", true).then(
(data) => {
setIsPublicPageModalVisible(true);
}
);
};
const handleOk = () => {
setIsModalVisible(false);
setIsPublicPageModalVisible(false);
setSelectedModel(null);
};
const handleCancel = () => {
setIsModalVisible(false);
setIsPublicPageModalVisible(false);
setSelectedModel(null);
};
@ -85,17 +119,31 @@ const ModelHub: React.FC<ModelHubProps> = ({ accessToken, publicPage }) => {
return (
<div>
{(publicPage && publicPageAllowed) || publicPage == false ? (
<div className="w-full m-2 mt-2 p-8">
<div className="relative w-full"></div>
<div className="flex items-center">
<div
className={`flex ${publicPage ? "justify-between" : "items-center"}`}
>
<Title className="ml-8 text-center ">Model Hub</Title>
{publicPage == false && (
{publicPage == false ? (
premiumUser ? (
<Button className="ml-4" onClick={() => handleMakePublicPage()}>
✨ Make Public
</Button>
) : (
<Button className="ml-4">
<a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
✨ Make Public
</a>
</Button>
)
) : (
<div className="flex justify-between items-center">
<p>Filter by key:</p>
<Text className="bg-gray-200 pr-2 pl-2 pt-1 pb-1 text-center">{`/ui/model_hub?key=<YOUR_KEY>`}</Text>
</div>
)}
</div>
@ -124,7 +172,9 @@ const ModelHub: React.FC<ModelHubProps> = ({ accessToken, publicPage }) => {
</Text>
<Text>
Max Input Tokens:{" "}
{model?.max_input_tokens ? model?.max_input_tokens : "N/A"}
{model?.max_input_tokens
? model?.max_input_tokens
: "N/A"}
</Text>
<Text>
Max Output Tokens:{" "}
@ -146,7 +196,35 @@ const ModelHub: React.FC<ModelHubProps> = ({ accessToken, publicPage }) => {
))}
</div>
</div>
) : (
<Card className="mx-auto max-w-xl mt-10">
<Text className="text-xl text-center mb-2 text-black">
Public Model Hub not enabled.
</Text>
<p className="text-base text-center text-slate-800">
Ask your proxy admin to enable this on their Admin UI.
</p>
</Card>
)}
<Modal
title={"Public Model Hub"}
width={600}
visible={isPublicPageModalVisible}
footer={null}
onOk={handleOk}
onCancel={handleCancel}
>
<div className="pt-5 pb-5">
<div className="flex justify-between mb-4">
<Text className="text-base mr-2">Shareable Link:</Text>
<Text className="max-w-sm ml-2 bg-gray-200 pr-2 pl-2 pt-1 pb-1 text-center rounded">{`<proxy_base_url>/ui/model_hub?key=<YOUR_API_KEY>`}</Text>
</div>
<div className="flex justify-end">
<Button onClick={goToPublicModelPage}>See Page</Button>
</div>
</div>
</Modal>
<Modal
title={
selectedModel && selectedModel.model_group

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

@ -1865,6 +1865,38 @@ export const getGeneralSettingsCall = async (accessToken: String) => {
}
};
export const getConfigFieldSetting = async (
accessToken: String,
fieldName: string
) => {
try {
let url = proxyBaseUrl
? `${proxyBaseUrl}/config/field/info?field_name=${fieldName}`
: `/config/field/info?field_name=${fieldName}`;
//message.info("Requesting model data");
const response = await fetch(url, {
method: "GET",
headers: {
Authorization: `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();
return data;
// Handle success - you might want to update some state or UI based on the created key
} catch (error) {
console.error("Failed to set callbacks:", error);
throw error;
}
};
export const updateConfigFieldSetting = async (
accessToken: String,
fieldName: string,