Makelore 2.0 initial clean snapshot
This commit is contained in:
inman
511
src/pages/ImageCanvas/index.tsx
Normal file
511
src/pages/ImageCanvas/index.tsx
Normal file
@@ -0,0 +1,511 @@
|
||||
import { useEffect, useMemo, useRef, useState, type ChangeEvent, type KeyboardEvent } from 'react';
|
||||
import {
|
||||
Bot,
|
||||
Cloud,
|
||||
ImageIcon,
|
||||
ImagePlus,
|
||||
Loader2,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
Send,
|
||||
Sparkles,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { IMAGE_WORKSPACE_CREATE_PROJECT_EVENT } from '@/lib/image-workspace';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useImageWorkspaceStore } from '@/stores/image-workspace';
|
||||
import type {
|
||||
ImageWorkspaceGenerationSettings,
|
||||
ImageWorkspaceImage,
|
||||
ImageWorkspaceMessage,
|
||||
ImageWorkspaceOption,
|
||||
} from '../../../shared/image-workspace';
|
||||
|
||||
function resolveOptionId(
|
||||
currentId: string | undefined,
|
||||
preferredId: string | undefined,
|
||||
options: ImageWorkspaceOption[],
|
||||
): string | undefined {
|
||||
if (currentId && options.some((option) => option.id === currentId)) return currentId;
|
||||
if (preferredId && options.some((option) => option.id === preferredId)) return preferredId;
|
||||
return options[0]?.id;
|
||||
}
|
||||
|
||||
function messageStatusLabel(message: ImageWorkspaceMessage): string | null {
|
||||
if (message.status === 'queued') return '排队中';
|
||||
if (message.status === 'running') return '生成中';
|
||||
if (message.status === 'failed') return '生成失败';
|
||||
return null;
|
||||
}
|
||||
|
||||
function fileToBase64(file: File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onerror = () => reject(reader.error ?? new Error('无法读取参考图'));
|
||||
reader.onload = () => {
|
||||
const result = typeof reader.result === 'string' ? reader.result : '';
|
||||
const separator = result.indexOf(',');
|
||||
resolve(separator >= 0 ? result.slice(separator + 1) : result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
function OptionSelect({
|
||||
label,
|
||||
value,
|
||||
options,
|
||||
onChange,
|
||||
}: {
|
||||
label: string;
|
||||
value: string | undefined;
|
||||
options: ImageWorkspaceOption[];
|
||||
onChange: (value: string) => void;
|
||||
}) {
|
||||
if (options.length === 0) return null;
|
||||
return (
|
||||
<label className="grid min-w-[116px] gap-1 text-[11px] font-black text-[#68788B]">
|
||||
{label}
|
||||
<select
|
||||
aria-label={label}
|
||||
value={value ?? ''}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
className="h-9 rounded-md border-2 border-[#26384D] bg-white px-2 text-xs font-black text-[#26384D] outline-none focus:ring-2 focus:ring-[#DCE6EF]"
|
||||
>
|
||||
{options.map((option) => (
|
||||
<option key={option.id} value={option.id}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
export function ImageCanvas() {
|
||||
const status = useImageWorkspaceStore((state) => state.status);
|
||||
const snapshot = useImageWorkspaceStore((state) => state.snapshot);
|
||||
const activeProjectId = useImageWorkspaceStore((state) => state.activeProjectId);
|
||||
const activeAgentIds = useImageWorkspaceStore((state) => state.activeAgentIds);
|
||||
const workspaceError = useImageWorkspaceStore((state) => state.error);
|
||||
const load = useImageWorkspaceStore((state) => state.load);
|
||||
const addAgent = useImageWorkspaceStore((state) => state.addAgent);
|
||||
const sendMessage = useImageWorkspaceStore((state) => state.sendMessage);
|
||||
const uploadReference = useImageWorkspaceStore((state) => state.uploadReference);
|
||||
const [prompt, setPrompt] = useState('');
|
||||
const [settings, setSettings] = useState<ImageWorkspaceGenerationSettings>({});
|
||||
const [selectedReferences, setSelectedReferences] = useState<ImageWorkspaceImage[]>([]);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [addingAgent, setAddingAgent] = useState(false);
|
||||
const [actionError, setActionError] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const conversationEndRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const activeProject = useMemo(
|
||||
() => snapshot?.projects.find((project) => project.id === activeProjectId) ?? null,
|
||||
[activeProjectId, snapshot],
|
||||
);
|
||||
const activeAgentId = activeProject ? activeAgentIds[activeProject.id] : undefined;
|
||||
const activeAgent = activeProject?.agents.find((agent) => agent.id === activeAgentId) ?? null;
|
||||
const capabilities = snapshot?.capabilities;
|
||||
|
||||
useEffect(() => {
|
||||
if (status === 'idle') void load();
|
||||
}, [load, status]);
|
||||
|
||||
useEffect(() => {
|
||||
setPrompt('');
|
||||
setSelectedReferences([]);
|
||||
setActionError(null);
|
||||
}, [activeProjectId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!capabilities) return;
|
||||
setSettings((current) => ({
|
||||
modeId: resolveOptionId(current.modeId, capabilities.defaultModeId, capabilities.modes),
|
||||
modelId: resolveOptionId(current.modelId, capabilities.defaultModelId, capabilities.models),
|
||||
aspectRatioId: resolveOptionId(
|
||||
current.aspectRatioId,
|
||||
capabilities.defaultAspectRatioId,
|
||||
capabilities.aspectRatios,
|
||||
),
|
||||
resolutionId: resolveOptionId(
|
||||
current.resolutionId,
|
||||
capabilities.defaultResolutionId,
|
||||
capabilities.resolutions,
|
||||
),
|
||||
outputCountId: resolveOptionId(
|
||||
current.outputCountId,
|
||||
capabilities.defaultOutputCountId,
|
||||
capabilities.outputCounts,
|
||||
),
|
||||
}));
|
||||
}, [capabilities]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof conversationEndRef.current?.scrollIntoView === 'function') {
|
||||
conversationEndRef.current.scrollIntoView({ block: 'end' });
|
||||
}
|
||||
}, [activeProject?.messages.length]);
|
||||
|
||||
const addReference = (image: ImageWorkspaceImage) => {
|
||||
if (!capabilities || capabilities.maxReferenceImages <= 0) {
|
||||
setActionError('当前创作空间未开放参考图功能');
|
||||
return;
|
||||
}
|
||||
setSelectedReferences((current) => {
|
||||
if (current.some((item) => item.id === image.id)) return current;
|
||||
if (current.length >= capabilities.maxReferenceImages) {
|
||||
setActionError(`最多添加 ${capabilities.maxReferenceImages} 张参考图`);
|
||||
return current;
|
||||
}
|
||||
setActionError(null);
|
||||
return [...current, image];
|
||||
});
|
||||
};
|
||||
|
||||
const handleUploadReference = async (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const input = event.currentTarget;
|
||||
const file = input.files?.[0];
|
||||
if (!file) return;
|
||||
if (!activeProject || !capabilities) {
|
||||
input.value = '';
|
||||
return;
|
||||
}
|
||||
const upload = capabilities.referenceUpload;
|
||||
if (!upload.enabled) {
|
||||
setActionError('当前创作空间暂未开放参考图上传');
|
||||
input.value = '';
|
||||
return;
|
||||
}
|
||||
if (upload.acceptedMimeTypes.length > 0 && !upload.acceptedMimeTypes.includes(file.type)) {
|
||||
setActionError('请选择当前创作空间支持的图片格式');
|
||||
input.value = '';
|
||||
return;
|
||||
}
|
||||
if (upload.maxBytes && file.size > upload.maxBytes) {
|
||||
setActionError(`参考图大小不能超过 ${Math.ceil(upload.maxBytes / 1024 / 1024)} MB`);
|
||||
input.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
setUploading(true);
|
||||
setActionError(null);
|
||||
try {
|
||||
const result = await uploadReference({
|
||||
projectId: activeProject.id,
|
||||
fileName: file.name,
|
||||
mimeType: file.type,
|
||||
contentBase64: await fileToBase64(file),
|
||||
});
|
||||
addReference(result.reference);
|
||||
} catch (error) {
|
||||
setActionError(error instanceof Error ? error.message : String(error));
|
||||
} finally {
|
||||
setUploading(false);
|
||||
input.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleSend = async () => {
|
||||
if (!activeProject || !activeAgent || !prompt.trim()) return;
|
||||
setSubmitting(true);
|
||||
setActionError(null);
|
||||
try {
|
||||
await sendMessage({
|
||||
projectId: activeProject.id,
|
||||
agentId: activeAgent.id,
|
||||
prompt: prompt.trim(),
|
||||
referenceImageIds: selectedReferences.map((image) => image.id),
|
||||
settings,
|
||||
});
|
||||
setPrompt('');
|
||||
setSelectedReferences([]);
|
||||
} catch (error) {
|
||||
setActionError(error instanceof Error ? error.message : String(error));
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleComposerKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
void handleSend();
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddAgent = async () => {
|
||||
if (!activeProject) return;
|
||||
setAddingAgent(true);
|
||||
setActionError(null);
|
||||
try {
|
||||
await addAgent(activeProject.id);
|
||||
} catch (error) {
|
||||
setActionError(error instanceof Error ? error.message : String(error));
|
||||
} finally {
|
||||
setAddingAgent(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openCreateProject = () => {
|
||||
window.dispatchEvent(new Event(IMAGE_WORKSPACE_CREATE_PROJECT_EVENT));
|
||||
};
|
||||
|
||||
if (status === 'idle' || status === 'loading') {
|
||||
return (
|
||||
<div data-testid="image-canvas-page" className="-m-6 flex min-h-full items-center justify-center bg-[#FFFFFF] p-6 text-[#26384D]">
|
||||
<div role="status" className="flex items-center gap-3 rounded-lg border-2 border-[#26384D] bg-white px-5 py-4 text-sm font-black shadow-[4px_4px_0_#26384D]">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
正在读取创作空间
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === 'unavailable' || status === 'error' || !snapshot) {
|
||||
return (
|
||||
<div
|
||||
data-testid="image-canvas-page"
|
||||
className="-m-6 flex min-h-full items-center justify-center bg-[#FFFFFF] p-6 text-[#26384D]"
|
||||
>
|
||||
<section
|
||||
data-testid="image-workspace-unavailable"
|
||||
className="w-full max-w-xl rounded-lg border-4 border-[#26384D] bg-[#F6F8FA] p-8 text-center shadow-[8px_8px_0_#26384D]"
|
||||
>
|
||||
<Cloud className="mx-auto h-10 w-10" />
|
||||
<h1 className="mt-4 text-2xl font-black">创作空间暂不可用</h1>
|
||||
<p className="mt-3 text-sm font-bold leading-6 text-[#68788B]">
|
||||
暂时无法连接创作空间，请稍后重试。
|
||||
</p>
|
||||
{workspaceError ? <p role="alert" className="mt-3 text-xs font-bold text-[#8b3a3a]">{workspaceError}</p> : null}
|
||||
<Button
|
||||
type="button"
|
||||
className="mt-5 border-2 border-[#26384D] bg-[#DCE6EF] font-black text-[#26384D] shadow-[3px_3px_0_#26384D]"
|
||||
onClick={() => void load()}
|
||||
>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
重新连接
|
||||
</Button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!activeProject) {
|
||||
return (
|
||||
<div data-testid="image-canvas-page" className="-m-6 flex min-h-full items-center justify-center bg-[#FFFFFF] p-6 text-[#26384D]">
|
||||
<section className="w-full max-w-xl rounded-lg border-4 border-[#26384D] bg-[#F6F8FA] p-8 text-center shadow-[8px_8px_0_#26384D]">
|
||||
<ImageIcon className="mx-auto h-10 w-10" />
|
||||
<h1 className="mt-4 text-2xl font-black">创建第一个项目</h1>
|
||||
<p className="mt-3 text-sm font-bold leading-6 text-[#68788B]">
|
||||
项目会持续保留对话和作品，创作空间会自动创建默认 Agent。
|
||||
</p>
|
||||
<Button
|
||||
type="button"
|
||||
className="mt-5 border-2 border-[#26384D] bg-[#DCE6EF] font-black text-[#26384D] shadow-[3px_3px_0_#26384D]"
|
||||
onClick={openCreateProject}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
新建项目
|
||||
</Button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const canAddReference = Boolean(capabilities && capabilities.maxReferenceImages > 0);
|
||||
const canUploadReference = Boolean(
|
||||
capabilities?.referenceUpload.enabled
|
||||
&& selectedReferences.length < capabilities.maxReferenceImages,
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="image-canvas-page"
|
||||
className="-m-6 min-h-full bg-[#FFFFFF] p-4 text-[#26384D]"
|
||||
>
|
||||
<div
|
||||
data-testid="image-workspace-page"
|
||||
className="mx-auto flex min-h-[calc(100vh-5rem)] max-w-6xl flex-col overflow-hidden rounded-lg border-4 border-[#26384D] bg-[#F6F8FA] shadow-[8px_8px_0_#26384D]"
|
||||
>
|
||||
<header className="flex flex-wrap items-center justify-between gap-3 border-b-4 border-[#26384D] bg-[#FFFFFF] px-4 py-3">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<ImageIcon className="h-4 w-4 shrink-0" />
|
||||
<h1 className="truncate text-lg font-black">{activeProject.name}</h1>
|
||||
</div>
|
||||
<p className="mt-1 flex items-center gap-1.5 text-xs font-bold text-[#68788B]">
|
||||
<Bot className="h-3.5 w-3.5" />
|
||||
{activeAgent ? `当前 Agent：${activeAgent.name}` : '当前项目还没有 Agent'}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="刷新创作空间"
|
||||
className="flex h-9 w-9 items-center justify-center rounded-md border-2 border-[#26384D] bg-white shadow-[2px_2px_0_#26384D]"
|
||||
onClick={() => void load()}
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<main data-testid="image-workspace-conversation" className="min-h-0 flex-1 overflow-auto px-4 py-5 sm:px-8">
|
||||
{activeProject.messages.length === 0 ? (
|
||||
<div className="mx-auto flex min-h-[260px] max-w-xl flex-col items-center justify-center text-center">
|
||||
<Sparkles className="h-9 w-9" />
|
||||
<h2 className="mt-3 text-xl font-black">从一段描述开始创作</h2>
|
||||
<p className="mt-2 text-sm font-bold leading-6 text-[#68788B]">
|
||||
描述画面，或先添加参考图。生成结果会直接出现在当前对话中。
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mx-auto max-w-4xl space-y-5">
|
||||
{activeProject.messages.map((message) => {
|
||||
const statusLabel = messageStatusLabel(message);
|
||||
const assistant = message.role === 'assistant';
|
||||
return (
|
||||
<article
|
||||
key={message.id}
|
||||
className={cn('flex', assistant ? 'justify-start' : 'justify-end')}
|
||||
>
|
||||
<div className={cn(
|
||||
'max-w-[92%] rounded-lg border-2 border-[#26384D] p-3 shadow-[3px_3px_0_#26384D] sm:max-w-[78%]',
|
||||
assistant ? 'bg-white' : 'bg-[#DCE6EF]',
|
||||
)}>
|
||||
<div className="mb-2 flex items-center gap-2 text-[11px] font-black text-[#68788B]">
|
||||
{assistant ? <Bot className="h-3.5 w-3.5" /> : null}
|
||||
<span>{assistant ? 'AI 创作 Agent' : '你'}</span>
|
||||
{statusLabel ? <span className="rounded-full bg-[#E9EFF5] px-2 py-0.5">{statusLabel}</span> : null}
|
||||
</div>
|
||||
{message.text ? <p className="whitespace-pre-wrap text-sm font-bold leading-6">{message.text}</p> : null}
|
||||
{message.images.length > 0 ? (
|
||||
<div className={cn('grid gap-3', message.images.length > 1 && 'mt-3 sm:grid-cols-2')}>
|
||||
{message.images.map((image) => (
|
||||
<figure key={image.id} className="overflow-hidden rounded-md border-2 border-[#26384D] bg-[#FFFFFF]">
|
||||
<img
|
||||
src={image.thumbnailUrl || image.url}
|
||||
alt={image.alt || '生成图片'}
|
||||
className="max-h-[520px] w-full bg-[#F6F8FA] object-contain"
|
||||
/>
|
||||
{assistant ? (
|
||||
<figcaption className="grid grid-cols-2 gap-2 border-t-2 border-[#26384D] p-2">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md border-2 border-[#26384D] bg-[#E9EFF5] px-2 py-1.5 text-xs font-black disabled:opacity-50"
|
||||
onClick={() => addReference(image)}
|
||||
disabled={!canAddReference}
|
||||
>
|
||||
继续编辑
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md border-2 border-[#26384D] bg-white px-2 py-1.5 text-xs font-black disabled:opacity-50"
|
||||
onClick={() => addReference(image)}
|
||||
disabled={!canAddReference}
|
||||
>
|
||||
用作参考
|
||||
</button>
|
||||
</figcaption>
|
||||
) : null}
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
{message.error ? <p role="alert" className="mt-2 text-xs font-black text-[#a72222]">{message.error}</p> : null}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
<div ref={conversationEndRef} aria-hidden="true" />
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
<section data-testid="image-workspace-composer" className="border-t-4 border-[#26384D] bg-[#FFFFFF] p-3 sm:p-4">
|
||||
<div className="mx-auto max-w-4xl rounded-lg border-2 border-[#26384D] bg-white p-3 shadow-[4px_4px_0_#26384D]">
|
||||
{!activeAgent ? (
|
||||
<div className="mb-3 flex flex-wrap items-center justify-between gap-2 rounded-md border-2 border-[#26384D] bg-[#E9EFF5] p-3 text-xs font-black">
|
||||
<span>当前项目没有可用 Agent，请先添加一个 Agent。</span>
|
||||
<Button type="button" size="sm" onClick={() => void handleAddAgent()} disabled={addingAgent}>
|
||||
{addingAgent ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Plus className="mr-2 h-4 w-4" />}
|
||||
添加 Agent
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{selectedReferences.length > 0 ? (
|
||||
<div data-testid="image-workspace-selected-references" className="mb-3 flex flex-wrap gap-2">
|
||||
{selectedReferences.map((image) => (
|
||||
<div key={image.id} className="flex items-center gap-2 rounded-md border-2 border-[#26384D] bg-[#F6F8FA] p-1.5 pr-2">
|
||||
<img src={image.thumbnailUrl || image.url} alt="已选参考图" className="h-10 w-10 rounded object-cover" />
|
||||
<span className="max-w-28 truncate text-[11px] font-black">{image.alt || '参考图'}</span>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="移除参考图"
|
||||
onClick={() => setSelectedReferences((current) => current.filter((item) => item.id !== image.id))}
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<textarea
|
||||
aria-label="创作描述"
|
||||
value={prompt}
|
||||
onChange={(event) => {
|
||||
setPrompt(event.target.value);
|
||||
setActionError(null);
|
||||
}}
|
||||
onKeyDown={handleComposerKeyDown}
|
||||
placeholder="描述你想创作的画面，也可以添加参考图…"
|
||||
className="min-h-24 w-full resize-none bg-transparent px-1 py-1 text-sm font-bold leading-6 outline-none placeholder:text-[#8A98A8]"
|
||||
/>
|
||||
|
||||
{actionError ? <p role="alert" className="mt-2 rounded-md bg-[#ffd6d6] px-3 py-2 text-xs font-black">{actionError}</p> : null}
|
||||
|
||||
<div className="mt-3 flex flex-wrap items-end gap-2 border-t-2 border-[#26384D]/20 pt-3">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
className="hidden"
|
||||
aria-label="选择参考图"
|
||||
accept={capabilities?.referenceUpload.acceptedMimeTypes.join(',')}
|
||||
onChange={(event) => void handleUploadReference(event)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-9 items-center gap-1.5 rounded-md border-2 border-[#26384D] bg-[#F6F8FA] px-3 text-xs font-black disabled:opacity-50"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={!canUploadReference || uploading}
|
||||
>
|
||||
{uploading ? <Loader2 className="h-4 w-4 animate-spin" /> : <ImagePlus className="h-4 w-4" />}
|
||||
添加参考图
|
||||
</button>
|
||||
|
||||
<OptionSelect label="创作模式" value={settings.modeId} options={capabilities?.modes ?? []} onChange={(modeId) => setSettings((current) => ({ ...current, modeId }))} />
|
||||
<OptionSelect label="模型" value={settings.modelId} options={capabilities?.models ?? []} onChange={(modelId) => setSettings((current) => ({ ...current, modelId }))} />
|
||||
<OptionSelect label="画幅" value={settings.aspectRatioId} options={capabilities?.aspectRatios ?? []} onChange={(aspectRatioId) => setSettings((current) => ({ ...current, aspectRatioId }))} />
|
||||
<OptionSelect label="分辨率" value={settings.resolutionId} options={capabilities?.resolutions ?? []} onChange={(resolutionId) => setSettings((current) => ({ ...current, resolutionId }))} />
|
||||
<OptionSelect label="生成数量" value={settings.outputCountId} options={capabilities?.outputCounts ?? []} onChange={(outputCountId) => setSettings((current) => ({ ...current, outputCountId }))} />
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
className="ml-auto h-10 border-2 border-[#26384D] bg-[#DCE6EF] px-5 font-black text-[#26384D] shadow-[3px_3px_0_#26384D]"
|
||||
onClick={() => void handleSend()}
|
||||
disabled={submitting || !activeAgent || !prompt.trim()}
|
||||
>
|
||||
{submitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Send className="mr-2 h-4 w-4" />}
|
||||
生成图片
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ImageCanvas;
|
||||
Reference in New Issue
Block a user