From f69f3721358da8d180f329c61dba416ccce5b9ca Mon Sep 17 00:00:00 2001 From: Krrish Dholakia Date: Mon, 27 May 2024 14:28:05 -0700 Subject: [PATCH] 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 --- .../src/app/model_hub/page.tsx | 23 ++++ ui/litellm-dashboard/src/app/page.tsx | 55 ++++---- .../src/components/model_hub.tsx | 130 +++++++++--------- .../src/components/networking.tsx | 13 +- 4 files changed, 120 insertions(+), 101 deletions(-) create mode 100644 ui/litellm-dashboard/src/app/model_hub/page.tsx diff --git a/ui/litellm-dashboard/src/app/model_hub/page.tsx b/ui/litellm-dashboard/src/app/model_hub/page.tsx new file mode 100644 index 000000000..a038a6974 --- /dev/null +++ b/ui/litellm-dashboard/src/app/model_hub/page.tsx @@ -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(null); + + useEffect(() => { + if (!key) { + return; + } + setAccessToken(key); + }, [key]); + /** + * populate navbar + * + */ + return ; +} diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx index 382d72b8d..8d2b1fac2 100644 --- a/ui/litellm-dashboard/src/app/page.tsx +++ b/ui/litellm-dashboard/src/app/page.tsx @@ -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 ( Loading...}>
@@ -194,8 +194,8 @@ const CreateKeyPage = () => { accessToken={accessToken} modelData={modelData} /> - ) : page == "model-hub" ? ( - { keys={keys} premiumUser={premiumUser} /> - ) - : ( + ) : ( = ({ - userID, - - userRole, - - token, - - accessToken, - - keys, - - premiumUser, -}) => { +const ModelHub: React.FC = ({ accessToken, publicPage }) => { const [modelHubData, setModelHubData] = useState(null); const [isModalVisible, setIsModalVisible] = useState(false); const [selectedModel, setSelectedModel] = useState(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 = ({ }; fetchData(); - }, [accessToken, token, userRole, userID]); + }, [accessToken]); const showModal = (model: ModelInfo) => { setSelectedModel(model); @@ -109,11 +90,13 @@ const ModelHub: React.FC = ({
Model Hub - + {publicPage == false && ( + + )}
@@ -129,14 +112,27 @@ const ModelHub: React.FC = ({ /> -
- - Mode: {model.mode} - Supports Function Calling: {model?.supports_function_calling == true ? "Yes" : "No"} - Supports Vision: {model?.supports_vision == true ? "Yes" : "No"} - Max Input Tokens: {model?.max_input_tokens ? model?.max_input_tokens : "N/A"} - Max Output Tokens: {model?.max_output_tokens ? model?.max_output_tokens : "N/A"} -
+
+ Mode: {model.mode} + + Supports Function Calling:{" "} + {model?.supports_function_calling == true ? "Yes" : "No"} + + + Supports Vision:{" "} + {model?.supports_vision == true ? "Yes" : "No"} + + + Max Input Tokens:{" "} + {model?.max_input_tokens ? model?.max_input_tokens : "N/A"} + + + Max Output Tokens:{" "} + {model?.max_output_tokens + ? model?.max_output_tokens + : "N/A"} + +
= ({ > {selectedModel && (
-

Model Information & Usage

- +

+ Model Information & Usage +

+ - - OpenAI Python SDK - Supported OpenAI Params - LlamaIndex - Langchain Py - - - - - {` + + OpenAI Python SDK + Supported OpenAI Params + LlamaIndex + Langchain Py + + + + + {` import openai client = openai.OpenAI( api_key="your_api_key", @@ -192,13 +194,13 @@ response = client.chat.completions.create( print(response) `} - - - - - {`${selectedModel.supported_openai_params?.map((param) => `${param}\n`).join('')}`} - - + + + + + {`${selectedModel.supported_openai_params?.map((param) => `${param}\n`).join("")}`} + + {` diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index 182083661..49d0a7453 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/ui/litellm-dashboard/src/components/networking.tsx @@ -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,