Skip to content

Commit feea866

Browse files
Chenglong-MSChenglong-MS
committed
model dialog
1 parent c141784 commit feea866

File tree

2 files changed

+46
-27
lines changed

2 files changed

+46
-27
lines changed

‎src/app/dfSlice.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -752,7 +752,10 @@ export const dataFormulatorSlice = createSlice({
752752

753753
state.models = [
754754
...defaultModels,
755-
...state.models.filter(e => !defaultModels.map((m: ModelConfig) => m.endpoint).includes(e.endpoint))
755+
...state.models.filter(e => !defaultModels.some((m: ModelConfig) =>
756+
m.endpoint === e.endpoint && m.model === e.model &&
757+
m.api_base === e.api_base && m.api_version === e.api_version
758+
))
756759
];
757760

758761
state.testedModels = [

‎src/views/ModelSelectionDialog.tsx

Lines changed: 42 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
242242
const assignedModel = assignedModelId ? models.find(m => m.id === assignedModelId) : undefined;
243243

244244
return (
245-
<Box
245+
<Paper
246246
key={slotType}
247247
sx={{
248248
flex: '1 1 250px',
@@ -254,8 +254,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
254254
}}
255255
>
256256
<Typography variant="body2" sx={{ fontWeight: 'bold', mb: 1 }}>
257-
{slotType} tasks <Typography variant="caption" sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>
258-
{slotType == 'generation' ? '' : '(small faster model recommended)'}</Typography>
257+
{slotType} tasks
259258
</Typography>
260259

261260
<FormControl fullWidth size="small">
@@ -270,17 +269,36 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
270269
sx={{ fontSize: '0.875rem' }}
271270
renderValue={(selected) => {
272271
if (!selected) {
273-
return <Typography sx={{ color: 'text.secondary', fontSize: '0.875rem' }}>No model assigned</Typography>;
272+
return <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
273+
<Box sx={{ flex: 1 }}>
274+
<Typography variant="body2" sx={{ fontSize: '0.875rem' }}>
275+
No model assigned
276+
</Typography>
277+
</Box>
278+
<ErrorOutlineIcon sx={{ color: 'error.main', ml: 1 }} fontSize="small" />
279+
</Box>;
274280
}
275281
const model = models.find(m => m.id === selected);
276-
return model ? `${model.endpoint}/${model.model}` : 'Unknown model';
282+
return model ? <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
283+
<Box sx={{ flex: 1 }}>
284+
<Typography variant="body2" sx={{ fontSize: '0.875rem' }}>
285+
{model.endpoint}/{model.model}
286+
{model.api_base && (
287+
<Typography variant="caption" sx={{ ml: 0.5, color: 'text.secondary', fontSize: '0.75rem' }}>
288+
({model.api_base})
289+
</Typography>
290+
)}
291+
</Typography>
292+
</Box>
293+
<CheckCircleOutlineIcon sx={{ color: 'success.main', ml: 1 }} fontSize="small" />
294+
</Box> : 'Unknown model';
277295
}}
278296
>
279297
<MenuItem value="">
280298
<Typography sx={{ color: 'text.secondary', fontSize: '0.875rem' }}>No assignment</Typography>
281299
</MenuItem>
282-
{models.filter(m => getStatus(m.id) === 'ok').map((model) => (
283-
<MenuItem key={model.id} value={model.id}>
300+
{models.map((model) => (
301+
<MenuItem key={model.id} value={model.id} disabled={getStatus(model.id) !== 'ok'}>
284302
<Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
285303
<Box sx={{ flex: 1 }}>
286304
<Typography variant="body2" sx={{ fontSize: '0.875rem' }}>
@@ -292,28 +310,21 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
292310
</Typography>
293311
)}
294312
</Box>
295-
<CheckCircleOutlineIcon sx={{ color: 'success.main', ml: 1 }} fontSize="small" />
313+
{getStatus(model.id) === 'ok' ? <CheckCircleOutlineIcon sx={{ color: 'success.main', ml: 1 }} fontSize="small" />
314+
: getStatus(model.id) === 'error' ? <ErrorOutlineIcon sx={{ color: 'error.main', ml: 1 }} fontSize="small" />
315+
: <HelpOutlineIcon sx={{ color: 'warning.main', ml: 1 }} fontSize="small" />}
296316
</Box>
297317
</MenuItem>
298318
))}
299319
</Select>
300320
</FormControl>
301-
302-
{assignedModel && (
303-
<Typography variant="caption" sx={{
304-
display: 'block',
305-
color: 'text.secondary',
306-
mt: 0.5,
307-
fontSize: '0.75rem',
308-
fontStyle: 'italic'
309-
}}>
310-
{assignedModel.endpoint}/{assignedModel.model}{assignedModel.api_base && ` (${assignedModel.api_base})`}
311-
</Typography>
312-
)}
313-
</Box>
321+
</Paper>
314322
);
315323
})}
316324
</Box>
325+
<Typography variant="caption" sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>
326+
<strong>Note:</strong> Models with strong code generation capabilities is recommended for generation tasks.
327+
</Typography>
317328
</Box>
318329
);
319330
};
@@ -499,7 +510,11 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
499510
updateModelStatus(model, status, data["message"] || "");
500511
// Only assign to slot if test is successful
501512
if (status === 'ok') {
502-
updateTempSlot('generation', id);
513+
for (let slotType of dfSelectors.getAllSlotTypes()) {
514+
if (!tempModelSlots[slotType]) {
515+
updateTempSlot(slotType, id);
516+
}
517+
}
503518
}
504519
}).catch((error) => {
505520
updateModelStatus(model, 'error', error.message)
@@ -567,6 +582,9 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
567582

568583
const borderStyle = ['error'].includes(status) ? '1px dashed lightgray' : undefined;
569584
const noBorderStyle = ['error'].includes(status) ? 'none' : undefined;
585+
586+
// Check if model is assigned to any slot
587+
const isAssignedToAnySlot = dfSelectors.getAllSlotTypes().some(slotType => isModelAssignedToSlot(model.id, slotType));
570588

571589
return (
572590
<React.Fragment key={`${model.id}`}>
@@ -575,7 +593,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
575593
sx={{
576594
'& .MuiTableCell-root': { fontSize: '0.75rem' },
577595
'&:hover': { backgroundColor: '#f8f9fa' },
578-
backgroundColor: status == 'ok' ? alpha(theme.palette.success.main, 0.07) : '#fff'
596+
backgroundColor: isAssignedToAnySlot ? alpha(theme.palette.success.main, 0.07) : '#fff'
579597
}}
580598
>
581599
<TableCell align="left" sx={{ borderBottom: noBorderStyle }}>
@@ -716,9 +734,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
716734
<strong>Configuration:</strong> Based on LiteLLM. <a href="https://docs.litellm.ai/docs/" target="_blank" rel="noopener noreferrer">See supported providers</a>.
717735
Use 'openai' provider for OpenAI-compatible APIs.
718736
</Typography>
719-
<Typography variant="caption" sx={{ fontSize: '0.75rem', color: 'warning.main' }}>
720-
<strong>Note:</strong> Models with limited code generation capabilities may fail frequently.
721-
</Typography>
737+
722738
</TableCell>
723739
</TableRow>
724740
</TableBody>

0 commit comments

Comments
 (0)