GenarrativeAI/Genarrative
10
0
Fork 0
Code Issues 24 Pull Requests 7 Actions Packages Projects 1 Releases Wiki Activity

Extend square-hole creation flow with visual asset timeout guard

Browse Source
This commit is contained in:
kdletters
2026-05-05 15:27:09 +08:00
parent 2252afb080
commit 60b667a9d1
30 changed files with 2838 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
+181 -28
View File
@@ -32,22 +32,6 @@ import type {
Match3DWorkProfile,
Match3DWorkSummary,
} from '../../../packages/shared/src/contracts/match3dWorks';
import type {
CreateSquareHoleSessionRequest,
ExecuteSquareHoleActionRequest,
SendSquareHoleMessageRequest,
SquareHoleActionResponse,
SquareHoleSessionResponse,
SquareHoleSessionSnapshot,
} from '../../../packages/shared/src/contracts/squareHoleAgent';
import type {
DropSquareHoleShapeRequest,
SquareHoleRunSnapshot,
} from '../../../packages/shared/src/contracts/squareHoleRuntime';
import type {
SquareHoleWorkProfile,
SquareHoleWorkSummary,
} from '../../../packages/shared/src/contracts/squareHoleWorks';
import type {
PuzzleAgentActionRequest,
PuzzleAgentOperationRecord,
@@ -72,6 +56,21 @@ import type {
ProfileSaveArchiveResumeResponse,
ProfileSaveArchiveSummary,
} from '../../../packages/shared/src/contracts/runtime';
import type {
CreateSquareHoleSessionRequest,
ExecuteSquareHoleActionRequest,
SendSquareHoleMessageRequest,
SquareHoleActionResponse,
SquareHoleSessionResponse,
SquareHoleSessionSnapshot,
} from '../../../packages/shared/src/contracts/squareHoleAgent';
import type {
SquareHoleRunSnapshot,
} from '../../../packages/shared/src/contracts/squareHoleRuntime';
import type {
SquareHoleWorkProfile,
SquareHoleWorkSummary,
} from '../../../packages/shared/src/contracts/squareHoleWorks';
import { buildCustomWorldPlayableCharacters } from '../../data/characterPresets';
import {
buildPublicWorkStagePath,
@@ -123,6 +122,7 @@ import {
buildBigFishGenerationAnchorEntries,
buildMiniGameDraftGenerationProgress,
buildPuzzleGenerationAnchorEntries,
buildSquareHoleGenerationAnchorEntries,
createMiniGameDraftGenerationState,
type MiniGameDraftGenerationState,
} from '../../services/miniGameDraftGenerationProgress';
@@ -552,8 +552,12 @@ function mapPublicWorkDetailToSquareHoleWork(
summary: entry.summaryText,
tags: entry.themeTags,
coverImageSrc: entry.coverImageSrc,
shapeCount: 8,
difficulty: 4,
backgroundPrompt: entry.backgroundPrompt ?? '方洞挑战运行背景',
backgroundImageSrc: entry.backgroundImageSrc ?? null,
shapeOptions: entry.shapeOptions ?? [],
holeOptions: entry.holeOptions ?? [],
shapeCount: entry.shapeCount ?? 8,
difficulty: entry.difficulty ?? 4,
publicationStatus: 'published',
playCount: entry.playCount ?? 0,
updatedAt: entry.updatedAt,
@@ -581,7 +585,11 @@ function buildSquareHoleProfileFromSession(
twistRule: draft.twistRule,
summary: draft.summary,
tags: draft.tags,
coverImageSrc: null,
coverImageSrc: draft.coverImageSrc ?? null,
backgroundPrompt: draft.backgroundPrompt,
backgroundImageSrc: draft.backgroundImageSrc ?? null,
shapeOptions: draft.shapeOptions,
holeOptions: draft.holeOptions,
shapeCount: draft.shapeCount,
difficulty: draft.difficulty,
publicationStatus: 'draft',
@@ -608,13 +616,6 @@ function mergeBigFishWorkSummary(
: current;
}
function mergeSquareHoleWorkSummary(
current: SquareHoleWorkSummary,
updated: SquareHoleWorkSummary,
): SquareHoleWorkSummary {
return current.profileId === updated.profileId ? updated : current;
}
async function resolvePublicWorkAuthorSummary(
entry: PlatformPublicGalleryCard,
): Promise<PublicUserSummary | null> {
@@ -1086,6 +1087,8 @@ export function PlatformEntryFlowShellImpl({
useState<SquareHoleRuntimeReturnStage>('square-hole-result');
const [isSquareHoleLoadingLibrary, setIsSquareHoleLoadingLibrary] =
useState(false);
const [squareHoleGenerationState, setSquareHoleGenerationState] =
useState<MiniGameDraftGenerationState | null>(null);
const [bigFishRun, setBigFishRun] =
useState<BigFishRuntimeSnapshotResponse | null>(null);
const [bigFishRuntimeShare, setBigFishRuntimeShare] = useState<{
@@ -1817,7 +1820,7 @@ export function PlatformEntryFlowShellImpl({
workspaceStage: 'square-hole-agent-workspace',
resultStage: 'square-hole-result',
platformStage: 'platform',
isCompileAction: (payload) => payload.action === 'square_hole_compile_draft',
isCompileAction: () => false,
resolveErrorMessage: resolveSquareHoleErrorMessage,
errorMessages: {
open: '开启方洞挑战共创工作台失败。',
@@ -1831,9 +1834,30 @@ export function PlatformEntryFlowShellImpl({
onSessionOpened: () => {
setShowCreationTypeModal(false);
},
beforeExecuteAction: ({ payload }) => {
if (payload.action === 'square_hole_compile_draft') {
setSquareHoleGenerationState(
createMiniGameDraftGenerationState('square-hole'),
);
setSelectionStage('square-hole-generating');
}
if (payload.action === 'square_hole_generate_visual_assets') {
setSquareHoleGenerationState((current) => ({
...(current ?? createMiniGameDraftGenerationState('square-hole')),
phase: 'square-hole-cover',
completedAssetCount: 0,
totalAssetCount: 0,
error: null,
}));
setSelectionStage('square-hole-generating');
}
},
onActionComplete: async ({ payload, response, setSession }) => {
setSession(response.session);
if (payload.action !== 'square_hole_compile_draft') {
if (
payload.action !== 'square_hole_compile_draft' &&
payload.action !== 'square_hole_generate_visual_assets'
) {
return;
}
@@ -1843,12 +1867,79 @@ export function PlatformEntryFlowShellImpl({
return;
}
if (payload.action === 'square_hole_compile_draft') {
try {
const assetResponse = await squareHoleCreationClient.executeAction(
response.session.sessionId,
{
action: 'square_hole_generate_visual_assets',
},
);
setSession(assetResponse.session);
const assetProfileId = assetResponse.session.draft?.profileId;
if (!assetProfileId) {
setSquareHoleProfile(
buildSquareHoleProfileFromSession(assetResponse.session),
);
setSelectionStage('square-hole-result');
return;
}
const { item } = await getSquareHoleWorkDetail(assetProfileId);
setSquareHoleProfile(item);
setSquareHoleGenerationState((current) => ({
...(current ?? createMiniGameDraftGenerationState('square-hole')),
phase: 'ready',
completedAssetCount: item.shapeOptions.length + 2,
totalAssetCount: item.shapeOptions.length + 2,
error: null,
}));
await refreshSquareHoleShelf().catch(() => undefined);
setSelectionStage('square-hole-result');
} catch (error) {
const errorMessage = resolveSquareHoleErrorMessage(
error,
'生成方洞挑战图片失败。',
);
setSquareHoleError(errorMessage);
setSquareHoleGenerationState((current) => ({
...(current ?? createMiniGameDraftGenerationState('square-hole')),
phase: 'failed',
error: errorMessage,
}));
setSquareHoleProfile(buildSquareHoleProfileFromSession(response.session));
setSelectionStage('square-hole-generating');
}
return;
}
try {
const { item } = await getSquareHoleWorkDetail(profileId);
setSquareHoleProfile(item);
setSquareHoleGenerationState((current) => ({
...(current ?? createMiniGameDraftGenerationState('square-hole')),
phase: 'ready',
completedAssetCount: item.shapeOptions.length + 2,
totalAssetCount: item.shapeOptions.length + 2,
error: null,
}));
await refreshSquareHoleShelf().catch(() => undefined);
setSelectionStage('square-hole-result');
} catch {
setSquareHoleProfile(buildSquareHoleProfileFromSession(response.session));
setSelectionStage('square-hole-result');
}
},
onActionError: ({ payload, errorMessage }) => {
if (
payload.action === 'square_hole_compile_draft' ||
payload.action === 'square_hole_generate_visual_assets'
) {
setSquareHoleGenerationState((current) => ({
...(current ?? createMiniGameDraftGenerationState('square-hole')),
phase: 'failed',
error: errorMessage,
}));
setSelectionStage('square-hole-generating');
}
},
});
@@ -2047,6 +2138,7 @@ export function PlatformEntryFlowShellImpl({
setSquareHoleProfile(null);
setSquareHoleRun(null);
setSquareHoleError(null);
setSquareHoleGenerationState(null);
setSquareHoleRuntimeReturnStage('square-hole-result');
setStreamingSquareHoleReplyText('');
setIsStreamingSquareHoleReply(false);
@@ -2162,6 +2254,7 @@ export function PlatformEntryFlowShellImpl({
setSquareHoleGalleryEntries([]);
setSquareHoleRun(null);
setSquareHoleRuntimeReturnStage('square-hole-result');
setSquareHoleGenerationState(null);
setSquareHoleError(null);
setStreamingSquareHoleReplyText('');
setIsStreamingSquareHoleReply(false);
@@ -2291,6 +2384,7 @@ export function PlatformEntryFlowShellImpl({
const leaveSquareHoleFlow = useCallback(() => {
setSquareHoleRun(null);
setSquareHoleRuntimeReturnStage('square-hole-result');
setSquareHoleGenerationState(null);
squareHoleFlow.leaveFlow();
}, [squareHoleFlow]);
@@ -2316,6 +2410,20 @@ export function PlatformEntryFlowShellImpl({
const executeSquareHoleAction = squareHoleFlow.executeAction;
const retrySquareHoleAssetGeneration = useCallback(() => {
const session = squareHoleSession;
if (!session?.draft?.profileId) {
void executeSquareHoleAction({
action: 'square_hole_compile_draft',
});
return;
}
void executeSquareHoleAction({
action: 'square_hole_generate_visual_assets',
});
}, [executeSquareHoleAction, squareHoleSession]);
const executePuzzleAction = puzzleFlow.executeAction;
const retryPuzzleDraftGeneration = useCallback(() => {
@@ -4013,6 +4121,7 @@ export function PlatformEntryFlowShellImpl({
return;
}
setSquareHoleGenerationState(null);
const restoredSession = await squareHoleFlow.restoreDraft(
item.sourceSessionId,
);
@@ -5583,6 +5692,50 @@ export function PlatformEntryFlowShellImpl({
</motion.div>
)}
{selectionStage === 'square-hole-generating' && (
<motion.div
key="square-hole-generating"
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -12 }}
className="flex h-full min-h-0 flex-col"
>
<Suspense
fallback={<LazyPanelFallback label="正在加载方洞挑战生成面板..." />}
>
<CustomWorldGenerationView
settingText={
squareHoleSession?.lastAssistantReply ??
'正在整理当前方洞挑战草稿。'
}
anchorEntries={buildSquareHoleGenerationAnchorEntries(
squareHoleSession,
)}
progress={buildMiniGameDraftGenerationProgress(
squareHoleGenerationState,
)}
isGenerating={isSquareHoleBusy}
error={squareHoleError}
onBack={leaveSquareHoleFlow}
onEditSetting={() => {
setSelectionStage('square-hole-agent-workspace');
}}
onRetry={retrySquareHoleAssetGeneration}
onInterrupt={undefined}
backLabel="返回创作中心"
settingActionLabel={null}
retryLabel="重新生成图片"
settingTitle="当前方洞挑战"
settingDescription={null}
progressTitle="方洞挑战图片生成进度"
activeBadgeLabel="图片生成中"
pausedBadgeLabel="图片生成已暂停"
idleBadgeLabel="等待返回结果页"
/>
</Suspense>
</motion.div>
)}
{selectionStage === 'square-hole-result' && squareHoleSession?.draft && (
<motion.div
key="square-hole-result"
src/components/platform-entry/platformEntryTypes.ts
+1
View File
@@ -26,6 +26,7 @@ export type SelectionStage =
| 'match3d-result'
| 'match3d-runtime'
| 'square-hole-agent-workspace'
| 'square-hole-generating'
| 'square-hole-result'
| 'square-hole-runtime'
| 'puzzle-agent-workspace'
src/components/rpg-entry/rpgEntryWorldPresentation.ts
+18 -2
View File
@@ -2,11 +2,15 @@ import type { BigFishWorkSummary } from '../../../packages/shared/src/contracts/
import type { Match3DWorkSummary } from '../../../packages/shared/src/contracts/match3dWorks';
import type { PuzzleDraftLevel } from '../../../packages/shared/src/contracts/puzzleAgentDraft';
import type { PuzzleWorkSummary } from '../../../packages/shared/src/contracts/puzzleWorkSummary';
import type { SquareHoleWorkSummary } from '../../../packages/shared/src/contracts/squareHoleWorks';
import type {
CustomWorldGalleryCard,
CustomWorldLibraryEntry,
} from '../../../packages/shared/src/contracts/runtime';
import type {
SquareHoleHoleOption,
SquareHoleShapeOption,
SquareHoleWorkSummary,
} from '../../../packages/shared/src/contracts/squareHoleWorks';
import { buildCustomWorldPlayableCharacters } from '../../data/characterPresets';
import { resolveCustomWorldCampSceneImage } from '../../data/customWorldVisuals';
import {
@@ -112,6 +116,12 @@ export type PlatformSquareHoleGalleryCard = {
subtitle: string;
summaryText: string;
coverImageSrc: string | null;
backgroundPrompt?: string;
backgroundImageSrc?: string | null;
shapeOptions?: SquareHoleShapeOption[];
holeOptions?: SquareHoleHoleOption[];
shapeCount?: number;
difficulty?: number;
themeTags: string[];
playCount?: number;
remixCount?: number;
@@ -224,9 +234,15 @@ export function mapSquareHoleWorkToPlatformGalleryCard(
ownerUserId: work.ownerUserId,
authorDisplayName: '玩家',
worldName: work.gameName,
subtitle: '反直觉形状分拣',
subtitle: work.twistRule || '反直觉形状分拣',
summaryText: work.summary,
coverImageSrc: work.coverImageSrc ?? null,
backgroundPrompt: work.backgroundPrompt,
backgroundImageSrc: work.backgroundImageSrc ?? null,
shapeOptions: work.shapeOptions,
holeOptions: work.holeOptions,
shapeCount: work.shapeCount,
difficulty: work.difficulty,
themeTags:
work.tags.length > 0 ? work.tags : [work.themeText, '方洞挑战'],
playCount: work.playCount ?? 0,
src/components/square-hole-result/SquareHoleResultView.tsx
+433 -1
View File
File diff suppressed because it is too large Load Diff
src/components/square-hole-runtime/SquareHoleRuntimeShell.tsx
+25 -5
View File
@@ -15,6 +15,7 @@ import type {
SquareHoleHoleSnapshot,
SquareHoleRunSnapshot,
} from '../../../packages/shared/src/contracts/squareHoleRuntime';
import { ResolvedAssetImage } from '../ResolvedAssetImage';
type SquareHoleRuntimeShellProps = {
run: SquareHoleRunSnapshot | null;
@@ -241,7 +242,17 @@ export function SquareHoleRuntimeShell({
return (
<main className="relative flex min-h-dvh w-full justify-center overflow-hidden bg-[#101827] text-white">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_10%,rgba(125,211,252,0.32),transparent_27%),radial-gradient(circle_at_80%_80%,rgba(248,113,113,0.24),transparent_34%),linear-gradient(180deg,#1f3a5f_0%,#152238_48%,#111827_100%)]" />
{run.backgroundImageSrc ? (
<ResolvedAssetImage
src={run.backgroundImageSrc}
alt=""
aria-hidden="true"
className="absolute inset-0 h-full w-full object-cover"
/>
) : (
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_10%,rgba(125,211,252,0.32),transparent_27%),radial-gradient(circle_at_80%_80%,rgba(248,113,113,0.24),transparent_34%),linear-gradient(180deg,#1f3a5f_0%,#152238_48%,#111827_100%)]" />
)}
<div className="absolute inset-0 bg-slate-950/42" />
<div
className="relative flex min-h-dvh min-w-0 flex-col overflow-hidden px-3 pb-[calc(env(safe-area-inset-bottom,0px)+0.8rem)] pt-[calc(env(safe-area-inset-top,0px)+0.65rem)]"
style={{
@@ -287,14 +298,14 @@ export function SquareHoleRuntimeShell({
<section className="mt-3 rounded-[1.5rem] border border-white/14 bg-black/18 p-3 shadow-[0_18px_42px_rgba(15,23,42,0.28)] backdrop-blur">
<div className="flex items-center justify-between gap-2 text-xs font-bold text-white/68">
<span>{run.ruleLabel}</span>
<span>v{run.snapshotVersion}</span>
<span>当前形状</span>
<span>{progressText}</span>
</div>
<div className="mt-3 flex min-h-[12rem] items-center justify-center rounded-[1.35rem] border border-white/10 bg-white/10">
{currentShape ? (
<div className="flex flex-col items-center gap-3">
<div
className={`h-24 w-24 shadow-[0_18px_38px_rgba(15,23,42,0.34)] ${getShapePreviewClass(
className={`relative h-24 w-24 overflow-hidden shadow-[0_18px_38px_rgba(15,23,42,0.34)] ${getShapePreviewClass(
currentShape.shapeKind,
)}`}
style={{
@@ -302,7 +313,16 @@ export function SquareHoleRuntimeShell({
currentShape.color ||
'linear-gradient(135deg,#f8fafc,#38bdf8)',
}}
/>
>
{currentShape.imageSrc ? (
<ResolvedAssetImage
src={currentShape.imageSrc}
alt=""
aria-hidden="true"
className="h-full w-full object-cover"
/>
) : null}
</div>
<div className="flex items-center gap-2 text-base font-black">
<Shapes size={18} />
<span>{currentShape.label}</span>
src/services/miniGameDraftGenerationProgress.ts
+106 -3
View File
@@ -7,9 +7,10 @@ import type {
CustomWorldGenerationProgress,
CustomWorldGenerationStep,
} from '../../packages/shared/src/contracts/runtime';
import type { SquareHoleSessionSnapshot } from '../../packages/shared/src/contracts/squareHoleAgent';
import type { CustomWorldStructuredAnchorEntry } from './customWorldAgentGenerationProgress';
export type MiniGameDraftGenerationKind = 'puzzle' | 'big-fish';
export type MiniGameDraftGenerationKind = 'puzzle' | 'big-fish' | 'square-hole';
export type MiniGameDraftGenerationPhase =
| 'idle'
@@ -17,6 +18,10 @@ export type MiniGameDraftGenerationPhase =
| 'big-fish-draft'
| 'big-fish-levels'
| 'big-fish-runtime'
| 'square-hole-draft'
| 'square-hole-cover'
| 'square-hole-shapes'
| 'square-hole-ready'
| 'puzzle-images'
| 'puzzle-select-image'
| 'ready'
@@ -86,12 +91,39 @@ const BIG_FISH_STEPS = [
},
] as const satisfies ReadonlyArray<MiniGameStepDefinition>;
const SQUARE_HOLE_STEPS = [
{
id: 'square-hole-draft',
label: '整理玩法草稿',
detail: '收拢题材、形状、洞口与加分选项。',
weight: 28,
},
{
id: 'square-hole-cover',
label: '生成封面与背景',
detail: '生成作品封面和运行背景。',
weight: 32,
},
{
id: 'square-hole-shapes',
label: '生成形状贴图',
detail: '为每个可投放形状生成贴图。',
weight: 40,
},
] as const satisfies ReadonlyArray<MiniGameStepDefinition>;
function clampProgress(value: number) {
return Math.max(0, Math.min(100, Math.round(value)));
}
function getStepDefinitions(kind: MiniGameDraftGenerationKind) {
return kind === 'puzzle' ? PUZZLE_STEPS : BIG_FISH_STEPS;
if (kind === 'puzzle') {
return PUZZLE_STEPS;
}
if (kind === 'square-hole') {
return SQUARE_HOLE_STEPS;
}
return BIG_FISH_STEPS;
}
function getActiveStepIndex(
@@ -132,7 +164,12 @@ export function createMiniGameDraftGenerationState(
): MiniGameDraftGenerationState {
return {
kind,
phase: kind === 'big-fish' ? 'big-fish-draft' : 'compile',
phase:
kind === 'big-fish'
? 'big-fish-draft'
: kind === 'square-hole'
? 'square-hole-draft'
: 'compile',
startedAtMs: Date.now(),
completedAssetCount: 0,
totalAssetCount: 0,
@@ -152,6 +189,18 @@ function resolveBigFishPhaseByElapsedMs(
return 'big-fish-draft';
}
function resolveSquareHolePhaseByElapsedMs(
elapsedMs: number,
): MiniGameDraftGenerationPhase {
if (elapsedMs >= 6_500) {
return 'square-hole-shapes';
}
if (elapsedMs >= 2_400) {
return 'square-hole-cover';
}
return 'square-hole-draft';
}
export function buildMiniGameDraftGenerationProgress(
state: MiniGameDraftGenerationState | null,
nowMs = Date.now(),
@@ -169,6 +218,13 @@ export function buildMiniGameDraftGenerationProgress(
...state,
phase: resolveBigFishPhaseByElapsedMs(elapsedMs),
}
: state.kind === 'square-hole' &&
state.phase !== 'failed' &&
state.phase !== 'ready'
? {
...state,
phase: resolveSquareHolePhaseByElapsedMs(elapsedMs),
}
: state;
const steps = getStepDefinitions(normalizedState.kind);
@@ -190,6 +246,8 @@ export function buildMiniGameDraftGenerationProgress(
? 1
: normalizedState.kind === 'big-fish'
? 0.55
: normalizedState.kind === 'square-hole'
? 0.42
: 0;
const overallProgress =
normalizedState.phase === 'failed'
@@ -223,6 +281,8 @@ export function buildMiniGameDraftGenerationProgress(
? 0
: normalizedState.kind === 'big-fish'
? Math.max(0, 7_000 - elapsedMs)
: normalizedState.kind === 'square-hole'
? Math.max(0, 12_000 - elapsedMs)
: null,
activeStepIndex,
steps: buildMiniGameProgressSteps(steps, activeStepIndex, normalizedState),
@@ -306,3 +366,46 @@ export function buildBigFishGenerationAnchorEntries(
}))
.filter((entry) => entry.value.trim());
}
export function buildSquareHoleGenerationAnchorEntries(
session: SquareHoleSessionSnapshot | null | undefined,
): CustomWorldStructuredAnchorEntry[] {
if (!session) {
return [];
}
const draft = session.draft;
const shapeCount =
draft?.shapeOptions.filter((option) => option.imageSrc?.trim()).length ??
session.config.shapeOptions.filter((option) => option.imageSrc?.trim())
.length;
const totalShapeCount =
draft?.shapeOptions.length || session.config.shapeOptions.length;
const entries: Array<MiniGameAnchorSource | null> = [
{
key: 'square-hole-title',
label: '作品名称',
value: draft?.gameName || `${session.config.themeText}方洞挑战`,
},
{
key: 'square-hole-theme',
label: '题材与规则',
value: `${session.config.themeText}｜${session.config.twistRule}`,
},
{
key: 'square-hole-options',
label: '选项资产',
value: totalShapeCount > 0 ? `形状贴图 ${shapeCount}/${totalShapeCount}` : '',
},
];
return entries
.filter((entry): entry is MiniGameAnchorSource => Boolean(entry))
.map((entry) => ({
id: entry.key,
label: entry.label,
value: entry.value,
}))
.filter((entry) => entry.value.trim());
}