feat: convert agent tools into step flow
This commit is contained in:
Your Name
parent
370a0055b7
commit
69751f1ea1
@ -2,7 +2,7 @@
|
||||
|
||||
import { useChat } from "@ai-sdk/react";
|
||||
import { DefaultChatTransport } from "ai";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
|
||||
import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
|
||||
import useSWR from "swr";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import {
|
||||
@ -12,6 +12,7 @@ import {
|
||||
Loader2,
|
||||
Sparkles,
|
||||
Upload,
|
||||
UserRound,
|
||||
X,
|
||||
Wand2,
|
||||
Settings2,
|
||||
@ -65,6 +66,14 @@ interface GeneratedImageGroup {
|
||||
text: string;
|
||||
}
|
||||
|
||||
type ToolStepKey =
|
||||
| "preset"
|
||||
| "brand-model"
|
||||
| "materials"
|
||||
| "slots"
|
||||
| "prompt"
|
||||
| "settings";
|
||||
|
||||
function buildPreviewImageUrl(url: string, width: number) {
|
||||
return buildImageProxyUrl(url, { width, quality: 86, format: "webp" });
|
||||
}
|
||||
@ -228,7 +237,9 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
() => selectableModels.find((model) => model.id === selectedModelId) || selectableModels[0],
|
||||
[selectableModels, selectedModelId]
|
||||
);
|
||||
const shouldShowFullWidthPresetPanel = Boolean(!selectedAgentPreset && presetPanel);
|
||||
const [activeToolStep, setActiveToolStep] = useState<ToolStepKey>("preset");
|
||||
const hasBrandModelStep = Boolean(brandModelPanel);
|
||||
const hasMaterialStep = Boolean(materialSelectionPanel);
|
||||
|
||||
const { messages, setMessages, sendMessage, status } = useChat<ChatMessage>({
|
||||
id: chatId,
|
||||
@ -376,6 +387,98 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
const latestGeneratedGroup = generatedGroups[generatedGroups.length - 1] || null;
|
||||
const displayedResultUrl = selectedResultUrl || latestGeneratedGroup?.imageUrls[0] || null;
|
||||
const isGenerating = status === "streaming" || status === "submitted";
|
||||
const attachmentCount = attachments.filter(Boolean).length;
|
||||
const hasBrandModelSelection = Boolean(
|
||||
selectedBrandModel?.imageUrl || referenceImages.some((image) => image.source === "brandModel")
|
||||
);
|
||||
const hasMaterialSelections = referenceImages.some(
|
||||
(image) => image.source === "primary" || image.source === "secondary"
|
||||
);
|
||||
const hasSatisfiedSlotRequirement = !hasAgentUploadSlots || attachmentCount >= requiredUploadCount;
|
||||
|
||||
const toolSteps = useMemo(
|
||||
() => [
|
||||
{
|
||||
key: "preset" as const,
|
||||
label: "生图模式",
|
||||
description: "先选择一个模式，再继续后续配置",
|
||||
icon: Wand2,
|
||||
disabled: false,
|
||||
completed: Boolean(selectedAgentPresetId),
|
||||
optional: false,
|
||||
},
|
||||
...(hasBrandModelStep
|
||||
? [
|
||||
{
|
||||
key: "brand-model" as const,
|
||||
label: "品牌模特",
|
||||
description: "根据品牌选择模特图",
|
||||
icon: UserRound,
|
||||
disabled: !selectedAgentPresetId,
|
||||
completed: hasBrandModelSelection,
|
||||
optional: true,
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(hasMaterialStep
|
||||
? [
|
||||
{
|
||||
key: "materials" as const,
|
||||
label: "SKU / SPU 选图",
|
||||
description: "搜索主图和搭配图",
|
||||
icon: Upload,
|
||||
disabled: !selectedAgentPresetId,
|
||||
completed: hasMaterialSelections,
|
||||
optional: true,
|
||||
},
|
||||
]
|
||||
: []),
|
||||
{
|
||||
key: "slots" as const,
|
||||
label: "图片槽位",
|
||||
description: "检查和补齐参考图槽位",
|
||||
icon: ImagePlus,
|
||||
disabled: !selectedAgentPresetId,
|
||||
completed: hasSatisfiedSlotRequirement,
|
||||
optional: false,
|
||||
},
|
||||
{
|
||||
key: "prompt" as const,
|
||||
label: "补充要求",
|
||||
description: "补充风格、构图和细节要求",
|
||||
icon: Sparkles,
|
||||
disabled: !selectedAgentPresetId,
|
||||
completed: Boolean(input.trim()),
|
||||
optional: true,
|
||||
},
|
||||
{
|
||||
key: "settings" as const,
|
||||
label: "生成参数",
|
||||
description: "选择模型并开始生成",
|
||||
icon: Settings2,
|
||||
disabled: !selectedAgentPresetId,
|
||||
completed: Boolean(selectedAgentPresetId),
|
||||
optional: false,
|
||||
},
|
||||
],
|
||||
[
|
||||
hasBrandModelSelection,
|
||||
hasBrandModelStep,
|
||||
hasMaterialSelections,
|
||||
hasMaterialStep,
|
||||
hasSatisfiedSlotRequirement,
|
||||
input,
|
||||
selectedAgentPresetId,
|
||||
]
|
||||
);
|
||||
const activeToolStepIndex = Math.max(
|
||||
toolSteps.findIndex((step) => step.key === activeToolStep),
|
||||
0
|
||||
);
|
||||
const activeToolStepMeta = toolSteps[activeToolStepIndex] || toolSteps[0];
|
||||
const previousToolStep = activeToolStepIndex > 0 ? toolSteps[activeToolStepIndex - 1] : null;
|
||||
const nextToolStep =
|
||||
activeToolStepIndex < toolSteps.length - 1 ? toolSteps[activeToolStepIndex + 1] : null;
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedResultUrl && latestGeneratedGroup?.imageUrls[0]) {
|
||||
@ -383,6 +486,26 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
}
|
||||
}, [latestGeneratedGroup?.imageUrls, selectedResultUrl]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedAgentPresetId) {
|
||||
setActiveToolStep("preset");
|
||||
return;
|
||||
}
|
||||
|
||||
setActiveToolStep((current) => {
|
||||
if (current !== "preset") return current;
|
||||
if (hasBrandModelStep) return "brand-model";
|
||||
if (hasMaterialStep) return "materials";
|
||||
return "slots";
|
||||
});
|
||||
}, [hasBrandModelStep, hasMaterialStep, selectedAgentPresetId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!toolSteps.some((step) => step.key === activeToolStep)) {
|
||||
setActiveToolStep("preset");
|
||||
}
|
||||
}, [activeToolStep, toolSteps]);
|
||||
|
||||
useEffect(() => {
|
||||
const latestUrls = latestGeneratedGroup?.imageUrls || [];
|
||||
if (latestUrls.length === 0) return;
|
||||
@ -537,6 +660,19 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleToolStepChange = useCallback(
|
||||
(nextKey: ToolStepKey) => {
|
||||
const nextStep = toolSteps.find((step) => step.key === nextKey);
|
||||
if (!nextStep) return;
|
||||
if (nextStep.disabled) {
|
||||
toast.error("请先选择生图模式");
|
||||
return;
|
||||
}
|
||||
setActiveToolStep(nextKey);
|
||||
},
|
||||
[toolSteps]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-dvh flex-col overflow-hidden bg-black">
|
||||
<AgentCanvasTopNavDark
|
||||
@ -551,58 +687,109 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 overflow-y-auto overscroll-contain pt-16">
|
||||
<div className="mx-auto flex w-full max-w-[1480px] flex-col gap-6 px-6 py-6 pb-24 lg:px-8 xl:px-10">
|
||||
{shouldShowFullWidthPresetPanel ? (
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="rounded-[28px] border border-white/12 bg-white/[0.04] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
|
||||
>
|
||||
<div className="mb-4 flex flex-col gap-2 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-white">选择生图模式</h3>
|
||||
<p className="mt-1 text-sm text-white/42">
|
||||
先选一个模式，再继续配置图片槽位、素材图和生成参数。
|
||||
</p>
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 18 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="rounded-[28px] border border-white/12 bg-white/[0.04] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
|
||||
>
|
||||
<div className="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs uppercase tracking-[0.2em] text-white/35">Step Flow</div>
|
||||
<h2 className="text-lg font-semibold text-white">第二步：生图模式执行流程</h2>
|
||||
<p className="text-sm text-white/45">
|
||||
将原来的侧边栏工具整合为顶部流程切换，按步骤逐项完成配置后再生成。
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-xs text-white/58">
|
||||
第一步：风格选择
|
||||
<span className="mx-1.5 text-white/22">→</span>
|
||||
<span className="font-medium text-emerald-300">第二步：生图模式</span>
|
||||
</div>
|
||||
<div className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-xs text-white/50">
|
||||
支持搜索、预览与新建模式
|
||||
<div className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-xs text-white/58">
|
||||
当前步骤 {activeToolStepIndex + 1} / {toolSteps.length}
|
||||
</div>
|
||||
</div>
|
||||
<div className="agent-dark-scrollbar max-h-[420px] overflow-y-auto pr-1">
|
||||
{presetPanel}
|
||||
</div>
|
||||
|
||||
<div className="agent-dark-scrollbar mt-5 overflow-x-auto pb-1">
|
||||
<div className="flex min-w-max items-center gap-3">
|
||||
{toolSteps.map((step, index) => {
|
||||
const Icon = step.icon;
|
||||
const isActive = activeToolStep === step.key;
|
||||
return (
|
||||
<Fragment key={step.key}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleToolStepChange(step.key)}
|
||||
disabled={step.disabled}
|
||||
className={cn(
|
||||
"flex min-w-[210px] items-center gap-3 rounded-[24px] border px-4 py-3 text-left transition-all",
|
||||
isActive
|
||||
? "border-emerald-400/55 bg-emerald-500/[0.10] shadow-[0_0_0_1px_rgba(16,185,129,0.2)]"
|
||||
: step.completed
|
||||
? "border-emerald-400/30 bg-white/[0.03] hover:border-emerald-400/45"
|
||||
: "border-white/10 bg-black/20 hover:border-white/20",
|
||||
step.disabled && "cursor-not-allowed opacity-45 hover:border-white/10"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border",
|
||||
isActive
|
||||
? "border-emerald-300/60 bg-emerald-400/20 text-emerald-200"
|
||||
: step.completed
|
||||
? "border-emerald-400/35 bg-emerald-500/10 text-emerald-300"
|
||||
: "border-white/12 bg-white/[0.03] text-white/55"
|
||||
)}
|
||||
>
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-white">
|
||||
<span>{step.label}</span>
|
||||
{step.optional ? (
|
||||
<span className="rounded-full bg-white/8 px-2 py-0.5 text-[10px] font-normal text-white/45">
|
||||
可选
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="mt-1 text-xs leading-5 text-white/42">{step.description}</div>
|
||||
</div>
|
||||
</button>
|
||||
{index < toolSteps.length - 1 ? (
|
||||
<div
|
||||
className={cn(
|
||||
"h-px w-10 shrink-0 rounded-full",
|
||||
step.completed ? "bg-emerald-400/45" : "bg-white/10"
|
||||
)}
|
||||
/>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.section>
|
||||
) : null}
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
<div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-[400px_minmax(0,1fr)]">
|
||||
{/* Left Panel - Controls */}
|
||||
<div className="space-y-4 lg:pr-2">
|
||||
{/* 嵌入的智能体选择面板 */}
|
||||
{!shouldShowFullWidthPresetPanel && !selectedAgentPreset && presetPanel && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="rounded-[28px] border border-white/12 bg-white/[0.04] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
|
||||
>
|
||||
<h3 className="mb-3 text-sm font-semibold text-white">选择生图模式</h3>
|
||||
<div className="agent-dark-scrollbar max-h-[480px] overflow-y-auto pr-1">
|
||||
{presetPanel}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 已选智能体信息 */}
|
||||
{selectedAgentPreset && (
|
||||
<motion.div
|
||||
className="rounded-[28px] border border-white/12 bg-white/[0.05] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
>
|
||||
<div className="mb-2 text-xs text-white/40">当前生图模式</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.06 }}
|
||||
className="rounded-[28px] border border-white/12 bg-white/[0.04] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
|
||||
>
|
||||
<div className="flex flex-col gap-4 border-b border-white/10 pb-4 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs uppercase tracking-[0.2em] text-white/35">Current Module</div>
|
||||
<h3 className="text-lg font-semibold text-white">{activeToolStepMeta.label}</h3>
|
||||
<p className="text-sm text-white/45">{activeToolStepMeta.description}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{selectedAgentPreset ? (
|
||||
<div className="flex items-center gap-3 rounded-[20px] border border-white/10 bg-black/20 px-3 py-2">
|
||||
{selectedAgentPreset.avatarUrl ? (
|
||||
<img
|
||||
src={selectedAgentPreset.avatarUrl}
|
||||
<img
|
||||
src={selectedAgentPreset.avatarUrl}
|
||||
alt={selectedAgentPreset.name}
|
||||
className="h-10 w-10 rounded-xl object-cover"
|
||||
/>
|
||||
@ -612,328 +799,352 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div className="font-medium text-white">{selectedAgentPreset.name}</div>
|
||||
<div className="text-xs text-white/40">{selectedAgentPreset.type === "image" ? "生图" : "视频"}</div>
|
||||
<div className="text-sm font-medium text-white">{selectedAgentPreset.name}</div>
|
||||
<div className="text-xs text-white/40">
|
||||
{selectedAgentPreset.type === "image" ? "生图模式" : "视频模式"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{presetPanel && onClearPreset && (
|
||||
<button
|
||||
onClick={onClearPreset}
|
||||
className="mt-3 text-xs text-emerald-300 hover:text-emerald-200"
|
||||
>
|
||||
更换生图模式 →
|
||||
</button>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
) : null}
|
||||
{selectedAgentPreset && onClearPreset ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onClearPreset();
|
||||
setActiveToolStep("preset");
|
||||
}}
|
||||
className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-2 text-xs text-emerald-300 transition-colors hover:border-emerald-300/35 hover:text-emerald-200"
|
||||
>
|
||||
更换生图模式
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{brandModelPanel ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.05 }}
|
||||
>
|
||||
{brandModelPanel}
|
||||
</motion.div>
|
||||
) : null}
|
||||
|
||||
{materialSelectionPanel ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.08 }}
|
||||
>
|
||||
{materialSelectionPanel}
|
||||
</motion.div>
|
||||
) : null}
|
||||
|
||||
{/* Image Slots */}
|
||||
<motion.section
|
||||
className="rounded-[28px] border border-white/12 bg-white/[0.04] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<ImagePlus className="h-4 w-4 text-emerald-300" />
|
||||
图片槽位
|
||||
</h3>
|
||||
{agentUploadSlots.length > 0 ? (
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{agentUploadSlots.map((slot, index) => (
|
||||
<motion.button
|
||||
key={slot.label}
|
||||
type="button"
|
||||
onClick={() => fileInputRefs.current[index]?.click()}
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
className={cn(
|
||||
"group relative aspect-square overflow-hidden rounded-[24px] transition-all",
|
||||
attachments[index]
|
||||
? "ring-2 ring-emerald-400/45"
|
||||
: "border-2 border-dashed border-white/15 bg-black/25 hover:border-emerald-400/35"
|
||||
)}
|
||||
>
|
||||
<input
|
||||
ref={(el) => {
|
||||
fileInputRefs.current[index] = el;
|
||||
}}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(e) => handleSlotFileChange(index, e)}
|
||||
/>
|
||||
{attachments[index] ? (
|
||||
<>
|
||||
<img
|
||||
src={buildPreviewImageUrl(attachments[index]!.url, 256)}
|
||||
alt={attachments[index]!.name || slot.label}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 bg-black/60 px-2 py-1 text-[10px] text-white">
|
||||
{slot.label}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white opacity-0 transition-opacity group-hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
updateAttachmentAtSlot(index, null);
|
||||
}}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-1 text-white/30">
|
||||
{slotUploading === index ? (
|
||||
<Loader2 className="h-5 w-5 animate-spin text-emerald-400" />
|
||||
) : (
|
||||
<>
|
||||
<Upload className="h-5 w-5" />
|
||||
<span className="text-[10px]">{slot.label}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</motion.button>
|
||||
))}
|
||||
<div className="mt-5 min-h-[260px]">
|
||||
<div className={cn(activeToolStep === "preset" ? "block" : "hidden")}>
|
||||
{presetPanel ? (
|
||||
<div className="agent-dark-scrollbar max-h-[520px] overflow-y-auto pr-1">
|
||||
{presetPanel}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex min-h-[132px] flex-col items-center justify-center rounded-[24px] border border-dashed border-white/12 bg-black/20 px-4 text-center text-sm text-white/45">
|
||||
<ImagePlus className="mb-2 h-5 w-5 opacity-60" />
|
||||
先选择一个生图模式，系统会自动展示产品图1、产品图2和模特图槽位。
|
||||
<div className="flex min-h-[220px] items-center justify-center rounded-[24px] border border-dashed border-white/12 bg-black/20 text-sm text-white/45">
|
||||
暂无可用的生图模式配置。
|
||||
</div>
|
||||
)}
|
||||
</motion.section>
|
||||
</div>
|
||||
|
||||
{/* Prompt Input */}
|
||||
<motion.section
|
||||
className="rounded-[28px] border border-white/12 bg-white/[0.04] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<Sparkles className="h-4 w-4 text-emerald-300" />
|
||||
补充要求
|
||||
</h3>
|
||||
<Textarea
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="描述你想要的风格、氛围、构图..."
|
||||
className="min-h-[100px] resize-none rounded-[24px] border-white/12 bg-black text-sm text-white placeholder:text-white/20 focus:border-emerald-400/30"
|
||||
/>
|
||||
</motion.section>
|
||||
|
||||
{/* Settings */}
|
||||
<motion.section
|
||||
className="rounded-[28px] border border-white/12 bg-white/[0.04] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<Settings2 className="h-4 w-4 text-emerald-300" />
|
||||
生成参数
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<Select value={selectedModelId} onValueChange={setSelectedModelId}>
|
||||
<SelectTrigger className="h-10 rounded-[24px] border-white/12 bg-black text-white">
|
||||
<SelectValue placeholder="选择模型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="border-white/10 bg-zinc-900">
|
||||
{selectableModels.map((model) => (
|
||||
<SelectItem key={model.id} value={model.id} className="text-white">
|
||||
{model.displayName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<ImageParamsBar
|
||||
modelName={currentModel?.displayName}
|
||||
initialParams={imageParams}
|
||||
onParamsChange={setImageParams}
|
||||
inline
|
||||
inlineTheme="dark"
|
||||
showInlineDivider={false}
|
||||
providerType={currentModel?.providerType}
|
||||
imageGenConfig={currentModel?.imageGenConfig || undefined}
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={handleSend}
|
||||
disabled={isGenerating || !selectedAgentPresetId}
|
||||
className={cn(
|
||||
"h-11 w-full gap-2 rounded-[24px]",
|
||||
"bg-gradient-to-r from-emerald-500 to-teal-500",
|
||||
"text-white font-medium",
|
||||
"hover:from-emerald-400 hover:to-teal-400",
|
||||
"shadow-[0_0_24px_rgba(16,185,129,0.24)]",
|
||||
"disabled:opacity-30"
|
||||
)}
|
||||
>
|
||||
{isGenerating ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
生成中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ArrowUp className="h-4 w-4" />
|
||||
开始生成
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{hasBrandModelStep ? (
|
||||
<div className={cn(activeToolStep === "brand-model" ? "block" : "hidden")}>
|
||||
{brandModelPanel}
|
||||
</div>
|
||||
</motion.section>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Right Panel - Results */}
|
||||
<div className="flex flex-col lg:sticky lg:top-6">
|
||||
<motion.div
|
||||
className="relative flex min-h-[500px] flex-1 flex-col overflow-hidden rounded-[28px] border border-white/12 bg-white/[0.04] shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
|
||||
initial={{ opacity: 0, scale: 0.98 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<div className="flex items-center justify-between border-b border-white/12 px-5 py-4">
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-white">结果预览</div>
|
||||
<div className="text-xs text-white/40">
|
||||
生成完成后会同步回到画布，并在这里保留预览与切换。
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-xs text-white/58">
|
||||
第一步：风格选择
|
||||
<span className="mx-1.5 text-white/22">→</span>
|
||||
<span className="font-medium text-emerald-300">第二步：生图模式</span>
|
||||
</div>
|
||||
{allGeneratedImages.length > 0 ? (
|
||||
<div className="rounded-full bg-white/8 px-3 py-1 text-xs text-white/60">
|
||||
共 {allGeneratedImages.length} 张
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{hasMaterialStep ? (
|
||||
<div className={cn(activeToolStep === "materials" ? "block" : "hidden")}>
|
||||
{materialSelectionPanel}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{isGenerating ? (
|
||||
<motion.div
|
||||
key="loading"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="flex flex-1 items-center justify-center"
|
||||
>
|
||||
<ImageGenerationLoading
|
||||
imageCount={imageParams.imageCount || 1}
|
||||
maxImages={6}
|
||||
providerType={currentModel?.providerType}
|
||||
modelName={currentModel?.displayName}
|
||||
phase="processing"
|
||||
/>
|
||||
</motion.div>
|
||||
) : displayedResultUrl ? (
|
||||
<motion.div
|
||||
key="result"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
className="relative flex flex-1 items-center justify-center p-6"
|
||||
>
|
||||
<img
|
||||
src={buildPreviewImageUrl(displayedResultUrl, 1400)}
|
||||
alt="生成结果"
|
||||
className="max-h-full max-w-full cursor-zoom-in rounded-[24px] object-contain"
|
||||
onClick={() => setFullscreenPreview(displayedResultUrl)}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
void handleDownloadOriginalImage(displayedResultUrl);
|
||||
}}
|
||||
className="absolute bottom-6 right-6 flex h-10 items-center gap-2 rounded-full bg-white/10 px-4 text-sm text-white backdrop-blur-md transition-colors hover:bg-white/20"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
下载
|
||||
</button>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="empty"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="flex flex-1 flex-col items-center justify-center text-center"
|
||||
>
|
||||
<div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-white/5">
|
||||
<Wand2 className="h-8 w-8 text-white/20" />
|
||||
</div>
|
||||
<p className="text-base font-medium text-white/60">
|
||||
{selectedAgentPresetId ? "准备开始生成" : "请选择生图模式"}
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-white/30">
|
||||
{selectedAgentPresetId
|
||||
? "配置图片槽位后点击开始生成"
|
||||
: "从上方选择一个生图模式后继续"}
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{allGeneratedImages.length > 0 ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="border-t border-white/12 bg-black/20 px-4 py-3"
|
||||
>
|
||||
<div className="flex gap-2 overflow-x-auto pb-1">
|
||||
{allGeneratedImages.map((url) => (
|
||||
<button
|
||||
key={url}
|
||||
onClick={() => setSelectedResultUrl(url)}
|
||||
className={cn(
|
||||
"relative flex-shrink-0 overflow-hidden rounded-[24px] transition-all",
|
||||
displayedResultUrl === url
|
||||
? "ring-2 ring-emerald-400"
|
||||
: "ring-1 ring-white/12 hover:ring-white/30"
|
||||
<div className={cn(activeToolStep === "slots" ? "block" : "hidden")}>
|
||||
<div className="rounded-[28px] border border-white/12 bg-white/[0.02] p-4">
|
||||
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<ImagePlus className="h-4 w-4 text-emerald-300" />
|
||||
图片槽位
|
||||
</h3>
|
||||
{agentUploadSlots.length > 0 ? (
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-3">
|
||||
{agentUploadSlots.map((slot, index) => (
|
||||
<motion.button
|
||||
key={slot.label}
|
||||
type="button"
|
||||
onClick={() => fileInputRefs.current[index]?.click()}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className={cn(
|
||||
"group relative aspect-square overflow-hidden rounded-[24px] transition-all",
|
||||
attachments[index]
|
||||
? "ring-2 ring-emerald-400/45"
|
||||
: "border-2 border-dashed border-white/15 bg-black/25 hover:border-emerald-400/35"
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={buildPreviewImageUrl(url, 240)}
|
||||
alt="缩略图"
|
||||
className="h-20 w-20 object-cover"
|
||||
<input
|
||||
ref={(el) => {
|
||||
fileInputRefs.current[index] = el;
|
||||
}}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(e) => handleSlotFileChange(index, e)}
|
||||
/>
|
||||
</button>
|
||||
{attachments[index] ? (
|
||||
<>
|
||||
<img
|
||||
src={buildPreviewImageUrl(attachments[index]!.url, 256)}
|
||||
alt={attachments[index]!.name || slot.label}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 bg-black/60 px-2 py-1 text-[10px] text-white">
|
||||
{slot.label}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white opacity-0 transition-opacity group-hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
updateAttachmentAtSlot(index, null);
|
||||
}}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-1 text-white/30">
|
||||
{slotUploading === index ? (
|
||||
<Loader2 className="h-5 w-5 animate-spin text-emerald-400" />
|
||||
) : (
|
||||
<>
|
||||
<Upload className="h-5 w-5" />
|
||||
<span className="text-[10px]">{slot.label}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
) : null}
|
||||
</motion.div>
|
||||
) : (
|
||||
<div className="flex min-h-[132px] flex-col items-center justify-center rounded-[24px] border border-dashed border-white/12 bg-black/20 px-4 text-center text-sm text-white/45">
|
||||
<ImagePlus className="mb-2 h-5 w-5 opacity-60" />
|
||||
先选择一个生图模式，系统会自动展示产品图1、产品图2和模特图槽位。
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cn(activeToolStep === "prompt" ? "block" : "hidden")}>
|
||||
<div className="rounded-[28px] border border-white/12 bg-white/[0.02] p-4">
|
||||
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<Sparkles className="h-4 w-4 text-emerald-300" />
|
||||
补充要求
|
||||
</h3>
|
||||
<Textarea
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="描述你想要的风格、氛围、构图..."
|
||||
className="min-h-[160px] resize-none rounded-[24px] border-white/12 bg-black text-sm text-white placeholder:text-white/20 focus:border-emerald-400/30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cn(activeToolStep === "settings" ? "block" : "hidden")}>
|
||||
<div className="rounded-[28px] border border-white/12 bg-white/[0.02] p-4">
|
||||
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<Settings2 className="h-4 w-4 text-emerald-300" />
|
||||
生成参数
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<Select value={selectedModelId} onValueChange={setSelectedModelId}>
|
||||
<SelectTrigger className="h-10 rounded-[24px] border-white/12 bg-black text-white">
|
||||
<SelectValue placeholder="选择模型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="border-white/10 bg-zinc-900">
|
||||
{selectableModels.map((model) => (
|
||||
<SelectItem key={model.id} value={model.id} className="text-white">
|
||||
{model.displayName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<ImageParamsBar
|
||||
modelName={currentModel?.displayName}
|
||||
initialParams={imageParams}
|
||||
onParamsChange={setImageParams}
|
||||
inline
|
||||
inlineTheme="dark"
|
||||
showInlineDivider={false}
|
||||
providerType={currentModel?.providerType}
|
||||
imageGenConfig={currentModel?.imageGenConfig || undefined}
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={handleSend}
|
||||
disabled={isGenerating || !selectedAgentPresetId}
|
||||
className={cn(
|
||||
"h-11 w-full gap-2 rounded-[24px]",
|
||||
"bg-gradient-to-r from-emerald-500 to-teal-500",
|
||||
"text-white font-medium",
|
||||
"hover:from-emerald-400 hover:to-teal-400",
|
||||
"shadow-[0_0_24px_rgba(16,185,129,0.24)]",
|
||||
"disabled:opacity-30"
|
||||
)}
|
||||
>
|
||||
{isGenerating ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
生成中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ArrowUp className="h-4 w-4" />
|
||||
开始生成
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-white/10 pt-4">
|
||||
<div className="text-xs text-white/40">
|
||||
完成当前模块后，可点击下一步继续，也可以直接点击顶部流程线跳转。
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => previousToolStep && handleToolStepChange(previousToolStep.key)}
|
||||
disabled={!previousToolStep}
|
||||
className={cn(
|
||||
"rounded-full border px-4 py-2 text-sm transition-colors",
|
||||
previousToolStep
|
||||
? "border-white/12 bg-white/[0.03] text-white hover:border-white/20 hover:bg-white/[0.06]"
|
||||
: "cursor-not-allowed border-white/8 bg-white/[0.02] text-white/25"
|
||||
)}
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => nextToolStep && handleToolStepChange(nextToolStep.key)}
|
||||
disabled={!nextToolStep}
|
||||
className={cn(
|
||||
"rounded-full border px-4 py-2 text-sm transition-colors",
|
||||
nextToolStep
|
||||
? "border-emerald-400/35 bg-emerald-500/[0.08] text-emerald-200 hover:border-emerald-300/50 hover:bg-emerald-500/[0.12]"
|
||||
: "cursor-not-allowed border-white/8 bg-white/[0.02] text-white/25"
|
||||
)}
|
||||
>
|
||||
下一步
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
<motion.section
|
||||
className="relative flex min-h-[620px] flex-col overflow-hidden rounded-[28px] border border-white/12 bg-white/[0.04] shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
|
||||
initial={{ opacity: 0, scale: 0.98 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.12 }}
|
||||
>
|
||||
<div className="flex items-center justify-between border-b border-white/12 px-5 py-4">
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-white">结果预览</div>
|
||||
<div className="text-xs text-white/40">
|
||||
生成完成后会同步回到画布，并在这里保留预览与切换。
|
||||
</div>
|
||||
</div>
|
||||
{allGeneratedImages.length > 0 ? (
|
||||
<div className="rounded-full bg-white/8 px-3 py-1 text-xs text-white/60">
|
||||
共 {allGeneratedImages.length} 张
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{isGenerating ? (
|
||||
<motion.div
|
||||
key="loading"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="flex flex-1 items-center justify-center"
|
||||
>
|
||||
<ImageGenerationLoading
|
||||
imageCount={imageParams.imageCount || 1}
|
||||
maxImages={6}
|
||||
providerType={currentModel?.providerType}
|
||||
modelName={currentModel?.displayName}
|
||||
phase="processing"
|
||||
/>
|
||||
</motion.div>
|
||||
) : displayedResultUrl ? (
|
||||
<motion.div
|
||||
key="result"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
className="relative flex flex-1 items-center justify-center p-6"
|
||||
>
|
||||
<img
|
||||
src={buildPreviewImageUrl(displayedResultUrl, 1400)}
|
||||
alt="生成结果"
|
||||
className="max-h-full max-w-full cursor-zoom-in rounded-[24px] object-contain"
|
||||
onClick={() => setFullscreenPreview(displayedResultUrl)}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
void handleDownloadOriginalImage(displayedResultUrl);
|
||||
}}
|
||||
className="absolute bottom-6 right-6 flex h-10 items-center gap-2 rounded-full bg-white/10 px-4 text-sm text-white backdrop-blur-md transition-colors hover:bg-white/20"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
下载
|
||||
</button>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="empty"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="flex flex-1 flex-col items-center justify-center px-6 text-center"
|
||||
>
|
||||
<div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-white/5">
|
||||
<Wand2 className="h-8 w-8 text-white/20" />
|
||||
</div>
|
||||
<p className="text-base font-medium text-white/60">
|
||||
{selectedAgentPresetId ? "准备开始生成" : "请选择生图模式"}
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-white/30">
|
||||
{selectedAgentPresetId
|
||||
? "顶部流程线配置完成后，切到“生成参数”即可开始生成"
|
||||
: "请先从顶部流程线选择一个生图模式"}
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{allGeneratedImages.length > 0 ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="border-t border-white/12 bg-black/20 px-4 py-3"
|
||||
>
|
||||
<div className="flex gap-2 overflow-x-auto pb-1">
|
||||
{allGeneratedImages.map((url) => (
|
||||
<button
|
||||
key={url}
|
||||
onClick={() => setSelectedResultUrl(url)}
|
||||
className={cn(
|
||||
"relative flex-shrink-0 overflow-hidden rounded-[24px] transition-all",
|
||||
displayedResultUrl === url
|
||||
? "ring-2 ring-emerald-400"
|
||||
: "ring-1 ring-white/12 hover:ring-white/30"
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={buildPreviewImageUrl(url, 240)}
|
||||
alt="缩略图"
|
||||
className="h-20 w-20 object-cover"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
) : null}
|
||||
</motion.section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user