Codex
6033 lines
258 KiB
TypeScript
6033 lines
258 KiB
TypeScript
import {
|
||
AppstoreOutlined,
|
||
CloudUploadOutlined,
|
||
CloseOutlined,
|
||
DeleteOutlined,
|
||
FileImageOutlined,
|
||
FolderOpenOutlined,
|
||
FrownOutlined,
|
||
GlobalOutlined,
|
||
LoadingOutlined,
|
||
MenuFoldOutlined,
|
||
MenuUnfoldOutlined,
|
||
QuestionCircleOutlined,
|
||
ReloadOutlined,
|
||
SettingOutlined,
|
||
SkinOutlined,
|
||
TableOutlined,
|
||
} from "@ant-design/icons";
|
||
import { useEffect, useMemo, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
|
||
import { useTypewriter } from "../../hooks/useTypewriter";
|
||
import "../../styles/pages/ecommerce.css";
|
||
import "../../styles/pages/local-theme-parity.css";
|
||
import { ossAssets } from "../../data/ossAssets";
|
||
import { EcommerceProgressBar } from "./EcommerceProgressBar";
|
||
import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "./ImageMentionMenu";
|
||
import EcommerceVideoWorkspace from "./EcommerceVideoWorkspace";
|
||
import EcommerceVideoHistoryPanel from "./panels/EcommerceVideoHistoryPanel";
|
||
import EcommerceDetailPanel from "./panels/EcommerceDetailPanel";
|
||
import EcommerceSetPanel from "./panels/EcommerceSetPanel";
|
||
import EcommerceTryOnPanel from "./panels/EcommerceTryOnPanel";
|
||
import EcommerceClonePanel from "./panels/EcommerceClonePanel";
|
||
import aliexpressLogo from "../../assets/platform-logos/aliexpress.webp";
|
||
import amazonLogo from "../../assets/platform-logos/amazon.webp";
|
||
import douyinLogo from "../../assets/platform-logos/douyin.webp";
|
||
import ebayLogo from "../../assets/platform-logos/ebay.webp";
|
||
import instagramLogo from "../../assets/platform-logos/instagram.webp";
|
||
import jdLogo from "../../assets/platform-logos/jd.webp";
|
||
import lazadaLogo from "../../assets/platform-logos/lazada.webp";
|
||
import pinduoduoLogo from "../../assets/platform-logos/pinduoduo.webp";
|
||
import shopeeLogo from "../../assets/platform-logos/shopee.webp";
|
||
import taobaoLogo from "../../assets/platform-logos/taobao.webp";
|
||
import tiktokShopLogo from "../../assets/platform-logos/tiktok-shop.webp";
|
||
|
||
const smartCutoutColorPresets = [
|
||
"#ffffff",
|
||
"#111111",
|
||
"#ff3131",
|
||
"#ff7a1a",
|
||
"#f7c600",
|
||
"#29b34a",
|
||
"#25a9e0",
|
||
"#438df5",
|
||
"#9029d9",
|
||
"#8aa3ad",
|
||
"#6b7b86",
|
||
"#f46f7b",
|
||
"#ff9451",
|
||
"#f7d34f",
|
||
"#55c66f",
|
||
"#73c7f3",
|
||
"#6dabf5",
|
||
"#b45adb",
|
||
"#bcc8ce",
|
||
"#aeb7bd",
|
||
"#ffbec4",
|
||
"#ffd1ac",
|
||
"#f8e69d",
|
||
"#91de9e",
|
||
"#b7e5fb",
|
||
"#b9d9fb",
|
||
"#d7abe8",
|
||
"#dfe5e8",
|
||
"#d7dde0",
|
||
"#ffe2e4",
|
||
"#ffe5d1",
|
||
"#f8efcf",
|
||
"#c9efcf",
|
||
"#d8f0fb",
|
||
"#d8eafa",
|
||
"#ead2f1",
|
||
];
|
||
|
||
const smartCutoutSizeOptions = [
|
||
{ key: "original", label: "原尺寸", icon: "image", frameWidth: "min(520px, 78%)", frameAspect: "auto", imageMaxWidth: "78%", imageMaxHeight: "310px" },
|
||
{ key: "trim", label: "裁剪到边缘", icon: "crop", frameWidth: "min(420px, 70%)", frameAspect: "auto", imageMaxWidth: "92%", imageMaxHeight: "360px" },
|
||
{ key: "one-inch", label: "一寸头像", sizeLabel: "295*413", icon: "portrait", frameWidth: "min(290px, 50%)", frameAspect: "295 / 413", imageMaxWidth: "86%", imageMaxHeight: "86%", outputWidth: 295, outputHeight: 413 },
|
||
{ key: "two-inch", label: "二寸头像", sizeLabel: "413*579", icon: "portrait", frameWidth: "min(320px, 54%)", frameAspect: "413 / 579", imageMaxWidth: "86%", imageMaxHeight: "86%", outputWidth: 413, outputHeight: 579 },
|
||
{ key: "taobao-1-1", label: "淘宝1:1主图", sizeLabel: "800*800", icon: "shop", frameWidth: "min(430px, 72%)", frameAspect: "800 / 800", imageMaxWidth: "82%", imageMaxHeight: "82%", outputWidth: 800, outputHeight: 800 },
|
||
{ key: "taobao-3-4", label: "淘宝3:4主图", sizeLabel: "750*1000", icon: "shop", frameWidth: "min(330px, 56%)", frameAspect: "750 / 1000", imageMaxWidth: "82%", imageMaxHeight: "82%", outputWidth: 750, outputHeight: 1000 },
|
||
{ key: "pdd-main", label: "拼多多主图", sizeLabel: "800*800", icon: "pdd", frameWidth: "min(430px, 72%)", frameAspect: "800 / 800", imageMaxWidth: "82%", imageMaxHeight: "82%", outputWidth: 800, outputHeight: 800 },
|
||
{ key: "xiaohongshu-cover", label: "小红书封面", sizeLabel: "1242*1660", icon: "text", frameWidth: "min(330px, 56%)", frameAspect: "1242 / 1660", imageMaxWidth: "82%", imageMaxHeight: "82%", outputWidth: 1242, outputHeight: 1660 },
|
||
{ key: "ratio-1-1", label: "1:1", icon: "square", frameWidth: "min(430px, 72%)", frameAspect: "1 / 1", imageMaxWidth: "82%", imageMaxHeight: "82%" },
|
||
{ key: "ratio-3-2", label: "3:2", icon: "landscape", frameWidth: "min(520px, 78%)", frameAspect: "3 / 2", imageMaxWidth: "82%", imageMaxHeight: "82%" },
|
||
{ key: "ratio-2-3", label: "2:3", icon: "portrait-ratio", frameWidth: "min(330px, 56%)", frameAspect: "2 / 3", imageMaxWidth: "82%", imageMaxHeight: "82%" },
|
||
{ key: "ratio-4-3", label: "4:3", icon: "landscape", frameWidth: "min(520px, 78%)", frameAspect: "4 / 3", imageMaxWidth: "82%", imageMaxHeight: "82%" },
|
||
{ key: "ratio-3-4", label: "3:4", icon: "portrait-ratio", frameWidth: "min(330px, 56%)", frameAspect: "3 / 4", imageMaxWidth: "82%", imageMaxHeight: "82%" },
|
||
{ key: "ratio-16-9", label: "16:9", icon: "wide", frameWidth: "min(560px, 82%)", frameAspect: "16 / 9", imageMaxWidth: "82%", imageMaxHeight: "82%" },
|
||
{ key: "ratio-9-16", label: "9:16", icon: "phone", frameWidth: "min(260px, 46%)", frameAspect: "9 / 16", imageMaxWidth: "82%", imageMaxHeight: "82%" },
|
||
] as const;
|
||
|
||
type SmartCutoutSizeKey = (typeof smartCutoutSizeOptions)[number]["key"];
|
||
type SmartCutoutImageItem = { src: string; name: string; originalSrc?: string };
|
||
|
||
const clampNumber = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
|
||
|
||
const normalizeHexColor = (value: string) => {
|
||
const clean = value.trim().replace(/^#/, "");
|
||
if (!/^[0-9a-fA-F]{6}$/.test(clean)) return null;
|
||
return `#${clean.toLowerCase()}`;
|
||
};
|
||
|
||
const hexToRgb = (value: string) => {
|
||
const normalized = normalizeHexColor(value);
|
||
if (!normalized) return null;
|
||
const numeric = Number.parseInt(normalized.slice(1), 16);
|
||
return {
|
||
r: (numeric >> 16) & 255,
|
||
g: (numeric >> 8) & 255,
|
||
b: numeric & 255,
|
||
};
|
||
};
|
||
|
||
const rgbToHex = (r: number, g: number, b: number) =>
|
||
`#${[r, g, b].map((item) => clampNumber(Math.round(item), 0, 255).toString(16).padStart(2, "0")).join("")}`;
|
||
|
||
const parseSmartCutoutAspect = (aspect: string) => {
|
||
const match = aspect.match(/(\d+(?:\.\d+)?)\s*\/\s*(\d+(?:\.\d+)?)/);
|
||
if (!match) return null;
|
||
const width = Number(match[1]);
|
||
const height = Number(match[2]);
|
||
if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return null;
|
||
return width / height;
|
||
};
|
||
|
||
const parseSmartCutoutPercent = (value: string, fallback: number) => {
|
||
const numeric = Number(value.replace("%", ""));
|
||
if (!Number.isFinite(numeric)) return fallback;
|
||
return clampNumber(numeric / 100, 0.05, 1);
|
||
};
|
||
|
||
const hsvToRgb = (h: number, s: number, v: number) => {
|
||
const hue = ((h % 360) + 360) % 360;
|
||
const saturation = clampNumber(s, 0, 100) / 100;
|
||
const value = clampNumber(v, 0, 100) / 100;
|
||
const chroma = value * saturation;
|
||
const x = chroma * (1 - Math.abs(((hue / 60) % 2) - 1));
|
||
const match = value - chroma;
|
||
const [red, green, blue] =
|
||
hue < 60
|
||
? [chroma, x, 0]
|
||
: hue < 120
|
||
? [x, chroma, 0]
|
||
: hue < 180
|
||
? [0, chroma, x]
|
||
: hue < 240
|
||
? [0, x, chroma]
|
||
: hue < 300
|
||
? [x, 0, chroma]
|
||
: [chroma, 0, x];
|
||
return {
|
||
r: (red + match) * 255,
|
||
g: (green + match) * 255,
|
||
b: (blue + match) * 255,
|
||
};
|
||
};
|
||
|
||
const hexToHsv = (value: string) => {
|
||
const rgb = hexToRgb(value) ?? { r: 255, g: 255, b: 255 };
|
||
const red = rgb.r / 255;
|
||
const green = rgb.g / 255;
|
||
const blue = rgb.b / 255;
|
||
const max = Math.max(red, green, blue);
|
||
const min = Math.min(red, green, blue);
|
||
const delta = max - min;
|
||
const hue =
|
||
delta === 0
|
||
? 0
|
||
: max === red
|
||
? 60 * (((green - blue) / delta) % 6)
|
||
: max === green
|
||
? 60 * ((blue - red) / delta + 2)
|
||
: 60 * ((red - green) / delta + 4);
|
||
return {
|
||
h: Math.round((hue + 360) % 360),
|
||
s: max === 0 ? 0 : Math.round((delta / max) * 100),
|
||
v: Math.round(max * 100),
|
||
};
|
||
};
|
||
import tmallLogo from "../../assets/platform-logos/tmall.webp";
|
||
import { aiGenerationClient } from "../../api/aiGenerationClient";
|
||
import { ServerRequestError } from "../../api/serverConnection";
|
||
import { waitForTask } from "../../api/taskSubscription";
|
||
import { toast } from "../../components/toast/toastStore";
|
||
import { useGenerationTasks } from "../../hooks/useGenerationTasks";
|
||
import { useAppStore } from "../../stores";
|
||
import {
|
||
normalizeEcommerceImageMime,
|
||
summarizeRejectedImages,
|
||
validateEcommerceImageFiles,
|
||
} from "./ecommerceImageValidation";
|
||
|
||
|
||
interface ProductClonePageProps {
|
||
[key: string]: unknown;
|
||
}
|
||
|
||
type ProductCloneStatus = "idle" | "ready" | "generating" | "done" | "failed";
|
||
type ProductSetOutputKey = "set" | "detail" | "model" | "video";
|
||
type CloneOutputKey = ProductSetOutputKey | "hot" | "video-outfit";
|
||
type CloneSetCountKey = "selling" | "white" | "scene";
|
||
type CloneModelPanelTab = "scene" | "model";
|
||
type CloneVideoQualityKey = "standard" | "high" | "ultra";
|
||
type ProductSetStatus = "idle" | "ready" | "generating" | "done" | "failed";
|
||
type ProductKitToolKey = "set" | "detail" | "wear" | "clone";
|
||
type ComposerMenuKey = "mode" | "platform" | "language" | "ratio" | "settings";
|
||
type CloneBasicSelectKey = "platform" | "market" | "language" | "ratio";
|
||
type CloneModelSelectKey = "gender" | "age" | "ethnicity" | "body";
|
||
type CloneReferenceMode = "upload" | "link";
|
||
type CloneReplicateLevelKey = "style" | "high";
|
||
type TryOnModelSource = "ai" | "library";
|
||
type TryOnStatus = "idle" | "modeling" | "ready" | "generating" | "done" | "failed";
|
||
type DetailStatus = "idle" | "ready" | "generating" | "done" | "failed";
|
||
|
||
interface CloneImageItem {
|
||
id: string;
|
||
src: string;
|
||
name: string;
|
||
file?: File;
|
||
width?: number;
|
||
height?: number;
|
||
format?: string;
|
||
mimeType?: string;
|
||
ossKey?: string;
|
||
}
|
||
|
||
interface CloneResult {
|
||
id: string;
|
||
src: string;
|
||
label: string;
|
||
type?: "image" | "video";
|
||
}
|
||
|
||
interface CloneSavedSetting {
|
||
id: string;
|
||
name: string;
|
||
savedAt: string;
|
||
output: CloneOutputKey;
|
||
platform: string;
|
||
market: string;
|
||
language: string;
|
||
ratio: string;
|
||
setCounts: Record<CloneSetCountKey, number>;
|
||
detailModules: string[];
|
||
modelPanelTab: CloneModelPanelTab;
|
||
modelScenes: string[];
|
||
modelCustomScene: string;
|
||
modelGender: string;
|
||
modelAge: string;
|
||
modelEthnicity: string;
|
||
modelBody: string;
|
||
modelAppearance: string;
|
||
videoQuality: CloneVideoQualityKey;
|
||
videoDurationSeconds: number;
|
||
videoSmart: boolean;
|
||
referenceMode?: CloneReferenceMode;
|
||
replicateLevel?: CloneReplicateLevelKey;
|
||
requirement: string;
|
||
}
|
||
|
||
interface EcommerceHistoryRecord {
|
||
id: string;
|
||
title: string;
|
||
createdAt: number;
|
||
output: CloneOutputKey;
|
||
platform: string;
|
||
market: string;
|
||
language: string;
|
||
ratio: string;
|
||
requirement: string;
|
||
productImages: CloneImageItem[];
|
||
results: CloneResult[];
|
||
setResultImages: string[];
|
||
setCounts: Record<CloneSetCountKey, number>;
|
||
detailModules: string[];
|
||
modelScenes: string[];
|
||
referenceImages: CloneImageItem[];
|
||
replicateLevel: CloneReplicateLevelKey;
|
||
}
|
||
|
||
interface EcommerceImagePromptOptions {
|
||
gender?: string;
|
||
age?: string;
|
||
ethnicity?: string;
|
||
body?: string;
|
||
appearance?: string;
|
||
scenes?: string[];
|
||
customScene?: string;
|
||
smartScene?: boolean;
|
||
detailModules?: string[];
|
||
}
|
||
|
||
type PlatformRatioModeKey = ProductSetOutputKey | "hot" | "video-outfit";
|
||
|
||
interface PlatformRatioGroup {
|
||
ratios: string[];
|
||
defaultRatio: string;
|
||
}
|
||
|
||
const sideTools: Array<{ key: ProductKitToolKey; label: string; icon: ReactNode }> = [
|
||
{ key: "set", label: "商品套图", icon: <AppstoreOutlined /> },
|
||
{ key: "detail", label: "A+详情", icon: <FileImageOutlined /> },
|
||
{ key: "wear", label: "服饰穿搭", icon: <SkinOutlined /> },
|
||
{ key: "clone", label: "电商AI作图", icon: <AppstoreOutlined /> },
|
||
];
|
||
|
||
const platformSpecOptions: Array<{
|
||
label: string;
|
||
ratios: string[];
|
||
defaultRatio: string;
|
||
ratioGroups?: Partial<Record<PlatformRatioModeKey, PlatformRatioGroup>>;
|
||
specs: string[];
|
||
tip?: string;
|
||
aliases?: string[];
|
||
}> = [
|
||
{
|
||
label: "淘宝/天猫",
|
||
ratios: ["娣樺疂涓诲浘 / SKU 鍥?800脳800px", "璇︽儏椤靛 750px", "璇︽儏椤靛 790px"],
|
||
defaultRatio: "娣樺疂涓诲浘 / SKU 鍥?800脳800px",
|
||
ratioGroups: {
|
||
set: {
|
||
ratios: ["1000脳1000px\u00a0\u00a0\u00a01锛?", "800脳800px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "1000脳1000px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
detail: {
|
||
ratios: [
|
||
"750脳1000px\u00a0\u00a0\u00a03锛?",
|
||
"790脳1053px\u00a0\u00a0\u00a03锛?",
|
||
"750脳1125px\u00a0\u00a0\u00a02锛?",
|
||
"790脳1185px\u00a0\u00a0\u00a02锛?",
|
||
],
|
||
defaultRatio: "750脳1000px\u00a0\u00a0\u00a03锛?",
|
||
},
|
||
model: {
|
||
ratios: ["750脳1000px\u00a0\u00a0\u00a03锛?"],
|
||
defaultRatio: "750脳1000px\u00a0\u00a0\u00a03锛?",
|
||
},
|
||
video: {
|
||
ratios: ["1080脳1920px\u00a0\u00a0\u00a09锛?6", "1080脳1440px\u00a0\u00a0\u00a03锛?", "1080脳1080px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "1080脳1920px\u00a0\u00a0\u00a09锛?6",
|
||
},
|
||
hot: {
|
||
ratios: ["800脳800px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "800脳800px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
},
|
||
specs: ["涓诲浘 / SKU 鍥?800脳800px锛屸墹3MB", "璇︽儏椤靛 750px 鎴?790px锛屽崟寮犻珮鈮?546px"],
|
||
tip: "寤鸿涓诲浘 200-400KB JPG锛岃秴杩?500KB 浼氬奖鍝嶅姞杞介€熷害銆?",
|
||
},
|
||
{
|
||
label: "京东",
|
||
ratios: ["浜笢涓诲浘 / SKU 鍥?800脳800px", "璇︽儏椤靛 750px", "棣栧浘涓讳綋鍗犳瘮 鈮?0%"],
|
||
defaultRatio: "浜笢涓诲浘 / SKU 鍥?800脳800px",
|
||
ratioGroups: {
|
||
set: {
|
||
ratios: ["1000脳1000px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "1000脳1000px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
detail: {
|
||
ratios: [
|
||
"750脳1000px\u00a0\u00a0\u00a03锛?",
|
||
"990脳1320px\u00a0\u00a0\u00a03锛?",
|
||
"750脳1125px\u00a0\u00a0\u00a02锛?",
|
||
"990脳1485px\u00a0\u00a0\u00a02锛?",
|
||
],
|
||
defaultRatio: "750脳1000px\u00a0\u00a0\u00a03锛?",
|
||
},
|
||
model: {
|
||
ratios: ["750脳1125px\u00a0\u00a0\u00a02锛?", "990脳1485px\u00a0\u00a0\u00a02锛?"],
|
||
defaultRatio: "750脳1125px\u00a0\u00a0\u00a02锛?",
|
||
},
|
||
video: {
|
||
ratios: ["1080脳1920px\u00a0\u00a0\u00a09锛?6", "1920脳1080px\u00a0\u00a0\u00a016锛?"],
|
||
defaultRatio: "1080脳1920px\u00a0\u00a0\u00a09锛?6",
|
||
},
|
||
hot: {
|
||
ratios: ["800脳800px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "800脳800px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
},
|
||
specs: ["涓诲浘 / SKU 鍥?800脳800px锛岀櫧搴曪紝鈮?MB", "璇︽儏椤靛 750px锛岄鍥句富浣撳崰姣?鈮?0%"],
|
||
},
|
||
{
|
||
label: "拼多多",
|
||
ratios: ["涓诲浘 750脳352px", "涓诲浘 800脳800px", "璇︽儏椤靛 750px"],
|
||
defaultRatio: "涓诲浘 750脳352px",
|
||
ratioGroups: {
|
||
set: {
|
||
ratios: ["800脳800px\u00a0\u00a0\u00a01锛?", "750脳1000px\u00a0\u00a0\u00a03锛?"],
|
||
defaultRatio: "800脳800px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
detail: {
|
||
ratios: ["750脳1000px\u00a0\u00a0\u00a03锛?", "750脳1125px\u00a0\u00a0\u00a02锛?"],
|
||
defaultRatio: "750脳1000px\u00a0\u00a0\u00a03锛?",
|
||
},
|
||
model: {
|
||
ratios: ["750脳1000px\u00a0\u00a0\u00a03锛?"],
|
||
defaultRatio: "750脳1000px\u00a0\u00a0\u00a03锛?",
|
||
},
|
||
video: {
|
||
ratios: ["1080脳1920px\u00a0\u00a0\u00a09锛?6"],
|
||
defaultRatio: "1080脳1920px\u00a0\u00a0\u00a09锛?6",
|
||
},
|
||
hot: {
|
||
ratios: ["800脳800px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "800脳800px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
},
|
||
specs: ["涓诲浘 750脳352px 鎴?800脳800px锛屸墹1MB", "璇︽儏椤靛 750px锛岃姹傜函鐧藉簳銆佹棤姘村嵃銆佹棤鎷兼帴"],
|
||
},
|
||
{
|
||
label: "抖音电商",
|
||
ratios: ["鐭棰?1080脳1920px"],
|
||
defaultRatio: "鐭棰?1080脳1920px",
|
||
ratioGroups: {
|
||
video: {
|
||
ratios: ["1080脳1920px\u00a0\u00a0\u00a09锛?6"],
|
||
defaultRatio: "1080脳1920px\u00a0\u00a0\u00a09锛?6",
|
||
},
|
||
hot: {
|
||
ratios: ["800脳800px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "800脳800px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
},
|
||
specs: ["鐭棰?1080脳1920px锛?:16", "30s 鍐呮渶浣?"],
|
||
},
|
||
{
|
||
label: "亚马逊 Amazon",
|
||
ratios: ["涓诲浘 鈮?600脳1600px", "寤鸿 2000脳2000px+", "鏈€灏?500脳500px"],
|
||
defaultRatio: "涓诲浘 鈮?600脳1600px",
|
||
ratioGroups: {
|
||
set: {
|
||
ratios: ["1600脳1600px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "1600脳1600px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
detail: {
|
||
ratios: ["1600脳1600px\u00a0\u00a0\u00a01锛?", "1200脳1800px\u00a0\u00a0\u00a02锛?", "1200脳1600px\u00a0\u00a0\u00a03锛?"],
|
||
defaultRatio: "1200脳1800px\u00a0\u00a0\u00a02锛?",
|
||
},
|
||
model: {
|
||
ratios: ["1200脳1800px\u00a0\u00a0\u00a02锛?"],
|
||
defaultRatio: "1200脳1800px\u00a0\u00a0\u00a02锛?",
|
||
},
|
||
video: {
|
||
ratios: ["1920脳1080px\u00a0\u00a0\u00a016锛?"],
|
||
defaultRatio: "1920脳1080px\u00a0\u00a0\u00a016锛?",
|
||
},
|
||
hot: {
|
||
ratios: ["1600脳1600px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "1600脳1600px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
},
|
||
specs: ["涓诲浘 1600脳1600px+锛岀函鐧藉簳锛屸墹10MB", "鏈€灏?500脳500px锛屽缓璁?2000px+ 浠ユ敮鎸佺缉鏀?"],
|
||
aliases: ["浜氶┈閫?"],
|
||
},
|
||
{
|
||
label: "Shopee",
|
||
ratios: ["鍟嗗搧涓诲浘 1024脳1024px", "鍩虹涓诲浘 800脳800px"],
|
||
defaultRatio: "鍟嗗搧涓诲浘 1024脳1024px",
|
||
ratioGroups: {
|
||
set: {
|
||
ratios: ["800脳800px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "800脳800px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
detail: {
|
||
ratios: ["750脳1000px\u00a0\u00a0\u00a03锛?", "750脳1125px\u00a0\u00a0\u00a02锛?"],
|
||
defaultRatio: "750脳1000px\u00a0\u00a0\u00a03锛?",
|
||
},
|
||
model: {
|
||
ratios: ["750脳1000px\u00a0\u00a0\u00a03锛?"],
|
||
defaultRatio: "750脳1000px\u00a0\u00a0\u00a03锛?",
|
||
},
|
||
video: {
|
||
ratios: ["1080脳1920px\u00a0\u00a0\u00a09锛?6"],
|
||
defaultRatio: "1080脳1920px\u00a0\u00a0\u00a09锛?6",
|
||
},
|
||
hot: {
|
||
ratios: ["800脳800px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "800脳800px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
},
|
||
specs: ["鍟嗗搧涓诲浘鎺ㄨ崘 1024脳1024px锛屽熀纭€ 800脳800px", "鈮?MB锛岀櫧搴曟垨娴呰壊搴?"],
|
||
aliases: ["铏剧毊 Shopee/Lazada", "铏剧毊"],
|
||
},
|
||
{
|
||
label: "Lazada",
|
||
ratios: ["鍟嗗搧涓诲浘 800脳800px"],
|
||
defaultRatio: "鍟嗗搧涓诲浘 800脳800px",
|
||
ratioGroups: {
|
||
set: {
|
||
ratios: ["800脳800px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "800脳800px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
detail: {
|
||
ratios: ["750脳1000px\u00a0\u00a0\u00a03锛?", "750脳1125px\u00a0\u00a0\u00a02锛?"],
|
||
defaultRatio: "750脳1000px\u00a0\u00a0\u00a03锛?",
|
||
},
|
||
model: {
|
||
ratios: ["750脳1000px\u00a0\u00a0\u00a03锛?"],
|
||
defaultRatio: "750脳1000px\u00a0\u00a0\u00a03锛?",
|
||
},
|
||
video: {
|
||
ratios: ["1080脳1920px\u00a0\u00a0\u00a09锛?6"],
|
||
defaultRatio: "1080脳1920px\u00a0\u00a0\u00a09锛?6",
|
||
},
|
||
hot: {
|
||
ratios: ["800脳800px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "800脳800px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
},
|
||
specs: ["鍟嗗搧涓诲浘 800脳800px锛?:1"],
|
||
},
|
||
{
|
||
label: "Instagram",
|
||
ratios: ["甯栧瓙 1080脳1350px", "甯栧瓙 1080脳1080px", "Stories / Reels 1080脳1920px", "澶村儚 320脳320px"],
|
||
defaultRatio: "甯栧瓙 1080脳1350px",
|
||
ratioGroups: {
|
||
set: {
|
||
ratios: ["1080脳1080px\u00a0\u00a0\u00a01锛?", "1080脳1350px\u00a0\u00a0\u00a04锛?"],
|
||
defaultRatio: "1080脳1080px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
detail: {
|
||
ratios: ["1080脳1350px\u00a0\u00a0\u00a04锛?"],
|
||
defaultRatio: "1080脳1350px\u00a0\u00a0\u00a04锛?",
|
||
},
|
||
model: {
|
||
ratios: ["1080脳1350px\u00a0\u00a0\u00a04锛?"],
|
||
defaultRatio: "1080脳1350px\u00a0\u00a0\u00a04锛?",
|
||
},
|
||
video: {
|
||
ratios: ["1080脳1920px\u00a0\u00a0\u00a09锛?6", "1080脳1350px\u00a0\u00a0\u00a04锛?"],
|
||
defaultRatio: "1080脳1920px\u00a0\u00a0\u00a09锛?6",
|
||
},
|
||
},
|
||
specs: ["甯栧瓙 1080脳1350px 鎴?1080脳1080px", "Stories / Reels 灏侀潰 1080脳1920px锛屽ご鍍?320脳320px"],
|
||
tip: "寤鸿 鈮?MB JPG銆?",
|
||
aliases: ["Instagram Reels"],
|
||
},
|
||
{
|
||
label: "速卖通",
|
||
ratios: ["涓诲浘 800脳800px", "涓诲浘 1000脳1000px+"],
|
||
defaultRatio: "涓诲浘 800脳800px",
|
||
ratioGroups: {
|
||
set: {
|
||
ratios: ["1000脳1000px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "1000脳1000px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
detail: {
|
||
ratios: ["750脳1125px\u00a0\u00a0\u00a02锛?", "750脳1000px\u00a0\u00a0\u00a03锛?"],
|
||
defaultRatio: "750脳1125px\u00a0\u00a0\u00a02锛?",
|
||
},
|
||
model: {
|
||
ratios: ["750脳1125px\u00a0\u00a0\u00a02锛?"],
|
||
defaultRatio: "750脳1125px\u00a0\u00a0\u00a02锛?",
|
||
},
|
||
video: {
|
||
ratios: ["1080脳1920px\u00a0\u00a0\u00a09锛?6", "1920脳1080px\u00a0\u00a0\u00a016锛?"],
|
||
defaultRatio: "1080脳1920px\u00a0\u00a0\u00a09锛?6",
|
||
},
|
||
hot: {
|
||
ratios: ["800脳800px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "800脳800px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
},
|
||
specs: ["涓诲浘寤鸿 800脳800px 鎴栨洿楂橈紝1:1", "閫傚悎璺ㄥ鐢靛晢涓诲浘銆丼KU 鍥惧拰鍦烘櫙鍥?"],
|
||
},
|
||
{
|
||
label: "eBay",
|
||
ratios: ["鍟嗗搧鍥?1:1", "鐧藉簳澶氳搴﹀睍绀哄浘 1:1"],
|
||
defaultRatio: "鍟嗗搧鍥?1:1",
|
||
ratioGroups: {
|
||
set: {
|
||
ratios: ["1600脳1600px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "1600脳1600px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
detail: {
|
||
ratios: ["1000脳1500px\u00a0\u00a0\u00a02锛?", "1200脳1600px\u00a0\u00a0\u00a03锛?"],
|
||
defaultRatio: "1000脳1500px\u00a0\u00a0\u00a02锛?",
|
||
},
|
||
model: {
|
||
ratios: ["1000脳1500px\u00a0\u00a0\u00a02锛?"],
|
||
defaultRatio: "1000脳1500px\u00a0\u00a0\u00a02锛?",
|
||
},
|
||
video: {
|
||
ratios: ["1920脳1080px\u00a0\u00a0\u00a016锛?", "1080脳1920px\u00a0\u00a0\u00a09锛?6"],
|
||
defaultRatio: "1920脳1080px\u00a0\u00a0\u00a016锛?",
|
||
},
|
||
hot: {
|
||
ratios: ["1600脳1600px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "1600脳1600px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
},
|
||
specs: ["鍟嗗搧鍥惧缓璁?1:1锛屼富浣撴竻鏅板眳涓?", "閫傚悎鐧藉簳涓诲浘鍜屽瑙掑害灞曠ず鍥?"],
|
||
},
|
||
{
|
||
label: "TikTok Shop",
|
||
ratios: ["鍟嗗搧涓诲浘 1:1", "鐭棰?/ 绔栫増灏侀潰 9:16"],
|
||
defaultRatio: "鍟嗗搧涓诲浘 1:1",
|
||
ratioGroups: {
|
||
set: {
|
||
ratios: ["1280脳1280px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "1280脳1280px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
detail: {
|
||
ratios: ["1080脳1350px\u00a0\u00a0\u00a04锛?"],
|
||
defaultRatio: "1080脳1350px\u00a0\u00a0\u00a04锛?",
|
||
},
|
||
model: {
|
||
ratios: ["1080脳1350px\u00a0\u00a0\u00a04锛?"],
|
||
defaultRatio: "1080脳1350px\u00a0\u00a0\u00a04锛?",
|
||
},
|
||
video: {
|
||
ratios: ["1080脳1920px\u00a0\u00a0\u00a09锛?6"],
|
||
defaultRatio: "1080脳1920px\u00a0\u00a0\u00a09锛?6",
|
||
},
|
||
hot: {
|
||
ratios: ["800脳800px\u00a0\u00a0\u00a01锛?"],
|
||
defaultRatio: "800脳800px\u00a0\u00a0\u00a01锛?",
|
||
},
|
||
},
|
||
specs: ["鍟嗗搧涓诲浘寤鸿 1:1", "鐭棰?绔栫増灏侀潰寤鸿 9:16"],
|
||
},
|
||
];
|
||
const platformOptions = platformSpecOptions.map((option) => option.label);
|
||
const getPlatformLogoSources = (value: string) => {
|
||
const normalized = value.toLowerCase();
|
||
if (value.includes("淘宝") || value.includes("天猫") || value.includes("娣樺疂") || value.includes("澶╃尗")) return [taobaoLogo, tmallLogo];
|
||
if (value.includes("京东") || value.includes("浜笢")) return [jdLogo];
|
||
if (value.includes("拼多多") || value.includes("鎷煎澶")) return [pinduoduoLogo];
|
||
if (value.includes("抖音") || value.includes("鎶栭煶")) return [douyinLogo];
|
||
if (normalized.includes("amazon")) return [amazonLogo];
|
||
if (normalized.includes("shopee")) return [shopeeLogo];
|
||
if (normalized.includes("lazada")) return [lazadaLogo];
|
||
if (normalized.includes("instagram")) return [instagramLogo];
|
||
if (value.includes("速卖通") || value.includes("閫熷崠閫")) return [aliexpressLogo];
|
||
if (normalized.includes("ebay")) return [ebayLogo];
|
||
if (normalized.includes("tiktok")) return [tiktokShopLogo];
|
||
return [];
|
||
};
|
||
const renderPlatformLogo = (value: string) => {
|
||
const sources = getPlatformLogoSources(value);
|
||
return (
|
||
<span className={`ecom-platform-logo-mark${sources.length > 1 ? " ecom-platform-logo-mark--duo" : ""}`} aria-hidden="true">
|
||
{sources.map((src) => (
|
||
<img key={src} src={src} alt="" />
|
||
))}
|
||
</span>
|
||
);
|
||
};
|
||
const marketLanguageOptions: Array<{ country: string; languages: string[] }> = [
|
||
{ country: "中国", languages: ["中文"] },
|
||
{ country: "美国", languages: ["英文"] },
|
||
{ country: "加拿大", languages: ["英文", "法文"] },
|
||
{ country: "英国", languages: ["英文"] },
|
||
{ country: "德国", languages: ["德文"] },
|
||
{ country: "法国", languages: ["法文"] },
|
||
{ country: "意大利", languages: ["意大利语"] },
|
||
{ country: "西班牙", languages: ["西班牙语"] },
|
||
{ country: "日本", languages: ["日文"] },
|
||
{ country: "韩国", languages: ["韩文"] },
|
||
{ country: "澳大利亚", languages: ["英文"] },
|
||
{ country: "新加坡", languages: ["英文", "中文"] },
|
||
{ country: "马来西亚", languages: ["马来语", "英文", "中文"] },
|
||
{ country: "印尼", languages: ["印度尼西亚语", "英文"] },
|
||
{ country: "越南", languages: ["越南语", "英文"] },
|
||
{ country: "泰国", languages: ["泰语", "英文"] },
|
||
{ country: "菲律宾", languages: ["菲律宾语（他加禄语）", "英文"] },
|
||
{ country: "巴西", languages: ["葡萄牙语"] },
|
||
{ country: "墨西哥", languages: ["西班牙语"] },
|
||
{ country: "智利", languages: ["西班牙语"] },
|
||
{ country: "哥伦比亚", languages: ["西班牙语"] },
|
||
{ country: "阿联酋", languages: ["阿拉伯语", "英文"] },
|
||
{ country: "沙特阿拉伯", languages: ["阿拉伯语", "英文"] },
|
||
{ country: "俄罗斯", languages: ["俄语"] },
|
||
{ country: "波兰", languages: ["波兰语"] },
|
||
];
|
||
const marketOptions = marketLanguageOptions.map((option) => option.country);
|
||
const languageOptions = Array.from(new Set(marketLanguageOptions.flatMap((option) => option.languages)));
|
||
const languageAliases: Record<string, string> = {
|
||
"鑻辨枃": "英文",
|
||
"涓枃": "中文",
|
||
"鑻辫": "英文",
|
||
"鏃ヨ": "日文",
|
||
"鏃ユ枃": "日文",
|
||
"寰疯": "德文",
|
||
"寰锋枃": "德文",
|
||
"娉曡": "法文",
|
||
"娉曟枃": "法文",
|
||
"闊╄": "韩文",
|
||
"闊╂枃": "韩文",
|
||
"瑗挎枃": "西班牙语",
|
||
"瑗跨彮鐗欒": "西班牙语",
|
||
"钁℃枃": "葡萄牙语",
|
||
"钁¤悇鐗欒": "葡萄牙语",
|
||
"鍗板凹璇?": "印度尼西亚语",
|
||
"鍗板害灏艰タ浜氳": "印度尼西亚语",
|
||
"鑿插緥瀹捐": "菲律宾语（他加禄语）",
|
||
"鑿插緥瀹捐锛堜粬鍔犵璇級": "菲律宾语（他加禄语）",
|
||
};
|
||
const defaultPlatformSpec = platformSpecOptions[0]!;
|
||
const getPlatformSpec = (value: string) =>
|
||
platformSpecOptions.find((option) => option.label === value || option.aliases?.includes(value)) ?? defaultPlatformSpec;
|
||
const legacyPlatformAliases: Record<string, string> = {
|
||
"娣樺疂/澶╃尗": "淘宝/天猫",
|
||
"浜笢": "京东",
|
||
"鎷煎澶?": "拼多多",
|
||
"鎶栭煶鐢靛晢": "抖音电商",
|
||
"浜氶┈閫?Amazon": "亚马逊 Amazon",
|
||
"閫熷崠閫?": "速卖通",
|
||
};
|
||
const normalizePlatform = (value: string) => getPlatformSpec(legacyPlatformAliases[value] ?? value).label;
|
||
const domesticPlatformLabels = new Set(["淘宝/天猫", "京东", "拼多多", "抖音电商"]);
|
||
const domesticPlatformLanguages = ["中文"];
|
||
const isDomesticPlatform = (platformValue: string) => domesticPlatformLabels.has(normalizePlatform(platformValue));
|
||
const getPlatformRatioGroup = (value: string, mode?: PlatformRatioModeKey): PlatformRatioGroup => {
|
||
const platformSpec = getPlatformSpec(value);
|
||
return (mode ? platformSpec.ratioGroups?.[mode] : null) ?? {
|
||
ratios: platformSpec.ratios,
|
||
defaultRatio: platformSpec.defaultRatio,
|
||
};
|
||
};
|
||
const getPlatformRatioOptions = (value: string, mode?: PlatformRatioModeKey) => getPlatformRatioGroup(value, mode).ratios;
|
||
const getPlatformDefaultRatio = (value: string, mode?: PlatformRatioModeKey) => getPlatformRatioGroup(value, mode).defaultRatio;
|
||
const getUniqueRatioOptions = (ratios: string[]) => Array.from(new Set(ratios));
|
||
const normalizeRatioToken = (value: string) => value.replaceAll("锛?", ":").replaceAll("：", ":").replaceAll("脳", "×").trim();
|
||
const normalizeRatioForPlatform = (platformValue: string, ratioValue: string, mode?: PlatformRatioModeKey) => {
|
||
const platformRatios = getPlatformRatioOptions(platformValue, mode);
|
||
if (platformRatios.includes(ratioValue)) return ratioValue;
|
||
const normalizedRatio = normalizeRatioToken(ratioValue);
|
||
const matchedRatio = platformRatios.find((option) => normalizeRatioToken(option).includes(normalizedRatio));
|
||
return matchedRatio ?? getPlatformDefaultRatio(platformValue, mode);
|
||
};
|
||
const quickSetRatioOptions = ["1:1", "3:4", "9:16", "16:9"];
|
||
const getQuickSetRatioValue = (value: string) => {
|
||
const normalizedValue = normalizeRatioToken(value);
|
||
if (quickSetRatioOptions.includes(normalizedValue)) return normalizedValue;
|
||
const sizeMatch = normalizedValue.match(/(\d+)\s*[×xX]\s*(\d+)/u);
|
||
if (sizeMatch) {
|
||
const width = Number(sizeMatch[1]);
|
||
const height = Number(sizeMatch[2]);
|
||
if (Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0) {
|
||
const aspect = formatAspectRatio(width, height);
|
||
if (quickSetRatioOptions.includes(aspect)) return aspect;
|
||
}
|
||
}
|
||
const ratioMatch = normalizedValue.match(/(\d+)\s*[:：]\s*(\d+)/u);
|
||
if (ratioMatch) {
|
||
const aspect = `${Number(ratioMatch[1])}:${Number(ratioMatch[2])}`;
|
||
if (quickSetRatioOptions.includes(aspect)) return aspect;
|
||
}
|
||
return quickSetRatioOptions[0]!;
|
||
};
|
||
const formatRatioDisplayValue = (value: string) => {
|
||
const normalizedValue = normalizeRatioToken(value);
|
||
const sizeMatch = normalizedValue.match(/(\d+)\s*[×xX]\s*(\d+)\s*px?/u);
|
||
if (sizeMatch) {
|
||
const width = Number(sizeMatch[1]);
|
||
const height = Number(sizeMatch[2]);
|
||
return `${width}×${height}px\u00a0\u00a0\u00a0${formatAspectRatio(width, height)}`;
|
||
}
|
||
return normalizedValue
|
||
.replace("娣樺疂涓诲浘 / SKU 鍥?", "淘宝主图 / SKU 图 ")
|
||
.replace("浜笢涓诲浘 / SKU 鍥?", "京东主图 / SKU 图 ")
|
||
.replace("璇︽儏椤靛", "详情页宽")
|
||
.replace("鐭棰?", "短视频")
|
||
.replace("涓诲浘", "主图")
|
||
.replace("鍟嗗搧涓诲浘", "商品主图")
|
||
.replace("鍟嗗搧鍥?", "商品图");
|
||
};
|
||
/** Extract CSS aspect-ratio from a ratio string like "1000x1000px 1:1" -> "1 / 1" */
|
||
const parseRatioToAspectCss = (ratioStr: string): string => {
|
||
const match = ratioStr.match(/(\d+)\D+(\d+)/u);
|
||
if (!match) return "1 / 1";
|
||
return `${match[1]} / ${match[2]}`;
|
||
};
|
||
/** Normalize ratio display string ("1000脳1000px 1锛?") to API format ("1:1") */
|
||
const normalizeRatioForApi = (ratioStr: string): string => {
|
||
const match = ratioStr.match(/(\d+)\D+(\d+)/u);
|
||
if (!match) return "1:1";
|
||
return `${match[1]}:${match[2]}`;
|
||
};
|
||
const greatestCommonDivisor = (left: number, right: number): number => {
|
||
let a = Math.abs(left);
|
||
let b = Math.abs(right);
|
||
while (b) {
|
||
[a, b] = [b, a % b];
|
||
}
|
||
return a || 1;
|
||
};
|
||
const formatAspectRatio = (width: number, height: number) => {
|
||
const divisor = greatestCommonDivisor(width, height);
|
||
return `${Math.round(width / divisor)}：${Math.round(height / divisor)}`;
|
||
};
|
||
const formatUploadedImageRatio = (image?: CloneImageItem) => {
|
||
if (!image) return null;
|
||
const format = image.format ? `\u00a0\u00a0\u00a0${image.format}` : "";
|
||
if (!image.width || !image.height) return `上传图片\u00a0\u00a0\u00a0原图比例${format}`;
|
||
return `上传图片 ${image.width}×${image.height}px\u00a0\u00a0\u00a0${formatAspectRatio(image.width, image.height)}${format}`;
|
||
};
|
||
const defaultMarketLanguageOption = marketLanguageOptions[0]!;
|
||
const normalizeMarket = (value: string) =>
|
||
marketLanguageOptions.some((option) => option.country === value) ? value : defaultMarketLanguageOption.country;
|
||
const normalizeLanguage = (value: string) => languageAliases[value] ?? value;
|
||
const uniqueLanguages = (languages: string[]) => Array.from(new Set(languages));
|
||
const appendEnglish = (languages: string[]) => Array.from(new Set([...languages, "英文"]));
|
||
const getMarketLanguageOptions = (marketValue: string) =>
|
||
appendEnglish((marketLanguageOptions.find((option) => option.country === marketValue) ?? defaultMarketLanguageOption).languages);
|
||
const getPlatformLanguageOptions = (platformValue: string, marketValue: string) => {
|
||
const marketLanguages = getMarketLanguageOptions(marketValue);
|
||
if (!isDomesticPlatform(platformValue)) return marketLanguages;
|
||
const localLanguages = marketLanguages.filter((item) => item !== "英文");
|
||
return uniqueLanguages([...localLanguages, ...domesticPlatformLanguages, "英文"]);
|
||
};
|
||
const getPlatformDefaultLanguage = (platformValue: string, marketValue: string) =>
|
||
isDomesticPlatform(platformValue) ? "中文" : (getPlatformLanguageOptions(platformValue, marketValue)[0] ?? languageOptions[0] ?? "英文");
|
||
const normalizeLanguageForPlatform = (platformValue: string, marketValue: string, languageValue: string) => {
|
||
const normalizedLanguage = normalizeLanguage(languageValue);
|
||
const platformLanguages = getPlatformLanguageOptions(platformValue, marketValue);
|
||
return platformLanguages.includes(normalizedLanguage) ? normalizedLanguage : getPlatformDefaultLanguage(platformValue, marketValue);
|
||
};
|
||
const productSetOutputOptions: Array<{ key: ProductSetOutputKey; label: string }> = [
|
||
{ key: "set", label: "套图" },
|
||
{ key: "detail", label: "详情图" },
|
||
{ key: "model", label: "模特图" },
|
||
{ key: "video", label: "短视频" },
|
||
];
|
||
const cloneOutputOptions: Array<{ key: CloneOutputKey; label: string }> = [
|
||
...productSetOutputOptions,
|
||
{ key: "hot", label: "爆款复刻" },
|
||
{ key: "video-outfit", label: "视频换装" },
|
||
];
|
||
const cloneSetCountOptions: Array<{
|
||
key: CloneSetCountKey;
|
||
title: string;
|
||
desc: string;
|
||
}> = [
|
||
{ key: "selling", title: "卖点图", desc: "展示商品核心卖点和细节特写" },
|
||
{ key: "white", title: "白底图", desc: "白底主图，多角度呈现商品细节" },
|
||
{ key: "scene", title: "场景图", desc: "展示商品生活使用场景和人物搭配" },
|
||
];
|
||
const cloneSetCountKeys = cloneSetCountOptions.map((option) => option.key);
|
||
const defaultCloneSetCounts: Record<CloneSetCountKey, number> = {
|
||
selling: 3,
|
||
white: 1,
|
||
scene: 3,
|
||
};
|
||
const minCloneSetTotal = 1;
|
||
const maxCloneSetTotal = 16;
|
||
const maxCloneProductImages = 7;
|
||
const maxCloneReferenceImages = 20;
|
||
const cloneVideoDurationMin = 5;
|
||
const cloneVideoDurationMax = 45;
|
||
const defaultEcommercePlatform = "淘宝/天猫";
|
||
const defaultProductSetOutput: ProductSetOutputKey = "set";
|
||
const defaultCloneOutput: CloneOutputKey = "set";
|
||
const cloneLatestSettingStorageKey = "omniai.clone-ai.latest-setting";
|
||
const ecommerceHistoryStorageKey = "omniai.ecommerce.history.records";
|
||
const cloneVideoQualityOptions: Array<{ key: CloneVideoQualityKey; label: string; desc: string }> = [
|
||
{ key: "standard", label: "标准", desc: "快速出片" },
|
||
{ key: "high", label: "高清", desc: "推荐" },
|
||
{ key: "ultra", label: "超清", desc: "细节增强" },
|
||
];
|
||
const cloneReplicateLevelOptions: Array<{ key: CloneReplicateLevelKey; title: string; desc: string }> = [
|
||
{ key: "style", title: "参考风格", desc: "参考整体风格和结构，自动调整色彩和重构场景。" },
|
||
{ key: "high", title: "高度复刻", desc: "参考视觉结构替换产品和文案，保留主要场景细节。" },
|
||
];
|
||
const tryOnRatioOptions = ["3:4", "1:1", "9:16"];
|
||
const tryOnScenes = ["纯色棚拍", "都市街头", "街角咖啡", "自然草坪", "度假海滩", "温馨居家", "艺术展馆"];
|
||
const normalizeCloneModelSceneSelection = (scenes: string[] | null | undefined) => {
|
||
const validScenes = (scenes ?? []).filter((scene) => typeof scene === "string" && scene.trim());
|
||
const latestScene = validScenes[validScenes.length - 1];
|
||
return latestScene ? [latestScene] : [];
|
||
};
|
||
const tryOnModelOptions = {
|
||
gender: ["女", "男"],
|
||
age: ["青年", "少年", "中年"],
|
||
ethnicity: ["欧美白人", "亚洲人", "拉美裔", "非洲裔"],
|
||
body: ["标准", "高挑", "微胖", "运动"],
|
||
};
|
||
const sampleResults = [
|
||
ossAssets.ecommerce.slides.slide4,
|
||
ossAssets.ecommerce.generated,
|
||
ossAssets.ecommerce.slides.slide5,
|
||
];
|
||
const productSetAssets = ossAssets.ecommerce.productSet;
|
||
const productSetPreviewCards = [
|
||
{ id: "main", label: "01 涓诲浘 (鐧藉簳/鍚堣)", src: productSetAssets.main },
|
||
{ id: "scene", label: "02 鍦烘櫙灞曠ず", src: productSetAssets.scene },
|
||
{ id: "model", label: "03 妯＄壒鍦烘櫙鍥?", src: productSetAssets.model },
|
||
{ id: "detail", label: "04 缁嗚妭璇存槑", src: productSetAssets.detail },
|
||
{ id: "selling", label: "05 鍗栫偣璇﹁В", src: productSetAssets.selling },
|
||
];
|
||
const tryOnAssets = ossAssets.ecommerce.tryOn;
|
||
|
||
const tryOnCards = [
|
||
{
|
||
title: "澶氫欢娣锋惌鑷姩铻嶅悎",
|
||
tone: "red",
|
||
inputs: [tryOnAssets.dressA, tryOnAssets.dressB, tryOnAssets.modelWoman],
|
||
results: [tryOnAssets.tryA, tryOnAssets.tryB],
|
||
},
|
||
{
|
||
title: "涓€浠朵篃鑳藉嚭澶х墖",
|
||
tone: "brown",
|
||
inputs: [tryOnAssets.jacket, tryOnAssets.modelMan],
|
||
results: [tryOnAssets.jacketResultA, tryOnAssets.jacketResultB],
|
||
},
|
||
{
|
||
title: "闉嬪附楗板搧瀹岀編閫傞厤",
|
||
tone: "gold",
|
||
inputs: [tryOnAssets.hat, tryOnAssets.modelAsian],
|
||
results: [tryOnAssets.hatResultA, tryOnAssets.hatResultB],
|
||
},
|
||
];
|
||
|
||
const detailTypeOptions = ["普通A+", "品牌A+", "标准详情页", "移动端长图"];
|
||
const detailModules = [
|
||
{ id: "hero", title: "首页焦点图", desc: "集中呈现核心利益点" },
|
||
{ id: "selling", title: "卖点强化图", desc: "放大产品优势" },
|
||
{ id: "usage", title: "使用情境图", desc: "还原实际使用画面" },
|
||
{ id: "angle", title: "外观角度图", desc: "展示不同视角造型" },
|
||
{ id: "scene", title: "氛围场景图", desc: "营造产品应用环境" },
|
||
{ id: "detail", title: "细节特写图", desc: "突出材质和做工" },
|
||
{ id: "story", title: "品牌理念图", desc: "表达品牌主张" },
|
||
{ id: "size", title: "规格尺寸图", desc: "说明尺寸容量尺码" },
|
||
{ id: "compare", title: "效果对照图", desc: "呈现前后差异" },
|
||
{ id: "spec", title: "参数信息表", desc: "整理商品关键数据" },
|
||
{ id: "craft", title: "工艺流程图", desc: "说明制作与处理步骤" },
|
||
{ id: "gift", title: "清单配件图", desc: "展示包装内全部内容" },
|
||
{ id: "series", title: "SKU组合图", desc: "呈现颜色款式组合" },
|
||
{ id: "ingredient", title: "成分材质图", desc: "说明配方或材料构成" },
|
||
{ id: "service", title: "保障说明图", desc: "传达质保退换承诺" },
|
||
{ id: "tips", title: "使用提示图", desc: "提醒操作与保养要点" },
|
||
];
|
||
const defaultDetailModuleIds: string[] = [];
|
||
const defaultCloneDetailModuleIds = ["hero", "selling", "usage", "angle", "scene", "detail"];
|
||
const maxDetailModuleSelection = 6;
|
||
const cloneDetailModules = detailModules;
|
||
const detailAssets = ossAssets.ecommerce.detail;
|
||
const detailProductSamples = [detailAssets.productA, detailAssets.productB, detailAssets.productC];
|
||
const detailGridSamples = [detailAssets.gridA, detailAssets.gridB, detailAssets.gridC, detailAssets.gridD, detailAssets.gridE, detailAssets.gridF];
|
||
|
||
function getImageFileFormat(file: File) {
|
||
const mimeFormat = file.type.split("/")[1]?.replace("jpeg", "jpg").toUpperCase();
|
||
if (mimeFormat) return mimeFormat;
|
||
return file.name.split(".").pop()?.toUpperCase() ?? "";
|
||
}
|
||
|
||
function readImageDimensions(src: string): Promise<{ width: number; height: number }> {
|
||
return new Promise((resolve, reject) => {
|
||
const image = new Image();
|
||
image.onload = () => resolve({ width: image.naturalWidth, height: image.naturalHeight });
|
||
image.onerror = reject;
|
||
image.src = src;
|
||
});
|
||
}
|
||
|
||
const blobToDataUrl = (blob: Blob): Promise<string> =>
|
||
new Promise((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.onload = () => resolve(String(reader.result || ""));
|
||
reader.onerror = () => reject(reader.error || new Error("鏂囦欢璇诲彇澶辫触"));
|
||
reader.readAsDataURL(blob);
|
||
});
|
||
|
||
async function createUploadedImageItems(files: File[], limit: number, prefix: string): Promise<CloneImageItem[]> {
|
||
const selectedFiles = Array.from(files).slice(0, limit);
|
||
const stamp = Date.now();
|
||
|
||
const items = await Promise.all(selectedFiles.map(async (file, index) => {
|
||
const localPreviewUrl = URL.createObjectURL(file);
|
||
let src = localPreviewUrl;
|
||
let ossKey: string | undefined;
|
||
let shouldRevokeLocalPreview = false;
|
||
let dimensions: { width?: number; height?: number } = {};
|
||
try {
|
||
dimensions = await readImageDimensions(localPreviewUrl);
|
||
} catch {
|
||
dimensions = {};
|
||
}
|
||
|
||
const mimeType = normalizeEcommerceImageMime(file.type);
|
||
try {
|
||
const uploadBlob = file.type === mimeType ? file : new Blob([file], { type: mimeType });
|
||
const uploaded = await aiGenerationClient.uploadAssetBinary(uploadBlob, {
|
||
name: file.name,
|
||
mimeType,
|
||
scope: "ecommerce-product",
|
||
});
|
||
src = uploaded.url;
|
||
ossKey = uploaded.ossKey;
|
||
shouldRevokeLocalPreview = true;
|
||
} catch {
|
||
src = localPreviewUrl;
|
||
} finally {
|
||
if (shouldRevokeLocalPreview) URL.revokeObjectURL(localPreviewUrl);
|
||
}
|
||
|
||
return {
|
||
id: `${prefix}-${stamp}-${index}`,
|
||
src,
|
||
name: file.name,
|
||
file,
|
||
format: getImageFileFormat(file),
|
||
mimeType,
|
||
ossKey,
|
||
...dimensions,
|
||
};
|
||
}));
|
||
|
||
return items;
|
||
}
|
||
|
||
async function persistGeneratedImageUrl(sourceUrl: string, scope: string, namePrefix: string): Promise<string> {
|
||
if (!sourceUrl) return sourceUrl;
|
||
try {
|
||
if (sourceUrl.startsWith("data:")) {
|
||
const { url } = await aiGenerationClient.uploadAsset({
|
||
dataUrl: sourceUrl,
|
||
name: `${namePrefix}-${Date.now()}.png`,
|
||
scope,
|
||
});
|
||
return url || sourceUrl;
|
||
}
|
||
|
||
if (sourceUrl.startsWith("blob:")) {
|
||
const rawBlob = await fetch(sourceUrl).then((res) => res.blob());
|
||
const mimeType = normalizeEcommerceImageMime(rawBlob.type);
|
||
const blob = rawBlob.type === mimeType ? rawBlob : new Blob([rawBlob], { type: mimeType });
|
||
const { url } = await aiGenerationClient.uploadAssetBinary(blob, {
|
||
name: `${namePrefix}-${Date.now()}.png`,
|
||
mimeType,
|
||
scope,
|
||
});
|
||
return url;
|
||
}
|
||
|
||
const { url } = await aiGenerationClient.uploadAssetByUrl({
|
||
sourceUrl,
|
||
name: `${namePrefix}-${Date.now()}`,
|
||
scope,
|
||
});
|
||
return url || sourceUrl;
|
||
} catch {
|
||
return sourceUrl;
|
||
}
|
||
}
|
||
|
||
function notifyRejectedImages(files: File[]): File[] {
|
||
const { accepted, rejected } = validateEcommerceImageFiles(files);
|
||
const message = summarizeRejectedImages(rejected);
|
||
if (message) toast.error(message);
|
||
return accepted;
|
||
}
|
||
|
||
function isCloneSavedSetting(item: unknown): item is CloneSavedSetting {
|
||
const candidate = item as Partial<CloneSavedSetting>;
|
||
return (
|
||
typeof candidate.id === "string" &&
|
||
typeof candidate.name === "string" &&
|
||
typeof candidate.savedAt === "string" &&
|
||
typeof candidate.output === "string" &&
|
||
typeof candidate.platform === "string" &&
|
||
typeof candidate.market === "string" &&
|
||
typeof candidate.language === "string" &&
|
||
typeof candidate.ratio === "string" &&
|
||
typeof candidate.videoDurationSeconds === "number"
|
||
);
|
||
}
|
||
|
||
function readCloneLatestSetting() {
|
||
if (typeof window === "undefined") return null;
|
||
try {
|
||
const rawValue = window.localStorage.getItem(cloneLatestSettingStorageKey);
|
||
if (rawValue) {
|
||
const parsedValue: unknown = JSON.parse(rawValue);
|
||
if (isCloneSavedSetting(parsedValue)) return parsedValue;
|
||
}
|
||
} catch {
|
||
return null;
|
||
}
|
||
return null;
|
||
}
|
||
|
||
function writeCloneLatestSetting(setting: CloneSavedSetting) {
|
||
if (typeof window === "undefined") return;
|
||
window.localStorage.setItem(cloneLatestSettingStorageKey, JSON.stringify(setting));
|
||
}
|
||
|
||
function isCloneImageItem(item: unknown): item is CloneImageItem {
|
||
const candidate = item as Partial<CloneImageItem>;
|
||
return typeof candidate.id === "string" && typeof candidate.src === "string" && typeof candidate.name === "string";
|
||
}
|
||
|
||
function isCloneResult(item: unknown): item is CloneResult {
|
||
const candidate = item as Partial<CloneResult>;
|
||
return typeof candidate.id === "string" && typeof candidate.src === "string" && typeof candidate.label === "string";
|
||
}
|
||
|
||
function isEcommerceHistoryRecord(item: unknown): item is EcommerceHistoryRecord {
|
||
const candidate = item as Partial<EcommerceHistoryRecord>;
|
||
return (
|
||
typeof candidate.id === "string" &&
|
||
typeof candidate.title === "string" &&
|
||
typeof candidate.createdAt === "number" &&
|
||
typeof candidate.output === "string" &&
|
||
typeof candidate.platform === "string" &&
|
||
typeof candidate.market === "string" &&
|
||
typeof candidate.language === "string" &&
|
||
typeof candidate.ratio === "string" &&
|
||
typeof candidate.requirement === "string" &&
|
||
Array.isArray(candidate.productImages) &&
|
||
candidate.productImages.every(isCloneImageItem) &&
|
||
Array.isArray(candidate.results) &&
|
||
candidate.results.every(isCloneResult)
|
||
);
|
||
}
|
||
|
||
function removeFilePayloadFromImages(images: CloneImageItem[]): CloneImageItem[] {
|
||
return images.map(({ file: _file, ...image }) => image);
|
||
}
|
||
|
||
function normalizeEcommerceHistoryRecord(record: EcommerceHistoryRecord): EcommerceHistoryRecord {
|
||
return {
|
||
...record,
|
||
productImages: removeFilePayloadFromImages(record.productImages),
|
||
referenceImages: removeFilePayloadFromImages(record.referenceImages ?? []),
|
||
results: record.results ?? [],
|
||
setResultImages: record.setResultImages ?? [],
|
||
setCounts: record.setCounts ?? defaultCloneSetCounts,
|
||
detailModules: record.detailModules ?? defaultCloneDetailModuleIds,
|
||
modelScenes: record.modelScenes ?? [],
|
||
replicateLevel: record.replicateLevel ?? "high",
|
||
};
|
||
}
|
||
|
||
function readEcommerceHistoryRecords() {
|
||
if (typeof window === "undefined") return [];
|
||
try {
|
||
const rawValue = window.localStorage.getItem(ecommerceHistoryStorageKey);
|
||
if (!rawValue) return [];
|
||
const parsedValue: unknown = JSON.parse(rawValue);
|
||
if (!Array.isArray(parsedValue)) return [];
|
||
return parsedValue
|
||
.filter(isEcommerceHistoryRecord)
|
||
.map(normalizeEcommerceHistoryRecord)
|
||
.sort((a, b) => b.createdAt - a.createdAt)
|
||
.slice(0, 30);
|
||
} catch {
|
||
return [];
|
||
}
|
||
}
|
||
|
||
function writeEcommerceHistoryRecords(records: EcommerceHistoryRecord[]) {
|
||
if (typeof window === "undefined") return;
|
||
window.localStorage.setItem(ecommerceHistoryStorageKey, JSON.stringify(records.map(normalizeEcommerceHistoryRecord).slice(0, 30)));
|
||
}
|
||
|
||
function clampCloneVideoDuration(value: number) {
|
||
return Math.min(cloneVideoDurationMax, Math.max(cloneVideoDurationMin, Math.round(value)));
|
||
}
|
||
|
||
function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||
const setInputRef = useRef<HTMLInputElement>(null);
|
||
const productInputRef = useRef<HTMLInputElement>(null);
|
||
const quickProductInputRef = useRef<HTMLInputElement>(null);
|
||
const cloneReferenceInputRef = useRef<HTMLInputElement>(null);
|
||
const smartCutoutInputRef = useRef<HTMLInputElement>(null);
|
||
const imageWorkbenchInputRef = useRef<HTMLInputElement>(null);
|
||
const watermarkInputRef = useRef<HTMLInputElement>(null);
|
||
const watermarkProcessTimeoutRef = useRef<number | null>(null);
|
||
const smartCutoutTransitionTimeoutRef = useRef<number | null>(null);
|
||
const smartCutoutPendingUrlsRef = useRef<string[]>([]);
|
||
const smartCutoutPaletteRef = useRef<HTMLDivElement>(null);
|
||
const smartCutoutToolsRef = useRef<HTMLDivElement>(null);
|
||
const composerMenuCloseTimeoutRef = useRef<number | null>(null);
|
||
const requirementTextareaRef = useRef<HTMLTextAreaElement>(null);
|
||
const commandComposerWrapRef = useRef<HTMLElement | null>(null);
|
||
const garmentInputRef = useRef<HTMLInputElement>(null);
|
||
const detailInputRef = useRef<HTMLInputElement>(null);
|
||
const countHoldTimeoutRef = useRef<number | null>(null);
|
||
const countHoldIntervalRef = useRef<number | null>(null);
|
||
const isAuthenticated = Boolean((_props as Record<string, unknown>).isAuthenticated);
|
||
const requestLogin = () => {
|
||
const handler = (_props as Record<string, unknown>).onRequireLogin;
|
||
if (typeof handler === "function") handler();
|
||
};
|
||
const imageGen = useGenerationTasks({ sourceView: "ecommerce" });
|
||
const appUsage = useAppStore((s) => s.usage);
|
||
const latestCloneSettingRef = useRef<CloneSavedSetting | null>(null);
|
||
const skipInitialCloneAutoSaveRef = useRef(true);
|
||
const skipNextCloneAutoSaveRef = useRef(false);
|
||
const [activeTool, setActiveTool] = useState<ProductKitToolKey>("clone");
|
||
useEffect(() => {
|
||
setPreviewZoom(1);
|
||
setIsCommandComposerCompact(false);
|
||
}, [activeTool]);
|
||
const [setImages, setSetImages] = useState<CloneImageItem[]>([]);
|
||
const [productSetPlatform, setProductSetPlatform] = useState(defaultEcommercePlatform);
|
||
const [productSetMarket, setProductSetMarket] = useState(marketOptions[0]);
|
||
const [productSetLanguage, setProductSetLanguage] = useState(getPlatformDefaultLanguage(defaultEcommercePlatform, marketOptions[0]));
|
||
const [productSetRatio, setProductSetRatio] = useState(getPlatformDefaultRatio(defaultEcommercePlatform, defaultProductSetOutput));
|
||
const [productSetRequirement, setProductSetRequirement] = useState("");
|
||
const [productSetOutput, setProductSetOutput] = useState<ProductSetOutputKey>(defaultProductSetOutput);
|
||
const [productSetStatus, setProductSetStatus] = useState<ProductSetStatus>("idle");
|
||
const [productSetResultImages, setProductSetResultImages] = useState<string[]>([]);
|
||
const [isSetUploadDragging, setIsSetUploadDragging] = useState(false);
|
||
const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<{ src: string; label: string } | null>(null);
|
||
const [showHostingModal, setShowHostingModal] = useState(false);
|
||
const [productImages, setProductImages] = useState<CloneImageItem[]>([]);
|
||
const [activeQuickTool, setActiveQuickTool] = useState<"cutout" | "set" | "detail" | "watermark" | "image-edit" | "hot-video" | null>(null);
|
||
const [smartCutoutImage, setSmartCutoutImage] = useState<SmartCutoutImageItem | null>(null);
|
||
const [smartCutoutBatchImages, setSmartCutoutBatchImages] = useState<SmartCutoutImageItem[]>([]);
|
||
const [smartCutoutBackgroundColor, setSmartCutoutBackgroundColor] = useState("#ffffff");
|
||
const [smartCutoutBackgroundAlpha, setSmartCutoutBackgroundAlpha] = useState(100);
|
||
const [smartCutoutHexDraft, setSmartCutoutHexDraft] = useState("#ffffff");
|
||
const [isSmartCutoutPaletteOpen, setIsSmartCutoutPaletteOpen] = useState(false);
|
||
const [smartCutoutSizeKey, setSmartCutoutSizeKey] = useState<SmartCutoutSizeKey>("original");
|
||
const [isSmartCutoutDragging, setIsSmartCutoutDragging] = useState(false);
|
||
const [isSmartCutoutComparing, setIsSmartCutoutComparing] = useState(false);
|
||
const [isSmartCutoutTransitioning, setIsSmartCutoutTransitioning] = useState(false);
|
||
const [smartCutoutTransitionMessage, setSmartCutoutTransitionMessage] = useState({
|
||
title: "正在切换页面",
|
||
subtitle: "请稍候",
|
||
});
|
||
const [watermarkImage, setWatermarkImage] = useState<{ src: string; name: string; format: string } | null>(null);
|
||
const [watermarkStatus, setWatermarkStatus] = useState<"idle" | "processing" | "done">("idle");
|
||
const [isWatermarkDragging, setIsWatermarkDragging] = useState(false);
|
||
const [imageWorkbenchImage, setImageWorkbenchImage] = useState<{ src: string; name: string; format: string } | null>(null);
|
||
const [imageWorkbenchPrompt, setImageWorkbenchPrompt] = useState("");
|
||
const [imageWorkbenchBrushSize, setImageWorkbenchBrushSize] = useState(50);
|
||
const [imageWorkbenchRatio, setImageWorkbenchRatio] = useState("1:1");
|
||
const [imageWorkbenchStatus, setImageWorkbenchStatus] = useState<"idle" | "processing" | "done">("idle");
|
||
const [isImageWorkbenchDragging, setIsImageWorkbenchDragging] = useState(false);
|
||
const [imageWorkbenchMaskStrokes, setImageWorkbenchMaskStrokes] = useState<Array<{ id: string; size: number; points: Array<{ x: number; y: number }> }>>([]);
|
||
const [imageWorkbenchBrushCursor, setImageWorkbenchBrushCursor] = useState<{ x: number; y: number } | null>(null);
|
||
const [isProductUploadDragging, setIsProductUploadDragging] = useState(false);
|
||
const [cloneOutput, setCloneOutput] = useState<CloneOutputKey>(defaultCloneOutput);
|
||
const [videoHistoryVisible, setVideoHistoryVisible] = useState(false);
|
||
const [videoPlanTrigger, setVideoPlanTrigger] = useState(0);
|
||
const [openCloneBasicSelect, setOpenCloneBasicSelect] = useState<CloneBasicSelectKey | null>(null);
|
||
const [openQuickSetSelect, setOpenQuickSetSelect] = useState<CloneBasicSelectKey | null>(null);
|
||
const [visibleQuickSetSelect, setVisibleQuickSetSelect] = useState<CloneBasicSelectKey | null>(null);
|
||
const [isQuickSetSelectClosing, setIsQuickSetSelectClosing] = useState(false);
|
||
const [composerMenu, setComposerMenu] = useState<ComposerMenuKey | null>(null);
|
||
const [visibleComposerMenu, setVisibleComposerMenu] = useState<ComposerMenuKey | null>(null);
|
||
const [isComposerMenuClosing, setIsComposerMenuClosing] = useState(false);
|
||
const [composerPopoverLeft, setComposerPopoverLeft] = useState(0);
|
||
const [isCommandHistoryCollapsed, setIsCommandHistoryCollapsed] = useState(() => (typeof window !== "undefined" ? window.innerWidth <= 1180 : false));
|
||
const [isQuickPanelCollapsed, setIsQuickPanelCollapsed] = useState(false);
|
||
const [openCloneModelSelect, setOpenCloneModelSelect] = useState<CloneModelSelectKey | null>(null);
|
||
const [cloneModelSelectDropUp, setCloneModelSelectDropUp] = useState(false);
|
||
const [cloneReferenceMode, setCloneReferenceMode] = useState<CloneReferenceMode>("upload");
|
||
const [cloneReferenceImages, setCloneReferenceImages] = useState<CloneImageItem[]>([]);
|
||
const [cloneReplicateLevel, setCloneReplicateLevel] = useState<CloneReplicateLevelKey>("high");
|
||
const [cloneSetCounts, setCloneSetCounts] = useState(defaultCloneSetCounts);
|
||
const [selectedCloneDetailModules, setSelectedCloneDetailModules] = useState<string[]>(defaultCloneDetailModuleIds);
|
||
const [cloneModelPanelTab, setCloneModelPanelTab] = useState<CloneModelPanelTab>("scene");
|
||
const [selectedCloneModelScenes, setSelectedCloneModelScenes] = useState<string[]>([]);
|
||
const [cloneModelCustomScene, setCloneModelCustomScene] = useState("");
|
||
const [cloneModelGender, setCloneModelGender] = useState(tryOnModelOptions.gender[0]);
|
||
const [cloneModelAge, setCloneModelAge] = useState(tryOnModelOptions.age[0]);
|
||
const [cloneModelEthnicity, setCloneModelEthnicity] = useState(tryOnModelOptions.ethnicity[0]);
|
||
const [cloneModelBody, setCloneModelBody] = useState(tryOnModelOptions.body[0]);
|
||
const [cloneModelAppearance, setCloneModelAppearance] = useState("");
|
||
const [cloneVideoQuality, setCloneVideoQuality] = useState<CloneVideoQualityKey>("high");
|
||
const [cloneVideoDuration, setCloneVideoDuration] = useState(10);
|
||
const [cloneVideoSmart, setCloneVideoSmart] = useState(true);
|
||
const [videoOutfitVideoFile, setVideoOutfitVideoFile] = useState<File | null>(null);
|
||
const [videoOutfitRefFile, setVideoOutfitRefFile] = useState<File | null>(null);
|
||
const videoOutfitPreviewUrl = useMemo(() => (videoOutfitVideoFile ? URL.createObjectURL(videoOutfitVideoFile) : ""), [videoOutfitVideoFile]);
|
||
const [isCloneSettingsCollapsed, setIsCloneSettingsCollapsed] = useState(false);
|
||
const [previewZoom, setPreviewZoom] = useState(1);
|
||
const quickSetSelectTimerRef = useRef<number | null>(null);
|
||
const openQuickSetSelectRef = useRef<CloneBasicSelectKey | null>(null);
|
||
const visibleQuickSetSelectRef = useRef<CloneBasicSelectKey | null>(null);
|
||
const [previewOffset, setPreviewOffset] = useState({ x: 0, y: 0 });
|
||
const previewSurfaceRef = useRef<HTMLElement | null>(null);
|
||
const previewZoomRef = useRef(previewZoom);
|
||
const previewOffsetRef = useRef(previewOffset);
|
||
const imageWorkbenchMaskPaintingRef = useRef(false);
|
||
const imageWorkbenchActiveStrokeIdRef = useRef<string | null>(null);
|
||
const imageWorkbenchMaskCanvasRef = useRef<HTMLCanvasElement>(null);
|
||
const imageWorkbenchLastMaskPointRef = useRef<{ x: number; y: number } | null>(null);
|
||
const previewPanRef = useRef<{ active: boolean; startX: number; startY: number; offsetX: number; offsetY: number }>({
|
||
active: false,
|
||
startX: 0,
|
||
startY: 0,
|
||
offsetX: 0,
|
||
offsetY: 0,
|
||
});
|
||
const [isCommandComposerCompact, setIsCommandComposerCompact] = useState(false);
|
||
const typewriterText = useTypewriter("万物皆可AI，广告素材一键生成");
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
if (videoOutfitPreviewUrl) URL.revokeObjectURL(videoOutfitPreviewUrl);
|
||
};
|
||
}, [videoOutfitPreviewUrl]);
|
||
|
||
useEffect(() => {
|
||
previewZoomRef.current = previewZoom;
|
||
}, [previewZoom]);
|
||
|
||
useEffect(() => {
|
||
previewOffsetRef.current = previewOffset;
|
||
}, [previewOffset]);
|
||
|
||
useEffect(() => {
|
||
if (typeof window === "undefined") return undefined;
|
||
const syncHistoryPanel = () => {
|
||
setIsCommandHistoryCollapsed(window.innerWidth <= 1180);
|
||
};
|
||
syncHistoryPanel();
|
||
window.addEventListener("resize", syncHistoryPanel);
|
||
return () => window.removeEventListener("resize", syncHistoryPanel);
|
||
}, []);
|
||
|
||
const previewTransformStyle = useMemo<CSSProperties>(
|
||
() => ({
|
||
transform: `translate3d(${previewOffset.x}px, ${previewOffset.y}px, 0) scale(${previewZoom})`,
|
||
}),
|
||
[previewOffset.x, previewOffset.y, previewZoom],
|
||
);
|
||
|
||
useEffect(() => {
|
||
const container = previewSurfaceRef.current;
|
||
if (!container) return undefined;
|
||
|
||
const handleWheel = (event: WheelEvent) => {
|
||
const target = event.target as HTMLElement | null;
|
||
if (target?.closest(".ecom-command-composer-wrap, .clone-ai-preview-header")) return;
|
||
event.preventDefault();
|
||
const currentZoom = previewZoomRef.current;
|
||
const rect = container.getBoundingClientRect();
|
||
const cursorX = event.clientX - rect.left;
|
||
const cursorY = event.clientY - rect.top;
|
||
const zoomDelta = event.deltaY < 0 ? 1.08 : 0.92;
|
||
const nextZoom = Math.min(2, Math.max(0.25, currentZoom * zoomDelta));
|
||
if (nextZoom === currentZoom) return;
|
||
|
||
const currentOffset = previewOffsetRef.current;
|
||
const contentX = (cursorX - currentOffset.x) / currentZoom;
|
||
const contentY = (cursorY - currentOffset.y) / currentZoom;
|
||
const nextOffset = {
|
||
x: cursorX - contentX * nextZoom,
|
||
y: cursorY - contentY * nextZoom,
|
||
};
|
||
|
||
previewZoomRef.current = nextZoom;
|
||
previewOffsetRef.current = nextOffset;
|
||
setPreviewZoom(nextZoom);
|
||
setPreviewOffset(nextOffset);
|
||
};
|
||
|
||
container.addEventListener("wheel", handleWheel, { passive: false, capture: true });
|
||
return () => container.removeEventListener("wheel", handleWheel, { capture: true });
|
||
}, [activeTool, cloneOutput]);
|
||
|
||
useEffect(() => {
|
||
const container = previewSurfaceRef.current;
|
||
if (!container) return undefined;
|
||
const listenerOptions = { capture: true };
|
||
|
||
const handleMouseDown = (event: MouseEvent) => {
|
||
if (event.button !== 1) return;
|
||
const target = event.target as HTMLElement | null;
|
||
if (target?.closest(".ecom-command-composer-wrap, .clone-ai-preview-header, input, textarea, select, a")) return;
|
||
event.preventDefault();
|
||
const currentOffset = previewOffsetRef.current;
|
||
previewPanRef.current = {
|
||
active: true,
|
||
startX: event.clientX,
|
||
startY: event.clientY,
|
||
offsetX: currentOffset.x,
|
||
offsetY: currentOffset.y,
|
||
};
|
||
container.classList.add("is-middle-panning");
|
||
};
|
||
|
||
const handleMouseMove = (event: MouseEvent) => {
|
||
const pan = previewPanRef.current;
|
||
if (!pan.active) return;
|
||
event.preventDefault();
|
||
const nextOffset = {
|
||
x: pan.offsetX + event.clientX - pan.startX,
|
||
y: pan.offsetY + event.clientY - pan.startY,
|
||
};
|
||
previewOffsetRef.current = nextOffset;
|
||
setPreviewOffset(nextOffset);
|
||
};
|
||
|
||
const stopMousePan = () => {
|
||
const pan = previewPanRef.current;
|
||
if (!pan.active) return;
|
||
previewPanRef.current = { ...pan, active: false };
|
||
container.classList.remove("is-middle-panning");
|
||
};
|
||
|
||
const preventAuxClick = (event: MouseEvent) => {
|
||
if (event.button === 1) event.preventDefault();
|
||
};
|
||
|
||
container.addEventListener("mousedown", handleMouseDown, listenerOptions);
|
||
container.addEventListener("auxclick", preventAuxClick, listenerOptions);
|
||
window.addEventListener("mousemove", handleMouseMove);
|
||
window.addEventListener("mouseup", stopMousePan);
|
||
window.addEventListener("blur", stopMousePan);
|
||
|
||
return () => {
|
||
container.removeEventListener("mousedown", handleMouseDown, listenerOptions);
|
||
container.removeEventListener("auxclick", preventAuxClick, listenerOptions);
|
||
window.removeEventListener("mousemove", handleMouseMove);
|
||
window.removeEventListener("mouseup", stopMousePan);
|
||
window.removeEventListener("blur", stopMousePan);
|
||
};
|
||
}, [activeTool, cloneOutput]);
|
||
|
||
const bindPreviewSurface = (node: HTMLElement | null) => {
|
||
previewSurfaceRef.current = node;
|
||
};
|
||
|
||
const getPreviewSurfaceProps = () => ({
|
||
ref: bindPreviewSurface,
|
||
onMouseDown: (event: ReactMouseEvent<HTMLElement>) => {
|
||
if (event.button === 1) event.preventDefault();
|
||
},
|
||
onAuxClick: (event: ReactMouseEvent<HTMLElement>) => {
|
||
if (event.button === 1) event.preventDefault();
|
||
},
|
||
});
|
||
|
||
const handlePreviewWheel = (event: React.WheelEvent<HTMLElement>) => {
|
||
if (!event.currentTarget) return;
|
||
const container = event.currentTarget as HTMLElement;
|
||
const rect = container.getBoundingClientRect();
|
||
const cursorX = event.clientX - rect.left;
|
||
const cursorY = event.clientY - rect.top;
|
||
const zoomDelta = event.deltaY < 0 ? 1.08 : 0.92;
|
||
|
||
const nextZoom = Math.min(2, Math.max(0.25, previewZoom * zoomDelta));
|
||
if (nextZoom === previewZoom) return;
|
||
|
||
const contentX = (cursorX + container.scrollLeft) / previewZoom;
|
||
const contentY = (cursorY + container.scrollTop) / previewZoom;
|
||
|
||
setPreviewZoom(nextZoom);
|
||
|
||
requestAnimationFrame(() => {
|
||
container.scrollLeft = contentX * nextZoom - cursorX;
|
||
container.scrollTop = contentY * nextZoom - cursorY;
|
||
});
|
||
};
|
||
|
||
const handleQuickPreviewWheel = (event: React.WheelEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
const zoomDelta = event.deltaY < 0 ? 1.08 : 0.92;
|
||
setPreviewZoom((value) => Math.min(2, Math.max(0.25, value * zoomDelta)));
|
||
};
|
||
|
||
const handleQuickPanelWheel = (event: React.WheelEvent<HTMLElement>) => {
|
||
const panel = event.currentTarget;
|
||
if (panel.scrollHeight <= panel.clientHeight) return;
|
||
event.stopPropagation();
|
||
panel.scrollTop += event.deltaY;
|
||
};
|
||
|
||
const [requirement, setRequirement] = useState("");
|
||
const [requirementImageMentionQuery, setRequirementImageMentionQuery] = useState<string | null>(null);
|
||
const [cloneSettingName, setCloneSettingName] = useState("鏂板缓鍒涗綔");
|
||
const [platform, setPlatform] = useState(defaultEcommercePlatform);
|
||
const [market, setMarket] = useState(marketOptions[0]);
|
||
const [language, setLanguage] = useState(getPlatformDefaultLanguage(defaultEcommercePlatform, marketOptions[0]));
|
||
const [ratio, setRatio] = useState(getPlatformDefaultRatio(defaultEcommercePlatform, defaultCloneOutput));
|
||
const [status, setStatus] = useState<ProductCloneStatus>("idle");
|
||
const [results, setResults] = useState<CloneResult[]>([]);
|
||
const [ecommerceHistoryRecords, setEcommerceHistoryRecords] = useState<EcommerceHistoryRecord[]>(() => readEcommerceHistoryRecords());
|
||
const [activeHistoryRecordId, setActiveHistoryRecordId] = useState<string | null>(null);
|
||
const [historyRefreshTick, setHistoryRefreshTick] = useState(0);
|
||
const [isHistoryRefreshing, setIsHistoryRefreshing] = useState(false);
|
||
const [historyRefreshMessage, setHistoryRefreshMessage] = useState("");
|
||
const [historyRefreshStamp, setHistoryRefreshStamp] = useState(0);
|
||
const historyRefreshLockRef = useRef(false);
|
||
const lastSavedHistorySignatureRef = useRef("");
|
||
const imageAbortRef = useRef({ current: false });
|
||
const activeEcommerceTaskIdsRef = useRef<Set<string>>(new Set());
|
||
const lastFailedActionRef = useRef<(() => void) | null>(null);
|
||
const [garmentImages, setGarmentImages] = useState<CloneImageItem[]>([]);
|
||
const [modelSource, setModelSource] = useState<TryOnModelSource>("ai");
|
||
const [modelGender, setModelGender] = useState(tryOnModelOptions.gender[0]);
|
||
const [modelAge, setModelAge] = useState(tryOnModelOptions.age[0]);
|
||
const [modelEthnicity, setModelEthnicity] = useState(tryOnModelOptions.ethnicity[0]);
|
||
const [modelBody, setModelBody] = useState(tryOnModelOptions.body[0]);
|
||
const [appearance, setAppearance] = useState("");
|
||
const [selectedScenes, setSelectedScenes] = useState<string[]>([]);
|
||
|
||
useEffect(() => {
|
||
if (status === "done") {
|
||
setIsCommandComposerCompact(true);
|
||
} else if (status === "generating" || status === "idle") {
|
||
setIsCommandComposerCompact(false);
|
||
}
|
||
}, [status]);
|
||
|
||
useEffect(() => {
|
||
writeEcommerceHistoryRecords(ecommerceHistoryRecords);
|
||
}, [ecommerceHistoryRecords]);
|
||
const [customScene, setCustomScene] = useState("");
|
||
const [smartScene, setSmartScene] = useState(false);
|
||
const [tryOnRatio, setTryOnRatio] = useState(tryOnRatioOptions[0]);
|
||
const [tryOnStatus, setTryOnStatus] = useState<TryOnStatus>("idle");
|
||
const [tryOnResultImages, setTryOnResultImages] = useState<string[]>([]);
|
||
const [detailProductImages, setDetailProductImages] = useState<CloneImageItem[]>([]);
|
||
const [detailPlatform, setDetailPlatform] = useState(platformOptions[0]);
|
||
const [detailMarket, setDetailMarket] = useState(marketOptions[0]);
|
||
const [detailLanguage, setDetailLanguage] = useState(getPlatformDefaultLanguage(platformOptions[0], marketOptions[0]));
|
||
const [detailRatio, setDetailRatio] = useState(getQuickSetRatioValue(getPlatformDefaultRatio(platformOptions[0], "detail")));
|
||
const [detailType, setDetailType] = useState(detailTypeOptions[0]);
|
||
const [detailRequirement, setDetailRequirement] = useState("");
|
||
const [selectedDetailModules, setSelectedDetailModules] = useState<string[]>(defaultDetailModuleIds);
|
||
const [detailStatus, setDetailStatus] = useState<DetailStatus>("idle");
|
||
const [detailResultUrl, setDetailResultUrl] = useState<string | null>(null);
|
||
const productSetRatioOptions = useMemo(
|
||
() => getPlatformRatioOptions(productSetPlatform, productSetOutput),
|
||
[productSetOutput, productSetPlatform],
|
||
);
|
||
const hotUploadedRatioOption = useMemo(
|
||
() => cloneOutput === "hot" ? formatUploadedImageRatio(cloneReferenceImages[0]) : null,
|
||
[cloneOutput, cloneReferenceImages],
|
||
);
|
||
const baseCloneRatioOptions = useMemo(
|
||
() => getPlatformRatioOptions(platform, cloneOutput),
|
||
[cloneOutput, platform],
|
||
);
|
||
const cloneRatioOptions = useMemo(
|
||
() => hotUploadedRatioOption
|
||
? getUniqueRatioOptions([...baseCloneRatioOptions, hotUploadedRatioOption])
|
||
: baseCloneRatioOptions,
|
||
[baseCloneRatioOptions, hotUploadedRatioOption],
|
||
);
|
||
const productSetLanguageOptions = useMemo(
|
||
() => getPlatformLanguageOptions(productSetPlatform, productSetMarket),
|
||
[productSetMarket, productSetPlatform],
|
||
);
|
||
const cloneLanguageOptions = useMemo(
|
||
() => getPlatformLanguageOptions(platform, market),
|
||
[market, platform],
|
||
);
|
||
const detailLanguageOptions = useMemo(
|
||
() => getPlatformLanguageOptions(detailPlatform, detailMarket),
|
||
[detailMarket, detailPlatform],
|
||
);
|
||
const ecommerceMentionImages: MentionImageOption[] = [
|
||
...productImages.map((image, index) => ({ ...image, label: `商品图 ${index + 1}` })),
|
||
...cloneReferenceImages.map((image, index) => ({ ...image, label: `参考图 ${index + 1}` })),
|
||
];
|
||
|
||
const ecommerceVideoImageDataUrls = useMemo(
|
||
() => productImages.map((img) => img.src),
|
||
[productImages],
|
||
);
|
||
const ecommerceVideoImageFiles = useMemo(
|
||
() => productImages.map((img) => img.file),
|
||
[productImages],
|
||
);
|
||
|
||
const selectedProductSetOutput =
|
||
productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!;
|
||
const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!;
|
||
const cloneRequirementPlaceholder =
|
||
cloneOutput === "model"
|
||
? "建议包含以下信息：产品名称、核心卖点、期望场景、模特外貌描述（如小麦色皮肤、齐刘海、眼角有泪痣）、具体参数"
|
||
: "建议包含以下信息：产品名称、核心卖点、期望场景、具体参数";
|
||
const productSetPreviewReady = productSetStatus === "done";
|
||
const cloneSetTotal = useMemo(
|
||
() => Object.values(cloneSetCounts).reduce((sum, value) => sum + value, 0),
|
||
[cloneSetCounts],
|
||
);
|
||
const canGenerateSet = setImages.length > 0 && productSetStatus !== "generating";
|
||
const canGenerate = (cloneOutput === "video-outfit"
|
||
? Boolean(videoOutfitVideoFile && videoOutfitRefFile)
|
||
: productImages.length > 0) && status !== "generating";
|
||
const canGenerateTryOn = garmentImages.length > 0 && tryOnStatus !== "generating" && tryOnStatus !== "modeling";
|
||
const canGenerateDetail = detailProductImages.length > 0 && detailStatus !== "generating";
|
||
const cloneVideoDurationProgress =
|
||
((cloneVideoDuration - cloneVideoDurationMin) / (cloneVideoDurationMax - cloneVideoDurationMin)) * 100;
|
||
const cloneVideoDurationStyle: CSSProperties = useMemo(
|
||
() => ({
|
||
"--clone-video-duration-progress": `${cloneVideoDurationProgress}%`,
|
||
}) as CSSProperties,
|
||
[cloneVideoDurationProgress],
|
||
);
|
||
|
||
const trackEcommerceTask = (taskId: string) => {
|
||
activeEcommerceTaskIdsRef.current.add(taskId);
|
||
};
|
||
|
||
const untrackEcommerceTask = (taskId: string) => {
|
||
activeEcommerceTaskIdsRef.current.delete(taskId);
|
||
};
|
||
|
||
const handleCancelGenerate = () => {
|
||
imageAbortRef.current.current = true;
|
||
const taskIds = Array.from(activeEcommerceTaskIdsRef.current);
|
||
activeEcommerceTaskIdsRef.current.clear();
|
||
taskIds.forEach((taskId) => {
|
||
aiGenerationClient.cancelTask(taskId).catch(() => {});
|
||
});
|
||
lastFailedActionRef.current = null;
|
||
if (productSetStatus === "generating") setProductSetStatus("idle");
|
||
if (status === "generating") setStatus("idle");
|
||
if (detailStatus === "generating") setDetailStatus("idle");
|
||
if (tryOnStatus === "generating") setTryOnStatus("idle");
|
||
if (tryOnStatus === "modeling") setTryOnStatus("ready");
|
||
toast.info("\u5df2\u53d6\u6d88\u751f\u6210");
|
||
};
|
||
|
||
const syncRequirementMentionQuery = (value: string, selectionStart: number | null | undefined) => {
|
||
setRequirementImageMentionQuery(ecommerceMentionImages.length ? getImageMentionQuery(value, selectionStart) : null);
|
||
};
|
||
|
||
const insertRequirementImageMention = (image: MentionImageOption) => {
|
||
const textarea = requirementTextareaRef.current;
|
||
const cursor = textarea?.selectionStart ?? requirement.length;
|
||
const next = insertImageMentionValue(requirement, cursor, image.name, 500);
|
||
setRequirement(next.value);
|
||
setRequirementImageMentionQuery(null);
|
||
window.requestAnimationFrame(() => {
|
||
requirementTextareaRef.current?.focus();
|
||
requirementTextareaRef.current?.setSelectionRange(next.selectionStart, next.selectionStart);
|
||
});
|
||
};
|
||
|
||
const addSetImages = async (files: File[]) => {
|
||
if (setImages.length >= 3) return;
|
||
const imageFiles = notifyRejectedImages(files);
|
||
if (!imageFiles.length) return;
|
||
try {
|
||
const nextImages = await createUploadedImageItems(imageFiles, 3 - setImages.length, "set");
|
||
setSetImages((current) => {
|
||
if (current.length >= 3) return current;
|
||
return nextImages.length ? [...current, ...nextImages].slice(0, 3) : current;
|
||
});
|
||
setProductSetStatus("ready");
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : "鍟嗗搧鍥句笂浼犲け璐?");
|
||
}
|
||
};
|
||
|
||
const handleSetUpload = (event: ChangeEvent<HTMLInputElement>) => {
|
||
const files = event.target.files;
|
||
if (!files?.length) return;
|
||
void addSetImages(Array.from(files));
|
||
event.target.value = "";
|
||
};
|
||
|
||
const handleSetDrop = (event: DragEvent<HTMLButtonElement>) => {
|
||
event.preventDefault();
|
||
setIsSetUploadDragging(false);
|
||
const files = Array.from(event.dataTransfer.files);
|
||
if (files.length) void addSetImages(files);
|
||
};
|
||
|
||
const revokeSmartCutoutItem = (item: SmartCutoutImageItem | null) => {
|
||
if (!item) return;
|
||
URL.revokeObjectURL(item.src);
|
||
if (item.originalSrc && item.originalSrc !== item.src) URL.revokeObjectURL(item.originalSrc);
|
||
};
|
||
|
||
const revokeSmartCutoutItems = (items: SmartCutoutImageItem[]) => {
|
||
items.forEach(revokeSmartCutoutItem);
|
||
};
|
||
|
||
const clearSmartCutoutTransition = () => {
|
||
if (smartCutoutTransitionTimeoutRef.current !== null) {
|
||
window.clearTimeout(smartCutoutTransitionTimeoutRef.current);
|
||
smartCutoutTransitionTimeoutRef.current = null;
|
||
}
|
||
if (smartCutoutPendingUrlsRef.current.length) {
|
||
smartCutoutPendingUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
|
||
smartCutoutPendingUrlsRef.current = [];
|
||
}
|
||
setIsSmartCutoutTransitioning(false);
|
||
};
|
||
|
||
const runSmartCutoutPageTransition = (message: { title: string; subtitle: string }, action: () => void, delay = 460) => {
|
||
clearSmartCutoutTransition();
|
||
setSmartCutoutTransitionMessage(message);
|
||
setIsSmartCutoutTransitioning(true);
|
||
smartCutoutTransitionTimeoutRef.current = window.setTimeout(() => {
|
||
smartCutoutTransitionTimeoutRef.current = null;
|
||
action();
|
||
setIsSmartCutoutTransitioning(false);
|
||
}, delay);
|
||
};
|
||
|
||
const openSmartCutoutUpload = () => {
|
||
clearSmartCutoutTransition();
|
||
setSmartCutoutTransitionMessage({
|
||
title: "正在进入智能抠图",
|
||
subtitle: "为你打开图片处理工具",
|
||
});
|
||
setActiveQuickTool("cutout");
|
||
setSmartCutoutBatchImages((current) => {
|
||
revokeSmartCutoutItems(current);
|
||
return [];
|
||
});
|
||
setSmartCutoutImage((current) => {
|
||
revokeSmartCutoutItem(current);
|
||
return null;
|
||
});
|
||
setIsSmartCutoutComparing(false);
|
||
setComposerMenu(null);
|
||
};
|
||
|
||
const openWatermarkRemovalPage = () => {
|
||
clearSmartCutoutTransition();
|
||
setActiveQuickTool("watermark");
|
||
setComposerMenu(null);
|
||
setIsCloneSettingsCollapsed(false);
|
||
};
|
||
|
||
const closeWatermarkRemovalPage = () => {
|
||
if (watermarkProcessTimeoutRef.current !== null) {
|
||
window.clearTimeout(watermarkProcessTimeoutRef.current);
|
||
watermarkProcessTimeoutRef.current = null;
|
||
}
|
||
setActiveQuickTool(null);
|
||
setWatermarkStatus("idle");
|
||
setWatermarkImage((current) => {
|
||
if (current?.src) URL.revokeObjectURL(current.src);
|
||
return null;
|
||
});
|
||
};
|
||
|
||
const addWatermarkImage = (file: File) => {
|
||
const nextImage = {
|
||
src: URL.createObjectURL(file),
|
||
name: file.name,
|
||
format: getImageFileFormat(file) || "PNG / JPG / WebP",
|
||
};
|
||
setWatermarkImage((current) => {
|
||
if (current?.src) URL.revokeObjectURL(current.src);
|
||
return nextImage;
|
||
});
|
||
setWatermarkStatus("idle");
|
||
setActiveQuickTool("watermark");
|
||
};
|
||
|
||
const removeWatermarkImage = () => {
|
||
if (watermarkProcessTimeoutRef.current !== null) {
|
||
window.clearTimeout(watermarkProcessTimeoutRef.current);
|
||
watermarkProcessTimeoutRef.current = null;
|
||
}
|
||
setWatermarkStatus("idle");
|
||
setWatermarkImage((current) => {
|
||
if (current?.src) URL.revokeObjectURL(current.src);
|
||
return null;
|
||
});
|
||
};
|
||
|
||
const handleWatermarkUpload = (event: ChangeEvent<HTMLInputElement>) => {
|
||
const file = event.target.files?.[0];
|
||
if (!file) return;
|
||
addWatermarkImage(file);
|
||
event.target.value = "";
|
||
};
|
||
|
||
const handleWatermarkDrop = (event: DragEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
setIsWatermarkDragging(false);
|
||
const file = Array.from(event.dataTransfer.files).find((item) => item.type.startsWith("image/"));
|
||
if (file) addWatermarkImage(file);
|
||
};
|
||
|
||
const handleWatermarkGenerate = () => {
|
||
if (!watermarkImage || watermarkStatus === "processing") return;
|
||
if (watermarkProcessTimeoutRef.current !== null) window.clearTimeout(watermarkProcessTimeoutRef.current);
|
||
setWatermarkStatus("processing");
|
||
watermarkProcessTimeoutRef.current = window.setTimeout(() => {
|
||
watermarkProcessTimeoutRef.current = null;
|
||
setWatermarkStatus("done");
|
||
toast.success("去水印处理完成");
|
||
}, 900);
|
||
};
|
||
|
||
const handleWatermarkDownload = () => {
|
||
if (!watermarkImage || watermarkStatus !== "done") {
|
||
toast.info("请先完成去水印");
|
||
return;
|
||
}
|
||
const link = document.createElement("a");
|
||
const safeName = (watermarkImage.name || "watermark-result").replace(/\.[^.]+$/, "").replace(/[\\/:*?"<>|]+/g, "-");
|
||
link.href = watermarkImage.src;
|
||
link.download = `${safeName || "watermark-result"}-去水印.png`;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
link.remove();
|
||
};
|
||
|
||
const openImageWorkbenchPage = () => {
|
||
clearSmartCutoutTransition();
|
||
setActiveQuickTool("image-edit");
|
||
setComposerMenu(null);
|
||
setIsCloneSettingsCollapsed(false);
|
||
setImageWorkbenchStatus("idle");
|
||
};
|
||
|
||
const closeImageWorkbenchPage = () => {
|
||
setActiveQuickTool(null);
|
||
setImageWorkbenchStatus("idle");
|
||
setImageWorkbenchPrompt("");
|
||
setImageWorkbenchMaskStrokes([]);
|
||
setImageWorkbenchBrushCursor(null);
|
||
clearImageWorkbenchMaskCanvas();
|
||
imageWorkbenchMaskPaintingRef.current = false;
|
||
imageWorkbenchActiveStrokeIdRef.current = null;
|
||
setImageWorkbenchImage((current) => {
|
||
if (current?.src) URL.revokeObjectURL(current.src);
|
||
return null;
|
||
});
|
||
};
|
||
|
||
const addImageWorkbenchImage = (file: File) => {
|
||
if (!file.type.startsWith("image/")) {
|
||
toast.error("请上传图片文件");
|
||
return;
|
||
}
|
||
const nextImage = {
|
||
src: URL.createObjectURL(file),
|
||
name: file.name,
|
||
format: getImageFileFormat(file) || "PNG / JPG / WebP",
|
||
};
|
||
setImageWorkbenchImage((current) => {
|
||
if (current?.src) URL.revokeObjectURL(current.src);
|
||
return nextImage;
|
||
});
|
||
setImageWorkbenchStatus("idle");
|
||
setImageWorkbenchMaskStrokes([]);
|
||
setImageWorkbenchBrushCursor(null);
|
||
clearImageWorkbenchMaskCanvas();
|
||
imageWorkbenchActiveStrokeIdRef.current = null;
|
||
setActiveQuickTool("image-edit");
|
||
};
|
||
|
||
const removeImageWorkbenchImage = () => {
|
||
setImageWorkbenchStatus("idle");
|
||
setImageWorkbenchMaskStrokes([]);
|
||
setImageWorkbenchBrushCursor(null);
|
||
clearImageWorkbenchMaskCanvas();
|
||
imageWorkbenchMaskPaintingRef.current = false;
|
||
imageWorkbenchActiveStrokeIdRef.current = null;
|
||
setImageWorkbenchImage((current) => {
|
||
if (current?.src) URL.revokeObjectURL(current.src);
|
||
return null;
|
||
});
|
||
};
|
||
|
||
const handleImageWorkbenchUpload = (event: ChangeEvent<HTMLInputElement>) => {
|
||
const file = event.target.files?.[0];
|
||
if (!file) return;
|
||
addImageWorkbenchImage(file);
|
||
event.target.value = "";
|
||
};
|
||
|
||
const handleImageWorkbenchDrop = (event: DragEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
setIsImageWorkbenchDragging(false);
|
||
const file = Array.from(event.dataTransfer.files).find((item) => item.type.startsWith("image/"));
|
||
if (file) addImageWorkbenchImage(file);
|
||
};
|
||
|
||
const handleImageWorkbenchGenerate = () => {
|
||
if (!imageWorkbenchImage) {
|
||
toast.info("请先上传图片");
|
||
return;
|
||
}
|
||
setImageWorkbenchStatus("processing");
|
||
window.setTimeout(() => {
|
||
setImageWorkbenchStatus("done");
|
||
toast.success("局部重绘已完成");
|
||
}, 900);
|
||
};
|
||
|
||
const syncImageWorkbenchMaskCanvas = () => {
|
||
const canvas = imageWorkbenchMaskCanvasRef.current;
|
||
if (!canvas) return null;
|
||
const rect = canvas.getBoundingClientRect();
|
||
const dpr = window.devicePixelRatio || 1;
|
||
const width = Math.max(1, Math.round(rect.width * dpr));
|
||
const height = Math.max(1, Math.round(rect.height * dpr));
|
||
if (canvas.width !== width || canvas.height !== height) {
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
}
|
||
const context = canvas.getContext("2d");
|
||
if (!context) return null;
|
||
context.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
context.lineCap = "round";
|
||
context.lineJoin = "round";
|
||
context.strokeStyle = "rgba(30, 189, 219, 0.52)";
|
||
context.fillStyle = "rgba(30, 189, 219, 0.52)";
|
||
context.lineWidth = imageWorkbenchBrushSize;
|
||
return { canvas, context, rect };
|
||
};
|
||
|
||
const clearImageWorkbenchMaskCanvas = () => {
|
||
const canvas = imageWorkbenchMaskCanvasRef.current;
|
||
if (!canvas) return;
|
||
const context = canvas.getContext("2d");
|
||
if (!context) return;
|
||
context.setTransform(1, 0, 0, 1, 0, 0);
|
||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||
};
|
||
|
||
const getImageWorkbenchMaskPoint = (event: ReactPointerEvent<HTMLElement>) => {
|
||
const canvas = imageWorkbenchMaskCanvasRef.current;
|
||
const rect = (canvas ?? event.currentTarget).getBoundingClientRect();
|
||
const x = clampNumber(event.clientX - rect.left, 0, rect.width);
|
||
const y = clampNumber(event.clientY - rect.top, 0, rect.height);
|
||
return { x, y };
|
||
};
|
||
|
||
const appendImageWorkbenchMaskPoint = (event: ReactPointerEvent<HTMLElement>) => {
|
||
const point = getImageWorkbenchMaskPoint(event);
|
||
const rect = imageWorkbenchMaskCanvasRef.current?.getBoundingClientRect();
|
||
setImageWorkbenchBrushCursor(rect ? { x: (point.x / Math.max(rect.width, 1)) * 100, y: (point.y / Math.max(rect.height, 1)) * 100 } : null);
|
||
setImageWorkbenchStatus((current) => (current === "done" ? "idle" : current));
|
||
const activeStrokeId = imageWorkbenchActiveStrokeIdRef.current;
|
||
if (!activeStrokeId) return;
|
||
const lastPoint = imageWorkbenchLastMaskPointRef.current;
|
||
if (lastPoint && Math.hypot(point.x - lastPoint.x, point.y - lastPoint.y) < 1.5) return;
|
||
const synced = syncImageWorkbenchMaskCanvas();
|
||
if (!synced) return;
|
||
synced.context.beginPath();
|
||
synced.context.moveTo(lastPoint?.x ?? point.x, lastPoint?.y ?? point.y);
|
||
synced.context.lineTo(point.x, point.y);
|
||
synced.context.stroke();
|
||
imageWorkbenchLastMaskPointRef.current = point;
|
||
};
|
||
|
||
const handleImageWorkbenchMaskPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||
if (!imageWorkbenchImage || event.button !== 0) return;
|
||
event.preventDefault();
|
||
event.currentTarget.setPointerCapture(event.pointerId);
|
||
syncImageWorkbenchMaskCanvas();
|
||
const point = getImageWorkbenchMaskPoint(event);
|
||
const rect = imageWorkbenchMaskCanvasRef.current?.getBoundingClientRect();
|
||
const strokeId = `mask-${Date.now()}`;
|
||
imageWorkbenchMaskPaintingRef.current = true;
|
||
imageWorkbenchActiveStrokeIdRef.current = strokeId;
|
||
imageWorkbenchLastMaskPointRef.current = point;
|
||
setImageWorkbenchBrushCursor(rect ? { x: (point.x / Math.max(rect.width, 1)) * 100, y: (point.y / Math.max(rect.height, 1)) * 100 } : null);
|
||
setImageWorkbenchStatus((current) => (current === "done" ? "idle" : current));
|
||
setImageWorkbenchMaskStrokes((current) => [...current, { id: strokeId, size: imageWorkbenchBrushSize, points: [] }]);
|
||
const synced = syncImageWorkbenchMaskCanvas();
|
||
if (synced) {
|
||
synced.context.beginPath();
|
||
synced.context.arc(point.x, point.y, imageWorkbenchBrushSize / 2, 0, Math.PI * 2);
|
||
synced.context.fill();
|
||
}
|
||
};
|
||
|
||
const handleImageWorkbenchMaskPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||
if (!imageWorkbenchImage) return;
|
||
const point = getImageWorkbenchMaskPoint(event);
|
||
const rect = imageWorkbenchMaskCanvasRef.current?.getBoundingClientRect();
|
||
setImageWorkbenchBrushCursor(rect ? { x: (point.x / Math.max(rect.width, 1)) * 100, y: (point.y / Math.max(rect.height, 1)) * 100 } : null);
|
||
if (!imageWorkbenchMaskPaintingRef.current) return;
|
||
appendImageWorkbenchMaskPoint(event);
|
||
};
|
||
|
||
const stopImageWorkbenchMaskPainting = () => {
|
||
imageWorkbenchMaskPaintingRef.current = false;
|
||
imageWorkbenchActiveStrokeIdRef.current = null;
|
||
imageWorkbenchLastMaskPointRef.current = null;
|
||
};
|
||
|
||
const clearQuickSetSelectTimer = () => {
|
||
if (quickSetSelectTimerRef.current) {
|
||
window.clearTimeout(quickSetSelectTimerRef.current);
|
||
quickSetSelectTimerRef.current = null;
|
||
}
|
||
};
|
||
|
||
const resetQuickSetSelectState = () => {
|
||
clearQuickSetSelectTimer();
|
||
openQuickSetSelectRef.current = null;
|
||
visibleQuickSetSelectRef.current = null;
|
||
setOpenQuickSetSelect(null);
|
||
setVisibleQuickSetSelect(null);
|
||
setIsQuickSetSelectClosing(false);
|
||
};
|
||
|
||
const closeQuickSetSelect = () => {
|
||
if (!visibleQuickSetSelectRef.current) {
|
||
openQuickSetSelectRef.current = null;
|
||
setOpenQuickSetSelect(null);
|
||
return;
|
||
}
|
||
clearQuickSetSelectTimer();
|
||
openQuickSetSelectRef.current = null;
|
||
setOpenQuickSetSelect(null);
|
||
setIsQuickSetSelectClosing(true);
|
||
quickSetSelectTimerRef.current = window.setTimeout(() => {
|
||
visibleQuickSetSelectRef.current = null;
|
||
setVisibleQuickSetSelect(null);
|
||
setIsQuickSetSelectClosing(false);
|
||
quickSetSelectTimerRef.current = null;
|
||
}, 420);
|
||
};
|
||
|
||
const showQuickSetSelect = (key: CloneBasicSelectKey) => {
|
||
clearQuickSetSelectTimer();
|
||
if (visibleQuickSetSelectRef.current && visibleQuickSetSelectRef.current !== key && openQuickSetSelectRef.current) {
|
||
openQuickSetSelectRef.current = null;
|
||
setOpenQuickSetSelect(null);
|
||
setIsQuickSetSelectClosing(true);
|
||
quickSetSelectTimerRef.current = window.setTimeout(() => {
|
||
visibleQuickSetSelectRef.current = key;
|
||
openQuickSetSelectRef.current = key;
|
||
setVisibleQuickSetSelect(key);
|
||
setOpenQuickSetSelect(key);
|
||
setIsQuickSetSelectClosing(false);
|
||
quickSetSelectTimerRef.current = null;
|
||
}, 180);
|
||
return;
|
||
}
|
||
visibleQuickSetSelectRef.current = key;
|
||
openQuickSetSelectRef.current = key;
|
||
setVisibleQuickSetSelect(key);
|
||
setOpenQuickSetSelect(key);
|
||
setIsQuickSetSelectClosing(false);
|
||
};
|
||
|
||
const toggleQuickSetSelect = (key: CloneBasicSelectKey) => {
|
||
if (openQuickSetSelectRef.current === key) {
|
||
closeQuickSetSelect();
|
||
return;
|
||
}
|
||
showQuickSetSelect(key);
|
||
};
|
||
|
||
const openQuickProductSetPage = () => {
|
||
clearSmartCutoutTransition();
|
||
setActiveQuickTool("set");
|
||
setComposerMenu(null);
|
||
setIsCloneSettingsCollapsed(false);
|
||
setIsQuickPanelCollapsed(false);
|
||
setPreviewZoom(1);
|
||
resetQuickSetSelectState();
|
||
};
|
||
|
||
const openQuickDetailPage = () => {
|
||
clearSmartCutoutTransition();
|
||
setActiveQuickTool("detail");
|
||
setComposerMenu(null);
|
||
setIsCloneSettingsCollapsed(false);
|
||
setIsQuickPanelCollapsed(false);
|
||
setPreviewZoom(1);
|
||
resetQuickSetSelectState();
|
||
if (!selectedDetailModules.length) setSelectedDetailModules(defaultCloneDetailModuleIds);
|
||
};
|
||
|
||
const openHotVideoPage = () => {
|
||
clearSmartCutoutTransition();
|
||
setActiveQuickTool("hot-video");
|
||
setComposerMenu(null);
|
||
setIsCloneSettingsCollapsed(true);
|
||
setIsCommandHistoryCollapsed(true);
|
||
};
|
||
|
||
const closeHotVideoPage = () => {
|
||
setActiveQuickTool(null);
|
||
setComposerMenu(null);
|
||
setIsCloneSettingsCollapsed(false);
|
||
setIsCommandHistoryCollapsed(false);
|
||
};
|
||
|
||
const closeSmartCutoutTool = () => {
|
||
runSmartCutoutPageTransition(
|
||
{
|
||
title: "正在返回首页",
|
||
subtitle: "回到电商智能体",
|
||
},
|
||
() => {
|
||
setSmartCutoutBatchImages((current) => {
|
||
revokeSmartCutoutItems(current);
|
||
return [];
|
||
});
|
||
setSmartCutoutImage((current) => {
|
||
revokeSmartCutoutItem(current);
|
||
return null;
|
||
});
|
||
setIsSmartCutoutComparing(false);
|
||
setActiveQuickTool(null);
|
||
setComposerMenu(null);
|
||
},
|
||
);
|
||
};
|
||
|
||
const goSmartCutoutPrevious = () => {
|
||
if (!smartCutoutImage) {
|
||
closeSmartCutoutTool();
|
||
return;
|
||
}
|
||
runSmartCutoutPageTransition(
|
||
{
|
||
title: "正在返回上一页",
|
||
subtitle: "回到图片上传页",
|
||
},
|
||
() => {
|
||
setSmartCutoutBatchImages((current) => {
|
||
revokeSmartCutoutItems(current);
|
||
return [];
|
||
});
|
||
setSmartCutoutImage((current) => {
|
||
revokeSmartCutoutItem(current);
|
||
return null;
|
||
});
|
||
setIsSmartCutoutComparing(false);
|
||
},
|
||
);
|
||
};
|
||
|
||
const addSmartCutoutImage = (files: File[]) => {
|
||
const imageFiles = files.filter((file) => file.type.startsWith("image/"));
|
||
if (!imageFiles.length) {
|
||
toast.error("请上传图片文件");
|
||
return;
|
||
}
|
||
clearSmartCutoutTransition();
|
||
setSmartCutoutBatchImages((current) => {
|
||
revokeSmartCutoutItems(current);
|
||
return [];
|
||
});
|
||
setSmartCutoutImage((current) => {
|
||
revokeSmartCutoutItem(current);
|
||
return null;
|
||
});
|
||
setIsSmartCutoutComparing(false);
|
||
const nextImages = imageFiles.map((file) => {
|
||
const originalSrc = URL.createObjectURL(file);
|
||
return { src: originalSrc, originalSrc, name: file.name };
|
||
});
|
||
smartCutoutPendingUrlsRef.current = nextImages.map((item) => item.src);
|
||
setActiveQuickTool("cutout");
|
||
setSmartCutoutSizeKey("original");
|
||
setSmartCutoutTransitionMessage({
|
||
title: imageFiles.length > 1 ? "正在批量抠图" : "正在智能抠图",
|
||
subtitle: imageFiles.length > 1 ? `正在处理 ${imageFiles.length} 张图片` : "即将进入图片编辑室",
|
||
});
|
||
setIsSmartCutoutTransitioning(true);
|
||
smartCutoutTransitionTimeoutRef.current = window.setTimeout(() => {
|
||
smartCutoutTransitionTimeoutRef.current = null;
|
||
smartCutoutPendingUrlsRef.current = [];
|
||
setSmartCutoutBatchImages(nextImages);
|
||
setSmartCutoutImage(nextImages[0]);
|
||
setIsSmartCutoutTransitioning(false);
|
||
}, 620);
|
||
};
|
||
|
||
const handleSmartCutoutUpload = (event: ChangeEvent<HTMLInputElement>) => {
|
||
const files = event.target.files;
|
||
if (!files?.length) return;
|
||
addSmartCutoutImage(Array.from(files));
|
||
event.target.value = "";
|
||
};
|
||
|
||
const handleSmartCutoutDrop = (event: DragEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
setIsSmartCutoutDragging(false);
|
||
const files = Array.from(event.dataTransfer.files);
|
||
if (files.length) addSmartCutoutImage(files);
|
||
};
|
||
|
||
const smartCutoutBackgroundValue = useMemo(() => {
|
||
const rgb = hexToRgb(smartCutoutBackgroundColor) ?? { r: 255, g: 255, b: 255 };
|
||
if (smartCutoutBackgroundAlpha >= 100) return smartCutoutBackgroundColor;
|
||
return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${Math.round(smartCutoutBackgroundAlpha) / 100})`;
|
||
}, [smartCutoutBackgroundAlpha, smartCutoutBackgroundColor]);
|
||
|
||
const smartCutoutColorHsv = useMemo(() => hexToHsv(smartCutoutBackgroundColor), [smartCutoutBackgroundColor]);
|
||
|
||
const selectedSmartCutoutSize = useMemo(
|
||
() => smartCutoutSizeOptions.find((option) => option.key === smartCutoutSizeKey) ?? smartCutoutSizeOptions[0],
|
||
[smartCutoutSizeKey],
|
||
);
|
||
|
||
const previewSmartCutoutSize = isSmartCutoutComparing ? smartCutoutSizeOptions[0] : selectedSmartCutoutSize;
|
||
const previewSmartCutoutSizeKey = isSmartCutoutComparing ? "original" : smartCutoutSizeKey;
|
||
const previewSmartCutoutImageSrc = isSmartCutoutComparing ? smartCutoutImage?.originalSrc ?? smartCutoutImage?.src : smartCutoutImage?.src;
|
||
|
||
const smartCutoutFrameStyle = useMemo<CSSProperties>(
|
||
() => ({
|
||
"--smart-cutout-bg": smartCutoutBackgroundValue,
|
||
"--smart-cutout-frame-width": previewSmartCutoutSize.frameWidth,
|
||
"--smart-cutout-frame-aspect": previewSmartCutoutSize.frameAspect,
|
||
"--smart-cutout-image-max-width": previewSmartCutoutSize.imageMaxWidth,
|
||
"--smart-cutout-image-max-height": previewSmartCutoutSize.imageMaxHeight,
|
||
} as CSSProperties),
|
||
[previewSmartCutoutSize, smartCutoutBackgroundValue],
|
||
);
|
||
|
||
const showSmartCutoutOriginalCompare = (event: ReactPointerEvent<HTMLButtonElement>) => {
|
||
event.currentTarget.setPointerCapture(event.pointerId);
|
||
setIsSmartCutoutComparing(true);
|
||
};
|
||
|
||
const hideSmartCutoutOriginalCompare = () => {
|
||
setIsSmartCutoutComparing(false);
|
||
};
|
||
|
||
const applySmartCutoutHsv = (h: number, s: number, v: number) => {
|
||
const rgb = hsvToRgb(h, s, v);
|
||
setSmartCutoutBackgroundColor(rgbToHex(rgb.r, rgb.g, rgb.b));
|
||
};
|
||
|
||
const updateSmartCutoutColorFromPoint = (element: HTMLElement, clientX: number, clientY: number) => {
|
||
const rect = element.getBoundingClientRect();
|
||
const saturation = clampNumber(((clientX - rect.left) / rect.width) * 100, 0, 100);
|
||
const value = clampNumber(100 - ((clientY - rect.top) / rect.height) * 100, 0, 100);
|
||
applySmartCutoutHsv(smartCutoutColorHsv.h, saturation, value);
|
||
};
|
||
|
||
const handleSmartCutoutColorPlanePointer = (event: ReactPointerEvent<HTMLButtonElement>) => {
|
||
event.preventDefault();
|
||
event.currentTarget.setPointerCapture(event.pointerId);
|
||
updateSmartCutoutColorFromPoint(event.currentTarget, event.clientX, event.clientY);
|
||
};
|
||
|
||
const handleSmartCutoutColorPlaneMove = (event: ReactPointerEvent<HTMLButtonElement>) => {
|
||
if (event.buttons !== 1) return;
|
||
updateSmartCutoutColorFromPoint(event.currentTarget, event.clientX, event.clientY);
|
||
};
|
||
|
||
const handleSmartCutoutHexChange = (value: string) => {
|
||
const nextValue = value.startsWith("#") ? value : `#${value}`;
|
||
if (!/^#[0-9a-fA-F]{0,6}$/.test(nextValue)) return;
|
||
setSmartCutoutHexDraft(nextValue);
|
||
const normalized = normalizeHexColor(nextValue);
|
||
if (normalized) setSmartCutoutBackgroundColor(normalized);
|
||
};
|
||
|
||
const scrollSmartCutoutTools = (direction: -1 | 1) => {
|
||
smartCutoutToolsRef.current?.scrollBy({
|
||
left: direction * 340,
|
||
behavior: "smooth",
|
||
});
|
||
};
|
||
|
||
const handleSmartCutoutDownload = async () => {
|
||
if (!smartCutoutImage) {
|
||
toast.error("请先上传图片");
|
||
return;
|
||
}
|
||
try {
|
||
const image = new Image();
|
||
image.decoding = "async";
|
||
const imageLoaded = new Promise<void>((resolve, reject) => {
|
||
image.onload = () => resolve();
|
||
image.onerror = () => reject(new Error("图片加载失败"));
|
||
});
|
||
image.src = smartCutoutImage.src;
|
||
await imageLoaded;
|
||
|
||
const aspect = parseSmartCutoutAspect(selectedSmartCutoutSize.frameAspect);
|
||
const naturalWidth = Math.max(1, image.naturalWidth || image.width || 1200);
|
||
const naturalHeight = Math.max(1, image.naturalHeight || image.height || 900);
|
||
const outputWidth = "outputWidth" in selectedSmartCutoutSize ? selectedSmartCutoutSize.outputWidth : undefined;
|
||
const outputHeight = "outputHeight" in selectedSmartCutoutSize ? selectedSmartCutoutSize.outputHeight : undefined;
|
||
let canvasWidth = naturalWidth;
|
||
let canvasHeight = naturalHeight;
|
||
if (outputWidth && outputHeight) {
|
||
canvasWidth = outputWidth;
|
||
canvasHeight = outputHeight;
|
||
} else if (aspect) {
|
||
const longSide = 1600;
|
||
if (aspect >= 1) {
|
||
canvasWidth = longSide;
|
||
canvasHeight = Math.round(longSide / aspect);
|
||
} else {
|
||
canvasHeight = longSide;
|
||
canvasWidth = Math.round(longSide * aspect);
|
||
}
|
||
} else {
|
||
const maxSide = 1600;
|
||
const scale = Math.min(1, maxSide / Math.max(naturalWidth, naturalHeight));
|
||
canvasWidth = Math.max(1, Math.round(naturalWidth * scale));
|
||
canvasHeight = Math.max(1, Math.round(naturalHeight * scale));
|
||
}
|
||
|
||
const canvas = document.createElement("canvas");
|
||
canvas.width = canvasWidth;
|
||
canvas.height = canvasHeight;
|
||
const context = canvas.getContext("2d");
|
||
if (!context) throw new Error("无法生成图片");
|
||
|
||
context.clearRect(0, 0, canvasWidth, canvasHeight);
|
||
context.fillStyle = smartCutoutBackgroundValue;
|
||
context.fillRect(0, 0, canvasWidth, canvasHeight);
|
||
|
||
const maxWidthRatio = parseSmartCutoutPercent(selectedSmartCutoutSize.imageMaxWidth, 0.82);
|
||
const maxHeightRatio = parseSmartCutoutPercent(selectedSmartCutoutSize.imageMaxHeight, 0.82);
|
||
const fitScale = Math.min((canvasWidth * maxWidthRatio) / naturalWidth, (canvasHeight * maxHeightRatio) / naturalHeight, 1);
|
||
const drawWidth = Math.round(naturalWidth * fitScale);
|
||
const drawHeight = Math.round(naturalHeight * fitScale);
|
||
const drawX = Math.round((canvasWidth - drawWidth) / 2);
|
||
const drawY = Math.round((canvasHeight - drawHeight) / 2);
|
||
context.drawImage(image, drawX, drawY, drawWidth, drawHeight);
|
||
|
||
const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, "image/png"));
|
||
if (!blob) throw new Error("图片导出失败");
|
||
|
||
const objectUrl = URL.createObjectURL(blob);
|
||
const link = document.createElement("a");
|
||
const safeName = (smartCutoutImage.name || "smart-cutout").replace(/\.[^.]+$/, "").replace(/[\\/:*?"<>|]+/g, "-");
|
||
link.href = objectUrl;
|
||
link.download = `${safeName || "smart-cutout"}-${selectedSmartCutoutSize.label}.png`;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
link.remove();
|
||
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
|
||
toast.success("已下载图片");
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : "下载图片失败");
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
setSmartCutoutHexDraft(smartCutoutBackgroundColor);
|
||
}, [smartCutoutBackgroundColor]);
|
||
|
||
useEffect(() => {
|
||
if (!isSmartCutoutPaletteOpen) return undefined;
|
||
const handlePointerDown = (event: PointerEvent) => {
|
||
if (!smartCutoutPaletteRef.current?.contains(event.target as Node)) {
|
||
setIsSmartCutoutPaletteOpen(false);
|
||
}
|
||
};
|
||
document.addEventListener("pointerdown", handlePointerDown);
|
||
return () => document.removeEventListener("pointerdown", handlePointerDown);
|
||
}, [isSmartCutoutPaletteOpen]);
|
||
|
||
const removeSetImage = (imageId: string) => {
|
||
setSetImages((current) => {
|
||
const next = current.filter((item) => item.id !== imageId);
|
||
if (next.length === 0) setProductSetStatus("idle");
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const addProductImages = async (files: File[]) => {
|
||
const imageFiles = notifyRejectedImages(files);
|
||
if (!imageFiles.length) return;
|
||
try {
|
||
const nextImages = await createUploadedImageItems(imageFiles, maxCloneProductImages - productImages.length, "product");
|
||
setProductImages((current) => {
|
||
if (current.length >= maxCloneProductImages) return current;
|
||
return nextImages.length ? [...current, ...nextImages].slice(0, maxCloneProductImages) : current;
|
||
});
|
||
setStatus("ready");
|
||
setResults([]);
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : "鍟嗗搧鍥句笂浼犲け璐?");
|
||
}
|
||
};
|
||
|
||
const handleProductUpload = (event: ChangeEvent<HTMLInputElement>) => {
|
||
const files = event.target.files;
|
||
if (!files?.length) return;
|
||
void addProductImages(Array.from(files));
|
||
event.target.value = "";
|
||
};
|
||
|
||
const addComposerAssets = (files: File[]) => {
|
||
const imageFiles = files.filter((file) => file.type.startsWith("image/"));
|
||
const videoFiles = files.filter((file) => file.type.startsWith("video/"));
|
||
const unsupportedCount = files.length - imageFiles.length - videoFiles.length;
|
||
if (imageFiles.length) void addProductImages(imageFiles);
|
||
if (videoFiles[0]) {
|
||
setVideoOutfitVideoFile(videoFiles[0]);
|
||
setStatus("ready");
|
||
setResults([]);
|
||
}
|
||
if (unsupportedCount > 0) toast.info("浠呮敮鎸佷笂浼犲浘鐗囨垨瑙嗛鏂囦欢");
|
||
};
|
||
|
||
const handleComposerAssetUpload = (event: ChangeEvent<HTMLInputElement>) => {
|
||
const files = event.target.files;
|
||
if (!files?.length) return;
|
||
addComposerAssets(Array.from(files));
|
||
event.target.value = "";
|
||
};
|
||
|
||
const handleProductDrop = (event: DragEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
setIsProductUploadDragging(false);
|
||
const files = Array.from(event.dataTransfer.files);
|
||
if (files.length) void addProductImages(files);
|
||
};
|
||
|
||
const handleQuickProductDrop = (event: DragEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
const files = Array.from(event.dataTransfer.files);
|
||
if (files.length) void addProductImages(files);
|
||
};
|
||
|
||
const removeProductImage = (imageId: string) => {
|
||
setProductImages((current) => {
|
||
const next = current.filter((item) => item.id !== imageId);
|
||
if (next.length === 0) {
|
||
setStatus("idle");
|
||
setResults([]);
|
||
}
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const hydrateCloneReferenceImageMeta = (items: CloneImageItem[]) => {
|
||
items.forEach((item) => {
|
||
readImageDimensions(item.src)
|
||
.then(({ width, height }) => {
|
||
setCloneReferenceImages((current) =>
|
||
current.map((currentItem) => (currentItem.id === item.id ? { ...currentItem, width, height } : currentItem)),
|
||
);
|
||
})
|
||
.catch(() => undefined);
|
||
});
|
||
};
|
||
|
||
const addCloneReferenceImages = async (files: File[]) => {
|
||
const imageFiles = notifyRejectedImages(files);
|
||
if (!imageFiles.length) return;
|
||
const remainingSlots = maxCloneReferenceImages - cloneReferenceImages.length;
|
||
if (remainingSlots <= 0) return;
|
||
try {
|
||
const nextImages = await createUploadedImageItems(imageFiles, remainingSlots, "reference");
|
||
if (!nextImages.length) return;
|
||
setCloneReferenceImages((current) => {
|
||
if (current.length >= maxCloneReferenceImages) return current;
|
||
return nextImages.length ? [...current, ...nextImages].slice(0, maxCloneReferenceImages) : current;
|
||
});
|
||
hydrateCloneReferenceImageMeta(nextImages);
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : "鍙傝€冨浘涓婁紶澶辫触");
|
||
}
|
||
};
|
||
|
||
const handleCloneReferenceUpload = (event: ChangeEvent<HTMLInputElement>) => {
|
||
const files = event.target.files;
|
||
if (!files?.length) return;
|
||
void addCloneReferenceImages(Array.from(files));
|
||
event.target.value = "";
|
||
};
|
||
|
||
const [isCloneReferenceDragging, setIsCloneReferenceDragging] = useState(false);
|
||
|
||
const handleCloneReferenceDragOver = (event: DragEvent<HTMLButtonElement>) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
if (event.dataTransfer.types.includes("Files")) {
|
||
setIsCloneReferenceDragging(true);
|
||
}
|
||
};
|
||
|
||
const handleCloneReferenceDragLeave = (event: DragEvent<HTMLButtonElement>) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
if (event.currentTarget === event.target || !event.currentTarget.contains(event.relatedTarget as Node)) {
|
||
setIsCloneReferenceDragging(false);
|
||
}
|
||
};
|
||
|
||
const handleCloneReferenceDrop = (event: DragEvent<HTMLButtonElement>) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
setIsCloneReferenceDragging(false);
|
||
const files = Array.from(event.dataTransfer.files);
|
||
if (files.length) addCloneReferenceImages(files);
|
||
};
|
||
|
||
const updateCloneSetCount = (key: CloneSetCountKey, delta: -1 | 1) => {
|
||
setCloneSetCounts((current) => {
|
||
const total = Object.values(current).reduce((sum, value) => sum + value, 0);
|
||
const nextValue = current[key] + delta;
|
||
if (delta < 0 && (current[key] <= 0 || total <= minCloneSetTotal)) return current;
|
||
if (delta > 0 && total >= maxCloneSetTotal) return current;
|
||
return { ...current, [key]: Math.max(0, Math.min(maxCloneSetTotal, nextValue)) };
|
||
});
|
||
};
|
||
|
||
const clearCloneSetCountHold = () => {
|
||
window.removeEventListener("pointerup", clearCloneSetCountHold);
|
||
window.removeEventListener("pointercancel", clearCloneSetCountHold);
|
||
if (countHoldTimeoutRef.current !== null) {
|
||
window.clearTimeout(countHoldTimeoutRef.current);
|
||
countHoldTimeoutRef.current = null;
|
||
}
|
||
if (countHoldIntervalRef.current !== null) {
|
||
window.clearInterval(countHoldIntervalRef.current);
|
||
countHoldIntervalRef.current = null;
|
||
}
|
||
};
|
||
|
||
const startCloneSetCountHold = (key: CloneSetCountKey, delta: -1 | 1, disabled: boolean) => {
|
||
if (disabled) return;
|
||
clearCloneSetCountHold();
|
||
updateCloneSetCount(key, delta);
|
||
window.addEventListener("pointerup", clearCloneSetCountHold, { once: true });
|
||
window.addEventListener("pointercancel", clearCloneSetCountHold, { once: true });
|
||
countHoldTimeoutRef.current = window.setTimeout(() => {
|
||
countHoldIntervalRef.current = window.setInterval(() => updateCloneSetCount(key, delta), 110);
|
||
}, 320);
|
||
};
|
||
|
||
const toggleCloneDetailModule = (moduleId: string) => {
|
||
setSelectedCloneDetailModules((current) => {
|
||
if (current.includes(moduleId)) return current.filter((item) => item !== moduleId);
|
||
if (current.length >= maxDetailModuleSelection) {
|
||
toast.info(`最多选择 ${maxDetailModuleSelection} 个模块`);
|
||
return current;
|
||
}
|
||
return [...current, moduleId];
|
||
});
|
||
};
|
||
|
||
const toggleCloneModelScene = (scene: string) => {
|
||
setSelectedCloneModelScenes((current) => (current[0] === scene ? [] : [scene]));
|
||
};
|
||
|
||
const handleProductSetPlatformChange = (nextPlatform: string) => {
|
||
const normalizedPlatform = normalizePlatform(nextPlatform);
|
||
setProductSetPlatform(normalizedPlatform);
|
||
setProductSetRatio((current) => normalizeRatioForPlatform(normalizedPlatform, current, productSetOutput));
|
||
setProductSetLanguage(getPlatformDefaultLanguage(normalizedPlatform, productSetMarket));
|
||
};
|
||
|
||
const handleProductSetOutputChange = (nextOutput: ProductSetOutputKey) => {
|
||
setProductSetOutput(nextOutput);
|
||
setProductSetRatio((current) => normalizeRatioForPlatform(productSetPlatform, current, nextOutput));
|
||
};
|
||
|
||
const handleProductSetMarketChange = (nextMarket: string) => {
|
||
const normalizedMarket = normalizeMarket(nextMarket);
|
||
setProductSetMarket(normalizedMarket);
|
||
setProductSetLanguage(getPlatformDefaultLanguage(productSetPlatform, normalizedMarket));
|
||
};
|
||
|
||
const handleClonePlatformChange = (nextPlatform: string) => {
|
||
const normalizedPlatform = normalizePlatform(nextPlatform);
|
||
setPlatform(normalizedPlatform);
|
||
setRatio((current) =>
|
||
cloneOutput === "hot" && current.startsWith("涓婁紶鍥剧墖") && hotUploadedRatioOption
|
||
? hotUploadedRatioOption
|
||
: normalizeRatioForPlatform(normalizedPlatform, current, cloneOutput),
|
||
);
|
||
setLanguage(getPlatformDefaultLanguage(normalizedPlatform, market));
|
||
};
|
||
|
||
const handleCloneOutputChange = (nextOutput: CloneOutputKey) => {
|
||
setCloneOutput(nextOutput);
|
||
setRatio((current) =>
|
||
nextOutput === "hot" && current.startsWith("涓婁紶鍥剧墖") && hotUploadedRatioOption
|
||
? hotUploadedRatioOption
|
||
: normalizeRatioForPlatform(platform, current, nextOutput),
|
||
);
|
||
};
|
||
|
||
const handleCloneMarketChange = (nextMarket: string) => {
|
||
const normalizedMarket = normalizeMarket(nextMarket);
|
||
setMarket(normalizedMarket);
|
||
setLanguage(getPlatformDefaultLanguage(platform, normalizedMarket));
|
||
};
|
||
|
||
const handleDetailPlatformChange = (nextPlatform: string) => {
|
||
const normalizedPlatform = normalizePlatform(nextPlatform);
|
||
setDetailPlatform(normalizedPlatform);
|
||
setDetailLanguage(getPlatformDefaultLanguage(normalizedPlatform, detailMarket));
|
||
setDetailRatio((current) => getQuickSetRatioValue(current));
|
||
};
|
||
|
||
const handleDetailMarketChange = (nextMarket: string) => {
|
||
const normalizedMarket = normalizeMarket(nextMarket);
|
||
setDetailMarket(normalizedMarket);
|
||
setDetailLanguage(getPlatformDefaultLanguage(detailPlatform, normalizedMarket));
|
||
};
|
||
|
||
const createCloneSettingSnapshot = (name: string, id = `clone-setting-${Date.now()}`): CloneSavedSetting => ({
|
||
id,
|
||
name,
|
||
savedAt: new Date().toISOString(),
|
||
output: cloneOutput,
|
||
platform,
|
||
market,
|
||
language,
|
||
ratio,
|
||
setCounts: { ...cloneSetCounts },
|
||
detailModules: [...selectedCloneDetailModules],
|
||
modelPanelTab: cloneModelPanelTab,
|
||
modelScenes: [...selectedCloneModelScenes],
|
||
modelCustomScene: cloneModelCustomScene,
|
||
modelGender: cloneModelGender,
|
||
modelAge: cloneModelAge,
|
||
modelEthnicity: cloneModelEthnicity,
|
||
modelBody: cloneModelBody,
|
||
modelAppearance: cloneModelAppearance,
|
||
videoQuality: cloneVideoQuality,
|
||
videoDurationSeconds: cloneVideoDuration,
|
||
videoSmart: cloneVideoSmart,
|
||
referenceMode: cloneReferenceMode,
|
||
replicateLevel: cloneReplicateLevel,
|
||
requirement,
|
||
});
|
||
|
||
const latestCloneSettingSnapshot = useMemo(
|
||
() => createCloneSettingSnapshot(cloneSettingName, "clone-setting-latest"),
|
||
[
|
||
cloneOutput,
|
||
platform,
|
||
market,
|
||
language,
|
||
ratio,
|
||
cloneSetCounts,
|
||
selectedCloneDetailModules,
|
||
cloneModelPanelTab,
|
||
selectedCloneModelScenes,
|
||
cloneModelCustomScene,
|
||
cloneModelGender,
|
||
cloneModelAge,
|
||
cloneModelEthnicity,
|
||
cloneModelBody,
|
||
cloneModelAppearance,
|
||
cloneVideoQuality,
|
||
cloneVideoDuration,
|
||
cloneVideoSmart,
|
||
cloneReferenceMode,
|
||
cloneReplicateLevel,
|
||
requirement,
|
||
cloneSettingName,
|
||
],
|
||
);
|
||
|
||
const persistLatestCloneSetting = () => {
|
||
const snapshot = createCloneSettingSnapshot(cloneSettingName, "clone-setting-latest");
|
||
latestCloneSettingRef.current = snapshot;
|
||
writeCloneLatestSetting(snapshot);
|
||
return snapshot;
|
||
};
|
||
|
||
const applyCloneSavedSetting = (setting: CloneSavedSetting) => {
|
||
const nextCounts = {
|
||
selling: Number.isFinite(setting.setCounts?.selling) ? setting.setCounts.selling : defaultCloneSetCounts.selling,
|
||
white: Number.isFinite(setting.setCounts?.white) ? setting.setCounts.white : defaultCloneSetCounts.white,
|
||
scene: Number.isFinite(setting.setCounts?.scene) ? setting.setCounts.scene : defaultCloneSetCounts.scene,
|
||
};
|
||
const nextPlatform = normalizePlatform(setting.platform);
|
||
const nextMarket = normalizeMarket(setting.market);
|
||
const nextOutput = cloneOutputOptions.some((option) => option.key === setting.output) ? setting.output : defaultCloneOutput;
|
||
setCloneOutput(nextOutput);
|
||
setPlatform(nextPlatform);
|
||
setMarket(nextMarket);
|
||
setLanguage(normalizeLanguageForPlatform(nextPlatform, nextMarket, setting.language));
|
||
setRatio(normalizeRatioForPlatform(nextPlatform, setting.ratio, nextOutput));
|
||
setCloneSetCounts(nextCounts);
|
||
setSelectedCloneDetailModules((setting.detailModules?.length ? setting.detailModules : defaultCloneDetailModuleIds).slice(0, maxDetailModuleSelection));
|
||
setCloneModelPanelTab(setting.modelPanelTab === "model" ? "model" : "scene");
|
||
setSelectedCloneModelScenes(normalizeCloneModelSceneSelection(setting.modelScenes));
|
||
setCloneModelCustomScene(setting.modelCustomScene ?? "");
|
||
setCloneModelGender(tryOnModelOptions.gender.includes(setting.modelGender) ? setting.modelGender : tryOnModelOptions.gender[0]);
|
||
setCloneModelAge(tryOnModelOptions.age.includes(setting.modelAge) ? setting.modelAge : tryOnModelOptions.age[0]);
|
||
setCloneModelEthnicity(
|
||
tryOnModelOptions.ethnicity.includes(setting.modelEthnicity) ? setting.modelEthnicity : tryOnModelOptions.ethnicity[0],
|
||
);
|
||
setCloneModelBody(tryOnModelOptions.body.includes(setting.modelBody) ? setting.modelBody : tryOnModelOptions.body[0]);
|
||
setCloneModelAppearance(setting.modelAppearance ?? "");
|
||
setCloneVideoQuality(
|
||
cloneVideoQualityOptions.some((option) => option.key === setting.videoQuality) ? setting.videoQuality : "high",
|
||
);
|
||
setCloneVideoDuration(clampCloneVideoDuration(setting.videoDurationSeconds));
|
||
setCloneVideoSmart(Boolean(setting.videoSmart));
|
||
setCloneReferenceMode(setting.referenceMode === "link" ? "link" : "upload");
|
||
setCloneReplicateLevel(setting.replicateLevel === "style" ? "style" : "high");
|
||
setRequirement((setting.requirement ?? "").slice(0, 500));
|
||
setCloneSettingName(setting.name);
|
||
latestCloneSettingRef.current = setting;
|
||
writeCloneLatestSetting(setting);
|
||
};
|
||
|
||
useEffect(() => {
|
||
latestCloneSettingRef.current = latestCloneSettingSnapshot;
|
||
}, [latestCloneSettingSnapshot]);
|
||
|
||
useEffect(() => {
|
||
window.localStorage.removeItem(cloneLatestSettingStorageKey);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
setProductSetRatio((current) => normalizeRatioForPlatform(productSetPlatform, current, productSetOutput));
|
||
}, [productSetOutput, productSetPlatform]);
|
||
|
||
useEffect(() => {
|
||
if (activeQuickTool === "set") {
|
||
setRatio((current) => getQuickSetRatioValue(current));
|
||
return;
|
||
}
|
||
setRatio((current) => {
|
||
const platformRatios = getPlatformRatioOptions(platform, cloneOutput);
|
||
const availableRatios = hotUploadedRatioOption ? getUniqueRatioOptions([...platformRatios, hotUploadedRatioOption]) : platformRatios;
|
||
if (current.startsWith("涓婁紶鍥剧墖") && hotUploadedRatioOption) return hotUploadedRatioOption;
|
||
if (availableRatios.includes(current)) return current;
|
||
const normalizedRatio = normalizeRatioToken(current);
|
||
const matchedRatio = availableRatios.find((option) => normalizeRatioToken(option).includes(normalizedRatio));
|
||
return matchedRatio ?? getPlatformDefaultRatio(platform, cloneOutput);
|
||
});
|
||
}, [activeQuickTool, cloneOutput, hotUploadedRatioOption, platform]);
|
||
|
||
useEffect(() => {
|
||
if (skipInitialCloneAutoSaveRef.current) {
|
||
skipInitialCloneAutoSaveRef.current = false;
|
||
return undefined;
|
||
}
|
||
if (skipNextCloneAutoSaveRef.current) {
|
||
skipNextCloneAutoSaveRef.current = false;
|
||
return undefined;
|
||
}
|
||
|
||
const timeoutId = window.setTimeout(() => {
|
||
persistLatestCloneSetting();
|
||
}, 300);
|
||
|
||
return () => window.clearTimeout(timeoutId);
|
||
}, [
|
||
activeTool,
|
||
cloneOutput,
|
||
platform,
|
||
market,
|
||
language,
|
||
ratio,
|
||
cloneSetCounts,
|
||
selectedCloneDetailModules,
|
||
cloneModelPanelTab,
|
||
selectedCloneModelScenes,
|
||
cloneModelCustomScene,
|
||
cloneModelGender,
|
||
cloneModelAge,
|
||
cloneModelEthnicity,
|
||
cloneModelBody,
|
||
cloneModelAppearance,
|
||
cloneVideoQuality,
|
||
cloneVideoDuration,
|
||
cloneVideoSmart,
|
||
cloneReferenceMode,
|
||
cloneReplicateLevel,
|
||
requirement,
|
||
cloneSettingName,
|
||
]);
|
||
|
||
useEffect(() => {
|
||
const persistSnapshot = () => {
|
||
if (latestCloneSettingRef.current) writeCloneLatestSetting(latestCloneSettingRef.current);
|
||
};
|
||
const handleVisibilityChange = () => {
|
||
if (document.visibilityState === "hidden") persistSnapshot();
|
||
};
|
||
|
||
window.addEventListener("pagehide", persistSnapshot);
|
||
document.addEventListener("visibilitychange", handleVisibilityChange);
|
||
|
||
return () => {
|
||
persistSnapshot();
|
||
window.removeEventListener("pagehide", persistSnapshot);
|
||
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => clearCloneSetCountHold, []);
|
||
|
||
useEffect(() => {
|
||
if (!openCloneBasicSelect) return undefined;
|
||
|
||
const handlePointerDown = (event: PointerEvent) => {
|
||
const target = event.target;
|
||
if (!(target instanceof Element) || target.closest("[data-clone-basic-select]")) return;
|
||
setOpenCloneBasicSelect(null);
|
||
};
|
||
const handleKeyDown = (event: KeyboardEvent) => {
|
||
if (event.key === "Escape") setOpenCloneBasicSelect(null);
|
||
};
|
||
|
||
document.addEventListener("pointerdown", handlePointerDown);
|
||
document.addEventListener("keydown", handleKeyDown);
|
||
return () => {
|
||
document.removeEventListener("pointerdown", handlePointerDown);
|
||
document.removeEventListener("keydown", handleKeyDown);
|
||
};
|
||
}, [openCloneBasicSelect]);
|
||
|
||
useEffect(() => {
|
||
if (!composerMenu && !(status === "done" && !isCommandComposerCompact)) return undefined;
|
||
|
||
const handlePointerDown = (event: PointerEvent) => {
|
||
const target = event.target;
|
||
if (!(target instanceof Node)) return;
|
||
const composer = commandComposerWrapRef.current;
|
||
if (composer?.contains(target)) return;
|
||
|
||
if (composerMenu) setComposerMenu(null);
|
||
if (status === "done" && !isCommandComposerCompact) setIsCommandComposerCompact(true);
|
||
};
|
||
|
||
document.addEventListener("pointerdown", handlePointerDown);
|
||
return () => document.removeEventListener("pointerdown", handlePointerDown);
|
||
}, [composerMenu, isCommandComposerCompact, status]);
|
||
|
||
useEffect(() => {
|
||
if (composerMenuCloseTimeoutRef.current !== null) {
|
||
window.clearTimeout(composerMenuCloseTimeoutRef.current);
|
||
composerMenuCloseTimeoutRef.current = null;
|
||
}
|
||
if (composerMenu) {
|
||
setVisibleComposerMenu(composerMenu);
|
||
setIsComposerMenuClosing(false);
|
||
return;
|
||
}
|
||
if (!visibleComposerMenu) return;
|
||
setIsComposerMenuClosing(true);
|
||
composerMenuCloseTimeoutRef.current = window.setTimeout(() => {
|
||
composerMenuCloseTimeoutRef.current = null;
|
||
setVisibleComposerMenu(null);
|
||
setIsComposerMenuClosing(false);
|
||
}, 220);
|
||
}, [composerMenu, visibleComposerMenu]);
|
||
|
||
useEffect(
|
||
() => () => {
|
||
if (composerMenuCloseTimeoutRef.current !== null) {
|
||
window.clearTimeout(composerMenuCloseTimeoutRef.current);
|
||
}
|
||
},
|
||
[],
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (!openCloneModelSelect) return undefined;
|
||
|
||
const handlePointerDown = (event: PointerEvent) => {
|
||
const target = event.target;
|
||
if (!(target instanceof Element) || target.closest("[data-clone-model-select]")) return;
|
||
setOpenCloneModelSelect(null);
|
||
setCloneModelSelectDropUp(false);
|
||
};
|
||
const handleKeyDown = (event: KeyboardEvent) => {
|
||
if (event.key === "Escape") {
|
||
setOpenCloneModelSelect(null);
|
||
setCloneModelSelectDropUp(false);
|
||
}
|
||
};
|
||
|
||
document.addEventListener("pointerdown", handlePointerDown);
|
||
document.addEventListener("keydown", handleKeyDown);
|
||
return () => {
|
||
document.removeEventListener("pointerdown", handlePointerDown);
|
||
document.removeEventListener("keydown", handleKeyDown);
|
||
};
|
||
}, [openCloneModelSelect]);
|
||
|
||
const handleGarmentUpload = (event: ChangeEvent<HTMLInputElement>) => {
|
||
const files = event.target.files;
|
||
if (!files?.length) return;
|
||
const uploadedFiles = notifyRejectedImages(Array.from(files));
|
||
if (!uploadedFiles.length) {
|
||
event.target.value = "";
|
||
return;
|
||
}
|
||
void (async () => {
|
||
try {
|
||
const nextImages = await createUploadedImageItems(uploadedFiles, 5 - garmentImages.length, "garment");
|
||
setGarmentImages((current) => [...current, ...nextImages].slice(0, 5));
|
||
setTryOnStatus("ready");
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : "鏈嶉グ鍥句笂浼犲け璐?");
|
||
}
|
||
})();
|
||
event.target.value = "";
|
||
};
|
||
|
||
const handleDetailUpload = (event: ChangeEvent<HTMLInputElement>) => {
|
||
const files = event.target.files;
|
||
if (!files?.length) return;
|
||
void addDetailImages(Array.from(files));
|
||
event.target.value = "";
|
||
};
|
||
|
||
const handleDetailDrop = (event: DragEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
const files = Array.from(event.dataTransfer.files);
|
||
if (files.length) void addDetailImages(files);
|
||
};
|
||
|
||
const removeDetailImage = (imageId: string) => {
|
||
setDetailProductImages((current) => {
|
||
const next = current.filter((item) => item.id !== imageId);
|
||
if (next.length === 0) {
|
||
setDetailStatus("idle");
|
||
setDetailResultUrl(null);
|
||
}
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const blobToDataUrl = (blob: Blob): Promise<string> =>
|
||
new Promise((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.onload = () => resolve(String(reader.result || ""));
|
||
reader.onerror = () => reject(reader.error || new Error("鏂囦欢璇诲彇澶辫触"));
|
||
reader.readAsDataURL(blob);
|
||
});
|
||
|
||
const addDetailImages = async (files: File[]) => {
|
||
const uploadedFiles = notifyRejectedImages(files);
|
||
if (!uploadedFiles.length) return;
|
||
try {
|
||
const nextImages = await createUploadedImageItems(uploadedFiles, 3 - detailProductImages.length, "detail");
|
||
setDetailProductImages((current) => {
|
||
if (current.length >= 3) return current;
|
||
return nextImages.length ? [...current, ...nextImages].slice(0, 3) : current;
|
||
});
|
||
setDetailStatus("ready");
|
||
setDetailResultUrl(null);
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : "璇︽儏鍥句笂浼犲け璐?");
|
||
}
|
||
};
|
||
|
||
const uploadCloneImages = async (images: CloneImageItem[]): Promise<string[]> => {
|
||
const urls: string[] = [];
|
||
for (const item of images) {
|
||
try {
|
||
if (!item.file && item.src.startsWith("blob:")) {
|
||
throw new Error("鏈湴棰勮鍥剧己灏戝師濮嬫枃浠讹紝鏃犳硶涓婁紶");
|
||
}
|
||
const rawBlob = item.file ?? (item.src.startsWith("data:") ? null : await (await fetch(item.src)).blob());
|
||
const mimeType = normalizeEcommerceImageMime(
|
||
rawBlob?.type || item.src.match(/^data:([^;,]+)/)?.[1] || "image/png",
|
||
);
|
||
const blob = rawBlob ? (rawBlob.type === mimeType ? rawBlob : new Blob([rawBlob], { type: mimeType })) : null;
|
||
const dataUrl = item.src.startsWith("data:") ? item.src : await blobToDataUrl(blob!);
|
||
const { url } = await aiGenerationClient.uploadAsset({ dataUrl, name: item.name, mimeType, scope: "ecommerce-product" });
|
||
urls.push(url);
|
||
} catch {
|
||
// skip images that fail to upload
|
||
}
|
||
}
|
||
return urls;
|
||
};
|
||
|
||
const IMAGE_MODEL = "gpt-image-2";
|
||
|
||
const setCountLabels: Record<CloneSetCountKey, { label: string; promptDesc: string }> = {
|
||
selling: { label: "鍗栫偣鍥?", promptDesc: "selling-point infographic image highlighting core product advantages and detail close-ups" },
|
||
white: { label: "鐧藉簳鍥?", promptDesc: "clean white-background product photo showing the item from its best angle, studio lighting, no props" },
|
||
scene: { label: "鍦烘櫙鍥?", promptDesc: "lifestyle scene image showing the product in a realistic usage environment with natural surroundings" },
|
||
};
|
||
|
||
const buildDetailModulePrompt = (moduleIds: string[]): string => {
|
||
if (!moduleIds.length) {
|
||
return "Generate a complete A+ detail layout with hero, selling points, usage scene, product detail, and specification modules.";
|
||
}
|
||
|
||
const selectedModules = cloneDetailModules.filter((module) => moduleIds.includes(module.id));
|
||
if (!selectedModules.length) return "";
|
||
|
||
const moduleList = selectedModules.map((module) => `${module.title}: ${module.desc}`).join("; ");
|
||
return `Only generate these selected A+ detail modules, no extra modules: ${moduleList}. Keep the output focused even if only one or two modules are selected.`;
|
||
};
|
||
|
||
const buildSetSubPrompt = (countKey: CloneSetCountKey, index: number, totalCount: number, pPlatform: string, pRatio: string, pLanguage: string, pMarket: string): string => {
|
||
const info = setCountLabels[countKey];
|
||
const parts: string[] = [];
|
||
parts.push(`Generate an e-commerce ${info.label.toLowerCase()} for a product listing.`);
|
||
parts.push(info.promptDesc);
|
||
if (countKey === "white") {
|
||
parts.push("The output must be a clean white-background product image. Do not use lifestyle backgrounds, props, text overlays, or people.");
|
||
}
|
||
if (countKey === "scene") {
|
||
parts.push("The output must be a realistic usage scene image. Keep the product clearly visible and preserve its shape, color, and key details.");
|
||
}
|
||
if (countKey === "selling") {
|
||
parts.push("The output must be a selling-point graphic with clear hierarchy, concise copy, and product detail callouts.");
|
||
}
|
||
if (totalCount > 1) {
|
||
parts.push(`This is variant ${index + 1} of ${totalCount} 鈥?vary the angle, composition, or emphasis to make each distinct.`);
|
||
}
|
||
parts.push(`Platform: ${pPlatform}. Aspect ratio: ${pRatio}. Language/copy: ${pLanguage}. Market: ${pMarket}.`);
|
||
parts.push("Must comply with platform image guidelines 鈥?proper margins, no watermark, professional quality.");
|
||
return parts.join(" ");
|
||
};
|
||
|
||
const buildEcommerceImagePrompt = (
|
||
outputKey: CloneOutputKey, userText: string,
|
||
pPlatform: string, pRatio: string, pLanguage: string, pMarket: string,
|
||
tryOnOptions?: EcommerceImagePromptOptions,
|
||
): string => {
|
||
const parts: string[] = [];
|
||
if (outputKey === "detail") {
|
||
parts.push("Generate a professional A+ detail page hero image for an e-commerce product listing.");
|
||
parts.push("Create a high-impact first-screen visual that combines the product photo with key selling points, usage scenes, and detailed specifications in a cohesive layout.");
|
||
parts.push(`Platform: ${pPlatform}. Aspect ratio: ${pRatio}. Language/copy: ${pLanguage}. Market: ${pMarket}.`);
|
||
if (outputKey === "detail" && tryOnOptions?.detailModules) parts.push(buildDetailModulePrompt(tryOnOptions.detailModules));
|
||
parts.push("Follow platform A+ page best practices 鈥?clear hierarchy, professional typography, high visual impact.");
|
||
} else if (outputKey === "model") {
|
||
parts.push("Generate model/try-on lifestyle images for an e-commerce product listing.");
|
||
parts.push("Show the product being used or worn by a model in attractive lifestyle settings.");
|
||
parts.push(`Platform: ${pPlatform}. Aspect ratio: ${pRatio}. Language/copy: ${pLanguage}. Market: ${pMarket}.`);
|
||
if (tryOnOptions) {
|
||
if (tryOnOptions.gender) parts.push(`Model gender: ${tryOnOptions.gender}.`);
|
||
if (tryOnOptions.age) parts.push(`Model age: ${tryOnOptions.age}.`);
|
||
if (tryOnOptions.ethnicity) parts.push(`Model ethnicity: ${tryOnOptions.ethnicity}.`);
|
||
if (tryOnOptions.body) parts.push(`Model body type: ${tryOnOptions.body}.`);
|
||
if (tryOnOptions.appearance) parts.push(`Model appearance details: ${tryOnOptions.appearance}.`);
|
||
if (tryOnOptions.scenes?.length) parts.push(`Background scenes: ${tryOnOptions.scenes.join(", ")}.`);
|
||
if (tryOnOptions.customScene) parts.push(`Custom background scene: ${tryOnOptions.customScene}.`);
|
||
if (tryOnOptions.smartScene) parts.push("Use smart scene matching to select the best background context.");
|
||
}
|
||
parts.push("Model should appear natural and appealing. Background should complement the product. Image must meet platform standards.");
|
||
} else if (outputKey === "hot") {
|
||
parts.push("Generate a high-conversion e-commerce product image that closely replicates the style and composition of the reference image while adapting it to the target platform.");
|
||
parts.push(`Replicate the visual style, color palette, and layout feel of the source product image, then adapt it for ${pPlatform} marketplace standards.`);
|
||
parts.push(`Platform: ${pPlatform}. Aspect ratio: ${pRatio}. Language/copy: ${pLanguage}. Market: ${pMarket}.`);
|
||
parts.push("The result must look professional and optimized for high click-through rate and conversion on the specified platform.");
|
||
}
|
||
if (userText.trim()) {
|
||
parts.push(`Additional user requirements: ${userText.trim()}`);
|
||
}
|
||
return parts.join(" ");
|
||
};
|
||
|
||
const generateSetImages = async (
|
||
images: CloneImageItem[],
|
||
counts: Record<CloneSetCountKey, number>,
|
||
userText: string,
|
||
pPlatform: string,
|
||
pRatio: string,
|
||
pLanguage: string,
|
||
pMarket: string,
|
||
setStatusFn: (status: "generating" | "done" | "idle" | "failed") => void,
|
||
setResultFn: (urls: string[]) => void,
|
||
): Promise<void> => {
|
||
setStatusFn("generating");
|
||
try {
|
||
const referenceUrls = await uploadCloneImages(images);
|
||
if (!referenceUrls.length) {
|
||
setStatusFn("idle");
|
||
return;
|
||
}
|
||
if (imageAbortRef.current.current) {
|
||
setStatusFn("idle");
|
||
return;
|
||
}
|
||
|
||
const generatedUrls: string[] = [];
|
||
const stamp = Date.now();
|
||
|
||
for (const countKey of cloneSetCountKeys) {
|
||
if (imageAbortRef.current.current) break;
|
||
const count = counts[countKey];
|
||
for (let i = 0; i < count; i++) {
|
||
if (imageAbortRef.current.current) break;
|
||
const subPrompt = buildSetSubPrompt(countKey, i, count, pPlatform, pRatio, pLanguage, pMarket);
|
||
const fullPrompt = userText.trim() ? `${subPrompt} Additional user requirements: ${userText.trim()}` : subPrompt;
|
||
|
||
const { taskId } = await aiGenerationClient.createImageTask({
|
||
model: IMAGE_MODEL,
|
||
prompt: fullPrompt,
|
||
ratio: normalizeRatioForApi(pRatio),
|
||
quality: pRatio.includes("720") ? "720P" : "1080P",
|
||
gridMode: "single",
|
||
referenceUrls,
|
||
});
|
||
trackEcommerceTask(taskId);
|
||
|
||
const storeId = imageGen.submitTask({ title: `${setCountLabels[countKey].label} ${i + 1}`, type: "image", status: "running", progress: 5, prompt: fullPrompt, sourceView: "ecommerce", taskId });
|
||
|
||
let resultUrl: string | null = null;
|
||
try {
|
||
resultUrl = await waitForTask(taskId, {
|
||
abortRef: imageAbortRef.current,
|
||
onProgress: () => {},
|
||
});
|
||
} finally {
|
||
untrackEcommerceTask(taskId);
|
||
}
|
||
|
||
if (imageAbortRef.current.current) break;
|
||
|
||
if (resultUrl) {
|
||
const persistedUrl = await persistGeneratedImageUrl(resultUrl, "ecommerce-generated", `ecommerce-${countKey}-${i + 1}`);
|
||
generatedUrls.push(persistedUrl);
|
||
imageGen.updateTask(storeId, { status: "completed", progress: 100, resultUrl: persistedUrl });
|
||
} else {
|
||
generatedUrls.push("");
|
||
imageGen.updateTask(storeId, { status: "failed", error: "鐢熸垚鏈繑鍥炵粨鏋?" });
|
||
}
|
||
}
|
||
}
|
||
|
||
if (imageAbortRef.current.current) {
|
||
setStatusFn("idle");
|
||
return;
|
||
}
|
||
setResultFn(generatedUrls);
|
||
setStatusFn(generatedUrls.some(Boolean) ? "done" : "failed");
|
||
} catch (err) {
|
||
if (imageAbortRef.current.current) {
|
||
setStatusFn("idle");
|
||
return;
|
||
}
|
||
if (err instanceof ServerRequestError && err.status === 402) {
|
||
setResultFn([]);
|
||
toast.error("浣欓涓嶈冻锛岃鍏呭€煎悗缁х画");
|
||
} else {
|
||
const msg = err instanceof Error ? err.message : "鐢熸垚澶辫触";
|
||
toast.error(msg);
|
||
}
|
||
setStatusFn("failed");
|
||
}
|
||
};
|
||
|
||
const generateEcommerceImage = async (
|
||
outputKey: CloneOutputKey,
|
||
images: CloneImageItem[],
|
||
userText: string,
|
||
pPlatform: string,
|
||
pRatio: string,
|
||
pLanguage: string,
|
||
pMarket: string,
|
||
tryOnOptions?: EcommerceImagePromptOptions,
|
||
statusFn?: (status: "generating" | "done" | "idle" | "failed") => void,
|
||
resultFn?: (results: CloneResult[]) => void,
|
||
): Promise<void> => {
|
||
statusFn?.("generating");
|
||
try {
|
||
const referenceUrls = await uploadCloneImages(images);
|
||
if (!referenceUrls.length) {
|
||
statusFn?.("idle");
|
||
return;
|
||
}
|
||
if (imageAbortRef.current.current) {
|
||
statusFn?.("idle");
|
||
return;
|
||
}
|
||
|
||
const prompt = buildEcommerceImagePrompt(outputKey, userText, pPlatform, pRatio, pLanguage, pMarket, tryOnOptions);
|
||
const stamp = Date.now();
|
||
|
||
const { taskId } = await aiGenerationClient.createImageTask({
|
||
model: IMAGE_MODEL,
|
||
prompt,
|
||
ratio: normalizeRatioForApi(pRatio),
|
||
quality: pRatio.includes("720") ? "720P" : "1080P",
|
||
gridMode: "single",
|
||
referenceUrls,
|
||
});
|
||
trackEcommerceTask(taskId);
|
||
|
||
const storeId = imageGen.submitTask({ title: `电商${outputKey}图`, type: "image", status: "running", progress: 5, prompt, sourceView: "ecommerce", taskId });
|
||
|
||
let resultUrl: string | null = null;
|
||
try {
|
||
resultUrl = await waitForTask(taskId, {
|
||
abortRef: imageAbortRef.current,
|
||
onProgress: () => {},
|
||
});
|
||
} finally {
|
||
untrackEcommerceTask(taskId);
|
||
}
|
||
|
||
if (imageAbortRef.current.current) {
|
||
statusFn?.("idle");
|
||
return;
|
||
}
|
||
|
||
if (resultUrl) {
|
||
const persistedUrl = await persistGeneratedImageUrl(resultUrl, "ecommerce-generated", `ecommerce-${outputKey}`);
|
||
resultFn?.([{ id: `ecommerce-${stamp}`, src: persistedUrl, label: selectedCloneOutput.label }]);
|
||
statusFn?.("done");
|
||
imageGen.updateTask(storeId, { status: "completed", progress: 100, resultUrl: persistedUrl });
|
||
} else {
|
||
statusFn?.("idle");
|
||
imageGen.updateTask(storeId, { status: "failed", error: "鐢熸垚鏈繑鍥炵粨鏋?" });
|
||
}
|
||
} catch (err) {
|
||
if (imageAbortRef.current.current) {
|
||
statusFn?.("idle");
|
||
return;
|
||
}
|
||
if (err instanceof ServerRequestError && err.status === 402) {
|
||
resultFn?.([{ id: `ecommerce-error-402`, src: "", label: "浣欓涓嶈冻锛岃鍏呭€煎悗缁х画" }]);
|
||
toast.error("浣欓涓嶈冻锛岃鍏呭€煎悗缁х画");
|
||
} else {
|
||
const msg = err instanceof Error ? err.message : "鐢熸垚澶辫触";
|
||
toast.error(msg);
|
||
}
|
||
statusFn?.("failed");
|
||
}
|
||
};
|
||
|
||
const handleVideoOutfitGenerate = async () => {
|
||
if (!videoOutfitVideoFile || !videoOutfitRefFile) return;
|
||
setStatus("generating");
|
||
try {
|
||
const readAsDataUrl = (file: File): Promise<string> => new Promise((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.onload = () => resolve(reader.result as string);
|
||
reader.onerror = () => reject(new Error("鏂囦欢璇诲彇澶辫触"));
|
||
reader.readAsDataURL(file);
|
||
});
|
||
|
||
const videoDataUrl = await readAsDataUrl(videoOutfitVideoFile);
|
||
const refDataUrl = await readAsDataUrl(videoOutfitRefFile);
|
||
|
||
const videoAsset = await aiGenerationClient.uploadAsset({
|
||
dataUrl: videoDataUrl, name: videoOutfitVideoFile.name,
|
||
mimeType: videoOutfitVideoFile.type || "video/mp4", scope: "video-outfit",
|
||
});
|
||
const refAsset = await aiGenerationClient.uploadAsset({
|
||
dataUrl: refDataUrl, name: videoOutfitRefFile.name,
|
||
mimeType: videoOutfitRefFile.type || "image/png", scope: "video-outfit",
|
||
});
|
||
if (imageAbortRef.current.current) {
|
||
setStatus("idle");
|
||
return;
|
||
}
|
||
|
||
const { taskId } = await aiGenerationClient.createVideoEditTask({
|
||
videoUrl: videoAsset.url,
|
||
referenceUrls: [refAsset.url],
|
||
prompt: requirement || undefined,
|
||
});
|
||
trackEcommerceTask(taskId);
|
||
|
||
const { waitForTask } = await import("../../api/taskSubscription");
|
||
let resultUrl: string | null = null;
|
||
try {
|
||
resultUrl = await waitForTask(taskId, { abortRef: imageAbortRef.current });
|
||
} finally {
|
||
untrackEcommerceTask(taskId);
|
||
}
|
||
if (imageAbortRef.current.current) {
|
||
setStatus("idle");
|
||
return;
|
||
}
|
||
if (resultUrl) {
|
||
setResults([{ id: crypto.randomUUID(), src: resultUrl, label: "鎹㈣瑙嗛" }]);
|
||
}
|
||
setStatus("done");
|
||
} catch (err) {
|
||
if (imageAbortRef.current.current) {
|
||
setStatus("idle");
|
||
return;
|
||
}
|
||
setStatus("failed");
|
||
toast.error(err instanceof Error ? err.message : "瑙嗛鎹㈣鐢熸垚澶辫触");
|
||
}
|
||
};
|
||
|
||
const handleGenerate = () => {
|
||
if (!canGenerate) return;
|
||
|
||
if ((appUsage?.balanceCents ?? 0) <= 0) {
|
||
toast.error("绉垎涓嶈冻锛岃鍏呭€煎悗缁х画");
|
||
return;
|
||
}
|
||
|
||
if (cloneOutput === "set" && cloneSetTotal > 5) {
|
||
if (!window.confirm("将生成 " + String(cloneSetTotal) + " 张图片，可能消耗较多积分，是否继续？")) return;
|
||
}
|
||
|
||
imageAbortRef.current = { current: false };
|
||
lastFailedActionRef.current = null;
|
||
if (cloneOutput === "video-outfit") {
|
||
void handleVideoOutfitGenerate();
|
||
} else if (cloneOutput === "set") {
|
||
void generateSetImages(
|
||
productImages, cloneSetCounts, requirement,
|
||
platform, ratio, language, market,
|
||
(s) => setStatus(s as ProductCloneStatus),
|
||
(urls) => setProductSetResultImages(urls),
|
||
);
|
||
} else {
|
||
const clonePromptOptions: EcommerceImagePromptOptions | undefined =
|
||
cloneOutput === "model"
|
||
? {
|
||
gender: cloneModelGender,
|
||
age: cloneModelAge,
|
||
ethnicity: cloneModelEthnicity,
|
||
body: cloneModelBody,
|
||
scenes: selectedCloneModelScenes,
|
||
customScene: cloneModelCustomScene,
|
||
}
|
||
: cloneOutput === "detail"
|
||
? { detailModules: selectedCloneDetailModules }
|
||
: undefined;
|
||
void generateEcommerceImage(
|
||
cloneOutput, productImages, requirement,
|
||
platform, ratio, language, market,
|
||
clonePromptOptions,
|
||
(s: string) => setStatus(s as ProductCloneStatus), setResults,
|
||
);
|
||
lastFailedActionRef.current = () => handleGenerate();
|
||
}
|
||
};
|
||
|
||
const handleGenerateModel = () => {
|
||
imageAbortRef.current = { current: false };
|
||
lastFailedActionRef.current = null;
|
||
setTryOnStatus("modeling");
|
||
void generateEcommerceImage(
|
||
"model", garmentImages, requirement,
|
||
platform, ratio, language, market,
|
||
{ gender: modelGender, age: modelAge, ethnicity: modelEthnicity, body: modelBody, appearance, scenes: selectedScenes, smartScene },
|
||
(s) => {
|
||
if (s === "done") setTryOnStatus("ready");
|
||
else setTryOnStatus(s as TryOnStatus);
|
||
},
|
||
() => { setTryOnStatus("ready"); },
|
||
);
|
||
lastFailedActionRef.current = () => handleGenerateModel();
|
||
};
|
||
|
||
const handleTryOnGenerate = () => {
|
||
if (!canGenerateTryOn) return;
|
||
imageAbortRef.current = { current: false };
|
||
lastFailedActionRef.current = null;
|
||
void generateEcommerceImage(
|
||
"model", garmentImages, requirement,
|
||
platform, ratio, language, market,
|
||
{ gender: modelGender, age: modelAge, ethnicity: modelEthnicity, body: modelBody, appearance, scenes: selectedScenes, smartScene },
|
||
(s) => setTryOnStatus(s as TryOnStatus),
|
||
(res) => {
|
||
const urls: string[] = [];
|
||
for (const item of res) {
|
||
if (item.src) urls.push(item.src);
|
||
}
|
||
setTryOnResultImages(urls);
|
||
},
|
||
);
|
||
lastFailedActionRef.current = () => handleTryOnGenerate();
|
||
};
|
||
|
||
const toggleScene = (scene: string) => {
|
||
setSelectedScenes((current) =>
|
||
current.includes(scene) ? current.filter((item) => item !== scene) : [...current, scene],
|
||
);
|
||
};
|
||
|
||
const toggleDetailModule = (moduleId: string) => {
|
||
setSelectedDetailModules((current) => {
|
||
if (current.includes(moduleId)) return current.filter((item) => item !== moduleId);
|
||
if (current.length >= maxDetailModuleSelection) {
|
||
toast.info(`最多选择 ${maxDetailModuleSelection} 个模块`);
|
||
return current;
|
||
}
|
||
return [...current, moduleId];
|
||
});
|
||
};
|
||
|
||
const handleSetGenerate = () => {
|
||
if (!canGenerateSet) return;
|
||
imageAbortRef.current = { current: false };
|
||
lastFailedActionRef.current = null;
|
||
void generateSetImages(
|
||
setImages, cloneSetCounts, productSetRequirement,
|
||
productSetPlatform, productSetRatio, productSetLanguage, productSetMarket,
|
||
(s) => setProductSetStatus(s as ProductSetStatus),
|
||
(urls) => setProductSetResultImages(urls),
|
||
);
|
||
lastFailedActionRef.current = () => handleSetGenerate();
|
||
};
|
||
|
||
const openProductSetPreview = (card: { src: string; label: string }) => {
|
||
setSelectedProductSetPreview(card);
|
||
};
|
||
|
||
const handleDetailAiWrite = () => {
|
||
setDetailRequirement(
|
||
"1.浜у搧鍚嶇О锛氭棤绾块檷鍣摑鐗欒€虫満\n2.鏍稿績鍗栫偣锛氫富鍔ㄩ檷鍣€?4H缁埅銆佷綆寤惰繜杩炴帴銆佽垝閫備僵鎴碶n3.閫傜敤浜虹兢锛氶€氬嫟銆佸姙鍏€佽繍鍔ㄥ拰鏃呰鐢ㄦ埛\n4.鏈熸湜鍦烘櫙锛氬湴閾侀€氬嫟銆佸眳瀹跺姙鍏€佹埛澶栬繍鍔╘n5.鍏蜂綋鍙傛暟锛氳摑鐗?.3銆両PX4闃叉按銆佸揩鍏?0鍒嗛挓浣跨敤2灏忔椂",
|
||
);
|
||
};
|
||
|
||
const handleDetailGenerate = () => {
|
||
if (!canGenerateDetail) return;
|
||
imageAbortRef.current = { current: false };
|
||
lastFailedActionRef.current = null;
|
||
void generateEcommerceImage(
|
||
"detail", detailProductImages, detailRequirement,
|
||
detailPlatform, detailRatio, detailLanguage, detailMarket,
|
||
{ detailModules: selectedDetailModules },
|
||
(s: string) => setDetailStatus(s as DetailStatus),
|
||
(res) => setDetailResultUrl(res[0]?.src ?? null),
|
||
);
|
||
};
|
||
|
||
const resetTask = () => {
|
||
setSetImages([]);
|
||
setProductSetRequirement("");
|
||
setProductSetPlatform(defaultEcommercePlatform);
|
||
setProductSetLanguage(getPlatformDefaultLanguage(defaultEcommercePlatform, productSetMarket));
|
||
setProductSetOutput(defaultProductSetOutput);
|
||
setProductSetRatio(getPlatformDefaultRatio(defaultEcommercePlatform, defaultProductSetOutput));
|
||
setProductSetStatus("idle");
|
||
setProductSetResultImages([]);
|
||
setIsSetUploadDragging(false);
|
||
setSelectedProductSetPreview(null);
|
||
setShowHostingModal(false);
|
||
setProductImages([]);
|
||
setIsProductUploadDragging(false);
|
||
setCloneOutput(defaultCloneOutput);
|
||
setPlatform(defaultEcommercePlatform);
|
||
setLanguage(getPlatformDefaultLanguage(defaultEcommercePlatform, market));
|
||
setRatio(getPlatformDefaultRatio(defaultEcommercePlatform, defaultCloneOutput));
|
||
setCloneSetCounts(defaultCloneSetCounts);
|
||
setSelectedCloneDetailModules(defaultCloneDetailModuleIds);
|
||
setCloneModelPanelTab("scene");
|
||
setSelectedCloneModelScenes([]);
|
||
setCloneModelCustomScene("");
|
||
setCloneModelGender(tryOnModelOptions.gender[0]);
|
||
setCloneModelAge(tryOnModelOptions.age[0]);
|
||
setCloneModelEthnicity(tryOnModelOptions.ethnicity[0]);
|
||
setCloneModelBody(tryOnModelOptions.body[0]);
|
||
setCloneModelAppearance("");
|
||
setCloneVideoQuality("high");
|
||
setCloneVideoDuration(10);
|
||
setCloneVideoSmart(true);
|
||
setCloneReferenceMode("upload");
|
||
setCloneReferenceImages([]);
|
||
setCloneReplicateLevel("high");
|
||
setRequirement("");
|
||
setCloneSettingName("鏂板缓鍒涗綔");
|
||
setResults([]);
|
||
setStatus("idle");
|
||
setGarmentImages([]);
|
||
setAppearance("");
|
||
setSelectedScenes([]);
|
||
setCustomScene("");
|
||
setSmartScene(false);
|
||
setTryOnRatio(tryOnRatioOptions[0]);
|
||
setTryOnStatus("idle");
|
||
setTryOnResultImages([]);
|
||
setDetailProductImages([]);
|
||
setDetailRequirement("");
|
||
setSelectedDetailModules(defaultDetailModuleIds);
|
||
setDetailStatus("idle");
|
||
};
|
||
|
||
const activeToolMeta = sideTools.find((tool) => tool.key === activeTool);
|
||
const isSetTool = activeTool === "set";
|
||
const isDetail = activeTool === "detail";
|
||
const isTryOn = activeTool === "wear";
|
||
const isCloneTool = activeTool === "clone";
|
||
const isSmartCutoutTool = isCloneTool && activeQuickTool === "cutout";
|
||
const isQuickSetTool = isCloneTool && activeQuickTool === "set";
|
||
const isQuickDetailTool = isCloneTool && activeQuickTool === "detail";
|
||
const isWatermarkTool = isCloneTool && activeQuickTool === "watermark";
|
||
const isImageEditTool = isCloneTool && activeQuickTool === "image-edit";
|
||
const isHotVideoTool = isCloneTool && activeQuickTool === "hot-video";
|
||
const pageLabel = isSetTool ? "鍟嗗搧濂楀浘" : isDetail ? "A+/璇︽儏椤?" : isTryOn ? "AI鏈嶉グ绌挎埓" : activeToolMeta?.label || "鍟嗗搧宸ュ叿";
|
||
const setPrimaryLabel =
|
||
setImages.length === 0
|
||
? "璇峰厛涓婁紶鍟嗗搧鍘熷浘"
|
||
: productSetStatus === "generating"
|
||
? "鐢熸垚涓?.."
|
||
: "鐢熸垚" + selectedProductSetOutput.label;
|
||
const tryOnPrimaryLabel =
|
||
garmentImages.length === 0 ? "璇峰厛涓婁紶鏈嶈鍥剧墖" : tryOnStatus === "generating" ? "鐢熸垚涓?.." : "鐢熸垚鏈嶉グ绌挎埓鍥?";
|
||
const detailPrimaryLabel =
|
||
detailProductImages.length === 0 ? "璇蜂笂浼犱骇鍝佸浘" : detailStatus === "generating" ? "鐢熸垚涓?.." : "鐢熸垚A+璇︽儏椤?";
|
||
const clonePrimaryLabel =
|
||
productImages.length === 0 ? "璇峰厛涓婁紶鍟嗗搧鍘熷浘" : status === "generating" ? "鐢熸垚涓?.." : "鐢熸垚" + selectedCloneOutput.label;
|
||
const setPreviewCards: CloneResult[] = [];
|
||
let setIndex = 0;
|
||
for (const countKey of cloneSetCountKeys) {
|
||
const count = cloneSetCounts[countKey];
|
||
const info = setCountLabels[countKey];
|
||
for (let i = 0; i < count; i++) {
|
||
setPreviewCards.push({
|
||
id: String(countKey) + "-" + String(i),
|
||
src: productSetResultImages[setIndex] || productSetPreviewCards[setIndex % productSetPreviewCards.length]?.src || "",
|
||
label: info.label + (count > 1 ? " " + String(i + 1) : ""),
|
||
});
|
||
setIndex++;
|
||
}
|
||
}
|
||
|
||
const clonePreviewCards: CloneResult[] = [];
|
||
let cloneIndex = 0;
|
||
for (const countKey of cloneSetCountKeys) {
|
||
const count = cloneSetCounts[countKey];
|
||
const info = setCountLabels[countKey];
|
||
for (let i = 0; i < count; i++) {
|
||
clonePreviewCards.push({
|
||
id: String(countKey) + "-" + String(i),
|
||
src: productSetResultImages[cloneIndex] || productSetPreviewCards[cloneIndex % productSetPreviewCards.length]?.src || "",
|
||
label: info.label + (count > 1 ? " " + String(i + 1) : ""),
|
||
});
|
||
cloneIndex++;
|
||
}
|
||
}
|
||
|
||
const getCurrentHistoryResults = () =>
|
||
cloneOutput === "set"
|
||
? productSetResultImages
|
||
.filter(Boolean)
|
||
.map((src, index) => ({ id: "history-set-" + String(index), src, label: clonePreviewCards[index]?.label || "濂楀浘 " + String(index + 1) }))
|
||
: results.filter((item) => item.src);
|
||
|
||
const buildHistorySignature = (output: CloneOutputKey, prompt: string, historyResults: CloneResult[], sourceImages: CloneImageItem[]) =>
|
||
[
|
||
output,
|
||
prompt.trim(),
|
||
historyResults.map((item) => item.src).join("|"),
|
||
sourceImages.map((item) => item.src).join("|"),
|
||
].join("::");
|
||
|
||
const formatHistoryTime = (timestamp: number) => {
|
||
const diff = Math.max(0, Date.now() - timestamp);
|
||
const minute = 60 * 1000;
|
||
const hour = 60 * minute;
|
||
const day = 24 * hour;
|
||
if (diff < minute) return "鍒氬垰";
|
||
if (diff < hour) return String(Math.floor(diff / minute)) + " 分钟前";
|
||
if (diff < day) return String(Math.floor(diff / hour)) + " 小时前";
|
||
return String(Math.floor(diff / day)) + " 天前";
|
||
};
|
||
|
||
const saveCurrentEcommerceHistory = () => {
|
||
const historyResults = getCurrentHistoryResults();
|
||
if (!historyResults.length) return null;
|
||
const signature = buildHistorySignature(cloneOutput, requirement, historyResults, productImages);
|
||
if (lastSavedHistorySignatureRef.current === signature && activeHistoryRecordId) return activeHistoryRecordId;
|
||
|
||
const createdAt = Date.now();
|
||
const outputLabel = cloneOutputOptions.find((option) => option.key === cloneOutput)?.label || "鐢熸垚璁板綍";
|
||
const title = requirement.trim() || outputLabel + " " + new Date(createdAt).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
|
||
const record: EcommerceHistoryRecord = {
|
||
id: crypto.randomUUID(),
|
||
title,
|
||
createdAt,
|
||
output: cloneOutput,
|
||
platform,
|
||
market,
|
||
language,
|
||
ratio,
|
||
requirement,
|
||
productImages,
|
||
results: historyResults,
|
||
setResultImages: cloneOutput === "set" ? historyResults.map((item) => item.src) : [],
|
||
setCounts: cloneSetCounts,
|
||
detailModules: selectedCloneDetailModules,
|
||
modelScenes: selectedCloneModelScenes,
|
||
referenceImages: cloneReferenceImages,
|
||
replicateLevel: cloneReplicateLevel,
|
||
};
|
||
lastSavedHistorySignatureRef.current = signature;
|
||
setEcommerceHistoryRecords((current) => {
|
||
const nextRecords = [record, ...current.filter((item) => item.id !== record.id)].slice(0, 30);
|
||
writeEcommerceHistoryRecords(nextRecords);
|
||
return nextRecords;
|
||
});
|
||
setActiveHistoryRecordId(record.id);
|
||
return record.id;
|
||
};
|
||
|
||
const openEcommerceHistoryRecord = (record: EcommerceHistoryRecord) => {
|
||
setActiveTool("clone");
|
||
setCloneOutput(record.output);
|
||
setPlatform(record.platform);
|
||
setMarket(record.market);
|
||
setLanguage(record.language);
|
||
setRatio(record.ratio);
|
||
setRequirement(record.requirement);
|
||
setProductImages(record.productImages);
|
||
setCloneSetCounts(record.setCounts);
|
||
setSelectedCloneDetailModules(record.detailModules.slice(0, maxDetailModuleSelection));
|
||
setSelectedCloneModelScenes(record.modelScenes);
|
||
setCloneReferenceImages(record.referenceImages);
|
||
setCloneReplicateLevel(record.replicateLevel);
|
||
setProductSetResultImages(record.setResultImages);
|
||
setResults(record.output === "set" ? [] : record.results);
|
||
setStatus("done");
|
||
setPreviewZoom(1);
|
||
setComposerMenu(null);
|
||
setActiveHistoryRecordId(record.id);
|
||
lastSavedHistorySignatureRef.current = buildHistorySignature(record.output, record.requirement, record.results, record.productImages);
|
||
setIsCommandComposerCompact(true);
|
||
};
|
||
|
||
const handleNewEcommerceConversation = () => {
|
||
saveCurrentEcommerceHistory();
|
||
resetTask();
|
||
setPreviewZoom(1);
|
||
setPreviewOffset({ x: 0, y: 0 });
|
||
setComposerMenu(null);
|
||
setIsCommandComposerCompact(false);
|
||
setActiveHistoryRecordId(null);
|
||
lastSavedHistorySignatureRef.current = "";
|
||
};
|
||
|
||
const refreshEcommerceHistory = () => {
|
||
if (historyRefreshLockRef.current) return;
|
||
historyRefreshLockRef.current = true;
|
||
setIsHistoryRefreshing(true);
|
||
setHistoryRefreshMessage("鍒锋柊涓?..");
|
||
setHistoryRefreshStamp(Date.now());
|
||
|
||
window.setTimeout(() => {
|
||
const storedRecords = readEcommerceHistoryRecords();
|
||
const mergedRecords = [...ecommerceHistoryRecords, ...storedRecords]
|
||
.reduce<EcommerceHistoryRecord[]>((records, record) => {
|
||
if (!records.some((item) => item.id === record.id)) records.push(record);
|
||
return records;
|
||
}, [])
|
||
.sort((a, b) => b.createdAt - a.createdAt)
|
||
.slice(0, 30);
|
||
writeEcommerceHistoryRecords(mergedRecords);
|
||
setHistoryRefreshTick((tick) => tick + 1);
|
||
setEcommerceHistoryRecords(mergedRecords);
|
||
setHistoryRefreshMessage(mergedRecords.length ? "已刷新 " + String(mergedRecords.length) + " 条记录" : "暂无可刷新记录");
|
||
setHistoryRefreshStamp(Date.now());
|
||
setIsHistoryRefreshing(false);
|
||
historyRefreshLockRef.current = false;
|
||
}, 180);
|
||
|
||
window.setTimeout(() => setHistoryRefreshMessage(""), 3000);
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (status === "done") saveCurrentEcommerceHistory();
|
||
}, [status, results, productSetResultImages]);
|
||
|
||
const detailSourcePreviewImages = detailProductImages.length
|
||
? detailProductImages.reduce<string[]>((urls, item) => {
|
||
urls.push(item.src);
|
||
return urls;
|
||
}, [])
|
||
: detailProductSamples;
|
||
const cloneBasicSelects: Array<{
|
||
key: CloneBasicSelectKey;
|
||
label: string;
|
||
value: string;
|
||
options: string[];
|
||
onChange: (value: string) => void;
|
||
}> = [
|
||
{ key: "platform", label: "平台", value: platform, options: platformOptions, onChange: handleClonePlatformChange },
|
||
{ key: "market", label: "国家", value: market, options: marketOptions, onChange: handleCloneMarketChange },
|
||
{ key: "language", label: "语种", value: language, options: cloneLanguageOptions, onChange: setLanguage },
|
||
{ key: "ratio", label: "尺寸/比例", value: ratio, options: cloneRatioOptions, onChange: setRatio },
|
||
];
|
||
const handleQuickSetPlatformChange = (nextPlatform: string) => {
|
||
const normalizedPlatform = normalizePlatform(nextPlatform);
|
||
setPlatform(normalizedPlatform);
|
||
setLanguage(getPlatformDefaultLanguage(normalizedPlatform, market));
|
||
};
|
||
const quickSetBasicSelects: Array<{
|
||
key: CloneBasicSelectKey;
|
||
label: string;
|
||
value: string;
|
||
options: string[];
|
||
onChange: (value: string) => void;
|
||
}> = [
|
||
{ key: "platform", label: "平台", value: platform, options: platformOptions, onChange: handleQuickSetPlatformChange },
|
||
{ key: "market", label: "国家", value: market, options: marketOptions, onChange: handleCloneMarketChange },
|
||
{ key: "language", label: "语种", value: language, options: cloneLanguageOptions, onChange: setLanguage },
|
||
{ key: "ratio", label: "尺寸/比例", value: getQuickSetRatioValue(ratio), options: quickSetRatioOptions, onChange: setRatio },
|
||
];
|
||
const quickDetailBasicSelects: Array<{
|
||
key: CloneBasicSelectKey;
|
||
label: string;
|
||
value: string;
|
||
options: string[];
|
||
onChange: (value: string) => void;
|
||
}> = [
|
||
{ key: "platform", label: "平台", value: detailPlatform, options: platformOptions, onChange: handleDetailPlatformChange },
|
||
{ key: "market", label: "国家", value: detailMarket, options: marketOptions, onChange: handleDetailMarketChange },
|
||
{ key: "language", label: "语种", value: detailLanguage, options: detailLanguageOptions, onChange: setDetailLanguage },
|
||
{ key: "ratio", label: "尺寸/比例", value: getQuickSetRatioValue(detailRatio), options: quickSetRatioOptions, onChange: setDetailRatio },
|
||
];
|
||
|
||
const cloneModelSelects: Array<{
|
||
key: CloneModelSelectKey;
|
||
label: string;
|
||
value: string;
|
||
options: string[];
|
||
onChange: (value: string) => void;
|
||
}> = [
|
||
{ key: "gender", label: "性别", value: cloneModelGender, options: tryOnModelOptions.gender, onChange: setCloneModelGender },
|
||
{ key: "age", label: "年龄", value: cloneModelAge, options: tryOnModelOptions.age, onChange: setCloneModelAge },
|
||
{
|
||
key: "ethnicity",
|
||
label: "人种",
|
||
value: cloneModelEthnicity,
|
||
options: tryOnModelOptions.ethnicity,
|
||
onChange: setCloneModelEthnicity,
|
||
},
|
||
{ key: "body", label: "体型", value: cloneModelBody, options: tryOnModelOptions.body, onChange: setCloneModelBody },
|
||
];
|
||
|
||
const setPanel = (
|
||
<EcommerceSetPanel
|
||
setInputRef={setInputRef}
|
||
setImages={setImages}
|
||
isSetUploadDragging={isSetUploadDragging}
|
||
productSetOutputOptions={productSetOutputOptions}
|
||
productSetOutput={productSetOutput}
|
||
platformOptions={platformOptions}
|
||
marketOptions={marketOptions}
|
||
productSetLanguageOptions={productSetLanguageOptions}
|
||
productSetRatioOptions={productSetRatioOptions}
|
||
productSetPlatform={productSetPlatform}
|
||
productSetMarket={productSetMarket}
|
||
productSetLanguage={productSetLanguage}
|
||
productSetRatio={productSetRatio}
|
||
setIsSetUploadDragging={setIsSetUploadDragging}
|
||
handleSetDrop={handleSetDrop}
|
||
handleSetUpload={handleSetUpload}
|
||
removeSetImage={removeSetImage}
|
||
handleProductSetOutputChange={handleProductSetOutputChange}
|
||
handleProductSetPlatformChange={handleProductSetPlatformChange}
|
||
handleProductSetMarketChange={handleProductSetMarketChange}
|
||
setProductSetLanguage={setProductSetLanguage}
|
||
setProductSetRatio={setProductSetRatio}
|
||
formatRatioDisplayValue={formatRatioDisplayValue}
|
||
/>
|
||
);
|
||
|
||
const clonePanel = (
|
||
<EcommerceClonePanel
|
||
productInputRef={productInputRef}
|
||
cloneReferenceInputRef={cloneReferenceInputRef}
|
||
productImages={productImages}
|
||
isProductUploadDragging={isProductUploadDragging}
|
||
cloneOutput={cloneOutput}
|
||
cloneOutputOptions={cloneOutputOptions}
|
||
cloneBasicSelects={cloneBasicSelects}
|
||
openCloneBasicSelect={openCloneBasicSelect}
|
||
cloneReferenceMode={cloneReferenceMode}
|
||
cloneReferenceImages={cloneReferenceImages}
|
||
maxCloneReferenceImages={maxCloneReferenceImages}
|
||
cloneReplicateLevel={cloneReplicateLevel}
|
||
cloneReplicateLevelOptions={cloneReplicateLevelOptions}
|
||
cloneSetCounts={cloneSetCounts}
|
||
cloneSetCountOptions={cloneSetCountOptions}
|
||
cloneSetTotal={cloneSetTotal}
|
||
minCloneSetTotal={minCloneSetTotal}
|
||
maxCloneSetTotal={maxCloneSetTotal}
|
||
selectedCloneDetailModules={selectedCloneDetailModules}
|
||
cloneDetailModules={cloneDetailModules}
|
||
cloneModelPanelTab={cloneModelPanelTab}
|
||
tryOnScenes={tryOnScenes}
|
||
selectedCloneModelScenes={selectedCloneModelScenes}
|
||
cloneModelCustomScene={cloneModelCustomScene}
|
||
cloneModelSelects={cloneModelSelects}
|
||
openCloneModelSelect={openCloneModelSelect}
|
||
cloneModelSelectDropUp={cloneModelSelectDropUp}
|
||
cloneVideoQuality={cloneVideoQuality}
|
||
cloneVideoQualityOptions={cloneVideoQualityOptions}
|
||
cloneVideoDuration={cloneVideoDuration}
|
||
cloneVideoDurationMin={cloneVideoDurationMin}
|
||
cloneVideoDurationMax={cloneVideoDurationMax}
|
||
cloneVideoDurationStyle={cloneVideoDurationStyle}
|
||
cloneVideoSmart={cloneVideoSmart}
|
||
canGenerate={canGenerate}
|
||
status={status}
|
||
lastFailedActionRef={lastFailedActionRef}
|
||
setIsProductUploadDragging={setIsProductUploadDragging}
|
||
handleProductDrop={handleProductDrop}
|
||
removeProductImage={removeProductImage}
|
||
handleProductUpload={handleProductUpload}
|
||
handleCloneOutputChange={handleCloneOutputChange}
|
||
setOpenCloneBasicSelect={setOpenCloneBasicSelect}
|
||
setCloneReferenceMode={setCloneReferenceMode}
|
||
handleCloneReferenceUpload={handleCloneReferenceUpload}
|
||
isCloneReferenceDragging={isCloneReferenceDragging}
|
||
handleCloneReferenceDragOver={handleCloneReferenceDragOver}
|
||
handleCloneReferenceDragLeave={handleCloneReferenceDragLeave}
|
||
handleCloneReferenceDrop={handleCloneReferenceDrop}
|
||
setCloneReplicateLevel={setCloneReplicateLevel}
|
||
startCloneSetCountHold={startCloneSetCountHold}
|
||
clearCloneSetCountHold={clearCloneSetCountHold}
|
||
toggleCloneDetailModule={toggleCloneDetailModule}
|
||
setCloneModelPanelTab={setCloneModelPanelTab}
|
||
toggleCloneModelScene={toggleCloneModelScene}
|
||
setCloneModelCustomScene={setCloneModelCustomScene}
|
||
setOpenCloneModelSelect={setOpenCloneModelSelect}
|
||
setCloneModelSelectDropUp={setCloneModelSelectDropUp}
|
||
setCloneVideoQuality={setCloneVideoQuality}
|
||
setCloneVideoDuration={setCloneVideoDuration}
|
||
clampCloneVideoDuration={clampCloneVideoDuration}
|
||
setCloneVideoSmart={setCloneVideoSmart}
|
||
handleGenerate={handleGenerate}
|
||
onCancelGenerate={handleCancelGenerate}
|
||
formatRatioDisplayValue={formatRatioDisplayValue}
|
||
setVideoOutfitFiles={(video, ref) => { setVideoOutfitVideoFile(video); setVideoOutfitRefFile(ref); }}
|
||
onStartVideoPlan={() => setVideoPlanTrigger((n) => n + 1)}
|
||
/>
|
||
);
|
||
|
||
const detailPanel = (
|
||
<EcommerceDetailPanel
|
||
detailInputRef={detailInputRef}
|
||
detailProductImages={detailProductImages}
|
||
detailPlatform={detailPlatform}
|
||
detailMarket={detailMarket}
|
||
detailLanguage={detailLanguage}
|
||
detailType={detailType}
|
||
detailRequirement={detailRequirement}
|
||
selectedDetailModules={selectedDetailModules}
|
||
detailStatus={detailStatus}
|
||
canGenerateDetail={canGenerateDetail}
|
||
detailPrimaryLabel={detailPrimaryLabel}
|
||
platformOptions={platformOptions}
|
||
marketOptions={marketOptions}
|
||
detailLanguageOptions={detailLanguageOptions}
|
||
detailTypeOptions={detailTypeOptions}
|
||
detailModules={detailModules}
|
||
handleDetailUpload={handleDetailUpload}
|
||
handleDetailPlatformChange={handleDetailPlatformChange}
|
||
handleDetailMarketChange={handleDetailMarketChange}
|
||
setDetailLanguage={setDetailLanguage}
|
||
setDetailType={setDetailType}
|
||
setDetailRequirement={setDetailRequirement}
|
||
handleDetailAiWrite={handleDetailAiWrite}
|
||
toggleDetailModule={toggleDetailModule}
|
||
handleDetailGenerate={handleDetailGenerate}
|
||
onCancelGenerate={handleCancelGenerate}
|
||
/>
|
||
);
|
||
|
||
const tryOnPanel = (
|
||
<EcommerceTryOnPanel
|
||
garmentInputRef={garmentInputRef}
|
||
garmentImages={garmentImages}
|
||
modelSource={modelSource}
|
||
modelGender={modelGender}
|
||
modelAge={modelAge}
|
||
modelEthnicity={modelEthnicity}
|
||
modelBody={modelBody}
|
||
appearance={appearance}
|
||
selectedScenes={selectedScenes}
|
||
customScene={customScene}
|
||
smartScene={smartScene}
|
||
tryOnRatio={tryOnRatio}
|
||
tryOnStatus={tryOnStatus}
|
||
canGenerateTryOn={canGenerateTryOn}
|
||
tryOnPrimaryLabel={tryOnPrimaryLabel}
|
||
tryOnModelOptions={tryOnModelOptions}
|
||
tryOnAssets={tryOnAssets}
|
||
tryOnScenes={tryOnScenes}
|
||
tryOnRatioOptions={tryOnRatioOptions}
|
||
handleGarmentUpload={handleGarmentUpload}
|
||
setModelSource={setModelSource}
|
||
setModelGender={setModelGender}
|
||
setModelAge={setModelAge}
|
||
setModelEthnicity={setModelEthnicity}
|
||
setModelBody={setModelBody}
|
||
setAppearance={setAppearance}
|
||
handleGenerateModel={handleGenerateModel}
|
||
toggleScene={toggleScene}
|
||
setCustomScene={setCustomScene}
|
||
setSmartScene={setSmartScene}
|
||
setTryOnRatio={setTryOnRatio}
|
||
handleTryOnGenerate={handleTryOnGenerate}
|
||
onCancelGenerate={handleCancelGenerate}
|
||
/>
|
||
);
|
||
|
||
const placeholderPanel = (
|
||
<>
|
||
<div className="product-clone-panel__scroll">
|
||
<section className="product-clone-empty-panel">
|
||
<span>{activeToolMeta?.icon}</span>
|
||
<h2>{activeToolMeta?.label}</h2>
|
||
<p>该工具页面正在接入，当前可使用电商 AI 作图、商品套图、A+ 详情与服饰穿搭。</p>
|
||
</section>
|
||
</div>
|
||
<footer className="product-clone-panel__footer">
|
||
<button type="button" className="product-clone-primary" disabled>
|
||
暂未开放
|
||
</button>
|
||
</footer>
|
||
</>
|
||
);
|
||
|
||
const setPreview = (
|
||
<main className="product-clone-preview product-clone-preview--set" aria-label="AI商品套图预览" onWheel={handlePreviewWheel}>
|
||
<div className="product-clone-preview__headline">
|
||
<h1>预览</h1>
|
||
<p>
|
||
上传商品图，AI 即刻生成 <span>符合多电商平台规范</span> 的高转化率商品套图。
|
||
</p>
|
||
</div>
|
||
|
||
{productSetPreviewReady ? (
|
||
<section className="product-set-demo-board">
|
||
<button
|
||
type="button"
|
||
className="product-set-main-card"
|
||
onClick={() => openProductSetPreview(setPreviewCards[0] ?? productSetPreviewCards[0])}
|
||
>
|
||
<img src={setImages[0]?.src ?? (setPreviewCards[0]?.src ?? productSetPreviewCards[0].src)} alt="商品原图" />
|
||
<span>原图素材</span>
|
||
</button>
|
||
<div className="product-set-flow-arrow" aria-hidden="true" />
|
||
<div className="product-set-card-grid result-reveal">
|
||
{setPreviewCards.map((card) => (
|
||
<button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
|
||
<img src={card.src} alt={card.label} />
|
||
<span>{card.label}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
) : (
|
||
<section className="product-set-empty-preview" aria-live="polite">
|
||
{productSetStatus === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
|
||
<strong>{productSetStatus === "generating" ? "正在生成" : "等待生成"}</strong>
|
||
{productSetStatus === "generating" ? <EcommerceProgressBar status="generating" label="商品套图" /> : null}
|
||
<span>{productSetStatus === "generating" ? "AI 正在整理主图、场景、细节与卖点图。" : "上传商品原图并填写信息后，AI 将为您生成专业的电商商品图。"}</span>
|
||
</section>
|
||
)}
|
||
|
||
{productSetStatus === "done" ? <p className="product-set-generated-note">已生成{selectedProductSetOutput.label}预览</p> : null}
|
||
|
||
<section className="product-set-floating-detail" aria-label="淇℃伅璇︽儏">
|
||
<div className="product-set-floating-detail__head">
|
||
<strong>淇℃伅璇︽儏</strong>
|
||
<span>{productSetRequirement.length}/500</span>
|
||
</div>
|
||
<textarea
|
||
value={productSetRequirement}
|
||
onChange={(event) => setProductSetRequirement(event.target.value)}
|
||
maxLength={500}
|
||
placeholder="寤鸿鍖呭惈浠ヤ笅淇℃伅锛氫骇鍝佸悕绉般€佹牳蹇冨崠鐐广€佹湡鏈涘満鏅€佸叿浣撳弬鏁?"
|
||
/>
|
||
<button type="button" className="product-set-floating-submit" disabled={!canGenerateSet} onClick={handleSetGenerate}>
|
||
{productSetStatus === "generating" ? <LoadingOutlined /> : null}
|
||
{setPrimaryLabel}
|
||
</button>
|
||
{productSetStatus === "generating" ? (
|
||
<button type="button" className="product-set-floating-submit product-set-floating-submit--cancel" onClick={handleCancelGenerate}>
|
||
{"\u53d6\u6d88\u751f\u6210"}
|
||
</button>
|
||
) : null}
|
||
</section>
|
||
|
||
<button type="button" className="product-clone-help" aria-label="甯姪">
|
||
<QuestionCircleOutlined />
|
||
</button>
|
||
</main>
|
||
);
|
||
|
||
const composerSettingLabel =
|
||
cloneOutput === "set"
|
||
? "套图 " + String(cloneSetTotal) + "张"
|
||
: cloneOutput === "detail"
|
||
? "详情 " + String(selectedCloneDetailModules.length) + "项"
|
||
: cloneOutput === "model"
|
||
? cloneModelPanelTab === "scene" ? "场景设置" : "模特设置"
|
||
: cloneOutput === "video"
|
||
? String(cloneVideoDuration) + "秒 " + (cloneVideoQuality === "standard" ? "720P" : "1080P")
|
||
: cloneOutput === "hot"
|
||
? cloneReplicateLevel === "style" ? "风格复刻" : "高度复刻"
|
||
: "换装素材";
|
||
|
||
const renderComposerMenu = () => {
|
||
const visibleCloneOutputOptions = cloneOutputOptions.filter((option) => option.key !== "video-outfit");
|
||
const composerLanguageOptions = Array.from(new Set(marketLanguageOptions.flatMap((option) => option.languages))).map((item) => ({
|
||
language: item,
|
||
countries: marketLanguageOptions.filter((option) => option.languages.includes(item)).map((option) => option.country),
|
||
}));
|
||
const composerPopoverStyle: CSSProperties = { left: composerPopoverLeft };
|
||
const menuToRender = composerMenu ?? visibleComposerMenu;
|
||
if (!menuToRender) return null;
|
||
const popoverClosingClass = !composerMenu && isComposerMenuClosing ? " is-closing" : "";
|
||
const composerPopoverKey = `${menuToRender}-${cloneOutput}-${popoverClosingClass ? "closing" : "open"}`;
|
||
if (menuToRender === "mode") {
|
||
return (
|
||
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--grid${popoverClosingClass}`} style={composerPopoverStyle}>
|
||
{visibleCloneOutputOptions.map((option) => (
|
||
<button key={option.key} type="button" className={cloneOutput === option.key ? "is-active" : ""} onClick={() => { handleCloneOutputChange(option.key); setComposerMenu(null); }}>
|
||
{option.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
if (menuToRender === "platform") {
|
||
return (
|
||
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--list ecom-command-popover--ratio ecom-command-popover--platform${popoverClosingClass}`} style={composerPopoverStyle}>
|
||
{platformOptions.map((option) => (
|
||
<button key={option} type="button" className={platform === option ? "is-active" : ""} onClick={() => { handleClonePlatformChange(option); setComposerMenu(null); }}>
|
||
{renderPlatformLogo(option)}
|
||
<span className="ecom-platform-name">{option}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
if (menuToRender === "language") {
|
||
return (
|
||
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--languages${popoverClosingClass}`} style={composerPopoverStyle}>
|
||
{composerLanguageOptions.map((option) => (
|
||
<button key={option.language} type="button" className={language === option.language ? "is-active" : ""} onClick={() => { setLanguage(option.language); setComposerMenu(null); }}>
|
||
<strong>{option.language}</strong>
|
||
<span>({option.countries.slice(0, 3).join(" / ")}{option.countries.length > 3 ? " +" + String(option.countries.length - 3) : ""})</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
if (menuToRender === "ratio") {
|
||
return (
|
||
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--list${popoverClosingClass}`} style={composerPopoverStyle}>
|
||
{cloneRatioOptions.map((option) => (
|
||
<button key={option} type="button" className={ratio === option ? "is-active" : ""} onClick={() => { setRatio(option); setComposerMenu(null); }}>
|
||
<span className="ecom-command-button-text">{formatRatioDisplayValue(option)}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
return (
|
||
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--settings ecom-command-popover--settings-${cloneOutput}${popoverClosingClass}`} style={composerPopoverStyle}>
|
||
{cloneOutput === "set" ? (
|
||
<>
|
||
<header><strong>套图分类设置</strong><span>总数 1-16 张</span></header>
|
||
{cloneSetCountOptions.map((item) => (
|
||
<div key={item.key} className="ecom-command-count-row">
|
||
<span><strong>{item.title}</strong><em>{item.desc}</em></span>
|
||
<div>
|
||
<button type="button" onClick={() => updateCloneSetCount(item.key, -1)} disabled={cloneSetCounts[item.key] <= 0 || cloneSetTotal <= minCloneSetTotal}>-</button>
|
||
<b>{cloneSetCounts[item.key]}</b>
|
||
<button type="button" onClick={() => updateCloneSetCount(item.key, 1)} disabled={cloneSetTotal >= maxCloneSetTotal}>+</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</>
|
||
) : cloneOutput === "detail" ? (
|
||
<>
|
||
<header><strong>详情模块设置</strong><span>多选</span></header>
|
||
<div className="ecom-command-module-grid ecom-command-module-grid--detail">
|
||
{cloneDetailModules.map((module) => (
|
||
<button key={module.id} type="button" className={selectedCloneDetailModules.includes(module.id) ? "is-active" : ""} onClick={() => toggleCloneDetailModule(module.id)}>
|
||
<strong>{module.title}</strong><span>{module.desc}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</>
|
||
) : cloneOutput === "model" ? (
|
||
<>
|
||
<header><strong>场景设置</strong><span>场景 / 形象</span></header>
|
||
<div className="ecom-command-module-grid ecom-command-module-grid--model">
|
||
{tryOnScenes.map((scene) => (
|
||
<button key={scene} type="button" className={selectedCloneModelScenes.includes(scene) ? "is-active" : ""} onClick={() => toggleCloneModelScene(scene)}>{scene}</button>
|
||
))}
|
||
</div>
|
||
<div className="ecom-command-model-profile">
|
||
<strong className="ecom-command-model-profile__title">模特形象</strong>
|
||
{cloneModelSelects.map((item) => (
|
||
<section key={item.key}>
|
||
<strong>{item.label}</strong>
|
||
<div>
|
||
{item.options.map((option) => (
|
||
<button key={option} type="button" className={item.value === option ? "is-active" : ""} onClick={() => item.onChange(option)}>{option}</button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
))}
|
||
</div>
|
||
</>
|
||
) : cloneOutput === "video" ? (
|
||
<>
|
||
<header><strong>短视频设置</strong><span>{cloneVideoDuration}秒</span></header>
|
||
<div className="ecom-command-module-grid ecom-command-module-grid--video">
|
||
{cloneVideoQualityOptions.map((option) => (
|
||
<button key={option.key} type="button" className={cloneVideoQuality === option.key ? "is-active" : ""} onClick={() => setCloneVideoQuality(option.key)}>
|
||
<strong>{option.label}</strong><span>{option.desc}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
<label className="ecom-command-range">
|
||
<span>视频时长 {cloneVideoDuration}秒</span>
|
||
<input type="range" min={cloneVideoDurationMin} max={cloneVideoDurationMax} step={5} value={cloneVideoDuration} onChange={(event) => setCloneVideoDuration(clampCloneVideoDuration(Number(event.target.value)))} />
|
||
</label>
|
||
</>
|
||
) : cloneOutput === "hot" ? (
|
||
<>
|
||
<header><strong>爆款复刻设置</strong><span>{cloneReferenceImages.length}/{maxCloneReferenceImages}</span></header>
|
||
<div className="ecom-command-hot-layout">
|
||
<button
|
||
type="button"
|
||
className={`ecom-command-hot-upload${isCloneReferenceDragging ? " is-dragging" : ""}${cloneReferenceImages.length ? " has-image" : ""}`}
|
||
onClick={() => cloneReferenceInputRef.current?.click()}
|
||
onDragOver={handleCloneReferenceDragOver}
|
||
onDragLeave={handleCloneReferenceDragLeave}
|
||
onDrop={handleCloneReferenceDrop}
|
||
>
|
||
{cloneReferenceImages[0]?.src ? (
|
||
<>
|
||
<span className="ecom-command-hot-thumb-grid">
|
||
{cloneReferenceImages.map((image, index) => (
|
||
<span key={image.id} className="ecom-command-hot-thumb">
|
||
<img src={image.src} alt={`参考图 ${index + 1}`} />
|
||
<span className="ecom-command-hot-zoom" aria-hidden="true">
|
||
<img src={image.src} alt="" />
|
||
</span>
|
||
</span>
|
||
))}
|
||
</span>
|
||
<span>已上传 {cloneReferenceImages.length} 张，点击继续上传</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<strong>+ 上传参考图片</strong>
|
||
<span>支持拖拽上传</span>
|
||
</>
|
||
)}
|
||
</button>
|
||
<div className="ecom-command-hot-levels">
|
||
{cloneReplicateLevelOptions.map((option) => (
|
||
<button key={option.key} type="button" className={cloneReplicateLevel === option.key ? "is-active" : ""} onClick={() => setCloneReplicateLevel(option.key)}>
|
||
<strong>{option.title}</strong><span>{option.desc}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
<header><strong>视频换装设置</strong><span>上传视频和服装参考</span></header>
|
||
<p className="ecom-command-popover-note">请在提示词中描述换装目标，并上传参考商品图。</p>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const toggleComposerMenu = (menuKey: ComposerMenuKey, event: ReactMouseEvent<HTMLButtonElement>) => {
|
||
const composerRect = event.currentTarget.closest(".clone-ai-input-wrapper.ecom-command-composer")?.getBoundingClientRect();
|
||
const buttonRect = event.currentTarget.getBoundingClientRect();
|
||
setComposerPopoverLeft(Math.max(0, buttonRect.left - (composerRect?.left ?? 0)));
|
||
setComposerMenu((menu) => (menu === menuKey ? null : menuKey));
|
||
};
|
||
|
||
const commandGenerateDisabled =
|
||
cloneOutput === "video"
|
||
? !isAuthenticated || (!productImages.length && !requirement.trim())
|
||
: !canGenerate;
|
||
|
||
const handleCommandGenerate = () => {
|
||
if (cloneOutput === "video") {
|
||
if (!isAuthenticated) {
|
||
requestLogin();
|
||
return;
|
||
}
|
||
setVideoPlanTrigger((value) => value + 1);
|
||
return;
|
||
}
|
||
handleGenerate();
|
||
};
|
||
|
||
const clonePreview = (
|
||
<main className="product-clone-preview clone-ai-preview" data-status={status} aria-label="电商 AI 作图预览" {...getPreviewSurfaceProps()}>
|
||
<header className="clone-ai-preview-header">
|
||
<strong>预览</strong>
|
||
<span>
|
||
上传商品图，AI 即刻生成 <b>符合多电商平台规范</b> 的高转化率商品素材。
|
||
</span>
|
||
<div className="clone-ai-preview-zoom">
|
||
<button type="button" onClick={() => setPreviewZoom((z) => Math.max(0.25, z - 0.1))} disabled={previewZoom <= 0.25} aria-label="缩小">-</button>
|
||
<span>{Math.round(previewZoom * 100)}%</span>
|
||
<button type="button" onClick={() => setPreviewZoom((z) => Math.min(2, z + 0.1))} disabled={previewZoom >= 2} aria-label="放大">+</button>
|
||
</div>
|
||
</header>
|
||
|
||
{cloneOutput === "video" ? (
|
||
<>
|
||
<section className="clone-ai-flow-pipeline" aria-label="生成流程">
|
||
{/* Source Node 鈥?鍘熷浘绱犳潗 */}
|
||
<div className="clone-ai-flow-source">
|
||
<div className="clone-ai-flow-node clone-ai-flow-node--source">
|
||
{productImages[0]?.src ? (
|
||
<img src={productImages[0].src} alt="商品原图" />
|
||
) : (
|
||
<div className="clone-ai-flow-node__placeholder">
|
||
<FileImageOutlined />
|
||
</div>
|
||
)}
|
||
</div>
|
||
<span className="clone-ai-flow-node__label">附件原图</span>
|
||
</div>
|
||
|
||
{/* Connector 鈥?鍒嗘敮杩炴帴绾?*/}
|
||
<div className="clone-ai-flow-connector" aria-hidden="true">
|
||
<div className="clone-ai-flow-connector__trunk" />
|
||
<div className="clone-ai-flow-connector__branches">
|
||
<div className="clone-ai-flow-connector__branch" />
|
||
<div className="clone-ai-flow-connector__branch" />
|
||
<div className="clone-ai-flow-connector__branch" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Branches 鈥?鐢熸垚璺緞鍒嗘敮 */}
|
||
{status === "done" ? (
|
||
<div className="clone-ai-flow-branches">
|
||
{results[0]?.src ? (
|
||
<div className="clone-ai-flow-branch">
|
||
<div className="clone-ai-flow-node clone-ai-flow-node--text">
|
||
<div className="clone-ai-flow-node__text-content">
|
||
<span className="clone-ai-flow-node__text-title">{selectedCloneOutput.label}</span>
|
||
<span className="clone-ai-flow-node__text-desc">{requirement || "AI 智能生成"}</span>
|
||
</div>
|
||
</div>
|
||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||
<button
|
||
type="button"
|
||
className="clone-ai-flow-node clone-ai-flow-node--result"
|
||
onClick={() => openProductSetPreview(results[0])}
|
||
>
|
||
<img src={results[0].src} alt={selectedCloneOutput.label} />
|
||
<span className="clone-ai-flow-node__tag">{selectedCloneOutput.label}</span>
|
||
</button>
|
||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||
<div className="clone-ai-flow-node clone-ai-flow-node--video">
|
||
<img src={results[0].src} alt="分镜视频" />
|
||
<span className="clone-ai-flow-node__tag clone-ai-flow-node__tag--accent">分镜视频</span>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
) : (
|
||
<div className="clone-ai-flow-branches clone-ai-flow-branches--empty">
|
||
{[1, 2, 3].map((branchIndex) => (
|
||
<div
|
||
key={branchIndex}
|
||
className={`clone-ai-flow-branch${status === "generating" ? " is-generating" : ""}${status === "failed" ? " is-failed" : ""}`}
|
||
>
|
||
<div className="clone-ai-flow-node clone-ai-flow-node--text">
|
||
<div className="clone-ai-flow-node__text-content">
|
||
<span className="clone-ai-flow-node__text-title">分镜文本{branchIndex}</span>
|
||
<span className="clone-ai-flow-node__text-desc">
|
||
{status === "generating" ? "AI 解析中..." : "等待生成"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||
<div className="clone-ai-flow-node clone-ai-flow-node--result">
|
||
<div className="clone-ai-flow-node__placeholder">
|
||
{status === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
|
||
</div>
|
||
<span className="clone-ai-flow-node__tag">分镜图{branchIndex}</span>
|
||
</div>
|
||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||
<div className="clone-ai-flow-node clone-ai-flow-node--video">
|
||
<div className="clone-ai-flow-node__placeholder">
|
||
{status === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
|
||
</div>
|
||
<span className="clone-ai-flow-node__tag">分镜视频{branchIndex}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
{/* Status Overlay 鈥?鐢熸垚鐘舵€佽鐩栧眰 */}
|
||
{status === "generating" || status === "failed" ? (
|
||
<section className="clone-ai-flow-status" aria-live="polite">
|
||
{status === "generating" ? (
|
||
<>
|
||
<LoadingOutlined style={{ fontSize: 28 }} />
|
||
<strong>正在生成</strong>
|
||
<EcommerceProgressBar status="generating" label={`${selectedCloneOutput.label}生成`} />
|
||
<span>AI 正在为 {platform} / {market} 整理{selectedCloneOutput.label}。</span>
|
||
</>
|
||
) : status === "failed" ? (
|
||
<>
|
||
<FrownOutlined style={{ fontSize: 28 }} />
|
||
<strong>生成失败</strong>
|
||
<span>请检查网络后点击下方重试</span>
|
||
{lastFailedActionRef.current ? (
|
||
<button type="button" className="clone-ai-retry-btn" onClick={lastFailedActionRef.current}>
|
||
<ReloadOutlined /> 閲嶈瘯
|
||
</button>
|
||
) : null}
|
||
</>
|
||
) : null}
|
||
</section>
|
||
) : null}
|
||
</>
|
||
) : (
|
||
<>
|
||
{status === "done" ? (
|
||
<div className="clone-ai-preview-zoom-wrap" style={previewTransformStyle}>
|
||
<section className="clone-ai-preview-showcase" aria-label="生成结果">
|
||
<button
|
||
type="button"
|
||
className="clone-ai-main-result"
|
||
style={{ aspectRatio: parseRatioToAspectCss(ratio) }}
|
||
onClick={() => {
|
||
const sourceImage = productImages[0];
|
||
if (sourceImage?.src) openProductSetPreview({ src: sourceImage.src, label: "原图素材" });
|
||
}}
|
||
>
|
||
<img src={productImages[0]?.src ?? (cloneOutput === "set" ? clonePreviewCards[0].src : results[0]?.src ?? "")} alt="上传商品原图" />
|
||
<span>原图素材</span>
|
||
</button>
|
||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||
<div className="clone-ai-result-grid result-reveal">
|
||
{cloneOutput === "set" ? (
|
||
clonePreviewCards.map((card) => (
|
||
<button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card)}>
|
||
<img src={card.src} alt={card.label} />
|
||
<span>{card.label}</span>
|
||
</button>
|
||
))
|
||
) : results[0]?.src ? (
|
||
<button type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(results[0])}>
|
||
<img src={results[0].src} alt={selectedCloneOutput.label} />
|
||
<span>{selectedCloneOutput.label}</span>
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
) : status === "idle" || status === "ready" ? null : (
|
||
<section className="clone-ai-empty-state" aria-live="polite">
|
||
{status === "generating" ? <LoadingOutlined /> : status === "failed" ? <FrownOutlined /> : <FileImageOutlined />}
|
||
<strong>{status === "generating" ? "正在生成" : status === "failed" ? "生成失败" : "等待生成"}</strong>
|
||
{status === "generating" ? <EcommerceProgressBar status="generating" label={`${selectedCloneOutput.label}生成`} /> : null}
|
||
<span>
|
||
{status === "generating"
|
||
? "AI 正在为 " + platform + " / " + market + " 整理" + selectedCloneOutput.label + "。"
|
||
: status === "failed"
|
||
? "请检查网络后点击下方重试"
|
||
: "上传商品原图并填写信息后，AI 将在这里展示生成结果。"}
|
||
</span>
|
||
{status === "failed" && lastFailedActionRef.current ? (
|
||
<button type="button" className="clone-ai-retry-btn" onClick={lastFailedActionRef.current}>
|
||
<ReloadOutlined /> 重试
|
||
</button>
|
||
) : null}
|
||
</section>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
<section
|
||
ref={commandComposerWrapRef}
|
||
className={`clone-ai-bottom-input ecom-command-composer-wrap${status === "done" ? " has-generated" : " is-before-generate"}${isCommandComposerCompact && status === "done" ? " is-compact" : ""}`}
|
||
aria-label="生成指令"
|
||
onClick={() => {
|
||
if (isCommandComposerCompact) setIsCommandComposerCompact(false);
|
||
}}
|
||
>
|
||
<h1 className={`ecom-command-title${status === "done" ? " is-after-generate" : ""}`}>
|
||
{typewriterText}
|
||
<span className="typewriter-cursor" aria-hidden="true">|</span>
|
||
</h1>
|
||
<input
|
||
ref={cloneReferenceInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
className="ecom-command-hidden-file"
|
||
onChange={handleCloneReferenceUpload}
|
||
/>
|
||
<input
|
||
ref={productInputRef}
|
||
type="file"
|
||
accept="image/*,video/*"
|
||
multiple
|
||
className="ecom-command-hidden-file"
|
||
onChange={handleComposerAssetUpload}
|
||
/>
|
||
<input
|
||
ref={smartCutoutInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
className="ecom-command-hidden-file"
|
||
onChange={handleSmartCutoutUpload}
|
||
/>
|
||
<div className="clone-ai-input-wrapper ecom-command-composer">
|
||
<button
|
||
type="button"
|
||
className={`ecom-command-reference${productImages.length || videoOutfitVideoFile ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
|
||
onClick={() => productInputRef.current?.click()}
|
||
onDragEnter={(event) => {
|
||
event.preventDefault();
|
||
setIsProductUploadDragging(true);
|
||
}}
|
||
onDragOver={(event) => event.preventDefault()}
|
||
onDragLeave={() => setIsProductUploadDragging(false)}
|
||
onDrop={(event) => {
|
||
event.preventDefault();
|
||
setIsProductUploadDragging(false);
|
||
const files = Array.from(event.dataTransfer.files);
|
||
if (files.length) addComposerAssets(files);
|
||
}}
|
||
>
|
||
<span aria-hidden="true"><CloudUploadOutlined /></span>
|
||
<strong>上传商品图</strong>
|
||
</button>
|
||
{productImages.length || videoOutfitVideoFile ? (
|
||
<div className="ecom-command-asset-popover" aria-label="宸蹭笂浼犵礌鏉?">
|
||
{productImages.map((image) => (
|
||
<figure key={image.id} className="ecom-command-asset-thumb">
|
||
<img src={image.src} alt={image.name || "上传图片"} />
|
||
<span className="ecom-command-asset-zoom" aria-hidden="true">
|
||
<img src={image.src} alt="" />
|
||
</span>
|
||
<button type="button" onClick={() => removeProductImage(image.id)} aria-label="删除图片">
|
||
<DeleteOutlined />
|
||
</button>
|
||
</figure>
|
||
))}
|
||
{videoOutfitVideoFile && videoOutfitPreviewUrl ? (
|
||
<figure className="ecom-command-asset-thumb ecom-command-asset-thumb--video">
|
||
<video src={videoOutfitPreviewUrl} muted playsInline />
|
||
<span className="ecom-command-asset-zoom" aria-hidden="true">
|
||
<video src={videoOutfitPreviewUrl} muted playsInline />
|
||
</span>
|
||
<button type="button" onClick={() => setVideoOutfitVideoFile(null)} aria-label="删除视频">
|
||
<DeleteOutlined />
|
||
</button>
|
||
</figure>
|
||
) : null}
|
||
<button type="button" className="ecom-command-asset-add" onClick={() => productInputRef.current?.click()} aria-label="继续上传">+</button>
|
||
</div>
|
||
) : null}
|
||
<textarea
|
||
ref={requirementTextareaRef}
|
||
value={requirement}
|
||
onChange={(event) => {
|
||
const nextValue = event.target.value.slice(0, 500);
|
||
setRequirement(nextValue);
|
||
syncRequirementMentionQuery(nextValue, event.target.selectionStart);
|
||
}}
|
||
onClick={(event) => syncRequirementMentionQuery(requirement, event.currentTarget.selectionStart)}
|
||
onKeyUp={(event) => syncRequirementMentionQuery(requirement, event.currentTarget.selectionStart)}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Escape") setRequirementImageMentionQuery(null);
|
||
}}
|
||
maxLength={500}
|
||
placeholder={cloneRequirementPlaceholder}
|
||
/>
|
||
{requirementImageMentionQuery !== null && ecommerceMentionImages.length ? (
|
||
<ImageMentionMenu images={ecommerceMentionImages} query={requirementImageMentionQuery} onSelect={insertRequirementImageMention} />
|
||
) : null}
|
||
<div className="ecom-command-toolbar" aria-label="生成设置">
|
||
<div className="ecom-command-option-row">
|
||
<button
|
||
type="button"
|
||
className={`ecom-command-reference ecom-command-reference--inline${productImages.length || videoOutfitVideoFile ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
|
||
onClick={() => productInputRef.current?.click()}
|
||
onDragEnter={(event) => {
|
||
event.preventDefault();
|
||
setIsProductUploadDragging(true);
|
||
}}
|
||
onDragOver={(event) => event.preventDefault()}
|
||
onDragLeave={() => setIsProductUploadDragging(false)}
|
||
onDrop={(event) => {
|
||
event.preventDefault();
|
||
setIsProductUploadDragging(false);
|
||
const files = Array.from(event.dataTransfer.files);
|
||
if (files.length) addComposerAssets(files);
|
||
}}
|
||
>
|
||
<span aria-hidden="true"><CloudUploadOutlined /></span>
|
||
<strong>上传素材</strong>
|
||
</button>
|
||
<button type="button" className={composerMenu === "mode" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("mode", event)}>
|
||
<span className="ecom-command-option-icon" aria-hidden="true"><AppstoreOutlined /></span>
|
||
{selectedCloneOutput.label}<span>模式</span>
|
||
</button>
|
||
<button type="button" className={composerMenu === "platform" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("platform", event)}>
|
||
<span className="ecom-command-option-icon" aria-hidden="true"><GlobalOutlined /></span>
|
||
<span>平台</span>{platform}
|
||
</button>
|
||
<button type="button" className={composerMenu === "language" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("language", event)}>
|
||
<span className="ecom-command-option-icon" aria-hidden="true"><FileImageOutlined /></span>
|
||
<span>语种</span>{language}
|
||
</button>
|
||
<button type="button" className={composerMenu === "ratio" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("ratio", event)}>
|
||
<span className="ecom-command-option-icon" aria-hidden="true"><TableOutlined /></span>
|
||
<span>比例</span>{formatRatioDisplayValue(ratio)}
|
||
</button>
|
||
<button type="button" className={composerMenu === "settings" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("settings", event)}>
|
||
<span className="ecom-command-option-icon" aria-hidden="true"><SettingOutlined /></span>
|
||
<span>设置</span>{composerSettingLabel}
|
||
</button>
|
||
</div>
|
||
<div className="ecom-command-submit-row">
|
||
<button type="button" className="clone-ai-send-button ecom-command-send" disabled={commandGenerateDisabled} onClick={handleCommandGenerate} aria-label={clonePrimaryLabel}>
|
||
{status === "generating" ? <LoadingOutlined /> : "➤"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{renderComposerMenu()}
|
||
</div>
|
||
{status !== "done" ? (
|
||
<section className="ecom-command-quick-board" aria-label="快捷功能">
|
||
{[
|
||
{ label: "智能抠图", icon: <FileImageOutlined />, onClick: openSmartCutoutUpload },
|
||
{ label: "商品套图", icon: <AppstoreOutlined />, onClick: openQuickProductSetPage },
|
||
{ label: "图片修改", icon: <SettingOutlined />, onClick: openImageWorkbenchPage },
|
||
{ label: "增/去水印", icon: <FileImageOutlined />, onClick: openWatermarkRemovalPage },
|
||
{ label: "图片批处理", icon: <FolderOpenOutlined /> },
|
||
{ label: "一键翻译", icon: <FileImageOutlined /> },
|
||
{ label: "A+/详情页", icon: <FileImageOutlined />, onClick: openQuickDetailPage },
|
||
{ label: "变清晰", icon: <FileImageOutlined /> },
|
||
{ label: "AI消除", icon: <SettingOutlined /> },
|
||
{ label: "证件照", icon: <SkinOutlined /> },
|
||
{ label: "爆款视频", icon: <CloudUploadOutlined />, onClick: openHotVideoPage },
|
||
{ label: "拼图", icon: <TableOutlined /> },
|
||
].map((item) => (
|
||
<button
|
||
key={item.label}
|
||
type="button"
|
||
onClick={(event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
item.onClick?.();
|
||
}}
|
||
>
|
||
<span aria-hidden="true">{item.icon}</span>
|
||
<strong>{item.label}</strong>
|
||
</button>
|
||
))}
|
||
</section>
|
||
) : null}
|
||
<span className="clone-ai-char-count">{requirement.length}/500</span>
|
||
</section>
|
||
</main>
|
||
);
|
||
|
||
const smartCutoutPreview = (
|
||
<main className={`ecom-smart-cutout-page${smartCutoutImage ? " is-editor" : " is-upload"}${isSmartCutoutTransitioning ? " is-transitioning" : ""}`} aria-label="智能抠图">
|
||
<input
|
||
ref={smartCutoutInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
className="ecom-command-hidden-file"
|
||
onChange={handleSmartCutoutUpload}
|
||
/>
|
||
<nav className="ecom-smart-cutout-nav" aria-label="智能抠图导航">
|
||
<button type="button" onClick={closeSmartCutoutTool}>
|
||
首页
|
||
</button>
|
||
<button type="button" onClick={goSmartCutoutPrevious}>
|
||
上一页
|
||
</button>
|
||
</nav>
|
||
{isSmartCutoutTransitioning ? (
|
||
<div className="ecom-smart-cutout-transition" role="status" aria-live="polite">
|
||
<span aria-hidden="true" />
|
||
<strong>{smartCutoutTransitionMessage.title}</strong>
|
||
<em>{smartCutoutTransitionMessage.subtitle}</em>
|
||
</div>
|
||
) : null}
|
||
{!smartCutoutImage ? (
|
||
<section className="ecom-smart-cutout-upload">
|
||
<div className="ecom-smart-cutout-head">
|
||
<strong>智能抠图</strong>
|
||
<span>3s 一键抠图，快速去除背景</span>
|
||
</div>
|
||
<div className="ecom-smart-cutout-upload__body">
|
||
<div className="ecom-smart-cutout-demo" aria-hidden="true">
|
||
<div className="ecom-smart-cutout-demo__tile ecom-smart-cutout-demo__tile--flower" />
|
||
<div className="ecom-smart-cutout-demo__tile ecom-smart-cutout-demo__tile--product" />
|
||
<div className="ecom-smart-cutout-demo__tile ecom-smart-cutout-demo__tile--poster" />
|
||
<div className="ecom-smart-cutout-demo__tile ecom-smart-cutout-demo__tile--object" />
|
||
</div>
|
||
<div
|
||
className={`ecom-smart-cutout-upload-box${isSmartCutoutDragging ? " is-dragging" : ""}`}
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={() => smartCutoutInputRef.current?.click()}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Enter" || event.key === " ") {
|
||
event.preventDefault();
|
||
smartCutoutInputRef.current?.click();
|
||
}
|
||
}}
|
||
onDragEnter={(event) => {
|
||
event.preventDefault();
|
||
setIsSmartCutoutDragging(true);
|
||
}}
|
||
onDragOver={(event) => event.preventDefault()}
|
||
onDragLeave={() => setIsSmartCutoutDragging(false)}
|
||
onDrop={handleSmartCutoutDrop}
|
||
>
|
||
<button type="button" className="ecom-smart-cutout-upload__primary">
|
||
<CloudUploadOutlined />
|
||
上传图片
|
||
</button>
|
||
<button type="button" className="ecom-smart-cutout-upload__secondary">
|
||
<FolderOpenOutlined />
|
||
批量上传
|
||
</button>
|
||
<span>上传文件夹 ></span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
) : (
|
||
<section className="ecom-smart-editor">
|
||
<div className="ecom-smart-editor__workspace">
|
||
<div className="ecom-smart-editor__canvas">
|
||
<div className={`ecom-smart-editor__checker is-size-${previewSmartCutoutSizeKey}`} style={smartCutoutFrameStyle}>
|
||
<div className="ecom-smart-editor__background-layer" aria-hidden="true" />
|
||
<img src={previewSmartCutoutImageSrc ?? smartCutoutImage.src} alt={smartCutoutImage.name} />
|
||
</div>
|
||
<div className="ecom-smart-editor__canvas-actions">
|
||
<button
|
||
type="button"
|
||
onPointerDown={showSmartCutoutOriginalCompare}
|
||
onPointerUp={hideSmartCutoutOriginalCompare}
|
||
onPointerCancel={hideSmartCutoutOriginalCompare}
|
||
onBlur={hideSmartCutoutOriginalCompare}
|
||
onKeyDown={(event) => {
|
||
if (event.key === " " || event.key === "Enter") setIsSmartCutoutComparing(true);
|
||
}}
|
||
onKeyUp={hideSmartCutoutOriginalCompare}
|
||
>
|
||
对比
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="ecom-smart-editor__tools-shell">
|
||
<strong className="ecom-smart-editor__tools-title">功能</strong>
|
||
<button type="button" className="ecom-smart-editor__tools-nav" onClick={() => scrollSmartCutoutTools(-1)} aria-label="查看上一组尺寸">
|
||
‹
|
||
</button>
|
||
<div className="ecom-smart-editor__tools" ref={smartCutoutToolsRef}>
|
||
{smartCutoutSizeOptions.map((item) => (
|
||
<div className="ecom-smart-editor__tool-item" key={item.key}>
|
||
<button
|
||
type="button"
|
||
className={smartCutoutSizeKey === item.key ? "is-active" : ""}
|
||
onClick={() => setSmartCutoutSizeKey(item.key)}
|
||
aria-label={`${item.label}${"sizeLabel" in item ? ` ${item.sizeLabel}` : ""}`}
|
||
aria-pressed={smartCutoutSizeKey === item.key}
|
||
>
|
||
<span className={`ecom-smart-editor__tool-icon ecom-smart-editor__tool-icon--${item.icon}`} aria-hidden="true" />
|
||
</button>
|
||
<span className="ecom-smart-editor__tool-text">
|
||
<span>{item.label}</span>
|
||
{"sizeLabel" in item ? <span>{item.sizeLabel}</span> : null}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<button type="button" className="ecom-smart-editor__tools-nav" onClick={() => scrollSmartCutoutTools(1)} aria-label="查看更多尺寸">
|
||
›
|
||
</button>
|
||
</div>
|
||
{smartCutoutBatchImages.length > 1 ? (
|
||
<section className="ecom-smart-editor__batch" aria-label="批量图片">
|
||
<header>
|
||
<strong>批量图片</strong>
|
||
<span>{smartCutoutBatchImages.length} 张</span>
|
||
</header>
|
||
<div>
|
||
{smartCutoutBatchImages.map((image, index) => (
|
||
<button
|
||
key={`${image.src}-${index}`}
|
||
type="button"
|
||
className={smartCutoutImage.src === image.src ? "is-active" : ""}
|
||
onClick={() => setSmartCutoutImage(image)}
|
||
>
|
||
<img src={image.src} alt={image.name || `上传图片 ${index + 1}`} />
|
||
<span>{index + 1}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
) : null}
|
||
<section className="ecom-smart-editor__gallery">
|
||
<header><strong>纯色</strong><button type="button">查看全部 ></button></header>
|
||
<div className="ecom-smart-editor__swatches">
|
||
{["#ffffff", "#eeeae3", "#f2e3cf", "#000000", "#a89682", "#c9c9c9"].map((color) => (
|
||
<button
|
||
key={color}
|
||
type="button"
|
||
className={smartCutoutBackgroundColor.toLowerCase() === color ? "is-active" : ""}
|
||
style={{ "--smart-cutout-swatch-bg": color } as CSSProperties}
|
||
onClick={() => {
|
||
setSmartCutoutBackgroundColor(color);
|
||
setSmartCutoutBackgroundAlpha(100);
|
||
}}
|
||
>
|
||
<span className="ecom-smart-editor__swatch-bg" aria-hidden="true" />
|
||
<img src={smartCutoutImage.src} alt="" />
|
||
</button>
|
||
))}
|
||
</div>
|
||
<header><strong>AI换背景</strong><button type="button">查看全部 ></button></header>
|
||
<div className="ecom-smart-editor__scenes">
|
||
<button type="button" className="ecom-smart-editor__generate"><SettingOutlined />立即生成</button>
|
||
{["客厅陈列", "桌面日光", "香氛产品", "绿植窗边", "居家空间"].map((item) => (
|
||
<button key={item} type="button"><span>{item}</span></button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<aside className="ecom-smart-editor__side">
|
||
<strong>背景颜色</strong>
|
||
<div className="ecom-smart-editor__color-row">
|
||
<div className="ecom-smart-editor__color-wrap" ref={smartCutoutPaletteRef} style={{ "--smart-cutout-bg": smartCutoutBackgroundValue } as CSSProperties}>
|
||
<button
|
||
type="button"
|
||
className={`ecom-smart-editor__custom-color${isSmartCutoutPaletteOpen ? " is-active" : ""}`}
|
||
style={{ background: smartCutoutBackgroundColor }}
|
||
onClick={() => setIsSmartCutoutPaletteOpen((open) => !open)}
|
||
aria-label="打开背景调色盘"
|
||
>
|
||
<span>色</span>
|
||
</button>
|
||
{isSmartCutoutPaletteOpen ? (
|
||
<div className="ecom-smart-color-picker" role="dialog" aria-label="背景调色盘">
|
||
<button
|
||
type="button"
|
||
className="ecom-smart-color-picker__plane"
|
||
style={{ background: `linear-gradient(to top, #000000, transparent), linear-gradient(to right, #ffffff, hsl(${smartCutoutColorHsv.h} 100% 50%))` }}
|
||
onPointerDown={handleSmartCutoutColorPlanePointer}
|
||
onPointerMove={handleSmartCutoutColorPlaneMove}
|
||
aria-label="选择颜色明度和饱和度"
|
||
>
|
||
<span style={{ left: `${smartCutoutColorHsv.s}%`, top: `${100 - smartCutoutColorHsv.v}%` }} />
|
||
</button>
|
||
<div className="ecom-smart-color-picker__slider ecom-smart-color-picker__slider--hue">
|
||
<span style={{ background: `hsl(${smartCutoutColorHsv.h} 100% 50%)` }} />
|
||
<input
|
||
type="range"
|
||
min={0}
|
||
max={360}
|
||
value={smartCutoutColorHsv.h}
|
||
onChange={(event) => applySmartCutoutHsv(Number(event.target.value), smartCutoutColorHsv.s, smartCutoutColorHsv.v)}
|
||
aria-label="色相"
|
||
/>
|
||
</div>
|
||
<div className="ecom-smart-color-picker__slider ecom-smart-color-picker__slider--alpha">
|
||
<span style={{ background: smartCutoutBackgroundValue }} />
|
||
<input
|
||
type="range"
|
||
min={0}
|
||
max={100}
|
||
value={smartCutoutBackgroundAlpha}
|
||
onChange={(event) => setSmartCutoutBackgroundAlpha(Number(event.target.value))}
|
||
aria-label="透明度"
|
||
/>
|
||
</div>
|
||
<div className="ecom-smart-color-picker__fields">
|
||
<span aria-hidden="true">↙</span>
|
||
<input
|
||
value={smartCutoutHexDraft}
|
||
onChange={(event) => handleSmartCutoutHexChange(event.target.value)}
|
||
onBlur={() => setSmartCutoutHexDraft(smartCutoutBackgroundColor)}
|
||
aria-label="HEX 色值"
|
||
/>
|
||
<input
|
||
value={Math.round(smartCutoutBackgroundAlpha)}
|
||
onChange={(event) => setSmartCutoutBackgroundAlpha(clampNumber(Number(event.target.value) || 0, 0, 100))}
|
||
aria-label="透明度百分比"
|
||
/>
|
||
<strong>%</strong>
|
||
</div>
|
||
<p>纯色预设</p>
|
||
<div className="ecom-smart-color-picker__presets">
|
||
{smartCutoutColorPresets.map((color) => (
|
||
<button
|
||
key={color}
|
||
type="button"
|
||
className={smartCutoutBackgroundColor.toLowerCase() === color ? "is-active" : ""}
|
||
style={{ background: color }}
|
||
onClick={() => {
|
||
setSmartCutoutBackgroundColor(color);
|
||
setSmartCutoutBackgroundAlpha(100);
|
||
}}
|
||
aria-label={`选择颜色 ${color}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
{["#ffffff", "#f8f9fa", "#000000", "#bdbdbd"].map((color) => (
|
||
<button
|
||
key={color}
|
||
type="button"
|
||
className={smartCutoutBackgroundColor.toLowerCase() === color ? "is-active" : ""}
|
||
style={{ background: color }}
|
||
onClick={() => {
|
||
setSmartCutoutBackgroundColor(color);
|
||
setSmartCutoutBackgroundAlpha(100);
|
||
}}
|
||
aria-label={`背景颜色 ${color}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
<div className="ecom-smart-editor__side-actions">
|
||
<button type="button" className="ecom-smart-editor__download" onClick={handleSmartCutoutDownload}>下载图片</button>
|
||
<button type="button" onClick={() => smartCutoutInputRef.current?.click()}>再次上传</button>
|
||
</div>
|
||
</aside>
|
||
</section>
|
||
)}
|
||
</main>
|
||
);
|
||
|
||
const imageWorkbenchPreview = (
|
||
<main className="ecom-image-workbench-page" aria-label="图片修改局部重绘">
|
||
<input
|
||
ref={imageWorkbenchInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
className="ecom-command-hidden-file"
|
||
onChange={handleImageWorkbenchUpload}
|
||
/>
|
||
<nav className="ecom-image-workbench-nav" aria-label="图片修改导航">
|
||
<button type="button" onClick={closeImageWorkbenchPage}>首页</button>
|
||
<button type="button" onClick={closeImageWorkbenchPage}>上一页</button>
|
||
</nav>
|
||
<aside className="ecom-image-workbench-side">
|
||
<div className="ecom-image-workbench-heading">
|
||
<span>图片修改</span>
|
||
<strong>图片修改</strong>
|
||
<p>涂抹需要修改的区域，输入提示词后让 AI 替换局部内容。</p>
|
||
</div>
|
||
|
||
<section className="ecom-image-workbench-panel">
|
||
<header>
|
||
<strong>素材</strong>
|
||
<span>{imageWorkbenchImage ? "已上传" : "待上传"}</span>
|
||
</header>
|
||
<div
|
||
className={`ecom-image-workbench-upload${isImageWorkbenchDragging ? " is-dragging" : ""}${imageWorkbenchImage ? " has-image" : ""}`}
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={() => imageWorkbenchInputRef.current?.click()}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Enter" || event.key === " ") {
|
||
event.preventDefault();
|
||
imageWorkbenchInputRef.current?.click();
|
||
}
|
||
}}
|
||
onDragEnter={(event) => {
|
||
event.preventDefault();
|
||
setIsImageWorkbenchDragging(true);
|
||
}}
|
||
onDragOver={(event) => event.preventDefault()}
|
||
onDragLeave={() => setIsImageWorkbenchDragging(false)}
|
||
onDrop={handleImageWorkbenchDrop}
|
||
>
|
||
{imageWorkbenchImage ? (
|
||
<>
|
||
<button
|
||
type="button"
|
||
className="ecom-image-workbench-remove"
|
||
onClick={(event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
removeImageWorkbenchImage();
|
||
}}
|
||
aria-label="删除素材"
|
||
>
|
||
×
|
||
</button>
|
||
<figure>
|
||
<img src={imageWorkbenchImage.src} alt={imageWorkbenchImage.name} />
|
||
</figure>
|
||
<div>
|
||
<strong>{imageWorkbenchImage.name}</strong>
|
||
<span>{imageWorkbenchImage.format || "PNG / JPG / WebP"}</span>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
<FileImageOutlined />
|
||
<strong>选择图片</strong>
|
||
<span>PNG / JPG / WebP</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="ecom-image-workbench-url-row">
|
||
<input placeholder="粘贴图片 URL" aria-label="粘贴图片 URL" />
|
||
<button type="button" onClick={() => toast.info("请先使用本地上传")}>添加</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="ecom-image-workbench-panel">
|
||
<header>
|
||
<strong>笔刷</strong>
|
||
<span>{imageWorkbenchMaskStrokes.length ? `已遮罩 ${imageWorkbenchMaskStrokes.length}` : "未遮罩"}</span>
|
||
</header>
|
||
<label className="ecom-image-workbench-slider">
|
||
<span>大小</span>
|
||
<input
|
||
type="range"
|
||
min={10}
|
||
max={120}
|
||
value={imageWorkbenchBrushSize}
|
||
onChange={(event) => setImageWorkbenchBrushSize(Number(event.target.value))}
|
||
/>
|
||
<em>{imageWorkbenchBrushSize}px</em>
|
||
</label>
|
||
<button
|
||
type="button"
|
||
className="ecom-image-workbench-clear"
|
||
onClick={() => {
|
||
setImageWorkbenchMaskStrokes([]);
|
||
setImageWorkbenchBrushCursor(null);
|
||
clearImageWorkbenchMaskCanvas();
|
||
setImageWorkbenchStatus("idle");
|
||
}}
|
||
disabled={!imageWorkbenchMaskStrokes.length}
|
||
>
|
||
清空遮罩
|
||
</button>
|
||
</section>
|
||
|
||
<section className="ecom-image-workbench-panel">
|
||
<strong>参数</strong>
|
||
<div className="ecom-image-workbench-ratios" aria-label="输出分辨率">
|
||
{["9:16", "16:9", "4:3", "3:4", "1:1"].map((item) => (
|
||
<button
|
||
key={item}
|
||
type="button"
|
||
className={imageWorkbenchRatio === item ? "is-active" : ""}
|
||
onClick={() => setImageWorkbenchRatio(item)}
|
||
>
|
||
{item}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="ecom-image-workbench-panel">
|
||
<strong>提示词</strong>
|
||
<textarea
|
||
value={imageWorkbenchPrompt}
|
||
onChange={(event) => setImageWorkbenchPrompt(event.target.value.slice(0, 300))}
|
||
placeholder="描述需要重绘的内容，例如：将背景替换为森林"
|
||
/>
|
||
</section>
|
||
|
||
<button
|
||
type="button"
|
||
className="ecom-image-workbench-primary"
|
||
onClick={handleImageWorkbenchGenerate}
|
||
disabled={!imageWorkbenchImage || imageWorkbenchStatus === "processing"}
|
||
>
|
||
{imageWorkbenchStatus === "processing" ? <LoadingOutlined /> : <SettingOutlined />}
|
||
{imageWorkbenchStatus === "processing" ? "重绘中" : "开始重绘"}
|
||
</button>
|
||
</aside>
|
||
|
||
<section className="ecom-image-workbench-stage">
|
||
<div
|
||
className={`ecom-image-workbench-canvas${isImageWorkbenchDragging ? " is-dragging" : ""}${imageWorkbenchImage ? " has-image" : ""}`}
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={() => {
|
||
if (!imageWorkbenchImage) imageWorkbenchInputRef.current?.click();
|
||
}}
|
||
onKeyDown={(event) => {
|
||
if (!imageWorkbenchImage && (event.key === "Enter" || event.key === " ")) {
|
||
event.preventDefault();
|
||
imageWorkbenchInputRef.current?.click();
|
||
}
|
||
}}
|
||
onDragEnter={(event) => {
|
||
event.preventDefault();
|
||
setIsImageWorkbenchDragging(true);
|
||
}}
|
||
onDragOver={(event) => event.preventDefault()}
|
||
onDragLeave={() => setIsImageWorkbenchDragging(false)}
|
||
onDrop={handleImageWorkbenchDrop}
|
||
>
|
||
{imageWorkbenchImage ? (
|
||
<div className="ecom-image-workbench-preview">
|
||
<div
|
||
className="ecom-image-workbench-image-frame"
|
||
onPointerDown={handleImageWorkbenchMaskPointerDown}
|
||
onPointerMove={handleImageWorkbenchMaskPointerMove}
|
||
onPointerUp={stopImageWorkbenchMaskPainting}
|
||
onPointerCancel={stopImageWorkbenchMaskPainting}
|
||
onPointerLeave={() => {
|
||
stopImageWorkbenchMaskPainting();
|
||
setImageWorkbenchBrushCursor(null);
|
||
}}
|
||
>
|
||
<img src={imageWorkbenchImage.src} alt="局部重绘素材" draggable={false} />
|
||
<canvas ref={imageWorkbenchMaskCanvasRef} className="ecom-image-workbench-mask-layer" aria-label="遮罩区域" />
|
||
<span
|
||
className="ecom-image-workbench-brush"
|
||
style={{
|
||
left: `${imageWorkbenchBrushCursor?.x ?? 50}%`,
|
||
top: `${imageWorkbenchBrushCursor?.y ?? 50}%`,
|
||
width: imageWorkbenchBrushSize,
|
||
height: imageWorkbenchBrushSize,
|
||
}}
|
||
/>
|
||
</div>
|
||
<em>{imageWorkbenchStatus === "done" ? "重绘预览" : imageWorkbenchStatus === "processing" ? "正在生成重绘结果" : "按住鼠标涂抹需要修改的区域"}</em>
|
||
</div>
|
||
) : (
|
||
<div className="ecom-image-workbench-empty">
|
||
<FileImageOutlined />
|
||
<strong>点击或拖拽上传图片</strong>
|
||
<span>支持 PNG / JPG / WebP，上传后使用画笔标记需要重绘的区域</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
|
||
const watermarkPreview = (
|
||
<main className="ecom-watermark-page" aria-label="去水印">
|
||
<input
|
||
ref={watermarkInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
className="ecom-command-hidden-file"
|
||
onChange={handleWatermarkUpload}
|
||
/>
|
||
<nav className="ecom-watermark-nav" aria-label="去水印导航">
|
||
<button type="button" onClick={closeWatermarkRemovalPage}>首页</button>
|
||
<button type="button" onClick={closeWatermarkRemovalPage}>上一页</button>
|
||
</nav>
|
||
<aside className="ecom-watermark-side">
|
||
<div className="ecom-watermark-heading">
|
||
<span>AI 电商工具</span>
|
||
<strong>增/去水印</strong>
|
||
<p>上传商品素材，快速清理画面中的水印、文字和瑕疵。</p>
|
||
</div>
|
||
<section className="ecom-watermark-panel">
|
||
<header>
|
||
<strong>上传素材</strong>
|
||
<span>{watermarkImage ? "已上传" : "待上传"}</span>
|
||
</header>
|
||
<div
|
||
className={`ecom-watermark-upload-card${isWatermarkDragging ? " is-dragging" : ""}${watermarkImage ? " has-image" : ""}`}
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={() => watermarkInputRef.current?.click()}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Enter" || event.key === " ") {
|
||
event.preventDefault();
|
||
watermarkInputRef.current?.click();
|
||
}
|
||
}}
|
||
onDragEnter={(event) => {
|
||
event.preventDefault();
|
||
setIsWatermarkDragging(true);
|
||
}}
|
||
onDragOver={(event) => event.preventDefault()}
|
||
onDragLeave={() => setIsWatermarkDragging(false)}
|
||
onDrop={handleWatermarkDrop}
|
||
>
|
||
{watermarkImage ? (
|
||
<>
|
||
<button
|
||
type="button"
|
||
className="ecom-watermark-remove"
|
||
onClick={(event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
removeWatermarkImage();
|
||
}}
|
||
aria-label="删除素材"
|
||
>
|
||
×
|
||
</button>
|
||
<figure>
|
||
<img src={watermarkImage.src} alt={watermarkImage.name} />
|
||
</figure>
|
||
<div>
|
||
<strong>{watermarkImage.name}</strong>
|
||
<span>{watermarkImage.format || "PNG / JPG / WebP"}</span>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
<CloudUploadOutlined />
|
||
<strong>上传含水印图片</strong>
|
||
<span>支持 PNG / JPG / WebP，拖拽或点击上传</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="ecom-watermark-url-row">
|
||
<input placeholder="粘贴图片 URL" aria-label="粘贴图片 URL" />
|
||
<button type="button" onClick={() => toast.info("请先使用本地上传")}>导入</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="ecom-watermark-panel">
|
||
<strong>处理说明</strong>
|
||
<p>优先保留商品主体、材质和边缘细节，适合电商主图、详情图和社媒素材清理。</p>
|
||
</section>
|
||
|
||
<button
|
||
type="button"
|
||
className="ecom-watermark-primary"
|
||
onClick={handleWatermarkGenerate}
|
||
disabled={!watermarkImage || watermarkStatus === "processing"}
|
||
>
|
||
{watermarkStatus === "processing" ? <LoadingOutlined /> : <FileImageOutlined />}
|
||
{watermarkStatus === "processing" ? "处理中" : "开始去水印"}
|
||
</button>
|
||
</aside>
|
||
|
||
<section className="ecom-watermark-workspace">
|
||
{!watermarkImage ? (
|
||
<div
|
||
className={`ecom-watermark-dropzone${isWatermarkDragging ? " is-dragging" : ""}`}
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={() => watermarkInputRef.current?.click()}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Enter" || event.key === " ") {
|
||
event.preventDefault();
|
||
watermarkInputRef.current?.click();
|
||
}
|
||
}}
|
||
onDragEnter={(event) => {
|
||
event.preventDefault();
|
||
setIsWatermarkDragging(true);
|
||
}}
|
||
onDragOver={(event) => event.preventDefault()}
|
||
onDragLeave={() => setIsWatermarkDragging(false)}
|
||
onDrop={handleWatermarkDrop}
|
||
>
|
||
<CloudUploadOutlined />
|
||
<strong>点击或拖拽上传图片</strong>
|
||
<span>支持 PNG / JPG / WebP，上传含水印图片后点击开始去水印</span>
|
||
</div>
|
||
) : (
|
||
<div className="ecom-watermark-grid">
|
||
<article className="ecom-watermark-preview-card">
|
||
<span>原图</span>
|
||
<img src={watermarkImage.src} alt="原图" />
|
||
</article>
|
||
|
||
<article className="ecom-watermark-preview-card">
|
||
<span>去水印结果</span>
|
||
{watermarkStatus === "processing" ? (
|
||
<div className="ecom-watermark-processing" role="status" aria-live="polite">
|
||
<LoadingOutlined />
|
||
<strong>正在去水印</strong>
|
||
<em>AI 正在清理图片中的水印和文字</em>
|
||
</div>
|
||
) : watermarkStatus === "done" ? (
|
||
<>
|
||
<img src={watermarkImage.src} alt="去水印结果" />
|
||
<button type="button" className="ecom-watermark-zoom" aria-label="查看大图">
|
||
<QuestionCircleOutlined />
|
||
</button>
|
||
</>
|
||
) : (
|
||
<div className="ecom-watermark-empty">
|
||
<FileImageOutlined />
|
||
<strong>等待处理</strong>
|
||
<em>点击开始去水印后显示结果</em>
|
||
</div>
|
||
)}
|
||
<div className="ecom-watermark-actions">
|
||
<button type="button" onClick={() => toast.success("已加入资产库")} disabled={watermarkStatus !== "done"}>
|
||
<FolderOpenOutlined />
|
||
加入资产库
|
||
</button>
|
||
<button type="button" onClick={handleWatermarkDownload} disabled={watermarkStatus !== "done"}>
|
||
<CloudUploadOutlined />
|
||
下载图片
|
||
</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
)}
|
||
</section>
|
||
</main>
|
||
);
|
||
|
||
const quickSetVisibleSelect = quickSetBasicSelects.find((item) => item.key === visibleQuickSetSelect) ?? null;
|
||
const openQuickUploadWithKeyboard = (
|
||
event: ReactKeyboardEvent<HTMLDivElement>,
|
||
inputRef: { current: HTMLInputElement | null },
|
||
) => {
|
||
if (event.key !== "Enter" && event.key !== " ") return;
|
||
event.preventDefault();
|
||
inputRef.current?.click();
|
||
};
|
||
const renderQuickUploadThumbs = (items: CloneImageItem[], onRemove: (imageId: string) => void) => (
|
||
<div className="ecom-quick-upload-thumbs" aria-label="已上传商品原图">
|
||
{items.map((item) => (
|
||
<figure key={item.id} className="ecom-command-asset-thumb ecom-quick-upload-thumb">
|
||
<img src={item.src} alt={item.name} />
|
||
<span className="ecom-command-asset-zoom" aria-hidden="true">
|
||
<img src={item.src} alt="" />
|
||
</span>
|
||
<button
|
||
type="button"
|
||
aria-label="删除图片"
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
onRemove(item.id);
|
||
}}
|
||
>
|
||
×
|
||
</button>
|
||
</figure>
|
||
))}
|
||
</div>
|
||
);
|
||
|
||
const hotVideoPreview = (
|
||
<main className="ecom-hot-video-page" aria-label="爆款视频">
|
||
<nav className="ecom-hot-video-nav">
|
||
<button type="button" className="ecom-hot-video-back" onClick={closeHotVideoPage}>
|
||
‹ 返回首页
|
||
</button>
|
||
<div className="ecom-hot-video-nav-title">
|
||
<h1>爆款视频</h1>
|
||
<span>AI智能策划 · 一键生成电商短视频</span>
|
||
</div>
|
||
<div className="ecom-hot-video-nav-meta">
|
||
<span>{platform} / {formatRatioDisplayValue(ratio)} / {cloneVideoDuration}秒 / {cloneVideoQuality === "standard" ? "720P" : "1080P"}</span>
|
||
</div>
|
||
</nav>
|
||
<div className="ecom-hot-video-body">
|
||
<aside className="ecom-hot-video-settings" aria-label="视频设置">
|
||
<section className="ecom-hot-video-section">
|
||
<strong>上传商品图</strong>
|
||
<div
|
||
role="button"
|
||
tabIndex={0}
|
||
className={`ecom-hot-video-upload${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
|
||
onClick={() => quickProductInputRef.current?.click()}
|
||
onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") quickProductInputRef.current?.click(); }}
|
||
onDragOver={(event) => { event.preventDefault(); setIsProductUploadDragging(true); }}
|
||
onDragLeave={(event) => { event.preventDefault(); setIsProductUploadDragging(false); }}
|
||
onDrop={handleProductDrop}
|
||
>
|
||
<CloudUploadOutlined />
|
||
<span>拖拽或点击上传商品图片</span>
|
||
<em>支持 JPG / PNG / WebP，建议清晰白底图</em>
|
||
{productImages.length > 0 ? (
|
||
<div className="ecom-hot-video-upload-thumbs">
|
||
{productImages.map((img) => (
|
||
<figure key={img.id}>
|
||
<img src={img.src} alt={img.name} />
|
||
<button
|
||
type="button"
|
||
aria-label="删除"
|
||
onClick={(event) => { event.stopPropagation(); removeProductImage(img.id); }}
|
||
>×</button>
|
||
</figure>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
<input
|
||
ref={quickProductInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
className="ecom-command-hidden-file"
|
||
onChange={handleProductUpload}
|
||
/>
|
||
</section>
|
||
|
||
<section className="ecom-hot-video-section">
|
||
<strong>商品描述</strong>
|
||
<textarea
|
||
className="ecom-hot-video-textarea"
|
||
placeholder="描述你的商品特点、卖点、使用场景等，帮助AI更好地策划视频内容..."
|
||
rows={4}
|
||
value={requirement}
|
||
onChange={(event) => setRequirement(event.target.value)}
|
||
maxLength={500}
|
||
/>
|
||
</section>
|
||
|
||
<section className="ecom-hot-video-section">
|
||
<strong>电商平台</strong>
|
||
<div className="ecom-hot-video-options">
|
||
{platformOptions.map((option) => (
|
||
<button
|
||
key={option}
|
||
type="button"
|
||
className={platform === option ? "is-active" : ""}
|
||
onClick={() => setPlatform(option)}
|
||
>
|
||
{renderPlatformLogo(option)}
|
||
<span>{option}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="ecom-hot-video-section">
|
||
<strong>视频比例</strong>
|
||
<div className="ecom-hot-video-options ecom-hot-video-options--ratio">
|
||
{cloneRatioOptions.map((option) => (
|
||
<button
|
||
key={option}
|
||
type="button"
|
||
className={ratio === option ? "is-active" : ""}
|
||
onClick={() => setRatio(option)}
|
||
>
|
||
{formatRatioDisplayValue(option)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="ecom-hot-video-section">
|
||
<strong>视频质量</strong>
|
||
<div className="ecom-hot-video-options">
|
||
{cloneVideoQualityOptions.map((option) => (
|
||
<button
|
||
key={option.key}
|
||
type="button"
|
||
className={cloneVideoQuality === option.key ? "is-active" : ""}
|
||
onClick={() => setCloneVideoQuality(option.key)}
|
||
>
|
||
<strong>{option.label}</strong>
|
||
<span>{option.desc}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="ecom-hot-video-section">
|
||
<strong>视频时长 · {cloneVideoDuration}秒</strong>
|
||
<input
|
||
type="range"
|
||
className="ecom-hot-video-range"
|
||
min={cloneVideoDurationMin}
|
||
max={cloneVideoDurationMax}
|
||
step={5}
|
||
value={cloneVideoDuration}
|
||
onChange={(event) => setCloneVideoDuration(clampCloneVideoDuration(Number(event.target.value)))}
|
||
style={cloneVideoDurationStyle}
|
||
/>
|
||
<div className="ecom-hot-video-range-labels">
|
||
<span>{cloneVideoDurationMin}秒</span>
|
||
<span>{cloneVideoDurationMax}秒</span>
|
||
</div>
|
||
</section>
|
||
|
||
<button
|
||
type="button"
|
||
className="ecom-hot-video-start"
|
||
disabled={!productImages.length && !requirement.trim()}
|
||
onClick={() => setVideoPlanTrigger((prev) => prev + 1)}
|
||
>
|
||
一键策划
|
||
</button>
|
||
</aside>
|
||
<section className="ecom-hot-video-workspace">
|
||
<EcommerceVideoWorkspace
|
||
isAuthenticated={isAuthenticated}
|
||
productImageDataUrls={ecommerceVideoImageDataUrls}
|
||
productImageFiles={ecommerceVideoImageFiles}
|
||
requirement={requirement}
|
||
platform={platform}
|
||
aspectRatio={ratio.includes("9：16") || ratio.includes("9:16") ? "9:16" : ratio.includes("16：9") || ratio.includes("16:9") ? "16:9" : ratio.includes("3：4") || ratio.includes("3:4") ? "3:4" : "9:16"}
|
||
durationSeconds={cloneVideoDuration}
|
||
resolution={cloneVideoQuality === "standard" ? "720P" : "1080P"}
|
||
onRequestLogin={() => (isAuthenticated ? undefined : requestLogin())}
|
||
onOpenHistory={() => setVideoHistoryVisible(true)}
|
||
triggerPlan={videoPlanTrigger}
|
||
/>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
);
|
||
|
||
const quickProductSetPreview = (
|
||
<main className={`ecom-quick-set-page${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="AI商品套图">
|
||
<div className="ecom-quick-set-body">
|
||
<aside className="ecom-quick-set-panel" aria-label="商品套图设置" onWheel={handleQuickPanelWheel}>
|
||
<header className="ecom-quick-set-panel-head">
|
||
<button type="button" className="ecom-quick-set-back" onClick={() => setActiveQuickTool(null)}>
|
||
首页
|
||
</button>
|
||
<button type="button" className="ecom-quick-set-back" onClick={() => setActiveQuickTool(null)}>
|
||
上一页
|
||
</button>
|
||
</header>
|
||
<section>
|
||
<strong><CloudUploadOutlined /> 上传商品原图</strong>
|
||
<div
|
||
role="button"
|
||
tabIndex={0}
|
||
className={`ecom-quick-set-upload${productImages.length ? " has-images" : ""}`}
|
||
onClick={() => quickProductInputRef.current?.click()}
|
||
onKeyDown={(event) => openQuickUploadWithKeyboard(event, quickProductInputRef)}
|
||
onDragOver={(event) => event.preventDefault()}
|
||
onDrop={handleQuickProductDrop}
|
||
>
|
||
<FileImageOutlined />
|
||
<span>拖拽或点击上传</span>
|
||
<em>同一产品，最多 7 张</em>
|
||
<b>+ 上传图片</b>
|
||
{productImages.length ? renderQuickUploadThumbs(productImages, removeProductImage) : null}
|
||
</div>
|
||
<input
|
||
ref={quickProductInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
className="ecom-command-hidden-file"
|
||
onChange={handleProductUpload}
|
||
/>
|
||
</section>
|
||
<section className="ecom-quick-set-basic-section">
|
||
<span className="ecom-quick-set-label">基础设置</span>
|
||
<div className="ecom-quick-set-select-anchor">
|
||
<div className="ecom-quick-set-selects">
|
||
{quickSetBasicSelects.map((item) => (
|
||
<button
|
||
key={item.key}
|
||
type="button"
|
||
className={openQuickSetSelect === item.key ? "is-active" : ""}
|
||
onClick={() => toggleQuickSetSelect(item.key)}
|
||
>
|
||
<span>{item.label}</span><strong>{item.value}</strong><em>⌄</em>
|
||
</button>
|
||
))}
|
||
</div>
|
||
{quickSetVisibleSelect ? (
|
||
<div
|
||
className={`ecom-quick-set-dropdown ecom-quick-set-dropdown--${quickSetVisibleSelect.key}${isQuickSetSelectClosing ? " is-closing" : ""}`}
|
||
role="listbox"
|
||
aria-label={quickSetVisibleSelect.label}
|
||
>
|
||
{quickSetVisibleSelect.options.map((option) => (
|
||
<button
|
||
key={option}
|
||
type="button"
|
||
className={quickSetVisibleSelect.value === option ? "is-active" : ""}
|
||
onClick={() => {
|
||
quickSetVisibleSelect.onChange(option);
|
||
closeQuickSetSelect();
|
||
}}
|
||
>
|
||
{option}
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</section>
|
||
<section>
|
||
<strong>可自由调整各类型图片数量，总数 1-16 张</strong>
|
||
<div className="ecom-quick-set-counts">
|
||
{cloneSetCountOptions.map((item) => (
|
||
<article key={item.key}>
|
||
<div>
|
||
<strong>{item.title}</strong>
|
||
<span>{item.desc}</span>
|
||
</div>
|
||
<p>
|
||
<button type="button" onClick={() => updateCloneSetCount(item.key, -1)} disabled={cloneSetCounts[item.key] <= 0 || cloneSetTotal <= minCloneSetTotal}>-</button>
|
||
<b>{cloneSetCounts[item.key]}</b>
|
||
<button type="button" onClick={() => updateCloneSetCount(item.key, 1)} disabled={cloneSetTotal >= maxCloneSetTotal}>+</button>
|
||
</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</section>
|
||
<button type="button" className="ecom-quick-set-primary" onClick={handleGenerate} disabled={!canGenerate}>
|
||
✦ 开始生成
|
||
</button>
|
||
</aside>
|
||
<section className="ecom-quick-set-stage">
|
||
<header className="ecom-quick-set-preview-head">
|
||
<h1>预览</h1>
|
||
<p>上传商品图，AI 即刻生成 <span>符合多电商平台规范</span> 的高转化率商品素材。</p>
|
||
<div>
|
||
<button type="button" onClick={() => setPreviewZoom((value) => Math.max(0.25, value - 0.1))}>-</button>
|
||
<strong>{Math.round(previewZoom * 100)}%</strong>
|
||
<button type="button" onClick={() => setPreviewZoom((value) => Math.min(2, value + 0.1))}>+</button>
|
||
</div>
|
||
</header>
|
||
<div className="ecom-quick-set-canvas" onWheel={handleQuickPreviewWheel}>
|
||
{productImages.length ? (
|
||
<section className="ecom-quick-set-result-card" style={{ transform: `scale(${previewZoom})` }}>
|
||
<figure>
|
||
<img src={productImages[0].src} alt="商品原图" />
|
||
<span>原图素材</span>
|
||
</figure>
|
||
<div>
|
||
{productSetPreviewCards.slice(1, 5).map((card) => (
|
||
<figure key={card.id}>
|
||
<img src={card.src} alt={card.label} />
|
||
<span>{card.id === "scene" ? "场景图" : card.id === "model" ? "模特图" : card.id === "detail" ? "细节图" : "卖点图"}</span>
|
||
</figure>
|
||
))}
|
||
</div>
|
||
</section>
|
||
) : (
|
||
<section className="ecom-quick-set-empty">
|
||
<CloudUploadOutlined />
|
||
<strong>等待生成</strong>
|
||
<span>上传商品原图并填写信息后，AI 将在这里展示生成结果。</span>
|
||
</section>
|
||
)}
|
||
</div>
|
||
<section className="ecom-quick-set-prompt">
|
||
<textarea
|
||
value={requirement}
|
||
onChange={(event) => setRequirement(event.target.value.slice(0, 500))}
|
||
placeholder="建议包含以下信息，产品名称，核心卖点，期望场景，具体参数"
|
||
/>
|
||
<button type="button" onClick={handleGenerate} disabled={!canGenerate}>↑</button>
|
||
<span>{requirement.length}/500</span>
|
||
</section>
|
||
</section>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="ecom-quick-set-collapse"
|
||
aria-label={isQuickPanelCollapsed ? "展开设置" : "收起设置"}
|
||
onClick={() => setIsQuickPanelCollapsed((value) => !value)}
|
||
>
|
||
{isQuickPanelCollapsed ? "›" : "‹"}
|
||
</button>
|
||
<button type="button" className="ecom-quick-set-help" aria-label="帮助" onClick={() => toast.info("上传商品原图后，可选择平台、语言、比例并开始生成。")}>?</button>
|
||
</main>
|
||
);
|
||
|
||
const quickDetailVisibleSelect = quickDetailBasicSelects.find((item) => item.key === visibleQuickSetSelect) ?? null;
|
||
|
||
const quickDetailPreview = (
|
||
<main className={`ecom-quick-set-page ecom-quick-detail-page${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="A+详情页生成">
|
||
<div className="ecom-quick-set-body">
|
||
<aside className="ecom-quick-set-panel" aria-label="A+详情页设置" onWheel={handleQuickPanelWheel}>
|
||
<header className="ecom-quick-set-panel-head">
|
||
<button type="button" className="ecom-quick-set-back" onClick={() => setActiveQuickTool(null)}>
|
||
首页
|
||
</button>
|
||
<button type="button" className="ecom-quick-set-back" onClick={() => setActiveQuickTool(null)}>
|
||
上一页
|
||
</button>
|
||
</header>
|
||
<section>
|
||
<strong><CloudUploadOutlined /> 上传商品原图</strong>
|
||
<div
|
||
role="button"
|
||
tabIndex={0}
|
||
className={`ecom-quick-set-upload${detailProductImages.length ? " has-images" : ""}`}
|
||
onClick={() => detailInputRef.current?.click()}
|
||
onKeyDown={(event) => openQuickUploadWithKeyboard(event, detailInputRef)}
|
||
onDragOver={(event) => event.preventDefault()}
|
||
onDrop={handleDetailDrop}
|
||
>
|
||
<FileImageOutlined />
|
||
<span>拖拽或点击上传</span>
|
||
<em>同一产品，最多 3 张</em>
|
||
<b>+ 上传图片</b>
|
||
{detailProductImages.length ? renderQuickUploadThumbs(detailProductImages, removeDetailImage) : null}
|
||
</div>
|
||
<input
|
||
ref={detailInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
className="ecom-command-hidden-file"
|
||
onChange={handleDetailUpload}
|
||
/>
|
||
</section>
|
||
<section className="ecom-quick-set-basic-section">
|
||
<span className="ecom-quick-set-label">生成内容</span>
|
||
<div className="ecom-quick-detail-types">
|
||
{detailTypeOptions.map((item) => (
|
||
<button
|
||
key={item}
|
||
type="button"
|
||
className={detailType === item ? "is-active" : ""}
|
||
onClick={() => setDetailType(item)}
|
||
>
|
||
{item}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<span className="ecom-quick-set-label">基础设置</span>
|
||
<div className="ecom-quick-set-select-anchor">
|
||
<div className="ecom-quick-set-selects">
|
||
{quickDetailBasicSelects.map((item) => (
|
||
<button
|
||
key={item.key}
|
||
type="button"
|
||
className={openQuickSetSelect === item.key ? "is-active" : ""}
|
||
onClick={() => toggleQuickSetSelect(item.key)}
|
||
>
|
||
<span>{item.label}</span><strong>{formatRatioDisplayValue(item.value)}</strong><em>⌄</em>
|
||
</button>
|
||
))}
|
||
</div>
|
||
{quickDetailVisibleSelect ? (
|
||
<div
|
||
className={`ecom-quick-set-dropdown ecom-quick-set-dropdown--${quickDetailVisibleSelect.key}${isQuickSetSelectClosing ? " is-closing" : ""}`}
|
||
role="listbox"
|
||
aria-label={quickDetailVisibleSelect.label}
|
||
>
|
||
{quickDetailVisibleSelect.options.map((option) => (
|
||
<button
|
||
key={option}
|
||
type="button"
|
||
className={quickDetailVisibleSelect.value === option ? "is-active" : ""}
|
||
onClick={() => {
|
||
quickDetailVisibleSelect.onChange(option);
|
||
closeQuickSetSelect();
|
||
}}
|
||
>
|
||
{formatRatioDisplayValue(option)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</section>
|
||
<section>
|
||
<strong>包含模块（多选）</strong>
|
||
<div className="ecom-quick-detail-modules">
|
||
{detailModules.map((module) => (
|
||
<button
|
||
key={module.id}
|
||
type="button"
|
||
className={selectedDetailModules.includes(module.id) ? "is-active" : ""}
|
||
onClick={() => toggleDetailModule(module.id)}
|
||
>
|
||
<strong>{module.title}</strong>
|
||
<span>{module.desc}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
<button type="button" className="ecom-quick-set-primary" onClick={handleDetailGenerate} disabled={!canGenerateDetail}>
|
||
{detailStatus === "generating" ? <LoadingOutlined /> : "✦"} 开始生成
|
||
</button>
|
||
</aside>
|
||
<section className="ecom-quick-set-stage">
|
||
<header className="ecom-quick-set-preview-head">
|
||
<h1>预览</h1>
|
||
<p>上传商品图，AI 即刻生成 <span>符合多电商平台规范</span> 的高转化率详情页素材。</p>
|
||
<div>
|
||
<button type="button" onClick={() => setPreviewZoom((value) => Math.max(0.25, value - 0.1))}>-</button>
|
||
<strong>{Math.round(previewZoom * 100)}%</strong>
|
||
<button type="button" onClick={() => setPreviewZoom((value) => Math.min(2, value + 0.1))}>+</button>
|
||
</div>
|
||
</header>
|
||
<div className="ecom-quick-set-canvas" onWheel={handleQuickPreviewWheel}>
|
||
{detailStatus === "done" && detailResultUrl ? (
|
||
<section className="ecom-quick-detail-result" style={{ transform: `scale(${previewZoom})` }}>
|
||
<img src={detailResultUrl} alt="A+详情页生成结果" />
|
||
</section>
|
||
) : detailProductImages.length ? (
|
||
<section className="ecom-quick-detail-preview-card" style={{ transform: `scale(${previewZoom})` }}>
|
||
{detailGridSamples.slice(0, 6).map((src, index) => (
|
||
<figure key={src}>
|
||
<img src={src} alt={`详情页模块预览 ${index + 1}`} />
|
||
<span>{detailModules[index]?.title ?? "详情模块"}</span>
|
||
</figure>
|
||
))}
|
||
</section>
|
||
) : (
|
||
<section className="ecom-quick-set-empty">
|
||
<FileImageOutlined />
|
||
<strong>等待生成</strong>
|
||
<span>上传商品原图并填写信息后，AI 将在这里展示生成结果。</span>
|
||
</section>
|
||
)}
|
||
</div>
|
||
<section className="ecom-quick-set-prompt">
|
||
<textarea
|
||
value={detailRequirement}
|
||
onChange={(event) => setDetailRequirement(event.target.value.slice(0, 500))}
|
||
placeholder="建议包含以下信息，产品名称，核心卖点，期望场景，具体参数"
|
||
/>
|
||
<div className="ecom-quick-detail-prompt-actions">
|
||
<button type="button" onClick={handleDetailAiWrite} aria-label="AI帮写">AI</button>
|
||
<button type="button" onClick={handleDetailGenerate} disabled={!canGenerateDetail}>↑</button>
|
||
</div>
|
||
<span>{detailRequirement.length}/500</span>
|
||
</section>
|
||
</section>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="ecom-quick-set-collapse"
|
||
aria-label={isQuickPanelCollapsed ? "展开设置" : "收起设置"}
|
||
onClick={() => setIsQuickPanelCollapsed((value) => !value)}
|
||
>
|
||
{isQuickPanelCollapsed ? "›" : "‹"}
|
||
</button>
|
||
<button type="button" className="ecom-quick-set-help" aria-label="帮助" onClick={() => toast.info("上传商品图后，选择平台和详情模块即可生成 A+ 详情页。")}>?</button>
|
||
</main>
|
||
);
|
||
|
||
const detailPreview = (
|
||
<main className="product-clone-preview product-clone-preview--detail" aria-label="A+详情预览" onWheel={handlePreviewWheel}>
|
||
<div className="product-clone-preview__headline">
|
||
<h1>A+/详情页</h1>
|
||
<p>
|
||
上传商品图，AI 即刻生成 <span>符合多电商平台规范</span> 的专业详情页。
|
||
</p>
|
||
</div>
|
||
|
||
<section className="product-detail-demo-board">
|
||
<div className="product-detail-source-stack">
|
||
{detailSourcePreviewImages.map((src, index) => (
|
||
<figure key={`${src}-${index}`}>
|
||
<img src={src} alt={`商品原图 ${index + 1}`} />
|
||
</figure>
|
||
))}
|
||
<span>上传产品图</span>
|
||
</div>
|
||
<div className="product-detail-flow-arrow" aria-hidden="true" />
|
||
<div className="product-detail-long-result">
|
||
<img src={detailResultUrl ?? detailAssets.longPage} alt="生成电商长图" />
|
||
<span>{detailStatus === "done" ? "已生成电商长图" : "生成电商长图"}</span>
|
||
</div>
|
||
<div className="product-detail-grid-result">
|
||
{detailGridSamples.map((src, index) => (
|
||
<img key={src} src={src} alt={`详情页模块 ${index + 1}`} />
|
||
))}
|
||
<span>符合多电商平台规范</span>
|
||
</div>
|
||
</section>
|
||
|
||
<button type="button" className="product-clone-help" aria-label="帮助">
|
||
<QuestionCircleOutlined />
|
||
</button>
|
||
</main>
|
||
);
|
||
|
||
const tryOnPreview = (
|
||
<main className="product-clone-preview product-clone-preview--try-on" aria-label="服饰穿搭预览" onWheel={handlePreviewWheel}>
|
||
<div className="product-clone-preview__headline">
|
||
<h1>AI服饰穿搭</h1>
|
||
<p>上传服装图，定制专属模特，即刻生成多种场景不同姿势套图。</p>
|
||
</div>
|
||
|
||
{tryOnResultImages.length ? (
|
||
<section className="product-try-on-generated" aria-label="生成结果">
|
||
{tryOnResultImages.map((src, index) => (
|
||
<figure key={src}>
|
||
<img src={src} alt={`生成结果 ${index + 1}`} />
|
||
<figcaption>{selectedScenes[index % Math.max(selectedScenes.length, 1)] || "智能场景"}</figcaption>
|
||
</figure>
|
||
))}
|
||
</section>
|
||
) : null}
|
||
|
||
<section className="product-try-on-demo-board">
|
||
{tryOnCards.map((card) => (
|
||
<article key={card.title} className={`product-try-on-card product-try-on-card--${card.tone}`}>
|
||
<h2>{card.title}</h2>
|
||
<div className="product-try-on-inputs">
|
||
{card.inputs.map((src, index) => (
|
||
<div className="product-try-on-input-group" key={`${card.title}-${src}`}>
|
||
<img src={src} alt={`${card.title} 输入 ${index + 1}`} />
|
||
{index < card.inputs.length - 1 ? <span className="product-try-on-plus">+</span> : null}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="product-try-on-arrow" aria-hidden="true" />
|
||
<div className="product-try-on-results">
|
||
{card.results.map((src, index) => (
|
||
<img key={src} src={src} alt={`${card.title} 示例 ${index + 1}`} />
|
||
))}
|
||
</div>
|
||
</article>
|
||
))}
|
||
</section>
|
||
|
||
<button type="button" className="product-clone-help" aria-label="帮助">
|
||
<QuestionCircleOutlined />
|
||
</button>
|
||
</main>
|
||
);
|
||
|
||
const placeholderPreview = (
|
||
<main className="product-clone-preview product-clone-preview--placeholder" aria-label={`${pageLabel}预览`}>
|
||
<div className="product-clone-preview__headline">
|
||
<h1>{pageLabel}</h1>
|
||
<p>选择左侧已接入的工具开始生成商品视觉内容。</p>
|
||
</div>
|
||
<button type="button" className="product-clone-help" aria-label="帮助">
|
||
<QuestionCircleOutlined />
|
||
</button>
|
||
</main>
|
||
);
|
||
|
||
const activePreview = isSetTool
|
||
? setPreview
|
||
: isDetail
|
||
? detailPreview
|
||
: isTryOn
|
||
? tryOnPreview
|
||
: isCloneTool
|
||
? isWatermarkTool
|
||
? watermarkPreview
|
||
: isImageEditTool
|
||
? imageWorkbenchPreview
|
||
: isSmartCutoutTool
|
||
? smartCutoutPreview
|
||
: isQuickSetTool
|
||
? quickProductSetPreview
|
||
: isQuickDetailTool
|
||
? quickDetailPreview
|
||
: isHotVideoTool
|
||
? hotVideoPreview
|
||
: cloneOutput === "video-outfit" && results.length > 0 && results[0].type === "video"
|
||
? (
|
||
<main className="product-clone-preview product-clone-preview--video-outfit" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||
<div style={{ maxWidth: "100%", maxHeight: "100%" }}>
|
||
<video src={results[0].src} controls style={{ maxWidth: "100%", maxHeight: "70vh", borderRadius: "12px" }} />
|
||
</div>
|
||
</main>
|
||
)
|
||
: clonePreview
|
||
: placeholderPreview;
|
||
|
||
return (
|
||
<section
|
||
className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickSetTool || isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}${isHotVideoTool ? " is-hot-video-page" : ""}`}
|
||
data-tool={activeTool}
|
||
aria-label={pageLabel}
|
||
>
|
||
<div className="product-clone-shell">
|
||
<aside className="product-clone-rail" aria-label="商品工具">
|
||
{sideTools.map((tool) => (
|
||
<button key={tool.key} type="button" className={activeTool === tool.key ? "is-active" : ""} onClick={() => setActiveTool(tool.key)}>
|
||
{tool.icon}
|
||
<span>{tool.label}</span>
|
||
</button>
|
||
))}
|
||
</aside>
|
||
|
||
<aside
|
||
id={isCloneTool ? "ecommerce-clone-settings-panel" : undefined}
|
||
className={`product-clone-panel tool-panel-enter`}
|
||
key={activeTool}
|
||
aria-label={`${pageLabel}鍙傛暟`}
|
||
aria-hidden={isCloneTool && isCloneSettingsCollapsed ? true : undefined}
|
||
>
|
||
{isSetTool ? setPanel : isDetail ? detailPanel : isTryOn ? tryOnPanel : isCloneTool ? clonePanel : placeholderPanel}
|
||
</aside>
|
||
|
||
{isCloneTool && !isSmartCutoutTool && !isQuickSetTool && !isQuickDetailTool && !isWatermarkTool && !isImageEditTool && !isHotVideoTool ? (
|
||
<button
|
||
type="button"
|
||
className="clone-ai-settings-toggle"
|
||
onClick={() => setIsCloneSettingsCollapsed((current) => !current)}
|
||
aria-label={isCloneSettingsCollapsed ? "灞曞紑璁剧疆闈㈡澘" : "鏀惰捣璁剧疆闈㈡澘"}
|
||
aria-controls="ecommerce-clone-settings-panel"
|
||
aria-expanded={!isCloneSettingsCollapsed}
|
||
title={isCloneSettingsCollapsed ? "灞曞紑璁剧疆闈㈡澘" : "鏀惰捣璁剧疆闈㈡澘"}
|
||
>
|
||
{isCloneSettingsCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||
</button>
|
||
) : null}
|
||
|
||
{false ? (
|
||
<main className="product-clone-preview product-clone-preview--video" style={{ padding: 0 }}>
|
||
<EcommerceVideoWorkspace
|
||
isAuthenticated={isAuthenticated}
|
||
productImageDataUrls={ecommerceVideoImageDataUrls}
|
||
productImageFiles={ecommerceVideoImageFiles}
|
||
requirement={requirement}
|
||
platform={platform}
|
||
aspectRatio={ratio.includes("9锛?6") || ratio.includes("9:16") ? "9:16" : ratio.includes("16锛?") || ratio.includes("16:9") ? "16:9" : ratio.includes("3锛?") || ratio.includes("3:4") ? "3:4" : "9:16"}
|
||
durationSeconds={cloneVideoDuration}
|
||
resolution={cloneVideoQuality === "standard" ? "720P" : "1080P"}
|
||
onRequestLogin={() => (isAuthenticated ? undefined : requestLogin())}
|
||
onOpenHistory={() => setVideoHistoryVisible(true)}
|
||
triggerPlan={videoPlanTrigger}
|
||
/>
|
||
</main>
|
||
) : activePreview}
|
||
</div>
|
||
|
||
<aside className="ecom-command-history" aria-label="生成历史">
|
||
<div className="ecom-command-history__tools">
|
||
<button
|
||
type="button"
|
||
className="ecom-command-history__toggle"
|
||
onClick={() => setIsCommandHistoryCollapsed((current) => !current)}
|
||
title={isCommandHistoryCollapsed ? "展开记录" : "收起记录"}
|
||
aria-label={isCommandHistoryCollapsed ? "展开记录" : "收起记录"}
|
||
aria-expanded={!isCommandHistoryCollapsed}
|
||
>
|
||
{isCommandHistoryCollapsed ? "‹" : "›"}
|
||
</button>
|
||
<button type="button" className="ecom-command-history__new" onClick={handleNewEcommerceConversation}>新对话</button>
|
||
<button
|
||
type="button"
|
||
className={`ecom-command-history__refresh${isHistoryRefreshing ? " is-refreshing" : ""}`}
|
||
aria-label={isHistoryRefreshing ? "刷新中" : "刷新历史"}
|
||
title={isHistoryRefreshing ? "刷新中" : "刷新历史"}
|
||
onPointerDown={refreshEcommerceHistory}
|
||
onClick={refreshEcommerceHistory}
|
||
disabled={isHistoryRefreshing}
|
||
>
|
||
↻
|
||
</button>
|
||
</div>
|
||
<div className="ecom-command-history__heading">
|
||
<strong>生成记录</strong>
|
||
<span>{ecommerceHistoryRecords.length} 条</span>
|
||
</div>
|
||
{historyRefreshMessage ? (
|
||
<p key={historyRefreshStamp} className="ecom-command-history__refresh-note" role="status">{historyRefreshMessage}</p>
|
||
) : null}
|
||
<nav className="ecom-command-history__list" aria-label="历史对话">
|
||
{ecommerceHistoryRecords.length ? (
|
||
ecommerceHistoryRecords.map((record) => {
|
||
const outputLabel = cloneOutputOptions.find((option) => option.key === record.output)?.label || "生成记录";
|
||
return (
|
||
<button
|
||
type="button"
|
||
key={`${record.id}-${historyRefreshTick}`}
|
||
className={activeHistoryRecordId === record.id ? "is-active" : ""}
|
||
onClick={() => openEcommerceHistoryRecord(record)}
|
||
>
|
||
<strong>{record.title}</strong>
|
||
<span>{outputLabel} · {formatHistoryTime(record.createdAt)}</span>
|
||
</button>
|
||
);
|
||
})
|
||
) : (
|
||
<p className="ecom-command-history__empty">暂无生成记录</p>
|
||
)}
|
||
</nav>
|
||
</aside>
|
||
|
||
{selectedProductSetPreview ? (
|
||
<div className="product-set-preview-backdrop" role="presentation" onClick={() => setSelectedProductSetPreview(null)}>
|
||
<section
|
||
className="product-set-preview-modal"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-label={selectedProductSetPreview.label}
|
||
onClick={(event) => event.stopPropagation()}
|
||
>
|
||
<button
|
||
type="button"
|
||
className="product-set-preview-close"
|
||
onClick={() => setSelectedProductSetPreview(null)}
|
||
aria-label="关闭预览"
|
||
>
|
||
<CloseOutlined />
|
||
</button>
|
||
<img src={selectedProductSetPreview.src} alt={selectedProductSetPreview.label} />
|
||
<strong>{selectedProductSetPreview.label}</strong>
|
||
</section>
|
||
</div>
|
||
) : null}
|
||
|
||
{showHostingModal ? (
|
||
<div className="product-set-hosting-backdrop" role="presentation">
|
||
<section className="product-set-hosting-modal" role="dialog" aria-modal="true" aria-label="批量托管上线">
|
||
<img src={productSetAssets.hosting} alt="托管模式" />
|
||
<div className="product-set-hosting-content">
|
||
<button type="button" className="product-set-hosting-close" onClick={() => setShowHostingModal(false)} aria-label="关闭">
|
||
×
|
||
</button>
|
||
<h2>
|
||
批量托管上线啦！
|
||
<span>批量6折</span>
|
||
</h2>
|
||
<strong>睡一觉，图就做好了！</strong>
|
||
<ul>
|
||
<li>
|
||
<b>批量生产</b>
|
||
<span>支持多任务并行生成，效率直线提升。</span>
|
||
</li>
|
||
<li>
|
||
<b>成本立省40%</b>
|
||
<span>调度夜间闲置算力，享受专属离线点数折扣。</span>
|
||
</li>
|
||
<li>
|
||
<b>AI智能提取</b>
|
||
<span>自动识别图片卖点，生成高转化销售卖点。</span>
|
||
</li>
|
||
</ul>
|
||
<button type="button" className="product-set-hosting-confirm" onClick={() => setShowHostingModal(false)}>
|
||
我知道了
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
) : null}
|
||
|
||
<EcommerceVideoHistoryPanel
|
||
visible={videoHistoryVisible}
|
||
onClose={() => setVideoHistoryVisible(false)}
|
||
/>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export default ProductClonePage;
|