704 lines
19 KiB
TypeScript
704 lines
19 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useMemo, useState } from "react";
|
||
import type {
|
||
GenerateMeta,
|
||
GeneratedImage,
|
||
PublicUser,
|
||
QuotaSnapshot,
|
||
} from "@/lib/types";
|
||
|
||
const QUICK_PROMPTS = [
|
||
"一款银白色耳机悬浮在纯白背景中，柔和边缘光，苹果官网产品摄影质感。",
|
||
"安静的极简客厅，浅木地板，大窗户自然光，室内设计杂志封面风格。",
|
||
"未来感城市夜景中的电动车，低饱和电影光影，写实概念海报。",
|
||
];
|
||
|
||
const PROCESSING_STAGES = [
|
||
"验证账号和额度",
|
||
"发送 Prompt 到 gpt-image-2",
|
||
"等待模型渲染图像",
|
||
"整理图片并准备下载",
|
||
];
|
||
|
||
type StudioStatus = "idle" | "pending" | "success" | "error";
|
||
|
||
type StudioResult = GeneratedImage & {
|
||
previewUrl: string;
|
||
};
|
||
|
||
type NotificationPermissionState = NotificationPermission | "unsupported";
|
||
type ServiceWorkerStatus = "checking" | "ready" | "error";
|
||
|
||
interface BeforeInstallPromptEvent extends Event {
|
||
prompt(): Promise<void>;
|
||
userChoice: Promise<{
|
||
outcome: "accepted" | "dismissed";
|
||
platform: string;
|
||
}>;
|
||
}
|
||
|
||
interface GenerateResponse {
|
||
ok?: boolean;
|
||
error?: string;
|
||
images?: GeneratedImage[];
|
||
meta?: GenerateMeta;
|
||
quota?: QuotaSnapshot;
|
||
}
|
||
|
||
interface StudioClientProps {
|
||
currentUser: PublicUser;
|
||
initialQuota: QuotaSnapshot;
|
||
}
|
||
|
||
interface ProcessingCardProps {
|
||
status: StudioStatus;
|
||
startedAt: number;
|
||
}
|
||
|
||
interface PwaFeedback {
|
||
tone: "success" | "error";
|
||
message: string;
|
||
}
|
||
|
||
function getErrorMessage(error: unknown, fallbackMessage: string): string {
|
||
return error instanceof Error ? error.message : fallbackMessage;
|
||
}
|
||
|
||
function truncateText(text: string, maxLength: number): string {
|
||
if (text.length <= maxLength) {
|
||
return text;
|
||
}
|
||
|
||
return `${text.slice(0, maxLength - 1)}...`;
|
||
}
|
||
|
||
function getIsStandaloneMode(): boolean {
|
||
if (typeof window === "undefined") {
|
||
return false;
|
||
}
|
||
|
||
const iosStandalone = Boolean(
|
||
(window.navigator as Navigator & { standalone?: boolean }).standalone,
|
||
);
|
||
|
||
return window.matchMedia("(display-mode: standalone)").matches || iosStandalone;
|
||
}
|
||
|
||
async function showGenerationNotification({
|
||
prompt,
|
||
image,
|
||
meta,
|
||
}: {
|
||
prompt: string;
|
||
image: GeneratedImage;
|
||
meta: GenerateMeta | null;
|
||
}): Promise<void> {
|
||
if (typeof window === "undefined" || !("Notification" in window)) {
|
||
return;
|
||
}
|
||
|
||
if (Notification.permission !== "granted") {
|
||
return;
|
||
}
|
||
|
||
const details = [
|
||
meta?.model,
|
||
meta?.size,
|
||
meta?.durationMs ? `${meta.durationMs} ms` : null,
|
||
].filter(Boolean);
|
||
const body = [truncateText(prompt, 42), details.join(" · ")]
|
||
.filter(Boolean)
|
||
.join(" | ");
|
||
const options: NotificationOptions = {
|
||
body,
|
||
icon: "/pwa-icon.svg",
|
||
badge: "/pwa-badge.svg",
|
||
tag: `generation-${image.id}`,
|
||
data: {
|
||
url: "/studio",
|
||
},
|
||
};
|
||
|
||
if ("serviceWorker" in navigator) {
|
||
const registration = await navigator.serviceWorker.ready;
|
||
await registration.showNotification("图片生成完成", options);
|
||
return;
|
||
}
|
||
|
||
const notification = new Notification("图片生成完成", options);
|
||
notification.onclick = () => {
|
||
window.focus();
|
||
window.location.href = "/studio";
|
||
};
|
||
}
|
||
|
||
export default function StudioClient({
|
||
currentUser,
|
||
initialQuota,
|
||
}: StudioClientProps) {
|
||
const [prompt, setPrompt] = useState("");
|
||
const [status, setStatus] = useState<StudioStatus>("idle");
|
||
const [errorMessage, setErrorMessage] = useState("");
|
||
const [requestMeta, setRequestMeta] = useState<GenerateMeta | null>(null);
|
||
const [result, setResult] = useState<StudioResult | null>(null);
|
||
const [quota, setQuota] = useState(initialQuota);
|
||
const [startedAt, setStartedAt] = useState(0);
|
||
const [serviceWorkerStatus, setServiceWorkerStatus] =
|
||
useState<ServiceWorkerStatus>("checking");
|
||
const [notificationPermission, setNotificationPermission] =
|
||
useState<NotificationPermissionState>("default");
|
||
const [installPromptEvent, setInstallPromptEvent] =
|
||
useState<BeforeInstallPromptEvent | null>(null);
|
||
const [isStandalone, setIsStandalone] = useState(false);
|
||
const [pwaFeedback, setPwaFeedback] = useState<PwaFeedback | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (typeof window === "undefined") {
|
||
return undefined;
|
||
}
|
||
|
||
setNotificationPermission(
|
||
"Notification" in window ? Notification.permission : "unsupported",
|
||
);
|
||
setIsStandalone(getIsStandaloneMode());
|
||
|
||
const handleBeforeInstallPrompt = (event: Event) => {
|
||
event.preventDefault();
|
||
setInstallPromptEvent(event as BeforeInstallPromptEvent);
|
||
};
|
||
const handleAppInstalled = () => {
|
||
setInstallPromptEvent(null);
|
||
setIsStandalone(true);
|
||
setPwaFeedback({
|
||
tone: "success",
|
||
message: "应用已安装完成，之后可以直接从桌面或启动器打开。",
|
||
});
|
||
};
|
||
|
||
window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
|
||
window.addEventListener("appinstalled", handleAppInstalled);
|
||
|
||
if (!("serviceWorker" in navigator)) {
|
||
setServiceWorkerStatus("error");
|
||
|
||
return () => {
|
||
window.removeEventListener(
|
||
"beforeinstallprompt",
|
||
handleBeforeInstallPrompt,
|
||
);
|
||
window.removeEventListener("appinstalled", handleAppInstalled);
|
||
};
|
||
}
|
||
|
||
navigator.serviceWorker
|
||
.register("/sw.js")
|
||
.then(async () => {
|
||
await navigator.serviceWorker.ready;
|
||
setServiceWorkerStatus("ready");
|
||
})
|
||
.catch(() => {
|
||
setServiceWorkerStatus("error");
|
||
});
|
||
|
||
return () => {
|
||
window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
|
||
window.removeEventListener("appinstalled", handleAppInstalled);
|
||
};
|
||
}, []);
|
||
|
||
const promptStats = useMemo(() => {
|
||
const cleanPrompt = prompt.trim();
|
||
|
||
if (!cleanPrompt) {
|
||
return "输入一句尽可能具体的画面描述即可。";
|
||
}
|
||
|
||
return `${cleanPrompt.length} 个字符`;
|
||
}, [prompt]);
|
||
|
||
const serviceWorkerLabel = useMemo(() => {
|
||
if (serviceWorkerStatus === "ready") {
|
||
return "已就绪";
|
||
}
|
||
|
||
if (serviceWorkerStatus === "error") {
|
||
return "不可用";
|
||
}
|
||
|
||
return "注册中";
|
||
}, [serviceWorkerStatus]);
|
||
|
||
const notificationLabel = useMemo(() => {
|
||
if (notificationPermission === "granted") {
|
||
return "已开启";
|
||
}
|
||
|
||
if (notificationPermission === "denied") {
|
||
return "已拒绝";
|
||
}
|
||
|
||
if (notificationPermission === "unsupported") {
|
||
return "浏览器不支持";
|
||
}
|
||
|
||
return "等待授权";
|
||
}, [notificationPermission]);
|
||
|
||
const installLabel = useMemo(() => {
|
||
if (isStandalone) {
|
||
return "已作为应用运行";
|
||
}
|
||
|
||
if (installPromptEvent) {
|
||
return "可直接安装";
|
||
}
|
||
|
||
return "可通过浏览器菜单安装";
|
||
}, [installPromptEvent, isStandalone]);
|
||
|
||
async function handleInstallApp(): Promise<void> {
|
||
if (isStandalone) {
|
||
setPwaFeedback({
|
||
tone: "success",
|
||
message: "当前已经在 PWA 模式下运行。",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!installPromptEvent) {
|
||
setPwaFeedback({
|
||
tone: "error",
|
||
message:
|
||
"当前浏览器没有暴露安装弹窗，可以使用地址栏或浏览器菜单中的“安装应用/添加到主屏幕”。",
|
||
});
|
||
return;
|
||
}
|
||
|
||
await installPromptEvent.prompt();
|
||
const choice = await installPromptEvent.userChoice;
|
||
|
||
setPwaFeedback({
|
||
tone: choice.outcome === "accepted" ? "success" : "error",
|
||
message:
|
||
choice.outcome === "accepted"
|
||
? "浏览器已接受安装请求，应用会加入桌面或启动器。"
|
||
: "这次没有完成安装，你之后仍然可以再次安装。",
|
||
});
|
||
setInstallPromptEvent(null);
|
||
}
|
||
|
||
async function handleEnableNotifications(): Promise<void> {
|
||
if (!("Notification" in window)) {
|
||
setNotificationPermission("unsupported");
|
||
setPwaFeedback({
|
||
tone: "error",
|
||
message: "当前浏览器不支持系统通知。",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (Notification.permission === "denied") {
|
||
setNotificationPermission("denied");
|
||
setPwaFeedback({
|
||
tone: "error",
|
||
message: "通知权限已被拒绝，请在浏览器的站点设置里手动重新开启。",
|
||
});
|
||
return;
|
||
}
|
||
|
||
const permission = await Notification.requestPermission();
|
||
setNotificationPermission(permission);
|
||
|
||
setPwaFeedback({
|
||
tone: permission === "granted" ? "success" : "error",
|
||
message:
|
||
permission === "granted"
|
||
? "系统通知已开启，图片生成成功后会立刻提醒你。"
|
||
: "你还没有授予通知权限，本次不会发送系统通知。",
|
||
});
|
||
}
|
||
|
||
async function handleGenerate(): Promise<void> {
|
||
const cleanPrompt = prompt.trim();
|
||
|
||
if (!cleanPrompt) {
|
||
setErrorMessage("请输入 Prompt 后再开始生成。");
|
||
return;
|
||
}
|
||
|
||
setStatus("pending");
|
||
setErrorMessage("");
|
||
setResult(null);
|
||
setRequestMeta(null);
|
||
setStartedAt(Date.now());
|
||
|
||
try {
|
||
const response = await fetch("/api/generate", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
prompt: cleanPrompt,
|
||
size: "1024x1024",
|
||
quality: "high",
|
||
outputFormat: "png",
|
||
background: "auto",
|
||
count: 1,
|
||
moderation: "auto",
|
||
}),
|
||
});
|
||
const payload = (await response.json()) as GenerateResponse;
|
||
|
||
if (!response.ok || payload.ok !== true) {
|
||
throw new Error(payload.error || "生成失败，请稍后重试。");
|
||
}
|
||
|
||
const image = payload.images?.[0];
|
||
|
||
if (!image) {
|
||
throw new Error("没有拿到可用图片。");
|
||
}
|
||
|
||
setResult({
|
||
...image,
|
||
previewUrl: `data:${image.mimeType};base64,${image.base64}`,
|
||
});
|
||
setRequestMeta(payload.meta ?? null);
|
||
setQuota(payload.quota ?? initialQuota);
|
||
setStatus("success");
|
||
|
||
try {
|
||
await showGenerationNotification({
|
||
prompt: cleanPrompt,
|
||
image,
|
||
meta: payload.meta ?? null,
|
||
});
|
||
} catch {
|
||
setPwaFeedback({
|
||
tone: "error",
|
||
message: "图片已生成成功，但系统通知发送失败，请刷新后重试。",
|
||
});
|
||
}
|
||
} catch (error) {
|
||
setErrorMessage(getErrorMessage(error, "生成失败，请稍后重试。"));
|
||
setStatus("error");
|
||
}
|
||
}
|
||
|
||
function handleDownload() {
|
||
if (!result) {
|
||
return;
|
||
}
|
||
|
||
const blob = base64ToBlob(result.base64, result.mimeType);
|
||
const blobUrl = URL.createObjectURL(blob);
|
||
const anchor = document.createElement("a");
|
||
|
||
anchor.href = blobUrl;
|
||
anchor.download = result.fileName;
|
||
anchor.click();
|
||
|
||
window.setTimeout(() => URL.revokeObjectURL(blobUrl), 2000);
|
||
}
|
||
|
||
return (
|
||
<div className="studio-grid">
|
||
<section className="card composer-card">
|
||
<div className="section-heading">
|
||
<div>
|
||
<p className="section-kicker">Prompt</p>
|
||
<h3>Describe your image</h3>
|
||
</div>
|
||
<span className="subtle-pill">
|
||
{quota.isUnlimited
|
||
? "Unlimited"
|
||
: `剩余 ${quota.remaining} / ${quota.limit}`}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="pwa-panel">
|
||
<div>
|
||
<p className="section-kicker">PWA</p>
|
||
<h4>安装应用并接收生成完成通知</h4>
|
||
<p className="block-copy">
|
||
允许通知后，当前页面调用 <code>/api/generate</code>{" "}
|
||
成功返回图片时，会通过 Service Worker 发送系统提醒。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="pwa-status-grid">
|
||
<div className="pwa-status-card">
|
||
<span>应用状态</span>
|
||
<strong>{installLabel}</strong>
|
||
</div>
|
||
<div className="pwa-status-card">
|
||
<span>通知权限</span>
|
||
<strong>{notificationLabel}</strong>
|
||
</div>
|
||
<div className="pwa-status-card">
|
||
<span>Service Worker</span>
|
||
<strong>{serviceWorkerLabel}</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pwa-actions">
|
||
<button
|
||
type="button"
|
||
className="ghost-button"
|
||
onClick={handleInstallApp}
|
||
disabled={isStandalone}
|
||
>
|
||
{isStandalone ? "已安装" : "安装应用"}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="ghost-button"
|
||
onClick={handleEnableNotifications}
|
||
disabled={notificationPermission === "granted"}
|
||
>
|
||
{notificationPermission === "granted"
|
||
? "通知已开启"
|
||
: "开启通知"}
|
||
</button>
|
||
</div>
|
||
|
||
{pwaFeedback ? (
|
||
<div
|
||
className={
|
||
pwaFeedback.tone === "success"
|
||
? "success-banner"
|
||
: "error-banner"
|
||
}
|
||
>
|
||
{pwaFeedback.message}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<label className="field">
|
||
<span>画面描述</span>
|
||
<textarea
|
||
rows={8}
|
||
value={prompt}
|
||
onChange={(event) => setPrompt(event.target.value)}
|
||
placeholder="例如：一台银白色笔记本电脑放在浅灰色桌面上，清晨自然光从左侧落下，极简静物摄影，细节干净，像苹果官网产品页。"
|
||
/>
|
||
</label>
|
||
|
||
<div className="composer-meta">
|
||
<span>{promptStats}</span>
|
||
<span className="muted">
|
||
{currentUser.role === "admin"
|
||
? "管理员不会被扣减额度"
|
||
: `当前计费周期：${quota.periodKey}`}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="quick-prompt-list">
|
||
{QUICK_PROMPTS.map((item) => (
|
||
<button
|
||
key={item}
|
||
type="button"
|
||
className="ghost-chip"
|
||
onClick={() => setPrompt(item)}
|
||
>
|
||
{item}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{errorMessage ? (
|
||
<div className="error-banner">{errorMessage}</div>
|
||
) : null}
|
||
|
||
<div className="composer-actions">
|
||
<div className="meta-pills">
|
||
<span>Default size 1024</span>
|
||
<span>PNG</span>
|
||
<span>High quality</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="primary-button"
|
||
onClick={handleGenerate}
|
||
disabled={status === "pending"}
|
||
>
|
||
{status === "pending" ? "生成中..." : "生成图片"}
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<ProcessingCard key={startedAt} status={status} startedAt={startedAt} />
|
||
|
||
<section className="card result-card">
|
||
<div className="section-heading">
|
||
<div>
|
||
<p className="section-kicker">Result</p>
|
||
<h3>生成结果</h3>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="ghost-button"
|
||
disabled={!result}
|
||
onClick={handleDownload}
|
||
>
|
||
下载图片
|
||
</button>
|
||
</div>
|
||
|
||
<p className="muted block-copy">
|
||
{requestMeta
|
||
? `${requestMeta.model} · ${requestMeta.size} · ${requestMeta.outputFormat.toUpperCase()} · ${requestMeta.durationMs} ms`
|
||
: "生成完成后会在这里显示耗时和图片。"}
|
||
</p>
|
||
|
||
{result ? (
|
||
<div className="result-stack">
|
||
<div className="image-frame">
|
||
<img
|
||
src={result.previewUrl}
|
||
alt={result.fileName}
|
||
width="1024"
|
||
height="1024"
|
||
/>
|
||
</div>
|
||
{result.revisedPrompt ? (
|
||
<div className="result-copy">
|
||
<span className="result-caption">模型调整后的 Prompt</span>
|
||
<p>{result.revisedPrompt}</p>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
) : (
|
||
<div className="result-placeholder">
|
||
<div className="placeholder-orb" />
|
||
<h4>结果会出现在这里</h4>
|
||
<p>滚动性能已收敛优化，结果区只在真正返回图片时更新。</p>
|
||
</div>
|
||
)}
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ProcessingCard({ status, startedAt }: ProcessingCardProps) {
|
||
const [elapsedMs, setElapsedMs] = useState(0);
|
||
|
||
useEffect(() => {
|
||
if (status !== "pending") {
|
||
return undefined;
|
||
}
|
||
|
||
const timer = window.setInterval(() => {
|
||
setElapsedMs(Date.now() - startedAt);
|
||
}, 220);
|
||
|
||
return () => window.clearInterval(timer);
|
||
}, [status, startedAt]);
|
||
|
||
const progressSnapshot = useMemo(() => {
|
||
if (status === "success") {
|
||
return {
|
||
progress: 100,
|
||
activeIndex: PROCESSING_STAGES.length - 1,
|
||
lead: "图片已生成完成，可以直接查看和下载。",
|
||
};
|
||
}
|
||
|
||
if (status === "error") {
|
||
return {
|
||
progress: 0,
|
||
activeIndex: -1,
|
||
lead: "本次生成未完成，请检查 Prompt 或额度后重试。",
|
||
};
|
||
}
|
||
|
||
if (status !== "pending") {
|
||
return {
|
||
progress: 0,
|
||
activeIndex: -1,
|
||
lead: "准备就绪，输入 Prompt 后即可开始生成。",
|
||
};
|
||
}
|
||
|
||
const progress = Math.min(92, Math.round(elapsedMs / 250));
|
||
const activeIndex = Math.min(
|
||
PROCESSING_STAGES.length - 1,
|
||
Math.floor(elapsedMs / 5000),
|
||
);
|
||
|
||
return {
|
||
progress,
|
||
activeIndex,
|
||
lead: `处理中：${PROCESSING_STAGES[activeIndex]}`,
|
||
};
|
||
}, [elapsedMs, status]);
|
||
|
||
return (
|
||
<section className="card processing-card">
|
||
<div className="section-heading">
|
||
<div>
|
||
<p className="section-kicker">Processing</p>
|
||
<h3>等待过程</h3>
|
||
</div>
|
||
<span className="subtle-pill">
|
||
{status === "pending"
|
||
? "进行中"
|
||
: status === "success"
|
||
? "完成"
|
||
: status === "error"
|
||
? "失败"
|
||
: "待命"}
|
||
</span>
|
||
</div>
|
||
|
||
<p className="block-copy">{progressSnapshot.lead}</p>
|
||
|
||
<div className="progress-track" aria-hidden="true">
|
||
<div
|
||
className="progress-fill"
|
||
style={{ width: `${progressSnapshot.progress}%` }}
|
||
/>
|
||
</div>
|
||
|
||
<ol className="processing-list">
|
||
{PROCESSING_STAGES.map((stage, index) => {
|
||
const isDone =
|
||
status === "success" || index < progressSnapshot.activeIndex;
|
||
const isActive =
|
||
status === "pending" && index === progressSnapshot.activeIndex;
|
||
|
||
return (
|
||
<li
|
||
key={stage}
|
||
className={
|
||
isDone
|
||
? "processing-item processing-item-done"
|
||
: isActive
|
||
? "processing-item processing-item-active"
|
||
: "processing-item"
|
||
}
|
||
>
|
||
<div className="step-dot" />
|
||
<span>{stage}</span>
|
||
</li>
|
||
);
|
||
})}
|
||
</ol>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function base64ToBlob(base64: string, mimeType: string): Blob {
|
||
const binary = atob(base64);
|
||
const bytes = new Uint8Array(binary.length);
|
||
|
||
for (let index = 0; index < binary.length; index += 1) {
|
||
bytes[index] = binary.charCodeAt(index);
|
||
}
|
||
|
||
return new Blob([bytes], { type: mimeType });
|
||
}
|