feat: add generation cancel job functionality and improve job handling

- Introduced `generationCancelJob` command ID in `commands/ids.ts`.
- Added `GenerationCancelJobPayload` type in `commands/payloads.ts`.
- Enhanced job status to include "cancelled" in `editor/state.ts`.
- Updated `runGenerationJob` to accept an `AbortSignal` and handle cancellation.
- Implemented cancellation logic in `runGenerate` and related functions.
- Added tests for job cancellation in `operations/generation/workflow.test.ts`.
- Improved layer rendering logic to prevent stack overflow in `editor/document-indexes.ts`.
- Added raster size assertions in `platform/browser/rasterLimits.ts` for image processing limits.
- Enhanced image file handling to check for size limits in `platform/browser/imageFiles.ts`.
- Updated UI components to reflect job cancellation state in `view/GenerationJobStatus.tsx` and `view/bottom-controls/GenerateActionControls.tsx`.

commands/generation.ts

@@ -43,10 +43,12 @@ export type GenerationReplaceCandidatePixelsPayload = {
 export type GenerationStartJobPayload = { jobId: GenerationJobId; kind: GenerationJobKind; label: string; startedAt: number };
 export type GenerationSucceedJobPayload = { jobId: GenerationJobId; finishedAt: number };
 export type GenerationFailJobPayload = { jobId: GenerationJobId; finishedAt: number; error: string };
+export type GenerationCancelJobPayload = { jobId: GenerationJobId; finishedAt: number };
 export type GenerationSetResourcesPayload = { options: GenerationOptions };
 export type GenerationFailResourcesPayload = { error: string };
 
 const maxCandidates = 12;
+const maxCandidateSourceBytes = 96 * 1024 * 1024;
 const maxJobs = 20;
 const generationCompareModes = new Set<GenerationCompareMode>(["result", "before", "split"]);
 
@@ -55,7 +57,7 @@ export const generationAddCandidateCommand: Command<GenerationAddCandidatePayloa
   name: "Add generation candidate",
   history: { mode: "ignore" },
   execute({ state }, payload) {
-    const candidates = [payload.candidate, ...state.editor.generation.candidates.filter((candidate) => candidate.id !== payload.candidate.id)].slice(0, maxCandidates);
+    const candidates = retainCandidateBudget([payload.candidate, ...state.editor.generation.candidates.filter((candidate) => candidate.id !== payload.candidate.id)]);
     return {
       ...state,
       editor: {
@@ -277,6 +279,15 @@ export const generationFailJobCommand: Command<GenerationFailJobPayload> = {
   },
 };
 
+export const generationCancelJobCommand: Command<GenerationCancelJobPayload> = {
+  id: commandIds.generationCancelJob,
+  name: "Cancel generation job",
+  history: { mode: "ignore" },
+  execute({ state }, payload) {
+    return settleJob(state, payload.jobId, payload.finishedAt, "cancelled");
+  },
+};
+
 export const generationLoadResourcesCommand: Command = {
   id: commandIds.generationLoadResources,
   name: "Load generation resources",
@@ -318,6 +329,7 @@ export const generationCommands = [
   generationStartJobCommand,
   generationSucceedJobCommand,
   generationFailJobCommand,
+  generationCancelJobCommand,
   generationLoadResourcesCommand,
   generationSetResourcesCommand,
   generationFailResourcesCommand,
@@ -331,13 +343,31 @@ function updateResources(state: AppState, resources: GenerationState["resources"
   return { ...state, editor: { ...state.editor, generation: { ...state.editor.generation, resources } } };
 }
 
-function settleJob(state: AppState, jobId: GenerationJobId, finishedAt: number, status: "succeeded" | "failed", error?: string): AppState {
+function settleJob(state: AppState, jobId: GenerationJobId, finishedAt: number, status: "succeeded" | "failed" | "cancelled", error?: string): AppState {
   if (!Number.isFinite(finishedAt)) return state;
   const job = state.editor.generation.jobs.find((candidate) => candidate.id === jobId);
   if (!job || job.status !== "running" || finishedAt < job.startedAt) return state;
   return updateJobs(state, state.editor.generation.jobs.map((candidate) => candidate.id === jobId ? { ...candidate, status, finishedAt, error } : candidate));
 }
 
+function retainCandidateBudget(candidates: GenerationCandidate[]): GenerationCandidate[] {
+  const retained: GenerationCandidate[] = [];
+  let bytes = 0;
+  for (const candidate of candidates) {
+    const candidateBytes = candidateRetainedBytes(candidate);
+    if (retained.length > 0 && bytes + candidateBytes > maxCandidateSourceBytes) continue;
+    retained.push(candidate);
+    bytes += candidateBytes;
+    if (retained.length >= maxCandidates) break;
+  }
+  return retained;
+}
+
+function candidateRetainedBytes(candidate: GenerationCandidate): number {
+  return [candidate.source, candidate.inputImage, candidate.maskImage, candidate.inpaint?.inputImage, candidate.inpaint?.maskImage]
+    .reduce((total, source) => total + (source?.length ?? 0) * 2, 0);
+}
+
 type LayerLocation = {
   artboardId: ArtboardId;
   layer: Layer;