yuanzonghao
bf8f356e37
- image prompt: vertical 9:16 → landscape 16:9 cinematic, scene fills canvas with bottom dialogue band and horizontal choice row - image-client: pass size=1792x1024 hint (provider honors it → output is now exact 16:9 instead of the model's default 1.75:1) - PlayCanvas: drop 560px cap, use object-contain into available space, add fullViewport prop for chrome-less presentation rendering - play page: F / Esc shortcuts + Fullscreen API + fullscreenchange sync; chrome-less black-letterbox overlay (bg-black) suited for screen recording Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
397 lines
13 KiB
TypeScript
397 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { useRouter, useSearchParams } from "next/navigation";
|
||
import { Suspense, useCallback, useEffect, useRef, useState } from "react";
|
||
import { PlayCanvas, type Phase } from "@/components/PlayCanvas";
|
||
import { PRESETS } from "@/lib/presets";
|
||
import type {
|
||
ClickIntent,
|
||
InteractResponse,
|
||
Session,
|
||
StartResponse,
|
||
StoryFrame,
|
||
VisionResponse,
|
||
} from "@yume/types";
|
||
|
||
function PlayInner() {
|
||
const router = useRouter();
|
||
const params = useSearchParams();
|
||
|
||
const [phase, setPhase] = useState<Phase>("loading-first");
|
||
const [session, setSession] = useState<Session | null>(null);
|
||
const [imageBase64, setImageBase64] = useState<string | null>(null);
|
||
const [frame, setFrame] = useState<StoryFrame | null>(null);
|
||
const [intent, setIntent] = useState<ClickIntent | null>(null);
|
||
const [pendingClick, setPendingClick] = useState<{
|
||
x: number;
|
||
y: number;
|
||
} | null>(null);
|
||
const [turnNum, setTurnNum] = useState(0);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [presentation, setPresentation] = useState(false);
|
||
|
||
const startedRef = useRef(false);
|
||
const prefetchAbortRef = useRef<AbortController | null>(null);
|
||
const prefetchRef = useRef<Record<string, Promise<InteractResponse>>>({});
|
||
|
||
const togglePresentation = useCallback(async () => {
|
||
const entering = !presentation;
|
||
if (entering) {
|
||
try {
|
||
if (!document.fullscreenElement) {
|
||
await document.documentElement.requestFullscreen();
|
||
}
|
||
} catch {
|
||
// Browser may refuse fullscreen — still enter chrome-less mode
|
||
}
|
||
setPresentation(true);
|
||
} else {
|
||
try {
|
||
if (document.fullscreenElement) {
|
||
await document.exitFullscreen();
|
||
}
|
||
} catch {
|
||
// ignore
|
||
}
|
||
setPresentation(false);
|
||
}
|
||
}, [presentation]);
|
||
|
||
useEffect(() => {
|
||
function onKey(e: KeyboardEvent) {
|
||
if (e.key === "f" || e.key === "F") {
|
||
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
||
e.preventDefault();
|
||
void togglePresentation();
|
||
} else if (e.key === "Escape" && presentation) {
|
||
setPresentation(false);
|
||
}
|
||
}
|
||
function onFullscreenChange() {
|
||
// Sync if user exited browser fullscreen via Esc / system gesture
|
||
if (!document.fullscreenElement && presentation) {
|
||
setPresentation(false);
|
||
}
|
||
}
|
||
window.addEventListener("keydown", onKey);
|
||
document.addEventListener("fullscreenchange", onFullscreenChange);
|
||
return () => {
|
||
window.removeEventListener("keydown", onKey);
|
||
document.removeEventListener("fullscreenchange", onFullscreenChange);
|
||
};
|
||
}, [togglePresentation, presentation]);
|
||
|
||
useEffect(() => {
|
||
if (startedRef.current) return;
|
||
startedRef.current = true;
|
||
|
||
let payload: { worldSetting: string; styleGuide: string } | null = null;
|
||
const presetId = params.get("preset");
|
||
|
||
if (presetId) {
|
||
const p = PRESETS.find((x) => x.id === presetId);
|
||
if (p) {
|
||
payload = { worldSetting: p.worldSetting, styleGuide: p.styleGuide };
|
||
}
|
||
} else if (params.get("custom") === "1") {
|
||
const stored = sessionStorage.getItem("yume:custom");
|
||
if (stored) {
|
||
try {
|
||
payload = JSON.parse(stored);
|
||
} catch {
|
||
payload = null;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (!payload) {
|
||
router.replace("/");
|
||
return;
|
||
}
|
||
|
||
const finalPayload = payload;
|
||
|
||
fetch("/api/start", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(finalPayload),
|
||
})
|
||
.then(async (r) => {
|
||
if (!r.ok) {
|
||
const j = (await r.json().catch(() => ({}))) as { error?: string };
|
||
throw new Error(j.error ?? r.statusText);
|
||
}
|
||
return r.json() as Promise<StartResponse>;
|
||
})
|
||
.then((data) => {
|
||
setSession({
|
||
id: data.sessionId,
|
||
createdAt: Date.now(),
|
||
worldSetting: finalPayload.worldSetting,
|
||
styleGuide: finalPayload.styleGuide,
|
||
history: [{ frame: data.frame }],
|
||
});
|
||
setFrame(data.frame);
|
||
setImageBase64(data.imageBase64);
|
||
setPhase("ready");
|
||
setTurnNum(1);
|
||
})
|
||
.catch((e) => setError(String(e)));
|
||
}, [params, router]);
|
||
|
||
// Prefetch next-frame candidates whenever current frame becomes ready.
|
||
// All three fire in parallel for fastest cache fill. NOT depending on
|
||
// `phase` — we don't want to abort in-flight prefetches just because
|
||
// the user clicked. They should continue so handleClick can await them.
|
||
useEffect(() => {
|
||
if (!session || !frame) return;
|
||
|
||
prefetchAbortRef.current?.abort();
|
||
const ctrl = new AbortController();
|
||
prefetchAbortRef.current = ctrl;
|
||
|
||
const choices = frame.uiElements.filter((e) => e.kind === "choice");
|
||
const promises: Record<string, Promise<InteractResponse>> = {};
|
||
|
||
for (const choice of choices) {
|
||
const syntheticIntent: ClickIntent = {
|
||
targetId: choice.id,
|
||
targetLabel: choice.label,
|
||
reasoning: "prefetch",
|
||
};
|
||
const p = fetch("/api/interact", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ session, intent: syntheticIntent }),
|
||
signal: ctrl.signal,
|
||
}).then(async (r) => {
|
||
if (!r.ok) {
|
||
const j = (await r.json().catch(() => ({}))) as { error?: string };
|
||
throw new Error(j.error ?? r.statusText);
|
||
}
|
||
return r.json() as Promise<InteractResponse>;
|
||
});
|
||
p.catch(() => {});
|
||
promises[choice.id] = p;
|
||
}
|
||
|
||
prefetchRef.current = promises;
|
||
|
||
return () => {
|
||
ctrl.abort();
|
||
};
|
||
}, [frame?.id, session?.id]);
|
||
|
||
async function handleClick(click: { x: number; y: number }) {
|
||
if (phase !== "ready" || !session || !imageBase64) return;
|
||
setPhase("interacting");
|
||
setPendingClick(click);
|
||
setIntent(null);
|
||
|
||
const cacheSnapshot = prefetchRef.current;
|
||
|
||
try {
|
||
// Step 1: Vision (~4s) — figure out what the user actually clicked
|
||
const visionRes = await fetch("/api/vision", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
session,
|
||
prevImageBase64: imageBase64,
|
||
click,
|
||
}),
|
||
});
|
||
if (!visionRes.ok) {
|
||
const j = (await visionRes.json().catch(() => ({}))) as {
|
||
error?: string;
|
||
};
|
||
throw new Error(j.error ?? visionRes.statusText);
|
||
}
|
||
const { intent: clickIntent } =
|
||
(await visionRes.json()) as VisionResponse;
|
||
|
||
// Step 2: Cache lookup
|
||
const cached = clickIntent.targetId
|
||
? cacheSnapshot[clickIntent.targetId]
|
||
: undefined;
|
||
|
||
let result: InteractResponse;
|
||
if (cached) {
|
||
// Cache hit — await the prefetched promise (mostly already resolved)
|
||
result = await cached;
|
||
// Overwrite the synthetic prefetch intent on history with the real one
|
||
const lastIdx = result.session.history.length - 1;
|
||
result = {
|
||
...result,
|
||
intent: clickIntent,
|
||
session: {
|
||
...result.session,
|
||
history: result.session.history.map((entry, idx) =>
|
||
idx === lastIdx
|
||
? { ...entry, click, intent: clickIntent }
|
||
: entry,
|
||
),
|
||
},
|
||
};
|
||
} else {
|
||
// Cache miss (free-form click) — abort wasted prefetches, run live
|
||
prefetchAbortRef.current?.abort();
|
||
const liveRes = await fetch("/api/interact", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ session, intent: clickIntent, click }),
|
||
});
|
||
if (!liveRes.ok) {
|
||
const j = (await liveRes.json().catch(() => ({}))) as {
|
||
error?: string;
|
||
};
|
||
throw new Error(j.error ?? liveRes.statusText);
|
||
}
|
||
result = (await liveRes.json()) as InteractResponse;
|
||
}
|
||
|
||
// Apply the result: append new frame to history
|
||
const updatedHistory = [...result.session.history, { frame: result.frame }];
|
||
setSession({ ...result.session, history: updatedHistory });
|
||
setFrame(result.frame);
|
||
setImageBase64(result.imageBase64);
|
||
setIntent(clickIntent);
|
||
setPendingClick(null);
|
||
setTurnNum((t) => t + 1);
|
||
setPhase("ready");
|
||
} catch (e) {
|
||
setError(String(e));
|
||
setPendingClick(null);
|
||
setPhase("ready");
|
||
}
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="min-h-screen flex flex-col items-center justify-center px-8">
|
||
<div className="max-w-md text-center animate-fade-in">
|
||
<p className="text-[10px] smallcaps text-clay-500 mb-6">
|
||
出 · 了 · 点 · 状 · 况
|
||
</p>
|
||
<p className="font-serif italic text-clay-900 text-lg leading-[1.7] mb-10">
|
||
{error}
|
||
</p>
|
||
<Link
|
||
href="/"
|
||
className="text-[10px] smallcaps text-clay-700 hover:text-ember-500 transition-colors inline-flex items-center gap-3"
|
||
>
|
||
<i className="fa-solid fa-arrow-left text-[9px]" />
|
||
返 回
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (presentation) {
|
||
return (
|
||
<div className="fixed inset-0 bg-black flex items-center justify-center z-50">
|
||
<PlayCanvas
|
||
imageBase64={imageBase64}
|
||
phase={phase}
|
||
pendingClick={pendingClick}
|
||
onClick={handleClick}
|
||
fullViewport
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen flex flex-col">
|
||
<header className="px-5 md:px-12 pt-6 md:pt-8 flex items-center justify-between">
|
||
<Link
|
||
href="/"
|
||
className="text-[10px] smallcaps text-clay-600 hover:text-clay-900 transition-colors flex items-center gap-2"
|
||
>
|
||
<i className="fa-solid fa-arrow-left text-[9px]" />
|
||
云梦
|
||
</Link>
|
||
<div className="flex items-center gap-3 text-[10px] smallcaps text-clay-500 num">
|
||
<span>第 · {String(turnNum).padStart(3, "0")} · 帧</span>
|
||
<span className="text-clay-300">·</span>
|
||
<span className="hidden sm:inline truncate max-w-[180px]">
|
||
{session?.id.slice(2, 14) ?? "—"}
|
||
</span>
|
||
</div>
|
||
</header>
|
||
|
||
<main className="flex-1 flex flex-col items-center justify-center px-4 md:px-8 py-6 md:py-10">
|
||
<PlayCanvas
|
||
imageBase64={imageBase64}
|
||
phase={phase}
|
||
pendingClick={pendingClick}
|
||
onClick={handleClick}
|
||
/>
|
||
|
||
<div className="mt-7 md:mt-9 max-w-md w-full text-center min-h-[64px] flex items-center justify-center">
|
||
{phase === "loading-first" && (
|
||
<p className="text-[10px] smallcaps text-clay-500 animate-slow-pulse">
|
||
正 · 在 · 唤 · 起 · 第 · 一 · 帧
|
||
</p>
|
||
)}
|
||
{phase === "interacting" && (
|
||
<div className="flex flex-col items-center gap-2 animate-fade-in">
|
||
<p className="text-[10px] smallcaps text-clay-500 animate-slow-pulse">
|
||
AI · 正 · 在 · 描 · 画 · 下 · 一 · 刻
|
||
</p>
|
||
<p className="font-serif italic text-clay-400 text-xs">
|
||
预取选项秒级响应 · 自由点击稍候
|
||
</p>
|
||
</div>
|
||
)}
|
||
{phase === "ready" && intent?.targetLabel && (
|
||
<p className="font-serif italic text-clay-500 text-base leading-relaxed animate-fade-in max-w-[320px]">
|
||
<span className="text-[9px] smallcaps not-italic text-clay-400 mr-2 align-middle">
|
||
上 · 一 · 步 ·
|
||
</span>
|
||
<span className="align-middle">{intent.targetLabel}</span>
|
||
</p>
|
||
)}
|
||
{phase === "ready" && !intent && turnNum > 0 && (
|
||
<p className="text-[10px] smallcaps text-clay-400 animate-fade-in">
|
||
点 · 击 · 任 · 意 · 处 · 回 · 应
|
||
</p>
|
||
)}
|
||
</div>
|
||
</main>
|
||
|
||
<footer className="px-5 md:px-12 pb-6 flex items-center justify-between">
|
||
<button
|
||
type="button"
|
||
onClick={() => void togglePresentation()}
|
||
className="text-[9px] smallcaps text-clay-400 hover:text-clay-700 transition-colors flex items-center gap-2"
|
||
aria-label="进入演示模式"
|
||
>
|
||
<i className="fa-solid fa-expand text-[10px]" />
|
||
F · 演 · 示
|
||
</button>
|
||
<div className="text-[9px] smallcaps text-clay-400 num">Ⅰ · Ⅰ</div>
|
||
<span className="text-[9px] w-[60px]" aria-hidden />
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function PlayPage() {
|
||
return (
|
||
<Suspense
|
||
fallback={
|
||
<div className="min-h-screen flex items-center justify-center">
|
||
<span className="text-[10px] smallcaps text-clay-500 animate-slow-pulse">
|
||
载入中
|
||
</span>
|
||
</div>
|
||
}
|
||
>
|
||
<PlayInner />
|
||
</Suspense>
|
||
);
|
||
}
|