phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

fix models page

Browse source
This commit is contained in:
Ishaan Jaff 2024-05-16 16:10:53 -07:00
parent a1eff57ded
commit a65c1f8340
1 changed files with 65 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

94
ui/litellm-dashboard/src/components/model_dashboard.tsx
View file

@ -925,85 +925,71 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
</Select> </Select>
</div> </div>
<Card> <Card>
<Table className="mt-5"> <Table className="mt-5" style={{ maxWidth: '1500px', width: '100%' }}>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableHeaderCell style={{ maxWidth: '150px', whiteSpace: 'normal', wordBreak: 'break-word' }}>Public Model Name</TableHeaderCell>
<TableHeaderCell>Public Model Name </TableHeaderCell> <TableHeaderCell style={{ maxWidth: '100px', whiteSpace: 'normal', wordBreak: 'break-word' }}>Provider</TableHeaderCell>
{userRole === "Admin" && (
<TableHeaderCell> <TableHeaderCell style={{ maxWidth: '150px', whiteSpace: 'normal', wordBreak: 'break-word' }}>API Base</TableHeaderCell>
Provider )}
</TableHeaderCell> <TableHeaderCell style={{ maxWidth: '200px', whiteSpace: 'normal', wordBreak: 'break-word' }}>Extra litellm Params</TableHeaderCell>
{ <TableHeaderCell style={{ maxWidth: '85px', whiteSpace: 'normal', wordBreak: 'break-word' }}>Input Price <p style={{ fontSize: '10px', color: 'gray' }}>/1M Tokens ($)</p></TableHeaderCell>
userRole === "Admin" && ( <TableHeaderCell style={{ maxWidth: '85px', whiteSpace: 'normal', wordBreak: 'break-word' }}>Output Price <p style={{ fontSize: '10px', color: 'gray' }}>/1M Tokens ($)</p></TableHeaderCell>
<TableHeaderCell> <TableHeaderCell style={{ maxWidth: '85px', whiteSpace: 'normal', wordBreak: 'break-word' }}>Max Tokens</TableHeaderCell>
API Base <TableHeaderCell style={{ maxWidth: '50px', whiteSpace: 'normal', wordBreak: 'break-word' }}>Status</TableHeaderCell>
</TableHeaderCell>
)
}
<TableHeaderCell>
Extra litellm Params
</TableHeaderCell>
<TableHeaderCell>Input Price/1M Tokens ($)</TableHeaderCell>
<TableHeaderCell>Output Price/1M Tokens ($)</TableHeaderCell>
<TableHeaderCell>Max Tokens</TableHeaderCell>
<TableHeaderCell>Status</TableHeaderCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{ modelData.data {modelData.data
.filter((model: any) => .filter((model: any) =>
selectedModelGroup === "all" || model.model_name === selectedModelGroup || selectedModelGroup === null || selectedModelGroup === undefined || selectedModelGroup === "" selectedModelGroup === "all" ||
model.model_name === selectedModelGroup ||
selectedModelGroup === null ||
selectedModelGroup === undefined ||
selectedModelGroup === ""
) )
.map((model: any, index: number) => ( .map((model: any, index: number) => (
<TableRow key={index}> <TableRow key={index}>
<TableCell> <TableCell style={{ maxWidth: '150px', whiteSpace: 'normal', wordBreak: 'break-word' }}>
<Text>{model.model_name}</Text> <Text>{model.model_name}</Text>
</TableCell> </TableCell>
<TableCell>{model.provider}</TableCell> <TableCell style={{ maxWidth: '100px', whiteSpace: 'normal', wordBreak: 'break-word' }}>{model.provider}</TableCell>
{ {userRole === "Admin" && (
userRole === "Admin" && ( <TableCell style={{ maxWidth: '150px', whiteSpace: 'normal', wordBreak: 'break-word' }}>{model.api_base}</TableCell>
<TableCell>{model.api_base}</TableCell> )}
) <TableCell style={{ maxWidth: '200px', whiteSpace: 'normal', wordBreak: 'break-word' }}>
}
<TableCell>
<Accordion> <Accordion>
<AccordionHeader> <AccordionHeader>
<Text>Litellm params</Text> <Text>Litellm params</Text>
</AccordionHeader> </AccordionHeader>
<AccordionBody> <AccordionBody>
<pre> <pre>{JSON.stringify(model.cleanedLitellmParams, null, 2)}</pre>
{JSON.stringify(model.cleanedLitellmParams, null, 2)}
</pre>
</AccordionBody> </AccordionBody>
</Accordion> </Accordion>
</TableCell> </TableCell>
<TableCell>{model.input_cost || model.litellm_params.input_cost_per_token || null}</TableCell> <TableCell style={{ maxWidth: '80px', whiteSpace: 'normal', wordBreak: 'break-word' }}>{model.input_cost || model.litellm_params.input_cost_per_token || null}</TableCell>
<TableCell>{model.output_cost || model.litellm_params.output_cost_per_token || null}</TableCell> <TableCell style={{ maxWidth: '80px', whiteSpace: 'normal', wordBreak: 'break-word' }}>{model.output_cost || model.litellm_params.output_cost_per_token || null}</TableCell>
<TableCell>{model.max_tokens}</TableCell> <TableCell style={{ maxWidth: '100px', whiteSpace: 'normal', wordBreak: 'break-word' }}>{model.max_tokens}</TableCell>
<TableCell> <TableCell style={{ maxWidth: '100px', whiteSpace: 'normal', wordBreak: 'break-word' }}>
{ {model.model_info.db_model ? (
model.model_info.db_model ? <Badge icon={CheckCircleIcon} className="text-white">DB Model</Badge> : <Badge icon={XCircleIcon} className="text-black">Config Model</Badge> <Badge icon={CheckCircleIcon} size="xs" className="text-white">
} <p style={{ fontSize: '10px' }}>DB Model</p>
</Badge>
) : (
<Badge icon={XCircleIcon} size="xs" className="text-black">
<p style={{ fontSize: '10px' }}>Config Model</p>
</Badge>
)}
</TableCell> </TableCell>
<TableCell> <TableCell style={{ maxWidth: '100px', whiteSpace: 'normal', wordBreak: 'break-word' }}>
<Icon <Icon icon={PencilAltIcon} size="sm" onClick={() => handleEditClick(model)} />
icon={PencilAltIcon}
size="sm"
onClick={() => handleEditClick(model)}
/>
<DeleteModelButton modelID={model.model_info.id} accessToken={accessToken} /> <DeleteModelButton modelID={model.model_info.id} accessToken={accessToken} />
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
</Table> </Table>
</Card> </Card>
</Grid> </Grid>