feat(ark-assets): 方舟素材库 - 支持私域素材授权 (#294)

This commit is contained in:
kinoko
2026-08-23 08:27:55 +08:00
committed by GitHub
parent 1bb5d1423a
commit d77432693e
25 changed files with 1072 additions and 4 deletions

View File

@@ -296,6 +296,7 @@ function videoConfigPatch(key: keyof AiConfig, value: string) {
if (key === "videoSeconds") return { seconds: value };
if (key === "videoGenerateAudio") return { generateAudio: value };
if (key === "videoWatermark") return { watermark: value };
if (key === "videoArkPrivateAssetUpload") return { arkPrivateAssetUpload: value };
return { [key]: value };
}

View File

@@ -1,6 +1,6 @@
import { AnimatePresence, useReducedMotion } from "motion/react";
import { useEffect, useState, type CSSProperties, type ReactNode } from "react";
import { ArrowLeft, Check, ChevronRight, Clipboard, Copy, FolderOpen, FolderPlus, Image as ImageIcon, Layers3, Link2, Maximize2, PanelTop, Pencil, Plus, Redo2, Tags, Trash2, Undo2, Upload, UserRound } from "lucide-react";
import { ArrowLeft, Check, ChevronRight, Clipboard, CloudUpload, Copy, FolderOpen, FolderPlus, Image as ImageIcon, Layers3, Link2, Maximize2, PanelTop, Pencil, Plus, Redo2, Tags, Trash2, Undo2, Upload, UserRound } from "lucide-react";
import { CanvasCreateMenu, type CanvasCreateCommand } from "@/components/canvas/canvas-create-menu";
import { aceternityMotion } from "@/lib/aceternity-motion";
@@ -53,6 +53,7 @@ type CanvasNodeContextMenuProps = {
onGenerateImage: () => void;
onCopyContent: () => void;
onCopyMediaUrl: () => void;
onUploadToArkPrivateAsset: () => void;
onSetAssetCategory: (category: CanvasAssetCategory) => void;
onToggleFrame: () => void;
};
@@ -86,6 +87,7 @@ export function CanvasNodeContextMenu({
onGenerateImage,
onCopyContent,
onCopyMediaUrl,
onUploadToArkPrivateAsset,
onSetAssetCategory,
onToggleFrame,
}: CanvasNodeContextMenuProps) {
@@ -200,6 +202,7 @@ export function CanvasNodeContextMenu({
<MenuSection label="查看与归档" />
<MenuButton icon={<Maximize2 />} label="进入全景预览" disabled={!canOpenPreview} onClick={() => runAction(onViewMedia)} />
<MenuButton icon={<Tags />} label="设置资产分类" chevron onClick={() => setCategoryOpen(true)} />
{isImage ? <MenuButton icon={<CloudUpload />} label="上传到方舟素材库" onClick={() => runAction(onUploadToArkPrivateAsset)} /> : null}
<MenuDivider />
<MenuSection label="节点" />
<MenuButton icon={<Copy />} label="复制节点" shortcut="⌘C" onClick={() => runAction(onCopyNode)} />

View File

@@ -652,6 +652,7 @@ function videoConfigPatch(key: keyof AiConfig, value: string) {
if (key === "videoSeconds") return { seconds: value };
if (key === "videoGenerateAudio") return { generateAudio: value };
if (key === "videoWatermark") return { watermark: value };
if (key === "videoArkPrivateAssetUpload") return { arkPrivateAssetUpload: value };
return { [key]: value };
}

View File

@@ -19,7 +19,7 @@ const sizeOptions = [
type VideoSettingsPanelProps = {
config: AiConfig;
onConfigChange: (key: "vquality" | "size" | "videoSeconds" | "videoGenerateAudio" | "videoWatermark", value: string) => void;
onConfigChange: (key: "vquality" | "size" | "videoSeconds" | "videoGenerateAudio" | "videoWatermark" | "videoArkPrivateAssetUpload", value: string) => void;
theme: CanvasTheme;
showTitle?: boolean;
className?: string;
@@ -117,6 +117,8 @@ function SeedanceVideoSettingsPanel({ config, profile, priceTiers, onConfigChang
const duration = normalizeSeedanceDuration(config.videoSeconds);
const generateAudio = boolConfig(config.videoGenerateAudio, profile.generateAudio.default);
const watermark = boolConfig(config.videoWatermark, profile.watermark.default);
const useArkPrivateAssets = boolConfig(config.videoArkPrivateAssetUpload, true);
const isArkSeedance = resolveModelRequestConfig(config, config.model).interfaceType === "volcengine-ark-video";
return (
<ImageSettingsTheme theme={theme}>
@@ -167,6 +169,13 @@ function SeedanceVideoSettingsPanel({ config, profile, priceTiers, onConfigChang
{profile.watermark.supported ? <SwitchRow label="添加水印" checked={watermark} theme={theme} onChange={(checked) => onConfigChange("videoWatermark", String(checked))} /> : null}
</div>
</SettingGroup>
{isArkSeedance ? (
<SettingGroup title="参考图" color={theme.node.muted}>
<div className="rounded-md px-2" style={{ background: theme.toolbar.itemHover }}>
<SwitchRow label="自动同步可信素材(确认拥有使用权)" checked={useArkPrivateAssets} theme={theme} onChange={(checked) => onConfigChange("videoArkPrivateAssetUpload", String(checked))} />
</div>
</SettingGroup>
) : null}
</div>
</ImageSettingsTheme>
);

View File

@@ -385,6 +385,7 @@ export function buildGenerationConfig(config: AiConfig, node: CanvasNodeData | u
vquality: normalizeVideoResolution(node?.metadata?.vquality ?? config.vquality ?? defaultConfig.vquality),
videoGenerateAudio: node?.metadata?.generateAudio ?? config.videoGenerateAudio ?? defaultConfig.videoGenerateAudio,
videoWatermark: node?.metadata?.watermark ?? config.videoWatermark ?? defaultConfig.videoWatermark,
videoArkPrivateAssetUpload: node?.metadata?.arkPrivateAssetUpload ?? config.videoArkPrivateAssetUpload ?? defaultConfig.videoArkPrivateAssetUpload,
audioVoice: node?.metadata?.audioVoice ?? config.audioVoice ?? defaultConfig.audioVoice,
audioFormat: node?.metadata?.audioFormat ?? config.audioFormat ?? defaultConfig.audioFormat,
audioSpeed: node?.metadata?.audioSpeed ?? config.audioSpeed ?? defaultConfig.audioSpeed,

View File

@@ -3,6 +3,7 @@ import {
ArrowLeft,
BarChart3,
BellRing,
CloudUpload,
Coins,
FileClock,
HardDrive,
@@ -74,6 +75,7 @@ const adminNavigation: Array<{ label: string; items: AdminNavigationItem[] }> =
{ path: "/admin/settings/access", label: "登录与注册", description: "注册策略与 Linux.do", icon: <ShieldCheck className="size-4" /> },
{ path: "/admin/settings/email", label: "邮件服务", description: "注册验证码 SMTP", icon: <Mail className="size-4" /> },
{ path: "/admin/settings/storage", label: "存储服务", description: "对象存储与资源存储", icon: <HardDrive className="size-4" /> },
{ path: "/admin/settings/ark-private-assets", label: "方舟素材库", description: "Seedance 可信参考素材", icon: <CloudUpload className="size-4" /> },
{ path: "/admin/settings/response-interception", label: "模型响应拦截", description: "替换用户可见的上游异常", icon: <ShieldAlert className="size-4" /> },
{ path: "/admin/settings/third-party", label: "第三方参数配置", description: "集中维护第三方平台凭证", icon: <KeyRound className="size-4" /> },
],

View File

@@ -0,0 +1,120 @@
import { App, Button, Form, Input, Switch } from "antd";
import { CloudUpload, KeyRound, Save } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { getAdminArkPrivateAssetSetting, updateAdminArkPrivateAssetSetting, type AdminArkPrivateAssetSetting } from "@/services/api/auth";
import { useAdminContext } from "../admin-context";
import { AdminPageFrame } from "../components/admin-shell";
import { AdminStatusBadge, configuredSecretText, SettingsSectionCard } from "../components/admin-ui";
type ArkPrivateAssetForm = {
enabled: boolean;
region: string;
projectName: string;
accessKeyId: string;
accessKeySecret: string;
};
export default function ArkPrivateAssetsSettingsPage() {
const { message } = App.useApp();
const { references } = useAdminContext();
const [setting, setSetting] = useState<AdminArkPrivateAssetSetting | null>(null);
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
const [form] = Form.useForm<ArkPrivateAssetForm>();
const enabled = Form.useWatch("enabled", form) ?? false;
const userNameById = useMemo(() => new Map(references.users.map((user) => [user.id, user.displayName || user.username])), [references.users]);
useEffect(() => {
let cancelled = false;
void getAdminArkPrivateAssetSetting()
.then(({ setting: value }) => {
if (cancelled) return;
setSetting(value);
form.setFieldsValue(toFormValues(value));
})
.catch((error) => {
if (!cancelled) message.error(error instanceof Error ? error.message : "读取方舟素材库配置失败");
})
.finally(() => {
if (!cancelled) setLoading(false);
});
return () => { cancelled = true; };
}, [form, message]);
const save = async () => {
const values = await form.validateFields();
if (values.enabled && !values.accessKeySecret.trim() && !setting?.hasAccessKeySecret) {
message.error("请填写 IAM SecretKey");
return;
}
setSaving(true);
try {
const result = await updateAdminArkPrivateAssetSetting({
enabled: values.enabled,
region: values.region.trim(),
projectName: values.projectName.trim(),
accessKeyId: values.accessKeyId.trim(),
accessKeySecret: values.accessKeySecret.trim(),
});
setSetting(result.setting);
form.setFieldsValue(toFormValues(result.setting));
message.success("方舟素材库配置已保存");
} catch (error) {
message.error(error instanceof Error ? error.message : "保存方舟素材库配置失败");
} finally {
setSaving(false);
}
};
return (
<AdminPageFrame title="方舟素材库" description="为 Seedance 参考图配置后端可信素材导入" scroll>
<div className="pt-4">
<SettingsSectionCard
icon={<CloudUpload className="size-4" />}
title="私域虚拟人素材"
description="系统仅在用户启用自动同步且参考图属于当前用户素材库时,才会用 IAM 凭据上传并等待审核。"
status={<AdminStatusBadge label={setting?.enabled ? "已启用" : "未启用"} tone={setting?.enabled ? "success" : "neutral"} />}
footer={(
<>
<span className="text-xs text-foreground/45">{setting?.updatedAt ? `上次更新:${formatTime(setting.updatedAt)}${setting.updatedBy ? ` · ${userNameById.get(setting.updatedBy) || setting.updatedBy}` : ""}` : "尚未保存方舟素材库配置"}</span>
<Button type="primary" icon={<Save className="size-4" />} loading={saving} disabled={loading} onClick={() => void save()}>保存配置</Button>
</>
)}
>
<Form form={form} layout="vertical" requiredMark={false} disabled={loading || saving} className="grid gap-x-4 px-4 pb-4 pt-4 md:grid-cols-2">
<Form.Item name="enabled" label="启用可信素材同步" valuePropName="checked" className="md:col-span-2">
<Switch checkedChildren="启用" unCheckedChildren="停用" />
</Form.Item>
<Form.Item name="region" label="Region" rules={[{ required: enabled, message: "请填写方舟 Region" }]}>
<Input autoComplete="off" placeholder="部署方的方舟 Region" />
</Form.Item>
<Form.Item name="projectName" label="Ark ProjectName" rules={[{ required: enabled, message: "请填写 Ark ProjectName" }]}>
<Input autoComplete="off" placeholder="部署方的 Ark ProjectName" />
</Form.Item>
<Form.Item name="accessKeyId" label="IAM AccessKey" rules={[{ required: enabled, message: "请填写 IAM AccessKey" }]}>
<Input autoComplete="off" prefix={<KeyRound className="size-4 text-foreground/35" />} placeholder="仅保存在服务端" />
</Form.Item>
<Form.Item name="accessKeySecret" label={setting?.hasAccessKeySecret ? `IAM SecretKey(${configuredSecretText})` : "IAM SecretKey"}>
<Input.Password autoComplete="new-password" placeholder={setting?.hasAccessKeySecret ? "留空保留原密钥" : "仅保存在服务端"} />
</Form.Item>
</Form>
</SettingsSectionCard>
</div>
</AdminPageFrame>
);
}
function toFormValues(setting: AdminArkPrivateAssetSetting): ArkPrivateAssetForm {
return {
enabled: setting.enabled,
region: setting.region || "",
projectName: setting.projectName || "",
accessKeyId: setting.accessKeyId || "",
accessKeySecret: "",
};
}
function formatTime(value: string) {
return new Date(value).toLocaleString("zh-CN", { hour12: false });
}

View File

@@ -34,6 +34,7 @@ type CanvasProjectContextMenuProps = {
onGenerateImage: (node: CanvasNodeData) => void;
onCopyContent: (node: CanvasNodeData | null) => void;
onCopyMediaUrl: (node: CanvasNodeData | null) => void;
onUploadToArkPrivateAsset: (node: CanvasNodeData) => void;
onSetAssetCategory: (nodeId: string, category: CanvasAssetCategory) => void;
onToggleFrame: (node: CanvasNodeData) => void;
};
@@ -92,6 +93,9 @@ export function CanvasProjectContextMenu({ menu, node, screenToCanvas, ...props
}}
onCopyContent={() => props.onCopyContent(node)}
onCopyMediaUrl={() => props.onCopyMediaUrl(node)}
onUploadToArkPrivateAsset={() => {
if (node?.type === CanvasNodeType.Image) props.onUploadToArkPrivateAsset(node);
}}
onSetAssetCategory={(category) => {
if (menu.type === "node") props.onSetAssetCategory(menu.nodeId, category);
}}

View File

@@ -7,7 +7,9 @@ import { uploadMediaFile } from "@/services/file-storage";
import { readLocalRuntimeBootstrapState } from "@/services/local-runtime-bootstrap";
import { createCanvasGenerationLiveProjectAdapter, registerCanvasGenerationLiveProject } from "@/services/canvas-generation-consumer";
import { getActiveUserScope } from "@/lib/user-scope";
import { resourceFileUrl, resourceIdFromStorageKey } from "@/services/api/resources";
import { resourceFileUrl, resourceIdFromStorageKey, syncResourceToArkPrivateAsset } from "@/services/api/resources";
import { uploadImage } from "@/services/image-storage";
import { imageMetadata } from "@/lib/canvas/canvas-generation-task-sync";
import copyToClipboard from "copy-to-clipboard";
import { nanoid } from "nanoid";
import { canvasThemes, type CanvasBackgroundMode } from "@/lib/canvas-theme";
@@ -20,7 +22,7 @@ import { flushCanvasStorePersistence } from "@/stores/canvas/use-canvas-store";
import { ensureCanvasNodeAsset } from "@/services/project-asset-sync";
import { useThemeStore } from "@/stores/use-theme-store";
import { useUserStore } from "@/stores/use-user-store";
import { App } from "antd";
import { App, Modal } from "antd";
import { getNodeSpec } from "@/constant/canvas";
import { CanvasConfigComposer } from "@/components/canvas/canvas-config-composer";
import { CanvasConfigNodePanel } from "@/components/canvas/canvas-config-node-panel";
@@ -201,6 +203,7 @@ function InfiniteCanvasPage() {
const [tapNowImportOpen, setTapNowImportOpen] = useState(false);
const [nodeSearchOpen, setNodeSearchOpen] = useState(false);
const [toolbarNodeId, setToolbarNodeId] = useState<string | null>(null);
const [arkPrivateAssetUploadNodeId, setArkPrivateAssetUploadNodeId] = useState<string | null>(null);
const [nodeImageSettingsOpen, setNodeImageSettingsOpen] = useState(false);
const [dialogNodeId, setDialogNodeId] = useState<string | null>(null);
const [textEditorNodeId, setTextEditorNodeId] = useState<string | null>(null);
@@ -1366,6 +1369,42 @@ function InfiniteCanvasPage() {
[message, releaseCopiedNodesPastePriority],
);
const uploadNodeImageToArkPrivateAsset = useCallback(async (node: CanvasNodeData) => {
if (node.type !== CanvasNodeType.Image || !node.metadata?.content) {
message.warning("请选择一张可用图片后再上传");
return;
}
if (arkPrivateAssetUploadNodeId === node.id) return;
const feedbackKey = `ark-private-asset-${node.id}`;
setArkPrivateAssetUploadNodeId(node.id);
message.loading({ key: feedbackKey, content: "正在保存并上传到方舟素材库...", duration: 0 });
try {
let resourceID = resourceIdFromStorageKey(node.metadata.storageKey);
if (!resourceID) {
const uploaded = await uploadImage(node.metadata.content);
resourceID = resourceIdFromStorageKey(uploaded.storageKey);
if (!resourceID) throw new Error("图片未能保存到系统素材库,请检查对象存储配置后重试");
handleConfigNodeChange(node.id, imageMetadata(uploaded));
}
await syncResourceToArkPrivateAsset(resourceID);
message.success({ key: feedbackKey, content: "已同步到方舟素材库,Seedance 将自动复用该素材", duration: 4 });
} catch (error) {
message.error({ key: feedbackKey, content: error instanceof Error ? error.message : "上传到方舟素材库失败", duration: 5 });
} finally {
setArkPrivateAssetUploadNodeId((current) => current === node.id ? null : current);
}
}, [arkPrivateAssetUploadNodeId, handleConfigNodeChange, message]);
const confirmUploadNodeImageToArkPrivateAsset = useCallback((node: CanvasNodeData) => {
Modal.confirm({
title: "上传到方舟素材库",
content: "仅可上传你拥有肖像、版权或其他合法使用权的图片。方舟审核通过后,Seedance 会使用受控素材标识生成视频。",
okText: "确认拥有使用权并上传",
cancelText: "取消",
onOk: () => uploadNodeImageToArkPrivateAsset(node),
});
}, [uploadNodeImageToArkPrivateAsset]);
const handleCanvasContextMenu = useCallback(
(event: ReactMouseEvent) => {
const target = event.target instanceof Element ? event.target : null;
@@ -2224,6 +2263,7 @@ function InfiniteCanvasPage() {
onCopyMediaUrl={(node) => {
void copyNodeMediaUrlToClipboard(node);
}}
onUploadToArkPrivateAsset={confirmUploadNodeImageToArkPrivateAsset}
onSetAssetCategory={(nodeId, assetCategory) => handleConfigNodeChange(nodeId, { assetCategory })}
onToggleFrame={(node) => handleFrameToggle(node.id)}
/>

View File

@@ -23,6 +23,7 @@ const RedemptionCodesPage = lazy(() => import("@/pages/admin/redemption-codes/re
const RuntimePolicySettingsPage = lazy(() => import("@/pages/admin/settings/runtime-policy-settings-page"));
const DrawingEngineSettingsPage = lazy(() => import("@/pages/admin/settings/drawing-engine-settings-page"));
const StorageSettingsPage = lazy(() => import("@/pages/admin/settings/storage-settings-page"));
const ArkPrivateAssetsSettingsPage = lazy(() => import("@/pages/admin/settings/ark-private-assets-settings-page"));
const ResponseInterceptionSettingsPage = lazy(() => import("@/pages/admin/settings/response-interception-settings-page"));
const ThirdPartySettingsPage = lazy(() => import("@/pages/admin/settings/libtv-settings-page"));
const StoryboardPromptsPage = lazy(() => import("@/pages/admin/storyboard-prompts/storyboard-prompts-page"));
@@ -157,6 +158,7 @@ export const router = createBrowserRouter([
{ path: "settings/access", element: deferred(<AccessSettingsPage />) },
{ path: "settings/email", element: deferred(<EmailSettingsPage />) },
{ path: "settings/storage", element: deferred(<StorageSettingsPage />) },
{ path: "settings/ark-private-assets", element: deferred(<ArkPrivateAssetsSettingsPage />) },
{ path: "settings/response-interception", element: deferred(<ResponseInterceptionSettingsPage />) },
{ path: "settings/third-party", element: deferred(<ThirdPartySettingsPage />) },
{ path: "settings/libtv", element: <Navigate to="/admin/settings/third-party" replace /> },

View File

@@ -272,6 +272,18 @@ export type AdminOSSSetting = {
updatedAt?: string;
};
export type AdminArkPrivateAssetSetting = {
enabled: boolean;
region: string;
projectName: string;
accessKeyId: string;
accessKeySecret?: string;
hasAccessKeySecret: boolean;
updatedBy?: string;
createdAt?: string;
updatedAt?: string;
};
export type RuntimeResourcePolicy = {
resourceUploadMB: number;
sessionUploadMB: number;
@@ -489,6 +501,14 @@ export function updateAdminOSSSetting(input: Partial<AdminOSSSetting>) {
return request<{ setting: AdminOSSSetting }>(api.patch("/admin/settings/oss", input));
}
export function getAdminArkPrivateAssetSetting() {
return request<{ setting: AdminArkPrivateAssetSetting }>(api.get("/admin/settings/ark-private-assets"));
}
export function updateAdminArkPrivateAssetSetting(input: Partial<AdminArkPrivateAssetSetting>) {
return request<{ setting: AdminArkPrivateAssetSetting }>(api.patch("/admin/settings/ark-private-assets", input));
}
export function getAdminRuntimePolicySetting() {
return request<{ setting: RuntimePolicySetting }>(api.get("/admin/settings/runtime-policy"));
}

View File

@@ -481,6 +481,7 @@ export function backendProviderConfig(config: AiConfig) {
vquality: config.vquality,
videoGenerateAudio: config.videoGenerateAudio,
videoWatermark: config.videoWatermark,
videoArkPrivateAssetUpload: config.videoArkPrivateAssetUpload,
audioVoice: config.audioVoice,
audioFormat: config.audioFormat,
audioSpeed: config.audioSpeed,

View File

@@ -46,6 +46,11 @@ export type AccountFileStorageUsage = {
totalBytes: number;
};
export type ArkPrivateAssetSync = {
resourceId: string;
status: "active" | string;
};
const api = apiClient;
const resourceCache = new Map<string, RemoteResource>();
const resourceRequests = new Map<string, Promise<RemoteResource>>();
@@ -68,6 +73,11 @@ export async function getAccountFileStorageUsage() {
return data.usage;
}
export async function syncResourceToArkPrivateAsset(id: string) {
const data = await request<{ sync: ArkPrivateAssetSync }>(api.post(`/resources/${encodeURIComponent(id)}/ark-private-asset`));
return data.sync;
}
export function resourceIdFromStorageKey(storageKey?: string) {
return storageKey?.startsWith("resource:") ? storageKey.slice("resource:".length) : "";
}

View File

@@ -81,6 +81,7 @@ export type AiConfig = {
vquality: string;
videoGenerateAudio: string;
videoWatermark: string;
videoArkPrivateAssetUpload: string;
systemPrompt: string;
models: string[];
imageModels: string[];
@@ -121,6 +122,7 @@ export const defaultConfig: AiConfig = {
vquality: "720",
videoGenerateAudio: "true",
videoWatermark: "false",
videoArkPrivateAssetUpload: "true",
systemPrompt: "",
models: [],
imageModels: [],
@@ -338,6 +340,7 @@ export function normalizeConfigSnapshot(snapshot: ConfigStoreSnapshot | undefine
vquality: normalizeVideoResolution(config.vquality),
videoGenerateAudio: config.videoGenerateAudio || "true",
videoWatermark: config.videoWatermark || "false",
videoArkPrivateAssetUpload: config.videoArkPrivateAssetUpload || "true",
transparentBackground: config.transparentBackground === "true" ? "true" : "false",
canvasImageCount: config.canvasImageCount || defaultConfig.canvasImageCount,
imageModels,

View File

@@ -283,6 +283,7 @@ export type CanvasNodeMetadata = {
};
sessionId?: string;
videoEditOperation?: CanvasVideoEditOperation;
arkPrivateAssetUpload?: string;
videoCameraMoveId?: string;
videoCameraMovePrompt?: string;
videoStartFrameNodeId?: string;