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>
   );