v0 model hub

ui/litellm-dashboard/src/app/page.tsx

@@ -10,6 +10,7 @@ import AdminPanel from "@/components/admins";
 import Settings from "@/components/settings";
 import GeneralSettings from "@/components/general_settings";
 import BudgetPanel from "@/components/budgets/budget_panel";
+import ModelHub from "@/components/model_hub";
 import APIRef from "@/components/api_ref";
 import ChatUI from "@/components/chat_ui";
 import Sidebar from "../components/leftnav";
@@ -193,7 +194,17 @@ const CreateKeyPage = () => {
               accessToken={accessToken}
               modelData={modelData}
             />
-          ) : (
+            ) : page == "model-hub" ? (
+              <ModelHub
+              userID={userID}
+              userRole={userRole}
+              token={token}
+              accessToken={accessToken}
+              keys={keys}
+              premiumUser={premiumUser}
+            />
+            )
+            : (
             <Usage
               userID={userID}
               userRole={userRole}

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

@@ -109,6 +109,9 @@ const Sidebar: React.FC<SidebarProps> = ({
           <Menu.Item key="12" onClick={() => setPage("api_ref")}>
             <Text>API Reference</Text>
           </Menu.Item>
+          <Menu.Item key="14" onClick={() => setPage("model-hub")}>
+            <Text>Model Hub</Text>
+          </Menu.Item>
         </Menu>
       </Sider>
     </Layout>

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

@@ -0,0 +1,200 @@
+import React, { useEffect, useState } from 'react';
+
+import { modelHubCall } from "./networking";
+
+import { Card, Text, Title, Grid, Button } from "@tremor/react";
+
+import { RightOutlined } from '@ant-design/icons';
+
+import { Modal } from 'antd';
+
+
+interface ModelHubProps {
+
+  userID: string;
+
+  userRole: string;
+
+  token: string;
+
+  accessToken: string;
+
+  keys: any; // Replace with the appropriate type for 'keys' prop
+
+  premiumUser: boolean;
+
+}
+
+
+
+const ModelHub: React.FC<ModelHubProps> = ({
+
+  userID,
+
+  userRole,
+
+  token,
+
+  accessToken,
+
+  keys,
+
+  premiumUser,
+
+}) => {
+
+  const [modelHubData, setModelHubData] = useState(null);
+
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const [selectedModel, setSelectedModel] = useState(null);
+
+
+  useEffect(() => {
+
+    if (!accessToken || !token || !userRole || !userID) {
+
+      return;
+
+    }
+
+
+
+    const fetchData = async () => {
+
+      try {
+
+        const _modelHubData = await modelHubCall(accessToken, userID, userRole);
+
+        console.log("ModelHubData:", _modelHubData);
+
+        setModelHubData(_modelHubData.data);
+
+        
+
+      } catch (error) {
+
+        console.error("There was an error fetching the model data", error);
+
+      }
+
+    };
+
+
+
+    fetchData();
+
+  }, [accessToken, token, userRole, userID]);
+
+
+
+  const showModal = (model) => {
+
+    setSelectedModel(model);
+
+    setIsModalVisible(true);
+
+  };
+
+
+
+  const handleOk = () => {
+
+    setIsModalVisible(false);
+
+    setSelectedModel(null);
+
+  };
+
+
+
+  const handleCancel = () => {
+
+    setIsModalVisible(false);
+
+    setSelectedModel(null);
+
+  };
+
+
+
+  return (
+
+    <div>
+
+      <Title>Model Hub</Title>
+
+      <div style={{ width: '100%' }}>
+
+      <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-4">
+
+          {modelHubData && modelHubData.map((model: any) => (
+    <Card
+
+    key={model.model_id}
+
+    className="mt-5 mx-8"
+
+  >
+
+    <pre>
+
+    <Title level={4}>{model.model_name}</Title>
+
+    </pre>
+
+    <div style={{ marginTop: 'auto', textAlign: 'right' }}>
+
+      <a href="#" onClick={() => showModal(model)} style={{ color: '#1890ff', fontSize: 'smaller' }}>
+
+        View more <RightOutlined />
+
+      </a>
+
+    </div>
+
+  </Card>
+
+          ))}
+
+        </div>
+
+      </div>
+
+      <Modal
+
+        title="Model Usage"
+
+        visible={isModalVisible}
+
+        onOk={handleOk}
+
+        onCancel={handleCancel}
+
+      >
+
+        {selectedModel && (
+
+          <div>
+
+            <p><strong>Model Name:</strong> {selectedModel.model_name}</p>
+
+            <p><strong>Additional Params:</strong> {JSON.stringify(selectedModel.litellm_params)}</p>
+
+            {/* Add other model details here */}
+
+          </div>
+
+        )}
+
+      </Modal>
+
+    </div>
+
+  );
+
+};
+
+
+
+export default ModelHub;

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

@@ -579,6 +579,46 @@ export const modelInfoCall = async (
   }
 };
 
+
+export const modelHubCall = async (
+  accessToken: String,
+  userID: String,
+  userRole: String
+) => {
+  /**
+   * Get all models on proxy
+   */
+  try {
+    let url = proxyBaseUrl ? `${proxyBaseUrl}/v2/model/info` : `/v2/model/info`;
+
+    //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();
+      message.error(errorData, 10);
+      throw new Error("Network response was not ok");
+    }
+
+    const data = await response.json();
+    console.log("modelHubCall:", data);
+    //message.info("Received model data");
+    return data;
+    // Handle success - you might want to update some state or UI based on the created key
+  } catch (error) {
+    console.error("Failed to create key:", error);
+    throw error;
+  }
+};
+
+
+
 export const modelMetricsCall = async (
   accessToken: String,
   userID: String,