387 lines
15 KiB
TypeScript
387 lines
15 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useRef, useState } from "react";
|
||
import { Eraser, ImageUp, Loader2, Paintbrush, Save, Upload } from "lucide-react";
|
||
import clsx from "clsx";
|
||
import { clampPage, pageItems, Pagination } from "@/components/pagination";
|
||
import { crossfadeIn, pulseFeedback, revealChildren, runScopedMotion } from "@/lib/ui/motion";
|
||
import type { Asset, GenerationJob } from "@/lib/types";
|
||
|
||
export type ImageEditMode = "inpaint" | "upscale";
|
||
const PICKER_PAGE_SIZE = 8;
|
||
|
||
export function ImageEditor({
|
||
initialMode = "inpaint",
|
||
hideModeSwitch = false
|
||
}: {
|
||
initialMode?: ImageEditMode;
|
||
hideModeSwitch?: boolean;
|
||
}) {
|
||
const [assets, setAssets] = useState<Asset[]>([]);
|
||
const [jobs, setJobs] = useState<GenerationJob[]>([]);
|
||
const [selectedId, setSelectedId] = useState("");
|
||
const [pickerOpen, setPickerOpen] = useState(false);
|
||
const [pickerPage, setPickerPage] = useState(1);
|
||
const [prompt, setPrompt] = useState("");
|
||
const [brush, setBrush] = useState(42);
|
||
const [mode, setMode] = useState<ImageEditMode>(initialMode);
|
||
const [resolution, setResolution] = useState<"4k" | "8k">("4k");
|
||
const [scale, setScale] = useState(50);
|
||
const [busy, setBusy] = useState(false);
|
||
const [notice, setNotice] = useState<string | null>(null);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [uploading, setUploading] = useState(false);
|
||
const editorRef = useRef<HTMLDivElement | null>(null);
|
||
const pickerRef = useRef<HTMLDivElement | null>(null);
|
||
const feedbackRef = useRef<HTMLDivElement | null>(null);
|
||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||
const imageRef = useRef<HTMLImageElement | null>(null);
|
||
const drawing = useRef(false);
|
||
|
||
const outputAssetIds = new Set(jobs.flatMap((job) => job.outputAssetIds));
|
||
const imageAssets = assets.filter((asset) => isResultImageAsset(asset, outputAssetIds));
|
||
const selected = assets.find((asset) => asset.id === selectedId && isEditableImageAsset(asset));
|
||
const imageUrl = selected ? displayAssetUrl(selected.url) : undefined;
|
||
const pickerTotal = imageAssets.length;
|
||
const visibleImageAssets = pageItems(imageAssets, pickerPage, PICKER_PAGE_SIZE);
|
||
|
||
async function refreshLibrary(nextSelectedId = selectedId) {
|
||
const [assetResponse, imageJobResponse] = await Promise.all([
|
||
fetch("/api/assets", { cache: "no-store" }),
|
||
fetch("/api/generations/image", { cache: "no-store" })
|
||
]);
|
||
const [assetPayload, jobPayload] = await Promise.all([assetResponse.json(), imageJobResponse.json()]);
|
||
if (!assetResponse.ok) throw new Error(assetPayload.error || "读取资产失败");
|
||
if (!imageJobResponse.ok) throw new Error(jobPayload.error || "读取图片任务失败");
|
||
const nextAssets = assetPayload.assets || [];
|
||
const nextImageAssets = nextAssets.filter(isEditableImageAsset);
|
||
setAssets(nextAssets);
|
||
setJobs(jobPayload.jobs || []);
|
||
if (nextSelectedId && nextImageAssets.some((asset: Asset) => asset.id === nextSelectedId)) {
|
||
setSelectedId(nextSelectedId);
|
||
} else if (nextSelectedId) {
|
||
setSelectedId("");
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
refreshLibrary().catch((err) => setError(err instanceof Error ? err.message : String(err)));
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
setMode(initialMode);
|
||
}, [initialMode]);
|
||
|
||
useEffect(() => {
|
||
setPickerPage(1);
|
||
}, [pickerOpen]);
|
||
|
||
useEffect(() => {
|
||
setPickerPage((page) => clampPage(page, pickerTotal, PICKER_PAGE_SIZE));
|
||
}, [pickerTotal]);
|
||
|
||
useEffect(() => {
|
||
if (mode !== "inpaint" || !imageUrl) return;
|
||
window.requestAnimationFrame(resetCanvas);
|
||
}, [mode, imageUrl]);
|
||
|
||
useEffect(() => {
|
||
return runScopedMotion(editorRef, (scope) => revealChildren(scope));
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
crossfadeIn(pickerRef.current);
|
||
}, [pickerOpen, pickerPage]);
|
||
|
||
useEffect(() => {
|
||
pulseFeedback(feedbackRef.current);
|
||
}, [error, notice]);
|
||
|
||
function resetCanvas() {
|
||
const canvas = canvasRef.current;
|
||
const image = imageRef.current;
|
||
if (!canvas || !image) return;
|
||
const width = image.naturalWidth || 1024;
|
||
const height = image.naturalHeight || 1024;
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
const ctx = canvas.getContext("2d");
|
||
if (!ctx) return;
|
||
ctx.clearRect(0, 0, width, height);
|
||
}
|
||
|
||
function paint(event: React.PointerEvent<HTMLCanvasElement>) {
|
||
const canvas = canvasRef.current;
|
||
if (!canvas || !drawing.current) return;
|
||
const rect = canvas.getBoundingClientRect();
|
||
const x = ((event.clientX - rect.left) / rect.width) * canvas.width;
|
||
const y = ((event.clientY - rect.top) / rect.height) * canvas.height;
|
||
const ctx = canvas.getContext("2d");
|
||
if (!ctx) return;
|
||
ctx.fillStyle = "white";
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, brush, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
|
||
async function runEdit() {
|
||
setBusy(true);
|
||
setError(null);
|
||
setNotice(null);
|
||
try {
|
||
if (!selected) throw new Error("请选择一张图片资产，或先上传图片。");
|
||
const endpoint = mode === "inpaint" ? `/api/assets/${selected.id}/inpaint` : `/api/assets/${selected.id}/upscale`;
|
||
const body = mode === "inpaint"
|
||
? {
|
||
prompt,
|
||
maskDataUrl: buildMaskDataUrl(canvasRef.current)
|
||
}
|
||
: {
|
||
resolution,
|
||
scale
|
||
};
|
||
const response = await fetch(endpoint, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(body)
|
||
});
|
||
const payload = await response.json();
|
||
if (!response.ok) throw new Error(payload.error || "提交失败");
|
||
setNotice(`${mode === "inpaint" ? "局部重绘" : "超清"}任务已提交。请到「结果」里的任务查看进度，完成后结果资产会自动保留。`);
|
||
setPrompt("");
|
||
resetCanvas();
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : String(err));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function uploadImage(files: FileList | null) {
|
||
if (!files?.length) return;
|
||
setUploading(true);
|
||
setError(null);
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append("files", files[0]);
|
||
const response = await fetch("/api/assets/upload", {
|
||
method: "POST",
|
||
body: formData
|
||
});
|
||
const payload = await response.json();
|
||
if (!response.ok) throw new Error(payload.error || "上传失败");
|
||
const uploaded = (payload.assets || []).find((asset: Asset) => isEditableImageAsset(asset)) as Asset | undefined;
|
||
if (!uploaded) throw new Error("请上传图片文件。");
|
||
setPickerOpen(false);
|
||
await refreshLibrary(uploaded.id);
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : String(err));
|
||
} finally {
|
||
setUploading(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="grid cols-2" ref={editorRef}>
|
||
<section className="panel" data-animate>
|
||
<div className="panel-head">
|
||
<div>
|
||
<h2>选择素材与处理方式</h2>
|
||
</div>
|
||
</div>
|
||
{!hideModeSwitch ? (
|
||
<div className="segmented" style={{ marginBottom: 16 }}>
|
||
<button className={mode === "inpaint" ? "active" : ""} aria-pressed={mode === "inpaint"} onClick={() => setMode("inpaint")}>局部重绘</button>
|
||
<button className={mode === "upscale" ? "active" : ""} aria-pressed={mode === "upscale"} onClick={() => setMode("upscale")}>智能超清</button>
|
||
</div>
|
||
) : null}
|
||
<div className="selected-asset-line editor-selection-summary">
|
||
{selected ? (
|
||
<img src={displayAssetUrl(selected.url)} alt="" />
|
||
) : (
|
||
<span className="selected-asset-placeholder"><ImageUp size={18} /></span>
|
||
)}
|
||
<div>
|
||
<strong>{selected?.name || "未选择图片"}</strong>
|
||
<span className="muted">{selected ? sourceLabel(selected.source) : "从资产任务选择，或直接上传图片"}</span>
|
||
</div>
|
||
<button className="button mini-button" type="button" onClick={() => setPickerOpen((open) => !open)}>
|
||
{pickerOpen ? "收起" : selected ? "更换素材" : "选择素材"}
|
||
</button>
|
||
<label className="upload-icon-button image-upload-button" title="上传本地图片">
|
||
{uploading ? <Loader2 className="spin" size={18} /> : <Upload size={18} />}
|
||
<span>上传图片</span>
|
||
<input
|
||
type="file"
|
||
accept="image/*"
|
||
onChange={(event) => {
|
||
void uploadImage(event.target.files);
|
||
event.currentTarget.value = "";
|
||
}}
|
||
/>
|
||
</label>
|
||
</div>
|
||
|
||
{pickerOpen ? (
|
||
<div className="editor-picker-panel" ref={pickerRef}>
|
||
<div className="editor-picker-grid">
|
||
{visibleImageAssets.map((asset) => (
|
||
<button
|
||
className={clsx("editor-thumb-option", selectedId === asset.id && "selected")}
|
||
type="button"
|
||
key={asset.id}
|
||
onClick={() => {
|
||
setSelectedId(asset.id);
|
||
setPickerOpen(false);
|
||
}}
|
||
title={asset.name}
|
||
>
|
||
<img src={displayAssetUrl(asset.url)} alt={asset.name} />
|
||
<span className="editor-thumb-info">
|
||
<strong>{asset.name}</strong>
|
||
<span>{sourceLabel(asset.source)}</span>
|
||
</span>
|
||
</button>
|
||
))}
|
||
{!imageAssets.length ? (
|
||
<div className="callout editor-empty">暂无结果图片，可先生成图片，或直接上传图片。</div>
|
||
) : null}
|
||
</div>
|
||
<Pagination page={pickerPage} pageSize={PICKER_PAGE_SIZE} total={pickerTotal} label="选择素材分页" onPageChange={setPickerPage} />
|
||
</div>
|
||
) : null}
|
||
{mode === "inpaint" ? (
|
||
<>
|
||
<div className="field">
|
||
<label htmlFor="editPrompt">重绘提示词</label>
|
||
<input id="editPrompt" value={prompt} onChange={(event) => setPrompt(event.target.value)} />
|
||
</div>
|
||
<div className="field">
|
||
<label htmlFor="brush">画笔大小：{brush}</label>
|
||
<input id="brush" type="range" min="8" max="120" value={brush} onChange={(event) => setBrush(Number(event.target.value))} />
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
<div className="field">
|
||
<label htmlFor="resolution">目标分辨率</label>
|
||
<select id="resolution" value={resolution} onChange={(event) => setResolution(event.target.value === "8k" ? "8k" : "4k")}>
|
||
<option value="4k">4K</option>
|
||
<option value="8k">8K</option>
|
||
</select>
|
||
</div>
|
||
<div className="field">
|
||
<label htmlFor="upscaleScale">细节生成程度：{scale}</label>
|
||
<input id="upscaleScale" type="range" min="0" max="100" value={scale} onChange={(event) => setScale(Number(event.target.value))} />
|
||
</div>
|
||
</>
|
||
)}
|
||
<div className="toolbar">
|
||
<button className="button primary" onClick={runEdit} disabled={busy || !selected}>
|
||
{busy ? <Loader2 className="spin" size={18} /> : mode === "inpaint" ? <Paintbrush size={18} /> : <ImageUp size={18} />}
|
||
提交任务
|
||
</button>
|
||
{mode === "inpaint" ? (
|
||
<button className="button" type="button" onClick={resetCanvas}>
|
||
<Eraser size={18} />
|
||
清空选区
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
{error || notice ? (
|
||
<div ref={feedbackRef}>
|
||
{error ? <div className="callout" role="alert" style={{ marginTop: 14 }}>{error}</div> : null}
|
||
{notice ? <div className="callout success-callout" role="status" aria-live="polite" style={{ marginTop: 14 }}>{notice}</div> : null}
|
||
</div>
|
||
) : null}
|
||
</section>
|
||
|
||
<section className="panel" data-animate>
|
||
<h2>{mode === "inpaint" ? "黑色保留，白色重绘" : "素材增强"}</h2>
|
||
{imageUrl ? (
|
||
<div className="editor-canvas-wrap">
|
||
<img ref={imageRef} src={imageUrl} alt="待处理素材" onLoad={resetCanvas} />
|
||
{mode === "inpaint" ? (
|
||
<canvas
|
||
ref={canvasRef}
|
||
onPointerDown={(event) => {
|
||
drawing.current = true;
|
||
event.currentTarget.setPointerCapture(event.pointerId);
|
||
paint(event);
|
||
}}
|
||
onPointerMove={paint}
|
||
onPointerUp={() => {
|
||
drawing.current = false;
|
||
}}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
) : (
|
||
<div className="callout">选择素材后即可开始局部重绘或超清。</div>
|
||
)}
|
||
<p className="muted" style={{ marginTop: 14 }}>
|
||
<Save size={15} style={{ verticalAlign: "text-bottom" }} /> 输出结果会自动保存到结果。
|
||
</p>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function isEditableImageAsset(asset: Asset) {
|
||
if (asset.kind === "mask") return false;
|
||
if (asset.tags.includes("mask")) return false;
|
||
if (typeof asset.metadata.maskRule === "string") return false;
|
||
const contentType = typeof asset.metadata.contentType === "string" ? asset.metadata.contentType.toLowerCase() : "";
|
||
return asset.kind === "image" || asset.kind === "reference" || contentType.startsWith("image/");
|
||
}
|
||
|
||
function isResultImageAsset(asset: Asset, outputAssetIds: Set<string>) {
|
||
if (!outputAssetIds.has(asset.id)) return false;
|
||
if (!isEditableImageAsset(asset)) return false;
|
||
return asset.source === "generated" || asset.source === "edited" || asset.source === "upscaled";
|
||
}
|
||
|
||
function sourceLabel(source: Asset["source"]) {
|
||
if (source === "upload") return "上传";
|
||
if (source === "generated") return "生成";
|
||
if (source === "edited") return "重绘";
|
||
if (source === "upscaled") return "超清";
|
||
if (source === "seed") return "示例";
|
||
return "外部";
|
||
}
|
||
|
||
function capabilityLabel(capability: GenerationJob["capability"]) {
|
||
if (capability === "image.generate") return "图片生成";
|
||
if (capability === "image.inpaint") return "局部重绘";
|
||
if (capability === "image.upscale") return "智能超清";
|
||
return "图片任务";
|
||
}
|
||
|
||
function buildMaskDataUrl(canvas: HTMLCanvasElement | null) {
|
||
if (!canvas) return undefined;
|
||
const mask = document.createElement("canvas");
|
||
mask.width = canvas.width;
|
||
mask.height = canvas.height;
|
||
const ctx = mask.getContext("2d");
|
||
if (!ctx) return undefined;
|
||
ctx.fillStyle = "black";
|
||
ctx.fillRect(0, 0, mask.width, mask.height);
|
||
ctx.drawImage(canvas, 0, 0);
|
||
return mask.toDataURL("image/png");
|
||
}
|
||
|
||
function displayAssetUrl(url: string) {
|
||
if (typeof window === "undefined") return url;
|
||
try {
|
||
const parsed = new URL(url, window.location.origin);
|
||
if (parsed.hostname === "0.0.0.0") {
|
||
parsed.protocol = window.location.protocol;
|
||
parsed.host = window.location.host;
|
||
return parsed.toString();
|
||
}
|
||
return parsed.toString();
|
||
} catch {
|
||
return url;
|
||
}
|
||
}
|