fix: improve fallback model names
Shows readable model names when provider data is still loading Centralizes model display fallback logic Covers fallback formatting with tests
This commit is contained in:
Bohdan Triapitsyn
@@ -0,0 +1,47 @@
|
||||
import { describe, expect, test } from 'bun:test';
|
||||
|
||||
import { getModelDisplayName, getProviderModelDisplayName, humanizeModelId } from './modelDisplay';
|
||||
|
||||
describe('modelDisplay', () => {
|
||||
test('prefers model name over ids', () => {
|
||||
expect(getModelDisplayName({ id: 'claude-sonnet-4-5', name: 'Claude Sonnet 4.5' })).toBe('Claude Sonnet 4.5');
|
||||
});
|
||||
|
||||
test('falls back to a human-readable model id when name is missing', () => {
|
||||
expect(getModelDisplayName({ id: 'claude-sonnet-4-5' })).toBe('Claude Sonnet 4.5');
|
||||
});
|
||||
|
||||
test('falls back to a human-readable explicit model id when provider data is unavailable', () => {
|
||||
expect(getProviderModelDisplayName(undefined, 'claude-sonnet-4-5')).toBe('Claude Sonnet 4.5');
|
||||
});
|
||||
|
||||
test('uses fallback label only when no model id is available', () => {
|
||||
expect(getProviderModelDisplayName(undefined, undefined, { fallbackLabel: 'Select model' })).toBe('Select model');
|
||||
});
|
||||
|
||||
test('supports provider model records and truncation', () => {
|
||||
const provider = {
|
||||
models: {
|
||||
'very-long-model-id': { id: 'very-long-model-id', name: 'Very Long Model Name' },
|
||||
},
|
||||
};
|
||||
|
||||
expect(getProviderModelDisplayName(provider, 'very-long-model-id', { maxLength: 9 })).toBe('Very L...');
|
||||
});
|
||||
|
||||
test('humanizes provider-prefixed model ids using common model catalog patterns', () => {
|
||||
expect(humanizeModelId('anthropic/claude-opus-4-7-fast')).toBe('Claude Opus 4.7 Fast');
|
||||
expect(humanizeModelId('google/gemini-3.1-flash-lite-preview')).toBe('Gemini 3.1 Flash Lite Preview');
|
||||
expect(humanizeModelId('meta-llama/llama-3.2-3b-instruct:free')).toBe('Llama 3.2 3B Instruct (free)');
|
||||
expect(humanizeModelId('openai/gpt-4o-mini-2024-07-18')).toBe('GPT-4o Mini (2024-07-18)');
|
||||
expect(humanizeModelId('openai/gpt-5.4-mini-fast')).toBe('GPT-5.4 Mini Fast');
|
||||
expect(humanizeModelId('qwen/qwen3-coder:free')).toBe('Qwen3 Coder (free)');
|
||||
expect(humanizeModelId('xai/grok-4-1-fast-non-reasoning')).toBe('Grok 4.1 Fast (Non-Reasoning)');
|
||||
expect(humanizeModelId('z-ai/glm-4.5-air')).toBe('GLM-4.5 Air');
|
||||
});
|
||||
|
||||
test('humanizes alias and custom model ids without provider data', () => {
|
||||
expect(humanizeModelId('~openai/gpt-mini-latest')).toBe('GPT Mini Latest');
|
||||
expect(humanizeModelId('my-custom_provider/myAwesomeModel-v2-fast')).toBe('My Awesome Model V2 Fast');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,271 @@
|
||||
export type DisplayModel = Record<string, unknown> & {
|
||||
id?: unknown;
|
||||
name?: unknown;
|
||||
};
|
||||
|
||||
export type DisplayProvider = {
|
||||
models?: DisplayModel[] | Record<string, DisplayModel | undefined>;
|
||||
} | null | undefined;
|
||||
|
||||
type ModelDisplayOptions = {
|
||||
fallbackLabel?: string;
|
||||
maxLength?: number;
|
||||
};
|
||||
|
||||
const normalizeString = (value: unknown): string => {
|
||||
return typeof value === 'string' ? value.trim() : '';
|
||||
};
|
||||
|
||||
const truncate = (value: string, maxLength?: number): string => {
|
||||
if (!maxLength || maxLength <= 0 || value.length <= maxLength) {
|
||||
return value;
|
||||
}
|
||||
|
||||
if (maxLength <= 3) {
|
||||
return value.slice(0, maxLength);
|
||||
}
|
||||
|
||||
return `${value.slice(0, maxLength - 3)}...`;
|
||||
};
|
||||
|
||||
const TOKEN_LABELS: Record<string, string> = {
|
||||
ai: 'AI',
|
||||
api: 'API',
|
||||
ernie: 'ERNIE',
|
||||
glm: 'GLM',
|
||||
gpt: 'GPT',
|
||||
it: 'IT',
|
||||
lfm: 'LFM',
|
||||
lm: 'LM',
|
||||
oss: 'OSS',
|
||||
pdf: 'PDF',
|
||||
rp: 'RP',
|
||||
slerp: 'SLERP',
|
||||
tars: 'TARS',
|
||||
ui: 'UI',
|
||||
vl: 'VL',
|
||||
vlm: 'VLM',
|
||||
aion: 'Aion',
|
||||
anthropic: 'Anthropic',
|
||||
chatgpt: 'ChatGPT',
|
||||
claude: 'Claude',
|
||||
codex: 'Codex',
|
||||
codestral: 'Codestral',
|
||||
command: 'Command',
|
||||
deepseek: 'DeepSeek',
|
||||
gemini: 'Gemini',
|
||||
gemma: 'Gemma',
|
||||
grok: 'Grok',
|
||||
hunyuan: 'Hunyuan',
|
||||
kimi: 'Kimi',
|
||||
llama: 'Llama',
|
||||
minimax: 'MiniMax',
|
||||
mistral: 'Mistral',
|
||||
mixtral: 'Mixtral',
|
||||
nemotron: 'Nemotron',
|
||||
openai: 'OpenAI',
|
||||
qwen: 'Qwen',
|
||||
rekaai: 'RekaAI',
|
||||
};
|
||||
|
||||
const titleCaseToken = (token: string): string => {
|
||||
if (!token) {
|
||||
return '';
|
||||
}
|
||||
return token[0].toUpperCase() + token.slice(1).toLowerCase();
|
||||
};
|
||||
|
||||
const stripProviderPrefix = (value: string): string => {
|
||||
const withoutAliasMarker = value.startsWith('~') ? value.slice(1) : value;
|
||||
const slashIndex = withoutAliasMarker.lastIndexOf('/');
|
||||
return slashIndex >= 0 ? withoutAliasMarker.slice(slashIndex + 1) : withoutAliasMarker;
|
||||
};
|
||||
|
||||
const splitColonSuffix = (value: string): { base: string; suffix: string } => {
|
||||
const colonIndex = value.lastIndexOf(':');
|
||||
if (colonIndex <= 0 || colonIndex >= value.length - 1) {
|
||||
return { base: value, suffix: '' };
|
||||
}
|
||||
|
||||
return {
|
||||
base: value.slice(0, colonIndex),
|
||||
suffix: value.slice(colonIndex + 1),
|
||||
};
|
||||
};
|
||||
|
||||
const tokenizeModelId = (value: string): string[] => {
|
||||
const rawTokens = value
|
||||
.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
|
||||
.split(/[-_\s]+/)
|
||||
.map((token) => token.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
const tokens: string[] = [];
|
||||
for (let index = 0; index < rawTokens.length; index += 1) {
|
||||
const current = rawTokens[index];
|
||||
const next = rawTokens[index + 1];
|
||||
const nextNext = rawTokens[index + 2];
|
||||
|
||||
if (/^(19|20)\d{2}$/.test(current) && /^\d{2}$/.test(next ?? '') && /^\d{2}$/.test(nextNext ?? '')) {
|
||||
tokens.push(`${current}-${next}-${nextNext}`);
|
||||
index += 2;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (/^\d$/.test(current) && /^\d$/.test(next ?? '')) {
|
||||
tokens.push(`${current}.${next}`);
|
||||
index += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
tokens.push(current);
|
||||
}
|
||||
|
||||
return tokens;
|
||||
};
|
||||
|
||||
const formatModelToken = (token: string): string => {
|
||||
const lower = token.toLowerCase();
|
||||
const mapped = TOKEN_LABELS[lower];
|
||||
if (mapped) {
|
||||
return mapped;
|
||||
}
|
||||
|
||||
const qwenMatch = lower.match(/^qwen(\d(?:\.\d+)?)$/);
|
||||
if (qwenMatch) {
|
||||
return `Qwen${qwenMatch[1]}`;
|
||||
}
|
||||
|
||||
if (/^o\d/.test(lower)) {
|
||||
return lower;
|
||||
}
|
||||
|
||||
if (/^v\d/.test(lower)) {
|
||||
return `V${token.slice(1).toUpperCase()}`;
|
||||
}
|
||||
|
||||
if (/^\d+[on]$/.test(lower)) {
|
||||
return lower;
|
||||
}
|
||||
|
||||
if (/^[a-z]\d+[a-z]?$/.test(lower)) {
|
||||
return lower.toUpperCase();
|
||||
}
|
||||
|
||||
if (/^\d+(?:x\d+)?[a-z]+$/.test(lower)) {
|
||||
return lower.replace(/[a-z]+$/i, (unit) => unit.toUpperCase());
|
||||
}
|
||||
|
||||
if (/^\d+(?:\.\d+)?[a-z]$/.test(lower)) {
|
||||
return lower.replace(/[a-z]$/i, (unit) => unit.toUpperCase());
|
||||
}
|
||||
|
||||
if (/^[a-z]+\d+(?:\.\d+)?[a-z]*$/.test(lower)) {
|
||||
return titleCaseToken(lower).replace(/([a-z])(\d)/i, '$1$2');
|
||||
}
|
||||
|
||||
return titleCaseToken(token);
|
||||
};
|
||||
|
||||
const combineModelTokens = (tokens: string[]): string[] => {
|
||||
const result = [...tokens];
|
||||
|
||||
if (result[0] === 'GPT' && result[1] && /^(?:\d|\d+[a-z]|OSS$)/i.test(result[1])) {
|
||||
result.splice(0, 2, `GPT-${result[1]}`);
|
||||
}
|
||||
|
||||
if (result[0] === 'GLM' && result[1] && /^\d/.test(result[1])) {
|
||||
result.splice(0, 2, `GLM-${result[1]}`);
|
||||
}
|
||||
|
||||
if (result[0] === 'LFM' && result[1] && /^\d/.test(result[1])) {
|
||||
result.splice(0, 2, `LFM${result[1]}`);
|
||||
}
|
||||
|
||||
if (result[0] === 'Qwen' && result[1] && /^\d/.test(result[1])) {
|
||||
result.splice(0, 2, `Qwen${result[1]}`);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const formatSuffix = (suffix: string): string => {
|
||||
const normalized = normalizeString(suffix).toLowerCase();
|
||||
if (!normalized) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (normalized === 'free' || normalized === 'thinking') {
|
||||
return normalized;
|
||||
}
|
||||
|
||||
return humanizeModelId(normalized);
|
||||
};
|
||||
|
||||
export const humanizeModelId = (modelId: string | null | undefined): string => {
|
||||
const normalized = normalizeString(modelId);
|
||||
if (!normalized) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const { base, suffix } = splitColonSuffix(stripProviderPrefix(normalized));
|
||||
const formattedTokens = combineModelTokens(tokenizeModelId(base).map(formatModelToken));
|
||||
|
||||
if (formattedTokens.length >= 2) {
|
||||
const last = formattedTokens[formattedTokens.length - 1];
|
||||
const previous = formattedTokens[formattedTokens.length - 2];
|
||||
if (last === 'Reasoning' && previous === 'Non') {
|
||||
formattedTokens.splice(formattedTokens.length - 2, 2, '(Non-Reasoning)');
|
||||
}
|
||||
}
|
||||
|
||||
const lastToken = formattedTokens[formattedTokens.length - 1];
|
||||
if (/^(19|20)\d{2}-\d{2}-\d{2}$/.test(lastToken ?? '')) {
|
||||
formattedTokens[formattedTokens.length - 1] = `(${lastToken})`;
|
||||
}
|
||||
|
||||
const displayName = formattedTokens.join(' ').replace(/\s+\(/g, ' (').trim();
|
||||
const displaySuffix = formatSuffix(suffix);
|
||||
return displaySuffix ? `${displayName} (${displaySuffix})` : displayName;
|
||||
};
|
||||
|
||||
export const getModelDisplayName = (
|
||||
model: DisplayModel | null | undefined,
|
||||
fallbackModelId?: string | null,
|
||||
options: ModelDisplayOptions = {},
|
||||
): string => {
|
||||
const name = normalizeString(model?.name);
|
||||
if (name) {
|
||||
return truncate(name, options.maxLength);
|
||||
}
|
||||
|
||||
const modelId = normalizeString(model?.id) || normalizeString(fallbackModelId);
|
||||
if (modelId) {
|
||||
return truncate(humanizeModelId(modelId), options.maxLength);
|
||||
}
|
||||
|
||||
return options.fallbackLabel ?? '';
|
||||
};
|
||||
|
||||
const getProviderModel = (provider: DisplayProvider, modelId: string): DisplayModel | undefined => {
|
||||
const models = provider?.models;
|
||||
if (!models || !modelId) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (Array.isArray(models)) {
|
||||
return models.find((model) => normalizeString(model.id) === modelId);
|
||||
}
|
||||
|
||||
return models[modelId];
|
||||
};
|
||||
|
||||
export const getProviderModelDisplayName = (
|
||||
provider: DisplayProvider,
|
||||
modelId: string | null | undefined,
|
||||
options: ModelDisplayOptions = {},
|
||||
): string => {
|
||||
const normalizedModelId = normalizeString(modelId);
|
||||
const model = getProviderModel(provider, normalizedModelId);
|
||||
return getModelDisplayName(model, normalizedModelId, options);
|
||||
};
|
||||
Reference in New Issue
Block a user