Integrate ComfyUI agents and video workflows

2026-05-22 04:46:15 +08:00
parent 3c12738138
commit c1074ddf71
35 changed files with 2527 additions and 213 deletions
@@ -9,29 +9,40 @@ import { buildUpdateReminder } from './helpers/updateCenterPresentation.js';
 const VERSION = '1.3.0';

 const FEATURES = [
-  { icon: '🌐', title: '统一代理网关', desc: '一个 Key、一个入口，兼容 OpenAI / Claude 下游格式' },
-  { icon: '🧠', title: '智能路由引擎', desc: '按成本、延迟、成功率自动选择最优通道，故障自动转移' },
-  { icon: '📡', title: '多站点聚合', desc: '集中管理 New API / One API / OneHub / DoneHub / Veloera 等' },
-  { icon: '🔍', title: '自动模型发现', desc: '上游新增模型自动出现在模型列表，零配置路由生成' },
-  { icon: '🏪', title: '模型广场', desc: '跨站模型覆盖、定价对比、延迟与成功率实测数据' },
-  { icon: '✅', title: '自动签到', desc: '定时签到 + 余额刷新，不再手动操心' },
-  { icon: '🔔', title: '多渠道告警', desc: 'Webhook / Bark / Server酱 / 邮件，余额不足及时提醒' },
-  { icon: '📦', title: '轻量部署', desc: '单 Docker 容器，内置 SQLite，无外部依赖' },
+  { icon: 'GW', title: '统一模型网关', desc: '一个入口聚合 OpenAI / Claude / Gemini / 方舟等兼容上游，统一鉴权、计费与日志。' },
+  { icon: 'RT', title: '模型路由与容灾', desc: '按模型、账号、站点和通道优先级调度，失败后自动冷却并切换到可用通道。' },
+  { icon: 'AC', title: '站点与账号管理', desc: '集中维护站点、账号、API Key、OAuth、下游 Key 和普通用户可用模型。' },
+  { icon: 'MD', title: '模型广场', desc: '聚合各站点模型可用性、账号覆盖、绑定令牌与路由状态，便于快速修路由。' },
+  { icon: 'CU', title: 'ComfyUI 工作台', desc: '内置多租户 ComfyUI 容器池，支持用 BoosAPI 模型驱动文本、图像和视频节点。' },
+  { icon: 'AG', title: 'ComfyUI Agent', desc: '面向工作流创作的对话助手，支持附件、多会话、用户 API Key 和模型路由选择。' },
+  { icon: 'PI', title: '生图助手', desc: '提供提示词模板、比例尺寸控制和图像模型调用，管理员与普通用户均可使用。' },
+  { icon: 'VD', title: '视频任务模板', desc: '支持火山方舟 Step1 创建视频任务、Step2 查询任务结果，并可复用 BoosAPI 模型路由。' },
+  { icon: 'CK', title: '签到与余额刷新', desc: '按站点/账号执行签到、余额刷新、健康检查和连接状态追踪。' },
+  { icon: 'NT', title: '通知与审计', desc: 'Webhook / Bark / Server酱 / Telegram / SMTP 告警，配合代理日志和程序事件排障。' },
 ];

 const TECH_STACK = [
-  { name: 'Fastify', desc: '高性能 Node.js 后端框架' },
-  { name: 'React', desc: '用户界面库' },
-  { name: 'TypeScript', desc: '端到端类型安全' },
-  { name: 'Tailwind CSS v4', desc: '原子化样式框架' },
-  { name: 'Drizzle ORM', desc: '轻量 TypeScript ORM' },
-  { name: 'SQLite', desc: '零配置嵌入式数据库' },
+  { name: 'Rust', desc: '后端核心服务，提供代理、路由、认证、任务和静态资源服务。' },
+  { name: 'Axum / Tokio', desc: '异步 HTTP 服务、SSE、后台任务和容器生命周期管理。' },
+  { name: 'SQLx', desc: '类型化数据库访问与迁移管理。' },
+  { name: 'SQLite', desc: '默认嵌入式数据库，适合单机部署和低运维成本场景。' },
+  { name: 'React / Vite', desc: '管理后台、普通用户面板、模型测试器和 Agent 界面。' },
+  { name: 'ComfyUI / Docker', desc: '视频工作台和多租户工作流容器运行环境。' },
 ];

 const LINKS = [
-  { label: 'GitHub', href: 'https://github.com/cita-777/boosapi', icon: '📂' },
-  { label: 'Docker Hub', href: 'https://hub.docker.com/r/1467078763/boosapi', icon: '🐳' },
-  { label: '站点文档', href: SITE_DOCS_URL, icon: '📚' },
+  { label: 'GitHub', href: 'https://github.com/cita-777/boosapi', icon: 'GH' },
+  { label: 'Docker Hub', href: 'https://hub.docker.com/r/1467078763/boosapi', icon: 'DH' },
+  { label: '站点文档', href: SITE_DOCS_URL, icon: 'DOC' },
+];
+
+const ENDPOINTS = [
+  { path: '/v1/chat/completions', desc: 'OpenAI 兼容对话代理，支持非流式与流式。' },
+  { path: '/v1/responses', desc: 'Responses API 兼容代理，可接入支持该协议的上游。' },
+  { path: '/v1/images/generations', desc: '图像生成代理，供生图助手和 ComfyUI 图像节点使用。' },
+  { path: '/v1/videos', desc: '视频生成任务入口，已适配火山方舟任务创建。' },
+  { path: '/v1/videos/{id}', desc: '视频任务查询入口，已适配火山方舟任务轮询。' },
+  { path: '/v1/models', desc: '仅暴露当前可路由、未冷却、账号有效的模型列表。' },
 ];

 export default function About() {
@@ -99,7 +110,24 @@ export default function About() {
          </div>
        </div>
        <div style={{ fontSize: 14, color: 'var(--color-text-secondary)', lineHeight: 1.8 }}>
-          {tr('中转站的中转站 — 将你在各处注册的 New API / One API / OneHub 等 AI 中转站聚合为一个统一网关。一个 API Key、一个入口，自动发现模型、智能路由、成本最优。')}
+          {tr('BoosAPI 是一个自托管 AI 模型网关与工作台。它把多站点账号、下游 Key、模型路由、ComfyUI、图像生成、视频任务和普通用户面板收束到同一个 Rust 服务中，让前端、Agent 和 ComfyUI 节点都能使用后台已经配置好的模型。')}
+        </div>
+        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 14 }}>
+          {['Rust Backend', 'OpenAI Compatible', 'ComfyUI', 'Picture Agent', 'Volcengine Video'].map((tag) => (
+            <span
+              key={tag}
+              style={{
+                border: '1px solid var(--color-border-light)',
+                borderRadius: 8,
+                padding: '5px 9px',
+                fontSize: 12,
+                color: 'var(--color-text-secondary)',
+                background: 'var(--color-bg-secondary)',
+              }}
+            >
+              {tag}
+            </span>
+          ))}
        </div>
      </div>

