feat: add realtime workflow vision tools

frontend/src/components/workflow/WorkflowCanvas.tsx

@@ -798,6 +798,7 @@ export function WorkflowCanvas({
                           llmOptions={modelOptions.llm}
                           asrOptions={modelOptions.asr}
                           ttsOptions={modelOptions.tts}
+                          realtimeOptions={modelOptions.realtime}
                           visionOptions={modelOptions.vision}
                           dynamicVariableOptions={dynamicVariableOptions}
                           workflowSettings={settings}

frontend/src/components/workflow/panels/AgentNodePanel.tsx

@@ -37,6 +37,7 @@ export function AgentNodePanel({
   llmOptions,
   asrOptions,
   ttsOptions,
+  realtimeOptions,
   visionOptions,
   dynamicVariableOptions,
 }: {
@@ -49,6 +50,7 @@ export function AgentNodePanel({
   llmOptions: ModelOption[];
   asrOptions: ModelOption[];
   ttsOptions: ModelOption[];
+  realtimeOptions: ModelOption[];
   visionOptions: ModelOption[];
   dynamicVariableOptions: ModelOption[];
 }) {
@@ -71,6 +73,11 @@ export function AgentNodePanel({
     }
     setPatch({
       inheritGlobalConfig: false,
+      visionEnabled:
+        draft.visionEnabled ?? workflowSettings.visionEnabled,
+      visionModelResourceId:
+        (draft.visionModelResourceId as string) ||
+        workflowSettings.visionModelResourceId,
       ...(!isRealtime
         ? {
             llmResourceId:
@@ -79,11 +86,6 @@ export function AgentNodePanel({
               (draft.asrResourceId as string) || workflowSettings.asr || "",
             ttsResourceId:
               (draft.ttsResourceId as string) || workflowSettings.tts || "",
-            visionEnabled:
-              draft.visionEnabled ?? workflowSettings.visionEnabled,
-            visionModelResourceId:
-              (draft.visionModelResourceId as string) ||
-              workflowSettings.visionModelResourceId,
             enableInterrupt:
               draft.enableInterrupt ?? workflowSettings.allowInterrupt,
             turnConfig: agentTurnConfig,
@@ -295,12 +297,29 @@ export function AgentNodePanel({
           </PanelAnchor> : null}
 
           <PanelAnchor id="capabilities">
-            {!isRealtime ? <VisionConfigSection
+            <VisionConfigSection
               description="配置当前 Agent 是否可以按需理解用户摄像头画面"
-              hint="开启后，该 Agent 会获得读取当前视频画面的工具。选择「模型自己」时，当前大语言模型必须支持图片输入。"
+              hint={
+                isRealtime
+                  ? "开启后，该 Agent 会获得读取当前视频画面的工具。Qwen Audio Realtime 需要选择独立视觉模型。"
+                  : "开启后，该 Agent 会获得读取当前视频画面的工具。选择「模型自己」时，当前大语言模型必须支持图片输入。"
+              }
               enabled={Boolean(draft.visionEnabled)}
               modelResourceId={draft.visionModelResourceId ?? ""}
-              mainModelResourceId={(draft.llmResourceId as string) || ""}
+              mainModelResourceId={
+                isRealtime
+                  ? workflowSettings.realtime ?? ""
+                  : (draft.llmResourceId as string) || ""
+              }
+              mainModelSupportsImageInput={
+                isRealtime
+                  ? Boolean(
+                      realtimeOptions.find(
+                        (option) => option.value === workflowSettings.realtime,
+                      )?.supportImageInput,
+                    )
+                  : undefined
+              }
               modelOptions={visionOptions}
               onEnabledChange={(visionEnabled) =>
                 setPatch({
@@ -311,7 +330,7 @@ export function AgentNodePanel({
               onModelResourceIdChange={(visionModelResourceId) =>
                 set("visionModelResourceId", visionModelResourceId)
               }
-            /> : null}
+            />
 
           <SectionCard
             icon={<Database size={15} />}

frontend/src/components/workflow/panels/GlobalSettingsPanel.tsx

@@ -175,12 +175,29 @@ export function GlobalSettingsPanel({
       </PanelAnchor>
 
       <PanelAnchor id="capabilities">
-        {settings.runtimeMode === "pipeline" ? <VisionConfigSection
+        <VisionConfigSection
           description="配置继承全局设置的 Agent 是否可以按需理解用户摄像头画面"
-          hint="开启后，继承全局配置的 Agent 会获得读取当前视频画面的工具。选择「模型自己」时，全局大语言模型必须支持图片输入。"
+          hint={
+            settings.runtimeMode === "realtime"
+              ? "开启后，Agent 会获得读取当前视频画面的工具。Qwen Audio Realtime 需要选择独立视觉模型。"
+              : "开启后，继承全局配置的 Agent 会获得读取当前视频画面的工具。选择「模型自己」时，全局大语言模型必须支持图片输入。"
+          }
           enabled={settings.visionEnabled}
           modelResourceId={settings.visionModelResourceId}
-          mainModelResourceId={settings.llm ?? ""}
+          mainModelResourceId={
+            settings.runtimeMode === "realtime"
+              ? settings.realtime ?? ""
+              : settings.llm ?? ""
+          }
+          mainModelSupportsImageInput={
+            settings.runtimeMode === "realtime"
+              ? Boolean(
+                  modelOptions.realtime.find(
+                    (option) => option.value === settings.realtime,
+                  )?.supportImageInput,
+                )
+              : undefined
+          }
           modelOptions={modelOptions.vision}
           onEnabledChange={(visionEnabled) =>
             onSettingsChange({
@@ -192,7 +209,7 @@ export function GlobalSettingsPanel({
           onModelResourceIdChange={(visionModelResourceId) =>
             onSettingsChange({ ...settings, visionModelResourceId })
           }
-        /> : null}
+        />
 
         <SectionCard
           icon={<Database size={15} />}

frontend/src/components/workflow/panels/NodeSettingsPanel.tsx

@@ -31,6 +31,7 @@ export function NodeSettingsPanel({
   llmOptions,
   asrOptions,
   ttsOptions,
+  realtimeOptions,
   visionOptions,
   dynamicVariableOptions,
   workflowSettings,
@@ -44,6 +45,7 @@ export function NodeSettingsPanel({
   llmOptions: ModelOption[];
   asrOptions: ModelOption[];
   ttsOptions: ModelOption[];
+  realtimeOptions: ModelOption[];
   visionOptions: ModelOption[];
   dynamicVariableOptions: ModelOption[];
   workflowSettings: WorkflowSettings;
@@ -136,6 +138,7 @@ export function NodeSettingsPanel({
         llmOptions={llmOptions}
         asrOptions={asrOptions}
         ttsOptions={ttsOptions}
+        realtimeOptions={realtimeOptions}
         visionOptions={visionOptions}
         dynamicVariableOptions={dynamicVariableOptions}
       />

frontend/src/components/workflow/types.ts

@@ -30,6 +30,7 @@ export type ModelOption = {
   value: string;
   label: string;
   disabled?: boolean;
+  supportImageInput?: boolean;
   toolType?: Tool["type"];
   systemKind?: SystemToolKind;
 };