EasyFlow-Tech-Dev/EasyFlow
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完善模型能力识别与验证

Browse Source 
- 自动识别模型类型、视觉、推理和工具能力并保留手动覆盖

- 使用 AgentScope 工具与视觉探测并统一管理端配置反馈
This commit is contained in:
陈子默
2026-07-27 19:40:23 +08:00
parent 0dc5c3ca55
commit 567fd12706
21 changed files with 1059 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

395
easyflow-ui-admin/app/src/views/ai/model/AddModelModal.vue
View File

@@ -6,25 +6,32 @@ import { computed, reactive, ref, watch } from 'vue';
import { EasyFlowFormModal } from '@easyflow/common-ui';
import { IconifyIcon } from '@easyflow/icons';
import {
ArrowDown,
ArrowUp,
InfoFilled,
Loading,
} from '@element-plus/icons-vue';
import {
ElForm,
ElFormItem,
ElIcon,
ElInput,
ElMessage,
ElOption,
ElSelect,
ElTooltip,
} from 'element-plus';
import { resolveModelCapabilities } from '#/api/ai/llm';
import { api } from '#/api/request';
import { $t } from '#/locales';
import {
getDefaultModelAbility,
handleTagClick as handleTagClickUtil,
syncTagSelectedStatus as syncTagSelectedStatusUtil,
} from '#/views/ai/model/modelUtils/model-ability';
import {
generateFeaturesFromModelAbility,
resetModelAbility,
} from '#/views/ai/model/modelUtils/model-ability-utils';
import { resetModelAbility } from '#/views/ai/model/modelUtils/model-ability-utils';
type AgentHttpVersionPolicy = 'AUTO' | 'HTTP_1_1' | 'HTTP_2_PREFERRED';
type AgentSystemContentFormat = 'STRING' | 'TEXT_PARTS';
@@ -47,14 +54,14 @@ interface FormData {
apiKey: string;
endpoint: string;
requestPath: string;
supportThinking: boolean;
supportTool: boolean;
supportImage: boolean;
supportThinking: boolean | null;
supportTool: boolean | null;
supportImage: boolean | null;
supportAudio: boolean;
supportFree: boolean;
supportVideo: boolean;
supportImageB64Only: boolean;
supportToolMessage: boolean;
supportToolMessage: boolean | null;
options: ModelOptions;
}
@@ -82,6 +89,11 @@ const formDataRef = ref();
const isAdd = ref(true);
const dialogVisible = ref(false);
const btnLoading = ref(false);
const showAdvanced = ref(false);
const capabilityLoading = ref(false);
const autoDetectedModelType = ref(false);
let capabilityRequestSequence = 0;
let manuallyEditedModelName = '';
const formData = reactive<FormData>({
modelType: '',
@@ -94,14 +106,14 @@ const formData = reactive<FormData>({
apiKey: '',
endpoint: '',
requestPath: '',
supportThinking: false,
supportTool: false,
supportImage: false,
supportThinking: null,
supportTool: null,
supportImage: null,
supportAudio: false,
supportFree: false,
supportVideo: false,
supportImageB64Only: false,
supportToolMessage: true,
supportToolMessage: null,
options: {
agentHttpVersionPolicy: 'AUTO',
agentSystemContentFormat: 'STRING',
@@ -151,11 +163,7 @@ const normalizeModelOptions = (options?: unknown): ModelOptions => {
};
const modelAbility = ref<ModelAbilityItem[]>(getDefaultModelAbility());
const visibleModelAbility = computed(() =>
modelAbility.value.filter(
(item) => item.field !== 'supportImageB64Only' || formData.supportImage,
),
);
const visibleModelAbility = computed(() => modelAbility.value);
type SelectableModelType = '' | 'embeddingModel' | 'rerankModel';
const selectedModelType = ref<SelectableModelType>('');
@@ -175,11 +183,7 @@ const abilityIconMap: Record<string, string> = {
rerankModel: 'svg:data-center',
thinking: 'svg:llm',
tool: 'svg:wrench',
video: 'mdi:video-outline',
image: 'mdi:image-outline',
audio: 'mdi:microphone-outline',
imageB64: 'mdi:file-image-outline',
toolMessage: 'mdi:hammer',
};
const syncTagSelectedStatus = () => {
@@ -188,35 +192,61 @@ const syncTagSelectedStatus = () => {
const resetAbilitySelection = () => {
resetModelAbility(modelAbility.value);
formData.supportThinking = false;
formData.supportTool = false;
formData.supportImage = false;
formData.supportToolMessage = false;
syncTagSelectedStatus();
};
const handleTagClick = (item: ModelAbilityItem) => {
const markCapabilitiesAsManuallyEdited = () => {
manuallyEditedModelName = formData.modelName.trim();
capabilityRequestSequence += 1;
capabilityLoading.value = false;
};
const handleAbilityChipClick = (item: ModelAbilityItem) => {
if (hasSpecialModelType.value) {
return;
}
item.selected = !item.selected;
formData[item.field] = item.selected;
if (item.field === 'supportImage' && !item.selected) {
formData.supportImageB64Only = false;
const base64Ability = modelAbility.value.find(
(ability) => ability.field === 'supportImageB64Only',
);
if (base64Ability) base64Ability.selected = false;
markCapabilitiesAsManuallyEdited();
handleTagClickUtil(item, formData);
if (item.field === 'supportTool') {
formData.supportToolMessage = formData.supportTool;
}
};
const handleModelNameInput = () => {
manuallyEditedModelName = '';
capabilityRequestSequence += 1;
capabilityLoading.value = false;
autoDetectedModelType.value = false;
selectedModelType.value = '';
formData.supportThinking = null;
formData.supportTool = null;
formData.supportImage = null;
formData.supportToolMessage = null;
syncTagSelectedStatus();
};
const handleModelTypeChipClick = (
modelType: Exclude<SelectableModelType, ''>,
) => {
const nextType = selectedModelType.value === modelType ? '' : modelType;
markCapabilitiesAsManuallyEdited();
autoDetectedModelType.value = false;
selectedModelType.value = nextType;
if (nextType) {
resetAbilitySelection();
} else {
formData.supportThinking = null;
formData.supportTool = null;
formData.supportImage = null;
formData.supportToolMessage = null;
syncTagSelectedStatus();
}
};
const isAbilityChipDisabled = () => hasSpecialModelType.value;
const getAbilityIcon = (value: string) => abilityIconMap[value] || 'svg:llm';
const resolveModelType = (): FormData['modelType'] => {
@@ -244,14 +274,14 @@ const resetFormData = () => {
apiKey: '',
endpoint: '',
requestPath: '',
supportThinking: false,
supportTool: false,
supportThinking: null,
supportTool: null,
supportAudio: false,
supportVideo: false,
supportImage: false,
supportImage: null,
supportImageB64Only: false,
supportFree: false,
supportToolMessage: true,
supportToolMessage: null,
options: normalizeModelOptions(),
});
};
@@ -261,6 +291,9 @@ defineExpose({
isAdd.value = true;
formDataRef.value?.resetFields();
resetFormData();
showAdvanced.value = false;
autoDetectedModelType.value = false;
manuallyEditedModelName = '';
selectedModelType.value = normalizeSelectableModelType(modelType);
if (selectedModelType.value) {
resetAbilitySelection();
@@ -274,6 +307,9 @@ defineExpose({
dialogVisible.value = true;
isAdd.value = false;
resetFormData();
showAdvanced.value = false;
autoDetectedModelType.value = false;
manuallyEditedModelName = '';
Object.assign(formData, {
id: item.id,
modelType: item.modelType || '',
@@ -286,15 +322,14 @@ defineExpose({
endpoint: item.endpoint || '',
requestPath: item.requestPath || '',
apiKey: item.apiKey || '',
supportThinking: item.supportThinking || false,
supportThinking: item.supportThinking ?? null,
supportAudio: item.supportAudio || false,
supportImage: item.supportImage || false,
supportImage: item.supportImage ?? null,
supportImageB64Only: item.supportImageB64Only || false,
supportVideo: item.supportVideo || false,
supportTool: item.supportTool || false,
supportTool: item.supportTool ?? null,
supportFree: item.supportFree || false,
supportToolMessage:
item.supportToolMessage === undefined ? true : item.supportToolMessage,
supportToolMessage: item.supportToolMessage ?? null,
options: normalizeModelOptions(item.options),
});
selectedModelType.value = normalizeSelectableModelType(item.modelType);
@@ -307,9 +342,65 @@ defineExpose({
});
const closeDialog = () => {
capabilityRequestSequence += 1;
dialogVisible.value = false;
};
const detectModelCapabilities = async () => {
const modelName = formData.modelName.trim();
if (!modelName || manuallyEditedModelName === modelName) {
return;
}
const requestSequence = ++capabilityRequestSequence;
capabilityLoading.value = true;
try {
const providerId = isAdd.value
? selectedProviderId.value
: formData.providerId;
const res = await resolveModelCapabilities({ modelName, providerId });
if (
requestSequence !== capabilityRequestSequence ||
res.errorCode !== 0 ||
!res.data
) {
return;
}
const capability = res.data;
manuallyEditedModelName = '';
if (!capability.detected) {
if (autoDetectedModelType.value) {
selectedModelType.value = '';
}
autoDetectedModelType.value = false;
formData.supportThinking = null;
formData.supportTool = null;
formData.supportImage = null;
formData.supportToolMessage = null;
syncTagSelectedStatus();
return;
}
autoDetectedModelType.value = true;
formData.modelType = capability.modelType;
selectedModelType.value = normalizeSelectableModelType(
capability.modelType,
);
formData.supportThinking = capability.supportThinking ?? null;
formData.supportTool = capability.supportTool ?? null;
formData.supportImage = capability.supportImage ?? null;
formData.supportToolMessage = capability.supportTool ?? null;
syncTagSelectedStatus();
} catch {
// 自动识别失败不阻塞表单，保存时后端仍会再次解析能力。
} finally {
if (requestSequence === capabilityRequestSequence) {
capabilityLoading.value = false;
}
}
};
const rules = {
title: [{ required: true, message: $t('message.required'), trigger: 'blur' }],
modelName: [
@@ -323,19 +414,11 @@ const rules = {
const save = async () => {
btnLoading.value = true;
const modelType = resolveModelType();
const features = generateFeaturesFromModelAbility(modelAbility.value);
if (modelType !== 'chatModel') {
for (const key of Object.keys(features) as Array<keyof typeof features>) {
features[key] = false;
}
}
try {
await formDataRef.value.validate();
const submitData = {
...formData,
...features,
modelType,
providerId: isAdd.value ? selectedProviderId.value : formData.providerId,
};
@@ -393,6 +476,8 @@ const save = async () => {
<ElInput
v-model.trim="formData.modelName"
placeholder="例如：gpt-4.1 / glm-4.5 / qwen3:8b"
@blur="detectModelCapabilities"
@input="handleModelNameInput"
/>
</ElFormItem>
<ElFormItem prop="groupName" :label="$t('llm.groupName')">
@@ -402,21 +487,40 @@ const save = async () => {
/>
</ElFormItem>
<ElFormItem
:label="$t('llm.ability')"
class="model-modal__ability-item"
>
<div class="model-modal__ability-panel">
<ElFormItem class="model-modal__ability-item">
<template #label>
<span class="model-modal__ability-label">
{{ $t('llm.ability') }}
<ElTooltip
:content="$t('llm.abilityChangeTip')"
effect="light"
placement="top"
>
<button
type="button"
class="model-modal__ability-info"
:aria-label="$t('llm.abilityChangeTip')"
>
<ElIcon><InfoFilled /></ElIcon>
</button>
</ElTooltip>
</span>
</template>
<div
class="model-modal__ability-panel"
:aria-busy="capabilityLoading"
>
<div class="model-modal__ability-toolbar">
<button
v-for="item in modelTypeAbilityOptions"
:key="item.value"
type="button"
class="model-modal__ability-chip"
class="model-modal__ability-chip is-interactive"
:class="[
`is-tone-${item.value}`,
{ 'is-active': selectedModelType === item.value },
]"
:aria-pressed="selectedModelType === item.value"
@click="handleModelTypeChipClick(item.value)"
>
<IconifyIcon
@@ -433,14 +537,15 @@ const save = async () => {
v-for="item in visibleModelAbility"
:key="item.value"
type="button"
class="model-modal__ability-chip"
class="model-modal__ability-chip is-interactive"
:class="{
'is-active': item.selected,
'is-disabled': isAbilityChipDisabled(),
'is-disabled': hasSpecialModelType,
[`is-tone-${item.value}`]: true,
}"
:disabled="isAbilityChipDisabled()"
@click="handleTagClick(item)"
:aria-pressed="item.selected"
:disabled="hasSpecialModelType"
@click="handleAbilityChipClick(item)"
>
<IconifyIcon
:icon="getAbilityIcon(item.value)"
@@ -448,36 +553,60 @@ const save = async () => {
/>
{{ item.label }}
</button>
<ElIcon
v-if="capabilityLoading"
class="model-modal__ability-loading is-loading"
aria-label="正在识别模型能力"
>
<Loading />
</ElIcon>
</div>
</div>
</ElFormItem>
<ElFormItem v-if="!hasSpecialModelType" label="Agent HTTP 传输">
<ElSelect
v-model="formData.options.agentHttpVersionPolicy"
aria-label="Agent HTTP 传输"
<div v-if="!hasSpecialModelType" class="model-modal__advanced">
<button
type="button"
class="model-modal__advanced-toggle"
:aria-expanded="showAdvanced"
@click="showAdvanced = !showAdvanced"
>
<ElOption
v-for="item in agentHttpVersionOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</ElSelect>
</ElFormItem>
<ElFormItem v-if="!hasSpecialModelType" label="System 消息格式">
<ElSelect
v-model="formData.options.agentSystemContentFormat"
aria-label="System 消息格式"
>
<ElOption
v-for="item in agentSystemContentFormatOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</ElSelect>
</ElFormItem>
<span>高级设置</span>
<ElIcon>
<ArrowUp v-if="showAdvanced" />
<ArrowDown v-else />
</ElIcon>
</button>
<div v-if="showAdvanced" class="model-modal__advanced-body">
<ElFormItem label="Agent HTTP 传输">
<ElSelect
v-model="formData.options.agentHttpVersionPolicy"
aria-label="Agent HTTP 传输"
>
<ElOption
v-for="item in agentHttpVersionOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</ElSelect>
</ElFormItem>
<ElFormItem label="System 消息格式">
<ElSelect
v-model="formData.options.agentSystemContentFormat"
aria-label="System 消息格式"
>
<ElOption
v-for="item in agentSystemContentFormatOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</ElSelect>
</ElFormItem>
</div>
</div>
</div>
</ElForm>
</div>
@@ -511,6 +640,33 @@ const save = async () => {
margin-top: 4px;
}
.model-modal__ability-label {
display: inline-flex;
gap: var(--space-1);
align-items: center;
}
.model-modal__ability-info {
display: inline-flex;
padding: 0;
color: hsl(var(--text-muted));
cursor: help;
background: transparent;
border: 0;
border-radius: var(--radius-control);
transition: color var(--motion-duration-base) var(--motion-ease-standard);
}
.model-modal__ability-info:hover,
.model-modal__ability-info:focus-visible {
color: hsl(var(--primary));
}
.model-modal__ability-info:focus-visible {
outline: 2px solid hsl(var(--primary) / 24%);
outline-offset: 2px;
}
.model-modal__ability-panel {
padding: 2px;
overflow: hidden;
@@ -543,7 +699,7 @@ const save = async () => {
font-weight: 600;
line-height: 1;
color: hsl(var(--text-muted));
cursor: pointer;
cursor: default;
background: hsl(var(--surface-contrast-soft) / 86%);
border: 1px solid transparent;
border-radius: 999px;
@@ -555,8 +711,12 @@ const save = async () => {
box-shadow 0.2s ease;
}
.model-modal__ability-chip:hover:not(:disabled),
.model-modal__ability-chip:focus-visible:not(:disabled) {
.model-modal__ability-chip.is-interactive {
cursor: pointer;
}
.model-modal__ability-chip.is-interactive:hover,
.model-modal__ability-chip.is-interactive:focus-visible {
color: hsl(var(--text-strong));
box-shadow: 0 10px 18px -14px hsl(var(--foreground) / 28%);
transform: translateY(-1px);
@@ -570,7 +730,7 @@ const save = async () => {
}
.model-modal__ability-chip.is-disabled {
cursor: not-allowed;
cursor: default;
box-shadow: none;
opacity: 0.56;
transform: none;
@@ -581,9 +741,13 @@ const save = async () => {
opacity: 0.88;
}
.model-modal__ability-loading {
margin-inline-start: var(--space-1);
color: hsl(var(--text-muted));
}
.model-modal__ability-chip.is-active.is-tone-embeddingModel,
.model-modal__ability-chip.is-active.is-tone-thinking,
.model-modal__ability-chip.is-active.is-tone-toolMessage {
.model-modal__ability-chip.is-active.is-tone-thinking {
color: hsl(var(--primary));
background: hsl(var(--primary) / 10%);
border-color: hsl(var(--primary) / 18%);
@@ -598,21 +762,56 @@ const save = async () => {
box-shadow: inset 0 0 0 1px hsl(var(--warning) / 14%);
}
.model-modal__ability-chip.is-active.is-tone-image,
.model-modal__ability-chip.is-active.is-tone-imageB64 {
.model-modal__ability-chip.is-active.is-tone-image {
color: hsl(var(--success));
background: hsl(var(--success) / 12%);
border-color: hsl(var(--success) / 18%);
box-shadow: inset 0 0 0 1px hsl(var(--success) / 14%);
}
.model-modal__ability-chip.is-active.is-tone-audio,
.model-modal__ability-chip.is-active.is-tone-video,
.model-modal__ability-chip.is-active.is-tone-free {
color: hsl(var(--danger));
background: hsl(var(--danger) / 10%);
border-color: hsl(var(--danger) / 16%);
box-shadow: inset 0 0 0 1px hsl(var(--danger) / 12%);
.model-modal__advanced {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.model-modal__advanced-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--space-2) var(--space-3);
font-size: 13px;
color: hsl(var(--text-muted));
cursor: pointer;
background: hsl(var(--surface-contrast-soft) / 68%);
border: 1px solid hsl(var(--divider-faint) / 56%);
border-radius: var(--radius-control);
transition:
color var(--motion-duration-base) var(--motion-ease-standard),
border-color var(--motion-duration-base) var(--motion-ease-standard),
background var(--motion-duration-base) var(--motion-ease-standard);
}
.model-modal__advanced-toggle:hover,
.model-modal__advanced-toggle:focus-visible {
color: hsl(var(--text-strong));
background: hsl(var(--surface-contrast-soft));
border-color: hsl(var(--divider-faint));
}
.model-modal__advanced-body :deep(.el-form-item) {
margin-bottom: 0;
}
.model-modal__advanced-body {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.model-modal__advanced-body :deep(.el-select) {
width: 100%;
}
@media (max-width: 640px) {