@@ -137,7 +165,22 @@ export default function About() {
              display: 'flex', gap: 10, padding: '8px 0',
              borderBottom: '1px solid var(--color-border-light)',
            }}>
-              <span style={{ fontSize: 18, lineHeight: '24px', flexShrink: 0 }}>{f.icon}</span>
+              <span style={{
+                width: 34,
+                height: 26,
+                borderRadius: 8,
+                border: '1px solid var(--color-border-light)',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: 11,
+                fontWeight: 700,
+                color: 'var(--color-primary)',
+                background: 'var(--color-bg-secondary)',
+                flexShrink: 0,
+              }}>
+                {f.icon}
+              </span>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{tr(f.title)}</div>
                <div style={{ fontSize: 12, color: 'var(--color-text-tertiary)', marginTop: 2, lineHeight: 1.5 }}>
@@ -149,8 +192,34 @@ export default function About() {
        </div>
      </div>

-      {/* Tech Stack */}
      <div className="card animate-slide-up stagger-3" style={{ padding: 22, marginBottom: 14 }}>
+        <h3 style={{ fontSize: 15, fontWeight: 600, marginBottom: 14 }}>{tr('兼容入口')}</h3>
+        <div style={{ display: 'grid', gap: 9 }}>
+          {ENDPOINTS.map((endpoint) => (
+            <div
+              key={endpoint.path}
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'minmax(190px, 260px) 1fr',
+                gap: 12,
+                alignItems: 'start',
+                padding: '9px 0',
+                borderBottom: '1px solid var(--color-border-light)',
+              }}
+            >
+              <code style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--color-primary)' }}>
+                {endpoint.path}
+              </code>
+              <div style={{ fontSize: 12, color: 'var(--color-text-tertiary)', lineHeight: 1.6 }}>
+                {tr(endpoint.desc)}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Tech Stack */}
+      <div className="card animate-slide-up stagger-4" style={{ padding: 22, marginBottom: 14 }}>
        <h3 style={{ fontSize: 15, fontWeight: 600, marginBottom: 14 }}>{tr('技术栈')}</h3>
        <div style={{
          display: 'grid',
@@ -174,7 +243,7 @@ export default function About() {
      </div>

      {/* Links */}
-      <div className="card animate-slide-up stagger-4" style={{ padding: 22, marginBottom: 14 }}>
+      <div className="card animate-slide-up stagger-5" style={{ padding: 22, marginBottom: 14 }}>
        <h3 style={{ fontSize: 15, fontWeight: 600, marginBottom: 14 }}>{tr('项目链接')}</h3>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          {LINKS.map((l) => (
@@ -195,7 +264,7 @@ export default function About() {
              onMouseEnter={(e) => (e.currentTarget.style.borderColor = 'var(--color-primary)')}
              onMouseLeave={(e) => (e.currentTarget.style.borderColor = 'var(--color-border-light)')}
            >
-              <span>{l.icon}</span>
+              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>{l.icon}</span>
              <span>{tr(l.label)}</span>
            </a>
          ))}
@@ -206,7 +275,7 @@ export default function About() {
      <div className="card animate-slide-up stagger-5" style={{ padding: 22 }}>
        <h3 style={{ fontSize: 15, fontWeight: 600, marginBottom: 10 }}>{tr('数据与隐私')}</h3>
        <div style={{ fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.8 }}>
-          {tr('BoosAPI 完全自托管，所有数据（账号、令牌、路由、日志）均存储在本地 SQLite 数据库中，不会向任何第三方发送数据。代理请求仅在你的服务器与上游站点之间直连传输。')}
+          {tr('BoosAPI 完全自托管，账号、令牌、路由、日志、普通用户和工作台状态均保存在你的运行环境中。代理请求只在你的服务器、ComfyUI 容器与已配置上游之间流转；内置系统 Key 会被保护，后台列表中只展示脱敏值。')}
        </div>
      </div>
    </div>
@@ -1371,7 +1371,15 @@ export default function ModelTester() {
        rawMode: customRequestMode,
        ...(customRequestMode
          ? { rawJsonText: customRequestBody }
-          : { jsonBody: { model: inputs.model, prompt: assetPrompt.trim() } }),
+          : {
+            jsonBody: {
+              model: inputs.model,
+              prompt: assetPrompt.trim(),
+              ratio: '16:9',
+              fps: 24,
+              duration: 5,
+            },
+          }),
      };
    }

@@ -1379,7 +1387,7 @@ export default function ModelTester() {
      if (!videoInspectId.trim()) return null;
      return {
        method: videoInspectAction,
-        path: `/v1/videos/${encodeURIComponent(videoInspectId.trim())}`,
+        path: `/v1/videos/${encodeURIComponent(videoInspectId.trim())}?model=${encodeURIComponent(inputs.model)}`,
        requestKind: 'empty',
        stream: false,
        jobMode: false,
@@ -0,0 +1,632 @@
+import React, { CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { fetchSessionResponse } from '../api.js';
+import { clearSession, getSessionToken, type SessionAudience } from '../authSession.js';
+
+type AgentImage = {
+  id: string;
+  url: string;
+  prompt: string;
+  model: string;
+  mode: 'generate' | 'edit';
+  createdAt: number;
+};
+
+type PictureMode = 'generate' | 'edit';
+
+type PictureAgentStatus = {
+  success?: boolean;
+  mode?: string;
+  role?: string;
+  keyName?: string;
+  upstreamLabel?: string;
+};
+
+type PromptTemplate = {
+  id: string;
+  title: string;
+  tag: string;
+  size: string;
+  image: string;
+  prompt: string;
+  source?: {
+    name?: string;
+    url?: string;
+    postNumber?: number;
+    username?: string;
+  };
+};
+
+type GalleryItem = {
+  post_number?: number;
+  username?: string;
+  prompt?: string;
+  images?: string[];
+  image_host_url?: string;
+};
+
+const DEFAULT_PROMPT = 'A precise editorial product photo of a translucent glass robot painting a small neon city, sharp focus, clean background';
+const TEMPLATE_GALLERY_JSON_URL = 'https://weiyyin.github.io/linux-do-gpt-image/linux_do_2036927_prompts_images.filtered.json';
+const QUALITY_OPTIONS = ['auto', 'low', 'medium', 'high'];
+const ASPECT_OPTIONS = [
+  { value: '1:1', label: '1:1 方图', width: 1024, height: 1024 },
+  { value: '2:3', label: '2:3 竖图', width: 1024, height: 1536 },
+  { value: '3:2', label: '3:2 横图', width: 1536, height: 1024 },
+  { value: '9:16', label: '9:16 竖屏', width: 1024, height: 1792 },
+  { value: '16:9', label: '16:9 宽屏', width: 1792, height: 1024 },
+  { value: 'auto', label: '自动', width: 0, height: 0 },
+  { value: 'custom', label: '自定义', width: 1024, height: 1024 },
+];
+const STYLE_PRESETS = [
+  {
+    label: '商业摄影',
+    prompt: 'premium commercial product photography, clean studio lighting, sharp details, refined composition',
+  },
+  {
+    label: '电影感',
+    prompt: 'cinematic lighting, 35mm lens, dramatic atmosphere, rich color grading, high detail',
+  },
+  {
+    label: '角色设定',
+    prompt: 'character concept art, full body, clear silhouette, detailed outfit, neutral background',
+  },
+  {
+    label: '国潮插画',
+    prompt: 'modern Chinese illustration style, elegant linework, vivid but balanced colors, poster composition',
+  },
+];
+
+function makeId() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  return `picture-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function extractImageUrls(payload: any): string[] {
+  const data = Array.isArray(payload?.data) ? payload.data : [];
+  return data
+    .map((item: any) => {
+      if (typeof item?.url === 'string' && item.url.trim()) return item.url.trim();
+      if (typeof item?.b64_json === 'string' && item.b64_json.trim()) {
+        return `data:image/png;base64,${item.b64_json.trim()}`;
+      }
+      return '';
+    })
+    .filter(Boolean);
+}
+
+async function parseError(response: Response) {
+  const text = await response.text().catch(() => '');
+  if (!text) return `HTTP ${response.status}`;
+  try {
+    const value = JSON.parse(text);
+    return value?.error?.message || value?.error || value?.message || text.slice(0, 180);
+  } catch {
+    return text.slice(0, 180);
+  }
+}
+
+function getFilename(image: AgentImage) {
+  const safeModel = image.model.replace(/[^a-z0-9_-]+/gi, '-').slice(0, 32) || 'image';
+  return `shengtu-${safeModel}-${new Date(image.createdAt).toISOString().slice(0, 19).replace(/[:T]/g, '-')}.png`;
+}
+
+function clampDimension(value: number) {
+  if (!Number.isFinite(value)) return 1024;
+  return Math.min(4096, Math.max(256, Math.round(value)));
+}
+
+function parseSizeValue(value: string): { width: number; height: number } | null {
+  const match = /^(\d{2,5})x(\d{2,5})$/i.exec(value.trim());
+  if (!match) return null;
+  return {
+    width: clampDimension(Number(match[1])),
+    height: clampDimension(Number(match[2])),
+  };
+}
+
+function aspectFromSize(size: string) {
+  if (size === 'auto') return 'auto';
+  const parsed = parseSizeValue(size);
+  if (!parsed) return 'custom';
+  const match = ASPECT_OPTIONS.find((option) => option.width === parsed.width && option.height === parsed.height);
+  return match?.value || 'custom';
+}
+
+function buildSize(aspect: string, width: number, height: number) {
+  if (aspect === 'auto') return 'auto';
+  if (aspect === 'custom') return `${clampDimension(width)}x${clampDimension(height)}`;
+  const option = ASPECT_OPTIONS.find((item) => item.value === aspect);
+  if (!option || !option.width || !option.height) return 'auto';
+  return `${option.width}x${option.height}`;
+}
+
+function templateTitle(prompt: string, postNumber?: number) {
+  const clean = prompt.split(/\s+/).join(' ').trim();
+  let title = Array.from(clean).slice(0, 18).join('');
+  if (!title) title = postNumber ? `#${postNumber}` : '参考模板';
+  if (Array.from(clean).length > 18) title += '...';
+  return title;
+}
+
+function templateTag(prompt: string) {
+  const lower = prompt.toLowerCase();
+  if (prompt.includes('海报') || lower.includes('poster')) return '海报';
+  if (prompt.includes('漫画') || lower.includes('comic')) return '漫画';
+  if (prompt.includes('图鉴') || prompt.includes('信息图') || lower.includes('infographic')) return '图鉴';
+  if (prompt.includes('贴纸') || lower.includes('sticker') || lower.includes('mascot')) return '贴纸';
+  if (prompt.includes('分镜') || lower.includes('storyboard')) return '分镜';
+  return '参考';
+}
+
+function templateSize(prompt: string) {
+  const lower = prompt.toLowerCase();
+  if (lower.includes('16:9') || prompt.includes('横版')) return '1536x1024';
+  if (lower.includes('9:16') || lower.includes('--ar 9:16') || prompt.includes('竖版')) return '1024x1536';
+  if (lower.includes('1:1') || prompt.includes('方图')) return '1024x1024';
+  return 'auto';
+}
+
+function normalizeGalleryItems(items: GalleryItem[], limit = 48): PromptTemplate[] {
+  return items
+    .map<PromptTemplate | null>((item) => {
+      const prompt = (item.prompt || '').trim();
+      const image = (item.images || []).find((value) => value.startsWith('http'))
+        || (item.image_host_url || '').trim();
+      if (Array.from(prompt).length < 20 || !image.startsWith('http')) return null;
+      return {
+        id: item.post_number ? `linux-do-${item.post_number}` : `linux-do-${templateTitle(prompt)}`,
+        title: templateTitle(prompt, item.post_number),
+        tag: templateTag(prompt),
+        size: templateSize(prompt),
+        image,
+        prompt,
+        source: {
+          name: 'Linux Do GPT Image Gallery',
+          url: 'https://weiyyin.github.io/linux-do-gpt-image/prompt_gallery.html',
+          postNumber: item.post_number,
+          username: item.username,
+        },
+      } satisfies PromptTemplate;
+    })
+    .filter((value): value is PromptTemplate => value !== null)
+    .slice(0, limit);
+}
+
+async function loadGalleryTemplatesDirectly(limit = 48): Promise<PromptTemplate[]> {
+  const response = await fetch(TEMPLATE_GALLERY_JSON_URL, { cache: 'no-store' });
+  if (!response.ok) throw new Error(`gallery HTTP ${response.status}`);
+  const items = await response.json();
+  return normalizeGalleryItems(Array.isArray(items) ? items : [], limit);
+}
+
+export default function PictureAgent() {
+  const location = useLocation();
+  const audience: SessionAudience = location.pathname.startsWith('/user/') ? 'user' : 'admin';
+  const token = getSessionToken(audience, localStorage);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [status, setStatus] = useState<PictureAgentStatus | null>(null);
+  const [models, setModels] = useState<string[]>([]);
+  const [model, setModel] = useState('');
+  const [prompt, setPrompt] = useState(DEFAULT_PROMPT);
+  const [mode, setMode] = useState<PictureMode>('generate');
+  const [aspect, setAspect] = useState('1:1');
+  const [customWidth, setCustomWidth] = useState(1024);
+  const [customHeight, setCustomHeight] = useState(1024);
+  const [quality, setQuality] = useState('auto');
+  const [templates, setTemplates] = useState<PromptTemplate[]>([]);
+  const [templatesLoading, setTemplatesLoading] = useState(false);
+  const [templatesError, setTemplatesError] = useState('');
+  const [sourceFile, setSourceFile] = useState<File | null>(null);
+  const [sourcePreview, setSourcePreview] = useState('');
+  const [images, setImages] = useState<AgentImage[]>([]);
+  const [selectedId, setSelectedId] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [bootError, setBootError] = useState('');
+  const [error, setError] = useState('');
+
+  const selectedImage = images.find((image) => image.id === selectedId) ?? images[0] ?? null;
+  const modeLabel = mode === 'edit' ? '图片编辑' : '文生图';
+  const resultLabel = selectedImage?.mode === 'edit' ? '编辑结果' : '生成结果';
+  const resolvedSize = buildSize(aspect, customWidth, customHeight);
+
+  const authedFetch = useCallback((url: string, options: RequestInit & { timeoutMs?: number } = {}) => {
+    return fetchSessionResponse(audience, url, options);
+  }, [audience]);
+
+  useEffect(() => {
+    let ignore = false;
+    async function load() {
+      if (!token) {
+        clearSession(audience, localStorage);
+        setBootError(audience === 'user' ? '用户会话已过期，请重新登录。' : '管理员会话已过期，请重新登录。');
+        return;
+      }
+      setBootError('');
+      setTemplatesLoading(true);
+      setTemplatesError('');
+      try {
+        const [statusRes, modelsRes, templatesRes] = await Promise.all([
+          authedFetch('/api/picture-agent/status', { timeoutMs: 15_000 }),
+          authedFetch('/api/picture-agent/models', { timeoutMs: 15_000 }),
+          authedFetch('/api/picture-agent/templates?limit=48', { timeoutMs: 30_000 }),
+        ]);
+        if (!statusRes.ok) throw new Error(await parseError(statusRes));
+        if (!modelsRes.ok) throw new Error(await parseError(modelsRes));
+        const nextStatus = await statusRes.json();
+        const nextModels = await modelsRes.json();
+        let nextTemplates: PromptTemplate[] = [];
+        if (templatesRes.ok) {
+          const templatePayload = await templatesRes.json();
+          nextTemplates = Array.isArray(templatePayload?.templates) ? templatePayload.templates : [];
+        } else {
+          try {
+            nextTemplates = await loadGalleryTemplatesDirectly(48);
+          } catch {
+            setTemplatesError(await parseError(templatesRes));
+          }
+        }
+        if (ignore) return;
+        const availableModels = Array.isArray(nextModels?.models) ? nextModels.models : [];
+        setStatus(nextStatus);
+        setModels(availableModels);
+        setTemplates(nextTemplates);
+        setModel((current) => current || nextModels?.defaultModel || availableModels[0] || 'gpt-image-2');
+      } catch (err: any) {
+        if (!ignore) setBootError(err?.message || '生图助手初始化失败');
+      } finally {
+        if (!ignore) setTemplatesLoading(false);
+      }
+    }
+    void load();
+    return () => {
+      ignore = true;
+    };
+  }, [audience, authedFetch, token]);
+
+  useEffect(() => {
+    if (!sourceFile) {
+      setSourcePreview('');
+      return;
+    }
+    const url = URL.createObjectURL(sourceFile);
+    setSourcePreview(url);
+    return () => URL.revokeObjectURL(url);
+  }, [sourceFile]);
+
+  const canSubmit = useMemo(() => {
+    if (loading) return false;
+    if (!prompt.trim()) return false;
+    if (!model.trim()) return false;
+    if (mode === 'edit' && !sourceFile) return false;
+    return true;
+  }, [loading, mode, model, prompt, sourceFile]);
+
+  const handleSubmit = async () => {
+    if (!canSubmit) return;
+    setLoading(true);
+    setError('');
+    try {
+      let response: Response;
+      if (mode === 'edit') {
+        const form = new FormData();
+        form.set('model', model.trim());
+        form.set('prompt', prompt.trim());
+        form.set('size', resolvedSize);
+        form.set('quality', quality);
+        if (sourceFile) form.set('image', sourceFile, sourceFile.name || 'source.png');
+        response = await authedFetch('/api/picture-agent/images/edits', {
+          method: 'POST',
+          body: form,
+          timeoutMs: 180_000,
+        });
+      } else {
+        response = await authedFetch('/api/picture-agent/images/generations', {
+          method: 'POST',
+          body: JSON.stringify({
+            model: model.trim(),
+            prompt: prompt.trim(),
+            size: resolvedSize,
+            quality,
+          }),
+          timeoutMs: 180_000,
+        });
+      }
+
+      if (!response.ok) throw new Error(await parseError(response));
+      const payload = await response.json();
+      const urls = extractImageUrls(payload);
+      if (urls.length === 0) throw new Error('上游没有返回图片 URL 或 base64 图片。');
+
+      const createdAt = Date.now();
+      const nextImages = urls.map((url) => ({
+        id: makeId(),
+        url,
+        prompt: prompt.trim(),
+        model: model.trim(),
+        mode,
+        createdAt,
+      }));
+      setImages((current) => [...nextImages, ...current].slice(0, 48));
+      setSelectedId(nextImages[0]?.id || '');
+    } catch (err: any) {
+      setError(err?.message || '图片生成失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDownload = (image: AgentImage | null) => {
+    if (!image) return;
+    const link = document.createElement('a');
+    link.href = image.url;
+    link.download = getFilename(image);
+    link.rel = 'noopener';
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  };
+
+  const applyPreset = (preset: string) => {
+    setPrompt((current) => {
+      const clean = current.trim();
+      if (!clean) return preset;
+      if (clean.includes(preset)) return clean;
+      return `${clean}, ${preset}`;
+    });
+  };
+
+  const applyTemplate = (template: PromptTemplate) => {
+    setPrompt(template.prompt);
+    const templateAspect = aspectFromSize(template.size);
+    setAspect(templateAspect);
+    const parsed = parseSizeValue(template.size);
+    if (parsed) {
+      setCustomWidth(parsed.width);
+      setCustomHeight(parsed.height);
+    }
+    setMode('generate');
+    setError('');
+  };
+
+  if (bootError) {
+    return (
+      <div className="empty-state" style={{ minHeight: 320 }}>
+        <div className="empty-state-title">生图助手暂不可用</div>
+        <div className="empty-state-desc">{bootError}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="picture-agent-page">
+      <div className="page-header">
+        <div>
+          <h1 className="page-title">生图助手</h1>
+          <p className="page-subtitle">
+            {modeLabel} · {status?.upstreamLabel || 'BoosAPI 本地图片路由'} · {status?.keyName || '加载密钥中'}
+          </p>
+        </div>
+        <div className="page-actions">
+          <span className="picture-agent-status-pill">{audience === 'user' ? '普通用户' : '管理员'}</span>
+          <select className="picture-agent-select" value={model} onChange={(event) => setModel(event.target.value)}>
+            {models.length === 0 && <option value={model || 'gpt-image-2'}>{model || 'gpt-image-2'}</option>}
+            {models.map((item) => <option key={item} value={item}>{item}</option>)}
+          </select>
+        </div>
+      </div>
+
+      <div className="picture-agent-shell">
+        <aside className="picture-agent-panel">
+          <div className="picture-agent-panel-head">
+            <div>
+              <strong>创作参数</strong>
+              <span>{mode === 'edit' ? '上传参考图后进行局部或整体改写' : '输入提示词生成第一张画布图片'}</span>
+            </div>
+          </div>
+
+          <div className="picture-agent-tabs" aria-label="picture mode">
+            <button className={mode === 'generate' ? 'active' : ''} onClick={() => setMode('generate')} type="button">文生图</button>
+            <button className={mode === 'edit' ? 'active' : ''} onClick={() => setMode('edit')} type="button">图像编辑</button>
+          </div>
+
+          <label className="picture-agent-field">
+            <span>提示词</span>
+            <textarea
+              value={prompt}
+              onChange={(event) => setPrompt(event.target.value)}
+              rows={8}
+              placeholder="描述主体、镜头、风格、材质、光线和构图"
+            />
+          </label>
+
+          <div className="picture-agent-presets">
+            {STYLE_PRESETS.map((preset) => (
+              <button key={preset.label} type="button" onClick={() => applyPreset(preset.prompt)}>
+                {preset.label}
+              </button>
+            ))}
+          </div>
+
+          <div className="picture-agent-grid-fields">
+            <label className="picture-agent-field">
+              <span>比例</span>
+              <select
+                value={aspect}
+                onChange={(event) => {
+                  const nextAspect = event.target.value;
+                  setAspect(nextAspect);
+                  const option = ASPECT_OPTIONS.find((item) => item.value === nextAspect);
+                  if (option?.width && option?.height) {
+                    setCustomWidth(option.width);
+                    setCustomHeight(option.height);
+                  }
+                }}
+              >
+                {ASPECT_OPTIONS.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}
+              </select>
+            </label>
+            <label className="picture-agent-field">
+              <span>质量</span>
+              <select value={quality} onChange={(event) => setQuality(event.target.value)}>
+                {QUALITY_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
+              </select>
+            </label>
+          </div>
+
+          <div className="picture-agent-size-row">
+            <label className="picture-agent-field">
+              <span>宽度</span>
+              <input
+                type="number"
+                min={256}
+                max={4096}
+                step={64}
+                value={customWidth}
+                disabled={aspect === 'auto'}
+                onChange={(event) => {
+                  setAspect('custom');
+                  setCustomWidth(clampDimension(Number(event.target.value)));
+                }}
+              />
+            </label>
+            <label className="picture-agent-field">
+              <span>高度</span>
+              <input
+                type="number"
+                min={256}
+                max={4096}
+                step={64}
+                value={customHeight}
+                disabled={aspect === 'auto'}
+                onChange={(event) => {
+                  setAspect('custom');
+                  setCustomHeight(clampDimension(Number(event.target.value)));
+                }}
+              />
+            </label>
+            <div className="picture-agent-size-preview">
+              <span>提交尺寸</span>
+              <strong>{resolvedSize}</strong>
+            </div>
+          </div>
+
+          {mode === 'edit' && (
+            <div className="picture-agent-upload">
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                onChange={(event) => setSourceFile(event.target.files?.[0] || null)}
+                style={{ display: 'none' }}
+              />
+              <div className="picture-agent-upload-bar">
+                <button type="button" className="btn btn-ghost" onClick={() => fileInputRef.current?.click()}>
+                  选择图片
+                </button>
+                {sourceFile && <span>{sourceFile.name}</span>}
+              </div>
+              {sourcePreview ? (
+                <img src={sourcePreview} alt="source" />
+              ) : (
+                <button type="button" className="picture-agent-upload-empty" onClick={() => fileInputRef.current?.click()}>
+                  上传一张参考图
+                </button>
+              )}
+            </div>
+          )}
+
+          {error && <div className="alert alert-error">{error}</div>}
+          <button type="button" className="btn btn-primary picture-agent-submit" disabled={!canSubmit} onClick={handleSubmit}>
+            {loading ? '处理中...' : mode === 'edit' ? '编辑图片' : '生成图片'}
+          </button>
+        </aside>
+
+        <section className="picture-agent-canvas">
+          <div className="picture-agent-template-strip">
+            <div className="picture-agent-template-title">
+              <strong>参考模板</strong>
+              <span>{templatesLoading ? '正在刷新模板...' : '每次打开自动获取 Linux Do GPT Image Gallery'}</span>
+            </div>
+            <div className="picture-agent-template-list">
+              {templatesError && templates.length === 0 ? (
+                <div className="picture-agent-template-empty">模板加载失败：{templatesError}</div>
+              ) : templates.length === 0 ? (
+                <div className="picture-agent-template-empty">{templatesLoading ? '正在加载参考模板...' : '暂无可用模板'}</div>
+              ) : templates.map((template) => (
+                <button
+                  key={template.id}
+                  type="button"
+                  className="picture-agent-template-card"
+                  onClick={() => applyTemplate(template)}
+                  title={template.prompt}
+                >
+                  <img src={template.image} alt="" loading="lazy" referrerPolicy="no-referrer" />
+                  <span>
+                    <strong>{template.title}</strong>
+                    <em>{template.tag}{template.source?.postNumber ? ` · #${template.source.postNumber}` : ''}</em>
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="picture-agent-board">
+            {selectedImage ? (
+              <>
+                <div className="picture-agent-image-frame">
+                  <img src={selectedImage.url} alt={selectedImage.prompt} />
+                </div>
+                <div className="picture-agent-board-meta">
+                  <div>
+                    <strong>{resultLabel}</strong>
+                    <span>{selectedImage.model} · {new Date(selectedImage.createdAt).toLocaleTimeString()}</span>
+                  </div>
+                  <button type="button" className="btn btn-ghost" onClick={() => handleDownload(selectedImage)}>下载</button>
+                </div>
+              </>
+            ) : (
+              <div className="picture-agent-empty">
+                <div style={emptyIconStyle} />
+                <div className="empty-state-title">画布等待第一张图片</div>
+                <div className="empty-state-desc">选择模型、调整参数，然后开始生成或上传参考图进行编辑。</div>
+              </div>
+            )}
+          </div>
+
+          <div className="picture-agent-history-wrap">
+            <div className="picture-agent-history-title">
+              <strong>历史结果</strong>
+              <span>{images.length} 张</span>
+            </div>
+            <div className="picture-agent-history">
+              {images.length === 0 ? (
+                <div className="picture-agent-history-empty">生成结果会保留在这里，便于快速对比。</div>
+              ) : images.map((image) => (
+                <button
+                  key={image.id}
+                  type="button"
+                  className={image.id === selectedImage?.id ? 'active' : ''}
+                  onClick={() => setSelectedId(image.id)}
+                  title={image.prompt}
+                >
+                  <img src={image.url} alt="" />
+                </button>
+              ))}
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+const emptyIconStyle: CSSProperties = {
+  width: 54,
+  height: 54,
+  borderRadius: 8,
+  border: '1px solid var(--color-border)',
+  background:
+    'linear-gradient(135deg, color-mix(in srgb, var(--color-info) 16%, var(--color-bg-card)), color-mix(in srgb, var(--color-success) 12%, var(--color-bg-card)))',
+};
@@ -10,6 +10,7 @@ import FactoryResetModal from './settings/FactoryResetModal.js';
 import ModelAvailabilityProbeConfirmModal from './settings/ModelAvailabilityProbeConfirmModal.js';
 import {
  createCodexDefaultHighReasoningVisualPreset,
+  createVolcengineVideoTaskVisualPreset,
  createVisualPayloadRule,
  isVisualPayloadRuleBlank,
  payloadRulesToVisualRules,
@@ -1004,6 +1005,15 @@ export default function Settings() {
    toast.success('已填入 Codex 默认高推理预设');
  };

+  const applyVolcengineVideoTaskPreset = () => {
+    applyVisualPayloadRules((currentRules) => [
+      ...currentRules.filter((rule) => !isVisualPayloadRuleBlank(rule)),
+      ...createVolcengineVideoTaskVisualPreset(),
+    ]);
+    setShowPayloadRulesEditor(true);
+    toast.success('已填入火山视频任务 Step1/Step2 模板');
+  };
+
  const addPayloadVisualRule = () => {
    applyVisualPayloadRules((currentRules) => [
      ...currentRules,
@@ -1564,6 +1574,14 @@ export default function Settings() {
                >
                  Codex 默认高推理
                </button>
+                <button
+                  type="button"
+                  className="btn btn-ghost"
+                  style={{ border: '1px solid var(--color-border)' }}
+                  onClick={applyVolcengineVideoTaskPreset}
+                >
+                  火山视频任务 Step1/Step2
+                </button>
                <button
                  type="button"
                  className="btn btn-ghost"
@@ -1329,7 +1329,13 @@ export const buildVideoCreateRequestEnvelope = (
  stream: false,
  jobMode: false,
  rawMode: false,
-  jsonBody: files.length > 0 ? undefined : { model: inputs.model, prompt: modeState.videosPrompt },
+  jsonBody: files.length > 0 ? undefined : {
+    model: inputs.model,
+    prompt: modeState.videosPrompt,
+    ratio: '16:9',
+    fps: 24,
+    duration: 5,
+  },
  multipartFields: files.length > 0 ? { model: inputs.model, prompt: modeState.videosPrompt } : undefined,
  multipartFiles: files.length > 0 ? files : undefined,
 });
@@ -1339,7 +1345,7 @@ export const buildVideoInspectRequestEnvelope = (
  modeState: ModelTesterModeState,
 ): TesterProxyEnvelope => ({
  method: inputs.videoInspectAction === 'delete' ? 'DELETE' : 'GET',
-  path: `/v1/videos/${encodeURIComponent(modeState.videosInspectId.trim())}`,
+  path: `/v1/videos/${encodeURIComponent(modeState.videosInspectId.trim())}?model=${encodeURIComponent(inputs.model)}`,
  requestKind: 'empty',
  stream: false,
  jobMode: false,
@@ -66,6 +66,24 @@ export function createCodexDefaultHighReasoningVisualPreset(): VisualPayloadRule
  ];
 }

+export function createVolcengineVideoTaskVisualPreset(): VisualPayloadRule[] {
+  return [
+    createVisualPayloadRule({
+      action: 'default',
+      modelPattern: 'doubao-seedance-*',
+      protocol: 'openai',
+      path: 'content',
+      value: JSON.stringify([
+        {
+          type: 'text',
+          text: '一只橘猫在赛博朋克城市屋顶奔跑 --ratio 16:9 --fps 24 --dur 5',
+        },
+      ], null, 2),
+      valueMode: 'json',
+    }),
+  ];
+}
+
 export function payloadRulesToVisualRules(value: unknown): VisualPayloadRule[] {
  if (!isRecord(value)) return [];