mirror of
https://github.com/BerriAI/litellm.git
synced 2025-04-26 19:24:27 +00:00
feat(model_hub/page.tsx): public model hub page for users
allow admin to expose a public model hub page for users to see available models w/ params
This commit is contained in:
Krrish Dholakia
parent
67da24f144
commit
f69f372135
4 changed files with 120 additions and 101 deletions
23
ui/litellm-dashboard/src/app/model_hub/page.tsx
Normal file
23
ui/litellm-dashboard/src/app/model_hub/page.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
"use client";
|
||||
import React, { Suspense, useEffect, useState } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { modelHubCall } from "@/components/networking";
|
||||
import ModelHub from "@/components/model_hub";
|
||||
|
||||
export default function PublicModelHub() {
|
||||
const searchParams = useSearchParams();
|
||||
const key = searchParams.get("key");
|
||||
const [accessToken, setAccessToken] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!key) {
|
||||
return;
|
||||
}
|
||||
setAccessToken(key);
|
||||
}, [key]);
|
||||
/**
|
||||
* populate navbar
|
||||
*
|
||||
*/
|
||||
return <ModelHub accessToken={accessToken} publicPage={true} />;
|
||||
}
|
||||
|
|
@ -18,6 +18,30 @@ import Usage from "../components/usage";
|
|||
import { jwtDecode } from "jwt-decode";
|
||||
import { Typography } from "antd";
|
||||
|
||||
export function formatUserRole(userRole: string) {
|
||||
if (!userRole) {
|
||||
return "Undefined Role";
|
||||
}
|
||||
console.log(`Received user role: ${userRole.toLowerCase()}`);
|
||||
console.log(`Received user role length: ${userRole.toLowerCase().length}`);
|
||||
switch (userRole.toLowerCase()) {
|
||||
case "app_owner":
|
||||
return "App Owner";
|
||||
case "demo_app_owner":
|
||||
return "App Owner";
|
||||
case "app_admin":
|
||||
return "Admin";
|
||||
case "proxy_admin":
|
||||
return "Admin";
|
||||
case "proxy_admin_viewer":
|
||||
return "Admin Viewer";
|
||||
case "app_user":
|
||||
return "App User";
|
||||
default:
|
||||
return "Unknown Role";
|
||||
}
|
||||
}
|
||||
|
||||
const CreateKeyPage = () => {
|
||||
const { Title, Paragraph } = Typography;
|
||||
const [userRole, setUserRole] = useState("");
|
||||
|
|
@ -78,30 +102,6 @@ const CreateKeyPage = () => {
|
|||
}
|
||||
}, [token]);
|
||||
|
||||
function formatUserRole(userRole: string) {
|
||||
if (!userRole) {
|
||||
return "Undefined Role";
|
||||
}
|
||||
console.log(`Received user role: ${userRole.toLowerCase()}`);
|
||||
console.log(`Received user role length: ${userRole.toLowerCase().length}`);
|
||||
switch (userRole.toLowerCase()) {
|
||||
case "app_owner":
|
||||
return "App Owner";
|
||||
case "demo_app_owner":
|
||||
return "App Owner";
|
||||
case "app_admin":
|
||||
return "Admin";
|
||||
case "proxy_admin":
|
||||
return "Admin";
|
||||
case "proxy_admin_viewer":
|
||||
return "Admin Viewer";
|
||||
case "app_user":
|
||||
return "App User";
|
||||
default:
|
||||
return "Unknown Role";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<div className="flex flex-col min-h-screen">
|
||||
|
|
@ -194,8 +194,8 @@ const CreateKeyPage = () => {
|
|||
accessToken={accessToken}
|
||||
modelData={modelData}
|
||||
/>
|
||||
) : page == "model-hub" ? (
|
||||
<ModelHub
|
||||
) : page == "model-hub" ? (
|
||||
<ModelHub
|
||||
userID={userID}
|
||||
userRole={userRole}
|
||||
token={token}
|
||||
|
|
@ -203,8 +203,7 @@ const CreateKeyPage = () => {
|
|||
keys={keys}
|
||||
premiumUser={premiumUser}
|
||||
/>
|
||||
)
|
||||
: (
|
||||
) : (
|
||||
<Usage
|
||||
userID={userID}
|
||||
userRole={userRole}
|
||||
|
|
|
|||
|
|
@ -22,52 +22,33 @@ import { Modal, Tooltip } from "antd";
|
|||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
|
||||
interface ModelHubProps {
|
||||
userID: string | null;
|
||||
userRole: string | null;
|
||||
token: string | null;
|
||||
accessToken: string | null;
|
||||
keys: any; // Replace with the appropriate type for 'keys' prop
|
||||
premiumUser: boolean;
|
||||
publicPage: boolean;
|
||||
}
|
||||
|
||||
interface ModelInfo {
|
||||
model_group: string;
|
||||
mode: string;
|
||||
supports_function_calling: boolean;
|
||||
supports_vision: boolean;
|
||||
max_input_tokens?: number;
|
||||
max_output_tokens?: number;
|
||||
supported_openai_params?: string[];
|
||||
|
||||
|
||||
// Add other properties if needed
|
||||
model_group: string;
|
||||
mode: string;
|
||||
supports_function_calling: boolean;
|
||||
supports_vision: boolean;
|
||||
max_input_tokens?: number;
|
||||
max_output_tokens?: number;
|
||||
supported_openai_params?: string[];
|
||||
}
|
||||
|
||||
const ModelHub: React.FC<ModelHubProps> = ({
|
||||
userID,
|
||||
|
||||
userRole,
|
||||
|
||||
token,
|
||||
|
||||
accessToken,
|
||||
|
||||
keys,
|
||||
|
||||
premiumUser,
|
||||
}) => {
|
||||
const ModelHub: React.FC<ModelHubProps> = ({ accessToken, publicPage }) => {
|
||||
const [modelHubData, setModelHubData] = useState<ModelInfo[] | null>(null);
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [selectedModel, setSelectedModel] = useState<null | ModelInfo>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!accessToken || !token || !userRole || !userID) {
|
||||
if (!accessToken) {
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const _modelHubData = await modelHubCall(accessToken, userID, userRole);
|
||||
const _modelHubData = await modelHubCall(accessToken);
|
||||
|
||||
console.log("ModelHubData:", _modelHubData);
|
||||
|
||||
|
|
@ -78,7 +59,7 @@ const ModelHub: React.FC<ModelHubProps> = ({
|
|||
};
|
||||
|
||||
fetchData();
|
||||
}, [accessToken, token, userRole, userID]);
|
||||
}, [accessToken]);
|
||||
|
||||
const showModal = (model: ModelInfo) => {
|
||||
setSelectedModel(model);
|
||||
|
|
@ -109,11 +90,13 @@ const ModelHub: React.FC<ModelHubProps> = ({
|
|||
|
||||
<div className="flex items-center">
|
||||
<Title className="ml-8 text-center ">Model Hub</Title>
|
||||
<Button className="ml-4">
|
||||
<a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
|
||||
✨ Make Public
|
||||
</a>
|
||||
</Button>
|
||||
{publicPage == false && (
|
||||
<Button className="ml-4">
|
||||
<a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
|
||||
✨ Make Public
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-4">
|
||||
|
|
@ -129,14 +112,27 @@ const ModelHub: React.FC<ModelHubProps> = ({
|
|||
/>
|
||||
</Tooltip>
|
||||
</pre>
|
||||
<div className='my-5'>
|
||||
|
||||
<Text>Mode: {model.mode}</Text>
|
||||
<Text>Supports Function Calling: {model?.supports_function_calling == true ? "Yes" : "No"}</Text>
|
||||
<Text>Supports Vision: {model?.supports_vision == true ? "Yes" : "No"}</Text>
|
||||
<Text>Max Input Tokens: {model?.max_input_tokens ? model?.max_input_tokens : "N/A"}</Text>
|
||||
<Text>Max Output Tokens: {model?.max_output_tokens ? model?.max_output_tokens : "N/A"}</Text>
|
||||
</div>
|
||||
<div className="my-5">
|
||||
<Text>Mode: {model.mode}</Text>
|
||||
<Text>
|
||||
Supports Function Calling:{" "}
|
||||
{model?.supports_function_calling == true ? "Yes" : "No"}
|
||||
</Text>
|
||||
<Text>
|
||||
Supports Vision:{" "}
|
||||
{model?.supports_vision == true ? "Yes" : "No"}
|
||||
</Text>
|
||||
<Text>
|
||||
Max Input Tokens:{" "}
|
||||
{model?.max_input_tokens ? model?.max_input_tokens : "N/A"}
|
||||
</Text>
|
||||
<Text>
|
||||
Max Output Tokens:{" "}
|
||||
{model?.max_output_tokens
|
||||
? model?.max_output_tokens
|
||||
: "N/A"}
|
||||
</Text>
|
||||
</div>
|
||||
<div style={{ marginTop: "auto", textAlign: "right" }}>
|
||||
<a
|
||||
href="#"
|
||||
|
|
@ -152,7 +148,11 @@ const ModelHub: React.FC<ModelHubProps> = ({
|
|||
</div>
|
||||
|
||||
<Modal
|
||||
title={selectedModel && selectedModel.model_group ? selectedModel.model_group : "Unknown Model"}
|
||||
title={
|
||||
selectedModel && selectedModel.model_group
|
||||
? selectedModel.model_group
|
||||
: "Unknown Model"
|
||||
}
|
||||
width={800}
|
||||
visible={isModalVisible}
|
||||
footer={null}
|
||||
|
|
@ -161,19 +161,21 @@ const ModelHub: React.FC<ModelHubProps> = ({
|
|||
>
|
||||
{selectedModel && (
|
||||
<div>
|
||||
<p className='mb-4'><strong>Model Information & Usage</strong></p>
|
||||
<p className="mb-4">
|
||||
<strong>Model Information & Usage</strong>
|
||||
</p>
|
||||
|
||||
<TabGroup>
|
||||
<TabList>
|
||||
<Tab>OpenAI Python SDK</Tab>
|
||||
<Tab>Supported OpenAI Params</Tab>
|
||||
<Tab>LlamaIndex</Tab>
|
||||
<Tab>Langchain Py</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
<SyntaxHighlighter language="python">
|
||||
{`
|
||||
<TabList>
|
||||
<Tab>OpenAI Python SDK</Tab>
|
||||
<Tab>Supported OpenAI Params</Tab>
|
||||
<Tab>LlamaIndex</Tab>
|
||||
<Tab>Langchain Py</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
<SyntaxHighlighter language="python">
|
||||
{`
|
||||
import openai
|
||||
client = openai.OpenAI(
|
||||
api_key="your_api_key",
|
||||
|
|
@ -192,13 +194,13 @@ response = client.chat.completions.create(
|
|||
|
||||
print(response)
|
||||
`}
|
||||
</SyntaxHighlighter>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<SyntaxHighlighter language="python">
|
||||
{`${selectedModel.supported_openai_params?.map((param) => `${param}\n`).join('')}`}
|
||||
</SyntaxHighlighter>
|
||||
</TabPanel>
|
||||
</SyntaxHighlighter>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<SyntaxHighlighter language="python">
|
||||
{`${selectedModel.supported_openai_params?.map((param) => `${param}\n`).join("")}`}
|
||||
</SyntaxHighlighter>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<SyntaxHighlighter language="python">
|
||||
{`
|
||||
|
|
|
|||
|
|
@ -579,17 +579,14 @@ export const modelInfoCall = async (
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
export const modelHubCall = async (
|
||||
accessToken: String,
|
||||
userID: String,
|
||||
userRole: String
|
||||
) => {
|
||||
export const modelHubCall = async (accessToken: String) => {
|
||||
/**
|
||||
* Get all models on proxy
|
||||
*/
|
||||
try {
|
||||
let url = proxyBaseUrl ? `${proxyBaseUrl}/model_group/info` : `/model_group/info`;
|
||||
let url = proxyBaseUrl
|
||||
? `${proxyBaseUrl}/model_group/info`
|
||||
: `/model_group/info`;
|
||||
|
||||
//message.info("Requesting model data");
|
||||
const response = await fetch(url, {
|
||||
|
|
@ -617,8 +614,6 @@ export const modelHubCall = async (
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const modelMetricsCall = async (
|
||||
accessToken: String,
|
||||
userID: String,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue