update document

ui/src/components/ConfigProvider.tsx

@@ -95,14 +95,16 @@ export function ConfigProvider({ children }: ConfigProviderProps) {
             think: typeof data.Router.think === 'string' ? data.Router.think : '',
             longContext: typeof data.Router.longContext === 'string' ? data.Router.longContext : '',
             longContextThreshold: typeof data.Router.longContextThreshold === 'number' ? data.Router.longContextThreshold : 60000,
-            webSearch: typeof data.Router.webSearch === 'string' ? data.Router.webSearch : ''
+            webSearch: typeof data.Router.webSearch === 'string' ? data.Router.webSearch : '',
+            image: typeof data.Router.image === 'string' ? data.Router.image : ''
           } : {
             default: '',
             background: '',
             think: '',
             longContext: '',
             longContextThreshold: 60000,
-            webSearch: ''
+            webSearch: '',
+            image: ''
           },
           CUSTOM_ROUTER_PATH: typeof data.CUSTOM_ROUTER_PATH === 'string' ? data.CUSTOM_ROUTER_PATH : ''
         };
@@ -132,7 +134,8 @@ export function ConfigProvider({ children }: ConfigProviderProps) {
               think: '',
               longContext: '',
               longContextThreshold: 60000,
-              webSearch: ''
+              webSearch: '',
+              image: ''
             },
             CUSTOM_ROUTER_PATH: ''
           });

ui/src/components/Router.tsx

@@ -30,7 +30,8 @@ export function Router() {
     think: "",
     longContext: "",
     longContextThreshold: 60000,
-    webSearch: ""
+    webSearch: "",
+    image: ""
   };
 
   const handleRouterChange = (field: string, value: string | number) => {
@@ -40,6 +41,10 @@ export function Router() {
     setConfig({ ...config, Router: newRouter });
   };
 
+  const handleForceUseImageAgentChange = (value: boolean) => {
+    setConfig({ ...config, forceUseImageAgent: value });
+  };
+
   // Handle case where config.Providers might be null or undefined
   const providers = Array.isArray(config.Providers) ? config.Providers : [];
   
@@ -133,6 +138,33 @@ export function Router() {
             emptyPlaceholder={t("router.noModelFound")}
           />
         </div>
+        <div className="space-y-2">
+          <div className="flex items-center gap-4">
+            <div className="flex-1">
+              <Label>{t("router.image")} (beta)</Label>
+              <Combobox
+                options={modelOptions}
+                value={routerConfig.image || ""}
+                onChange={(value) => handleRouterChange("image", value)}
+                placeholder={t("router.selectModel")}
+                searchPlaceholder={t("router.searchModel")}
+                emptyPlaceholder={t("router.noModelFound")}
+              />
+            </div>
+            <div className="w-48">
+              <Label htmlFor="forceUseImageAgent">{t("router.forceUseImageAgent")}</Label>
+              <select
+                id="forceUseImageAgent"
+                value={config.forceUseImageAgent ? "true" : "false"}
+                onChange={(e) => handleForceUseImageAgentChange(e.target.value === "true")}
+                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                <option value="false">{t("common.no")}</option>
+                <option value="true">{t("common.yes")}</option>
+              </select>
+            </div>
+          </div>
+        </div>
       </CardContent>
     </Card>
   );

ui/src/locales/en.json

@@ -1,4 +1,8 @@
 {
+  "common": {
+    "yes": "Yes",
+    "no": "No"
+  },
   "app": {
     "title": "Claude Code Router",
     "save": "Save",
@@ -107,6 +111,8 @@
     "longContext": "Long Context",
     "longContextThreshold": "Context Threshold",
     "webSearch": "Web Search",
+    "image": "Image",
+    "forceUseImageAgent": "Force Use Image Agent",
     "selectModel": "Select a model...",
     "searchModel": "Search model...",
     "noModelFound": "No model found."

ui/src/locales/zh.json

@@ -1,4 +1,8 @@
 {
+  "common": {
+    "yes": "是",
+    "no": "否"
+  },
   "app": {
     "title": "Claude Code Router",
     "save": "保存",
@@ -107,6 +111,8 @@
     "longContext": "长上下文",
     "longContextThreshold": "上下文阈值",
     "webSearch": "网络搜索",
+    "image": "图像",
+    "forceUseImageAgent": "强制使用图像代理",
     "selectModel": "选择一个模型...",
     "searchModel": "搜索模型...",
     "noModelFound": "未找到模型."

ui/src/types.ts

@@ -18,6 +18,7 @@ export interface RouterConfig {
     longContext: string;
     longContextThreshold: number;
     webSearch: string;
+    image: string;
     custom?: any;
 }
 
@@ -53,6 +54,7 @@ export interface Config {
   Router: RouterConfig;
   transformers: Transformer[];
   StatusLine?: StatusLineConfig;
+  forceUseImageAgent?: boolean;
   // Top-level settings
   LOG: boolean;
   LOG_LEVEL: string;