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

144
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> </TableRow>
) </TableHead>
} <TableBody>
<TableHeaderCell> {modelData.data
Extra litellm Params .filter((model: any) =>
</TableHeaderCell> selectedModelGroup === "all" ||
<TableHeaderCell>Input Price/1M Tokens ($)</TableHeaderCell> model.model_name === selectedModelGroup ||
<TableHeaderCell>Output Price/1M Tokens ($)</TableHeaderCell> selectedModelGroup === null ||
<TableHeaderCell>Max Tokens</TableHeaderCell> selectedModelGroup === undefined ||
<TableHeaderCell>Status</TableHeaderCell> selectedModelGroup === ""
</TableRow> )
</TableHead> .map((model: any, index: number) => (
<TableBody> <TableRow key={index}>
{ modelData.data <TableCell style={{ maxWidth: '150px', whiteSpace: 'normal', wordBreak: 'break-word' }}>
.filter((model: any) => <Text>{model.model_name}</Text>
selectedModelGroup === "all" || model.model_name === selectedModelGroup || selectedModelGroup === null || selectedModelGroup === undefined || selectedModelGroup === "" </TableCell>
) <TableCell style={{ maxWidth: '100px', whiteSpace: 'normal', wordBreak: 'break-word' }}>{model.provider}</TableCell>
.map((model: any, index: number) => ( {userRole === "Admin" && (
<TableCell style={{ maxWidth: '150px', whiteSpace: 'normal', wordBreak: 'break-word' }}>{model.api_base}</TableCell>
<TableRow key={index}> )}
<TableCell> <TableCell style={{ maxWidth: '200px', whiteSpace: 'normal', wordBreak: 'break-word' }}>
<Text>{model.model_name}</Text> <Accordion>
</TableCell> <AccordionHeader>
<TableCell>{model.provider}</TableCell> <Text>Litellm params</Text>
{ </AccordionHeader>
userRole === "Admin" && ( <AccordionBody>
<TableCell>{model.api_base}</TableCell> <pre>{JSON.stringify(model.cleanedLitellmParams, null, 2)}</pre>
) </AccordionBody>
} </Accordion>
</TableCell>
<TableCell> <TableCell style={{ maxWidth: '80px', whiteSpace: 'normal', wordBreak: 'break-word' }}>{model.input_cost || model.litellm_params.input_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>
<Accordion> <TableCell style={{ maxWidth: '100px', whiteSpace: 'normal', wordBreak: 'break-word' }}>{model.max_tokens}</TableCell>
<AccordionHeader> <TableCell style={{ maxWidth: '100px', whiteSpace: 'normal', wordBreak: 'break-word' }}>
<Text>Litellm params</Text> {model.model_info.db_model ? (
</AccordionHeader> <Badge icon={CheckCircleIcon} size="xs" className="text-white">
<AccordionBody> <p style={{ fontSize: '10px' }}>DB Model</p>
<pre> </Badge>
{JSON.stringify(model.cleanedLitellmParams, null, 2)} ) : (
</pre> <Badge icon={XCircleIcon} size="xs" className="text-black">
</AccordionBody> <p style={{ fontSize: '10px' }}>Config Model</p>
</Accordion> </Badge>
)}
</TableCell> </TableCell>
<TableCell>{model.input_cost || model.litellm_params.input_cost_per_token || null}</TableCell> <TableCell style={{ maxWidth: '100px', whiteSpace: 'normal', wordBreak: 'break-word' }}>
<TableCell>{model.output_cost || model.litellm_params.output_cost_per_token || null}</TableCell> <Icon icon={PencilAltIcon} size="sm" onClick={() => handleEditClick(model)} />
<TableCell>{model.max_tokens}</TableCell> <DeleteModelButton modelID={model.model_info.id} accessToken={accessToken} />
<TableCell> </TableCell>
{ </TableRow>
model.model_info.db_model ? <Badge icon={CheckCircleIcon} className="text-white">DB Model</Badge> : <Badge icon={XCircleIcon} className="text-black">Config Model</Badge> ))}
} </TableBody>
</Table>
</TableCell>
<TableCell>
<Icon
icon={PencilAltIcon}
size="sm"
onClick={() => handleEditClick(model)}
/>
<DeleteModelButton modelID={model.model_info.id} accessToken={accessToken} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Card> </Card>
</Grid> </Grid>