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

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<string | null>(null);
+
+  useEffect(() => {
+    if (!key) {
+      return;
+    }
+    setAccessToken(key);
+  }, [key]);
+  /**
+   * populate navbar
+   *
+   */
+  return <ModelHub accessToken={accessToken} publicPage={true} />;
+}

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 (
     <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" ? (
+          ) : page == "model-hub" ? (
-              <ModelHub
+            <ModelHub
               userID={userID}
               userRole={userRole}
               token={token}
@@ -203,8 +203,7 @@ const CreateKeyPage = () => {
               keys={keys}
               premiumUser={premiumUser}
             />
-            )
+          ) : (
-            : (
             <Usage
               userID={userID}
               userRole={userRole}

ui/litellm-dashboard/src/components/model_hub.tsx

@@ -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
+  publicPage: boolean;
-  premiumUser: boolean;
 }
 
 interface ModelInfo {
-    model_group: string;
+  model_group: string;
-    mode: string;
+  mode: string;
-    supports_function_calling: boolean;
+  supports_function_calling: boolean;
-    supports_vision: boolean;
+  supports_vision: boolean;
-    max_input_tokens?: number;
+  max_input_tokens?: number;
-    max_output_tokens?: number;
+  max_output_tokens?: number;
-    supported_openai_params?: string[];
+  supported_openai_params?: string[];
-
-
-  // Add other properties if needed
 }
 
-const ModelHub: React.FC<ModelHubProps> = ({
+const ModelHub: React.FC<ModelHubProps> = ({ accessToken, publicPage }) => {
-  userID,
-
-  userRole,
-
-  token,
-
-  accessToken,
-
-  keys,
-
-  premiumUser,
-}) => {
   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">
+          {publicPage == false && (
-            <a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
+            <Button className="ml-4">
-              ✨ Make Public
+              <a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
-            </a>
+                ✨ Make Public
-          </Button>
+              </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'>
+                <div className="my-5">
-
+                  <Text>Mode: {model.mode}</Text>
-              <Text>Mode: {model.mode}</Text>
+                  <Text>
-              <Text>Supports Function Calling: {model?.supports_function_calling == true ? "Yes" : "No"}</Text>
+                    Supports Function Calling:{" "}
-              <Text>Supports Vision: {model?.supports_vision == true ? "Yes" : "No"}</Text>
+                    {model?.supports_function_calling == true ? "Yes" : "No"}
-              <Text>Max Input Tokens: {model?.max_input_tokens ? model?.max_input_tokens : "N/A"}</Text>
+                  </Text>
-              <Text>Max Output Tokens: {model?.max_output_tokens ? model?.max_output_tokens : "N/A"}</Text>
+                  <Text>
-              </div>
+                    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>
+              <TabList>
-                    <Tab>OpenAI Python SDK</Tab>
+                <Tab>OpenAI Python SDK</Tab>
-                    <Tab>Supported OpenAI Params</Tab>
+                <Tab>Supported OpenAI Params</Tab>
-                    <Tab>LlamaIndex</Tab>
+                <Tab>LlamaIndex</Tab>
-                    <Tab>Langchain Py</Tab>
+                <Tab>Langchain Py</Tab>
-                  </TabList>
+              </TabList>
-                  <TabPanels>
+              <TabPanels>
-                    <TabPanel>
+                <TabPanel>
-                      <SyntaxHighlighter language="python">
+                  <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>
+                  </SyntaxHighlighter>
-                    </TabPanel>
+                </TabPanel>
-                    <TabPanel>
+                <TabPanel>
-                    <SyntaxHighlighter language="python">
+                  <SyntaxHighlighter language="python">
-                        {`${selectedModel.supported_openai_params?.map((param) => `${param}\n`).join('')}`}
+                    {`${selectedModel.supported_openai_params?.map((param) => `${param}\n`).join("")}`}
-                        </SyntaxHighlighter>
+                  </SyntaxHighlighter>
-                        </TabPanel>
+                </TabPanel>
                 <TabPanel>
                   <SyntaxHighlighter language="python">
                     {`

ui/litellm-dashboard/src/components/networking.tsx

@@ -579,17 +579,14 @@ export const modelInfoCall = async (
   }
 };
 
-
+export const modelHubCall = async (accessToken: String) => {
-export const modelHubCall = async (
-  accessToken: String,
-  userID: String,
-  userRole: 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,