scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-09 03:18:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 108

fix(model_hub.tsx): fix string

Browse source
This commit is contained in:
Krrish Dholakia 2024-05-26 17:44:52 -07:00 • committed by Ishaan Jaff
parent 408130619b
commit 983514dc77
1 changed files with 66 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

161
ui/litellm-dashboard/src/components/model_hub.tsx
View file

@ -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;
export default ModelHub;