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

Merge pull request #3698 from BerriAI/litellm_ui_fix_bug_default_selected_model

Browse source 
[Fix] Polish Models Page - set max width per column, fix bug with selecting models
This commit is contained in:
Ishaan Jaff 2024-05-16 16:13:01 -07:00 • committed by GitHub
commit a0c5c402ae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 67 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -904,8 +904,9 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
<Text>Filter by Public Model Name</Text>
<Select
className="mb-4 mt-2 ml-2 w-50"
defaultValue="all"
defaultValue={selectedModelGroup? selectedModelGroup : availableModelGroups[0]}
onValueChange={(value) => setSelectedModelGroup(value === "all" ? "all" : value)}
value={selectedModelGroup ? selectedModelGroup : availableModelGroups[0]}
>
<SelectItem
value={"all"}
@ -924,85 +925,71 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
</Select>
</div>
<Card>
<Table className="mt-5">
<Table className="mt-5" style={{ maxWidth: '1500px', width: '100%' }}>
<TableHead>
<TableRow>
<TableHeaderCell>Public Model Name </TableHeaderCell>
<TableHeaderCell>
Provider
</TableHeaderCell>
{
userRole === "Admin" && (
<TableHeaderCell>
API Base
</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>
<TableHeaderCell style={{ maxWidth: '150px', whiteSpace: 'normal', wordBreak: 'break-word' }}>Public Model Name</TableHeaderCell>
<TableHeaderCell style={{ maxWidth: '100px', whiteSpace: 'normal', wordBreak: 'break-word' }}>Provider</TableHeaderCell>
{userRole === "Admin" && (
<TableHeaderCell style={{ maxWidth: '150px', whiteSpace: 'normal', wordBreak: 'break-word' }}>API Base</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>
<TableHeaderCell style={{ maxWidth: '85px', whiteSpace: 'normal', wordBreak: 'break-word' }}>Output Price <p style={{ fontSize: '10px', color: 'gray' }}>/1M Tokens ($)</p></TableHeaderCell>
<TableHeaderCell style={{ maxWidth: '85px', whiteSpace: 'normal', wordBreak: 'break-word' }}>Max Tokens</TableHeaderCell>
<TableHeaderCell style={{ maxWidth: '50px', whiteSpace: 'normal', wordBreak: 'break-word' }}>Status</TableHeaderCell>
</TableRow>
</TableHead>
<TableBody>
{ modelData.data
{modelData.data
.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) => (
<TableRow key={index}>
<TableCell>
<TableCell style={{ maxWidth: '150px', whiteSpace: 'normal', wordBreak: 'break-word' }}>
<Text>{model.model_name}</Text>
</TableCell>
<TableCell>{model.provider}</TableCell>
{
userRole === "Admin" && (
<TableCell>{model.api_base}</TableCell>
)
}
<TableCell>
<TableCell style={{ maxWidth: '100px', whiteSpace: 'normal', wordBreak: 'break-word' }}>{model.provider}</TableCell>
{userRole === "Admin" && (
<TableCell style={{ maxWidth: '150px', whiteSpace: 'normal', wordBreak: 'break-word' }}>{model.api_base}</TableCell>
)}
<TableCell style={{ maxWidth: '200px', whiteSpace: 'normal', wordBreak: 'break-word' }}>
<Accordion>
<AccordionHeader>
<Text>Litellm params</Text>
</AccordionHeader>
<AccordionBody>
<pre>
{JSON.stringify(model.cleanedLitellmParams, null, 2)}
</pre>
<pre>{JSON.stringify(model.cleanedLitellmParams, null, 2)}</pre>
</AccordionBody>
</Accordion>
</TableCell>
<TableCell>{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>{model.max_tokens}</TableCell>
<TableCell>
{
model.model_info.db_model ? <Badge icon={CheckCircleIcon} className="text-white">DB Model</Badge> : <Badge icon={XCircleIcon} className="text-black">Config Model</Badge>
}
<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>
<TableCell style={{ maxWidth: '100px', whiteSpace: 'normal', wordBreak: 'break-word' }}>{model.max_tokens}</TableCell>
<TableCell style={{ maxWidth: '100px', whiteSpace: 'normal', wordBreak: 'break-word' }}>
{model.model_info.db_model ? (
<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>
<Icon
icon={PencilAltIcon}
size="sm"
onClick={() => handleEditClick(model)}
/>
<TableCell style={{ maxWidth: '100px', whiteSpace: 'normal', wordBreak: 'break-word' }}>
<Icon icon={PencilAltIcon} size="sm" onClick={() => handleEditClick(model)} />
<DeleteModelButton modelID={model.model_info.id} accessToken={accessToken} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Table>
</Card>
</Grid>