From 983514dc77921abd33fa76a7a0e0c6f2fe1dcb58 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Sun, 26 May 2024 17:44:52 -0700
Subject: [PATCH] fix(model_hub.tsx): fix string

---
 .../src/components/model_hub.tsx              | 161 +++++++-----------
 1 file changed, 66 insertions(+), 95 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/model_hub.tsx b/ui/litellm-dashboard/src/components/model_hub.tsx
index 2bec7d0138a..c4b776ec294 100644
--- a/ui/litellm-dashboard/src/components/model_hub.tsx
+++ b/ui/litellm-dashboard/src/components/model_hub.tsx
@@ -1,20 +1,26 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 
 import { modelHubCall } from "./networking";
 
-import { Card, Text, Title, Grid, Button, Badge, Tab,
-    TabGroup,
-    TabList,
-    TabPanel,
-    TabPanels, } from "@tremor/react";
+import {
+  Card,
+  Text,
+  Title,
+  Grid,
+  Button,
+  Badge,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from "@tremor/react";
 
-import { RightOutlined, CopyOutlined } from '@ant-design/icons';
+import { RightOutlined, CopyOutlined } from "@ant-design/icons";
 
-import { Modal, Tooltip } from 'antd';
+import { Modal, Tooltip } from "antd";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 
-
-
 interface ModelHubProps {
   userID: string | null;
   userRole: string | null;
@@ -22,7 +28,6 @@ interface ModelHubProps {
   accessToken: string | null;
   keys: any; // Replace with the appropriate type for 'keys' prop
   premiumUser: boolean;
-
 }
 
 interface ModelInfo {
@@ -39,9 +44,10 @@ interface ModelInfo {
   }
 
 
+  // Add other properties if needed
+}
 
 const ModelHub: React.FC<ModelHubProps> = ({
-
   userID,
 
   userRole,
@@ -53,114 +59,80 @@ const ModelHub: React.FC<ModelHubProps> = ({
   keys,
 
   premiumUser,
-
 }) => {
-
-  const [modelHubData, setModelHubData] =  useState<ModelInfo[] | null>(null);
+  const [modelHubData, setModelHubData] = useState<ModelInfo[] | null>(null);
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const [selectedModel, setSelectedModel] =  useState<null | ModelInfo>(null);
-
+  const [selectedModel, setSelectedModel] = useState<null | ModelInfo>(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: ModelInfo) => {
-
     setSelectedModel(model);
 
     setIsModalVisible(true);
-
   };
 
-
-
   const handleOk = () => {
-
     setIsModalVisible(false);
 
     setSelectedModel(null);
-
   };
 
-
-
   const handleCancel = () => {
-
     setIsModalVisible(false);
 
     setSelectedModel(null);
-
   };
 
-
-
   const copyToClipboard = (text: string) => {
-
     navigator.clipboard.writeText(text);
-
   };
 
-
-
   return (
-
     <div>
+      <div className="w-full m-2 mt-2 p-8">
+        <div className="relative w-full"></div>
 
-<div className="w-full m-2 mt-2 p-8">
-
-            <div className="relative w-full">
-
- 
-
-</div>
-
-
-        <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">
-        ✨ Share
-        </a>
-
-
-</Button>
-            
+        <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>
         </div>
-      
-              
+
         <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-4">
+          {modelHubData &&
+            modelHubData.map((model: ModelInfo) => (
+              <Card key={model.model_group} className="mt-5 mx-8">
+                <pre className="flex justify-between">
+                  <Title>{model.model_group}</Title>
+                  <Tooltip title={model.model_group}>
+                    <CopyOutlined
+                      onClick={() => copyToClipboard(model.model_group)}
+                      style={{ cursor: "pointer", marginRight: "10px" }}
+                    />
+                  </Tooltip>
+                </pre>
 
         
           {modelHubData && modelHubData.map((model: ModelInfo) => (
@@ -214,27 +186,34 @@ const ModelHub: React.FC<ModelHubProps> = ({
 
           ))}
 
+                <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={selectedModel && selectedModel.model_group ? selectedModel.model_group : "Unknown Model"}
         width={800}
-
         visible={isModalVisible}
         footer={null}
-
         onOk={handleOk}
-
         onCancel={handleCancel}
-
       >
-
         {selectedModel && (
-
           <div>
+            <p>
+              <strong>Model Name:</strong> {selectedModel.model_group}
+            </p>
 
             <p className='mb-4'><strong>Model Information & Usage:</strong> {selectedModel.model_group}</p>
            
@@ -319,11 +298,11 @@ response = query_engine.query("What did the author do growing up?")
 print(response)
 
             `}
-                      </SyntaxHighlighter>
-                    </TabPanel>
-                    <TabPanel>
-                      <SyntaxHighlighter language="python">
-                        {`
+                  </SyntaxHighlighter>
+                </TabPanel>
+                <TabPanel>
+                  <SyntaxHighlighter language="python">
+                    {`
 from langchain.chat_models import ChatOpenAI
 from langchain.prompts.chat import (
     ChatPromptTemplate,
@@ -351,27 +330,19 @@ response = chat(messages)
 print(response)
 
             `}
-                      </SyntaxHighlighter>
-                    </TabPanel>
-                  </TabPanels>
-                </TabGroup>
+                  </SyntaxHighlighter>
+                </TabPanel>
+              </TabPanels>
+            </TabGroup>
 
             {/* <p><strong>Additional Params:</strong> {JSON.stringify(selectedModel.litellm_params)}</p> */}
 
             {/* Add other model details here */}
-
           </div>
-
         )}
-
       </Modal>
-
     </div>
-
   );
-
 };
 
-
-
-export default ModelHub;
\ No newline at end of file
+export default ModelHub;