Deploy Mplus Studio

.gitattributes

@@ -40,3 +40,6 @@ docs/demo-menu-result-20260531022723.png filter=lfs diff=lfs merge=lfs -text
 e2e/fixtures/menu-burger.jpg filter=lfs diff=lfs merge=lfs -text
 e2e/fixtures/menu-drink.jpg filter=lfs diff=lfs merge=lfs -text
 e2e/fixtures/menu-fries.jpg filter=lfs diff=lfs merge=lfs -text
+public/demo-menu-burger.jpg filter=lfs diff=lfs merge=lfs -text
+public/demo-menu-drink.jpg filter=lfs diff=lfs merge=lfs -text
+public/demo-menu-fries.jpg filter=lfs diff=lfs merge=lfs -text

e2e/studio-flow.spec.ts

@@ -36,7 +36,7 @@ test('generates a real menu deal image through Kaggle', async ({ page }) => {
   await page.goto('/');
   await waitForDemo();
 
-  await expect(page.getByRole('heading', { name: 'Maak betere productbeelden.' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Maak een menu-afbeelding.' })).toBeVisible();
   await expect(page.getByRole('button', { name: 'Maak nieuwe beelden' })).toBeDisabled();
 
   await page.locator('input[type="file"]:not([webkitdirectory])').setInputFiles(demoImagePaths);
@@ -47,9 +47,9 @@ test('generates a real menu deal image through Kaggle', async ({ page }) => {
   await expect(page.getByText('menu-fries.jpg')).toBeVisible();
 
   await page.getByLabel('Type beeld').selectOption('menu');
-  await page.getByLabel('Preset').selectOption('studio');
+  await page.getByLabel('Stijl').selectOption('studio');
   await page.getByLabel('Formaat').selectOption('1:1');
-  await page.getByLabel('Gewenste uitstraling').fill(prompt);
+  await page.getByLabel('Instructie').fill(prompt);
   await waitForDemo();
 
   const generationResponsePromise = page.waitForResponse('http://127.0.0.1:3000/api/generations', { timeout: 7_200_000 });

src/app/app.component.spec.ts

@@ -13,8 +13,8 @@ describe('App component', () => {
   it('renders the studio shell and disabled generate button', () => {
     const text = fixture.nativeElement.textContent.replace(/\s+/g, ' ').trim();
 
-    expect(text).toContain('MplusKassa Studio MVP');
-    expect(text).toContain('Maak betere productbeelden.');
+    expect(text).toContain('MplusKassa Studio');
+    expect(text).toContain('Maak een menu-afbeelding.');
     expect(fixture.nativeElement.querySelector('.primary').disabled).toBe(true);
   });
 });

src/app/app.html

@@ -1,15 +1,15 @@
 <main class="studio-shell">
   <nav class="top-bar" aria-label="Studio status">
     <strong>MplusKassa Studio</strong>
-    <span>Productafbeeldingen maken</span>
+    <span>Menu deal staat klaar</span>
   </nav>
 
   <section class="workflow-board" aria-label="Beeldworkflow">
     <header class="board-header">
       <div>
-        <p class="eyebrow">Begeleide beeldstudio</p>
-        <h1>Maak betere productbeelden.</h1>
-        <p class="intro">Upload bestaande foto’s. Kies wat je nodig hebt. Controleer daarna rustig het nieuwe verkoopbeeld.</p>
+        <p class="eyebrow">Stap 1 / beeldbron</p>
+        <h1>Maak een menu-afbeelding.</h1>
+        <p class="intro">Start met het voorbeeldmenu of kies eigen foto’s. Daarna maakt Studio één vierkante compositie.</p>
       </div>
       <p class="next-action">{{ nextAction() }}</p>
     </header>
@@ -28,9 +28,27 @@
 
       <section class="action-panel" aria-label="Volgende actie">
         <div class="task-heading">
-          <p class="eyebrow">Huidige taak</p>
-          <h2>Lever je beste referentiefoto’s aan</h2>
-          <p>De Studio gebruikt deze beelden als bron. Voor een menu deal werkt één hoofdproduct, één drankje en één bijgerecht het best.</p>
+          <p class="eyebrow">Snel starten</p>
+          <h2>Gebruik het voorbeeldmenu</h2>
+          <p>Laadt direct burger, drank en friet. Geen instellingen nodig om de eerste generatie te testen.</p>
+        </div>
+
+        <button
+          class="example-menu"
+          type="button"
+          (click)="onUseExampleMenu()"
+        >Gebruik voorbeeldmenu</button>
+
+        <div class="example-strip" aria-label="Voorbeeldbeelden">
+          @for (exampleImage of exampleImages; track exampleImage.name) {
+            <figure>
+              <img
+                [src]="exampleImage.url"
+                [alt]="exampleImage.label"
+              />
+              <figcaption>{{ exampleImage.label }}</figcaption>
+            </figure>
+          }
         </div>
 
         <div class="upload-card">
@@ -71,7 +89,7 @@
           </label>
 
           <label>
-            Preset
+            Stijl
             <select
               [ngModel]="preset()"
               (ngModelChange)="preset.set($event)"
@@ -96,7 +114,7 @@
           </label>
 
           <label class="prompt-field">
-            Gewenste uitstraling
+            Instructie
             <textarea
               [ngModel]="prompt()"
               (ngModelChange)="prompt.set($event)"

src/app/app.scss

@@ -1,89 +1,88 @@
-:host { display: block; min-height: 100dvh; color: #261f1a; background: radial-gradient(circle at top left, #fff4e7 0, transparent 34rem), #f7efe4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
-.studio-shell { width: min(1240px, calc(100% - 28px)); margin: 0 auto; padding: 14px 0 34px; }
-.top-bar { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 12px; padding: 11px 14px; border: 1px solid rgba(83, 55, 31, 0.13); border-radius: 18px; background: rgba(255, 252, 247, 0.76); box-shadow: 0 16px 40px rgba(90, 55, 23, 0.08); backdrop-filter: blur(14px); }
-.top-bar strong { font-size: 0.95rem; letter-spacing: -0.02em; }
-.top-bar span { color: #765f4d; font-size: 0.88rem; font-weight: 700; }
-.workflow-board, .empty-state, .image-card { border: 1px solid rgba(83, 55, 31, 0.13); border-radius: 24px; background: rgba(255, 252, 247, 0.9); box-shadow: 0 22px 70px rgba(92, 61, 28, 0.1); }
-.workflow-board { min-height: calc(100dvh - 82px); padding: clamp(16px, 2vw, 26px); display: grid; grid-template-rows: auto 1fr; gap: 20px; }
-.board-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 390px); gap: 24px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid rgba(83, 55, 31, 0.12); }
-.eyebrow { margin: 0 0 8px; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; color: #c7471a; }
+:host { display: block; min-height: 100dvh; color: #111; background: #f4f4f1; font-family: Arial, Helvetica, sans-serif; }
+.studio-shell { width: min(1180px, calc(100% - 24px)); margin: 0 auto; padding: 12px 0 32px; }
+.top-bar, .workflow-board, .empty-state, .image-card { border: 1px solid #111; background: #fff; }
+.top-bar { display: grid; grid-template-columns: 1fr auto; gap: 16px; margin-bottom: 12px; padding: 10px 12px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
+.top-bar span { color: #666; }
+.workflow-board { min-height: calc(100dvh - 72px); display: grid; grid-template-rows: auto 1fr; }
+.board-header { display: grid; grid-template-columns: minmax(0, 1fr) 320px; border-bottom: 1px solid #111; }
+.board-header > div { padding: 18px; }
+.eyebrow { margin: 0 0 10px; color: #e42313; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
 h1, h2, p { margin: 0; }
-h1 { max-width: 780px; font-size: clamp(2.25rem, 5.4vw, 5rem); line-height: 0.9; letter-spacing: -0.07em; }
-.intro { max-width: 58ch; margin-top: 14px; color: #715c4a; font-size: clamp(1rem, 1.45vw, 1.18rem); line-height: 1.55; }
-.next-action { align-self: stretch; display: grid; align-content: center; padding: 16px 18px; border-left: 4px solid #d95b27; border-radius: 18px; background: linear-gradient(135deg, #fff2e7, #f7ddc6); color: #5f2b13; font-weight: 900; line-height: 1.35; }
-.workflow-grid { display: grid; grid-template-columns: 230px minmax(420px, 1fr) 292px; gap: 16px; min-height: 0; }
+h1 { max-width: 680px; font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: 0.86; letter-spacing: -0.07em; }
+.intro { max-width: 54ch; margin-top: 14px; color: #444; font-size: 1rem; line-height: 1.45; }
+.next-action { display: grid; align-content: end; padding: 18px; border-left: 1px solid #111; background: #e42313; color: #fff; font-size: 1.04rem; font-weight: 900; line-height: 1.22; }
+.workflow-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr) 250px; min-height: 0; }
 .step-rail, .action-panel, .proof-panel { min-height: 0; }
-.monitor-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
-.monitor-steps li { position: relative; display: grid; gap: 5px; padding: 14px 14px 14px 18px; border: 1px solid rgba(83, 55, 31, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.56); color: #746555; }
-.monitor-steps li::before { content: ""; position: absolute; inset: 14px auto 14px 8px; width: 3px; border-radius: 10px; background: #ddc7b3; }
-.monitor-steps li.active { border-color: rgba(217, 91, 39, 0.35); background: #fff1e5; color: #8f3515; }
-.monitor-steps li.active::before { background: #d95b27; }
-.monitor-steps li.completed { border-color: rgba(78, 140, 77, 0.32); background: #eef8ed; color: #2e6d32; }
-.monitor-steps li.completed::before { background: #4e8c4d; }
-.monitor-steps li.failed { border-color: #c93626; background: #c93626; color: white; }
-.monitor-steps span { font-size: 0.82rem; line-height: 1.35; }
-.action-panel { display: grid; gap: 14px; align-content: start; }
-.task-heading { padding: 18px; border-radius: 22px; background: #2f251e; color: #fff8ef; }
-.task-heading h2 { font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.05; letter-spacing: -0.04em; }
-.task-heading p:last-child { max-width: 62ch; margin-top: 10px; color: #e2cdb9; line-height: 1.5; }
-.upload-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-.upload-card label { min-height: 132px; display: grid; place-content: center; gap: 6px; cursor: pointer; border: 1px dashed rgba(83, 55, 31, 0.24); border-radius: 22px; background: #fffaf4; text-align: center; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; }
-.upload-card label:hover { border-color: #d95b27; background: #fff0e4; transform: translateY(-1px); }
-.upload-card label:active, button:active:not(:disabled) { transform: translateY(1px); }
+.step-rail { border-right: 1px solid #111; background: #f8f8f5; }
+.monitor-steps { display: grid; margin: 0; padding: 0; list-style: none; }
+.monitor-steps li { display: grid; gap: 5px; padding: 12px; border-bottom: 1px solid #111; color: #666; }
+.monitor-steps li.active { background: #111; color: #fff; }
+.monitor-steps li.completed { background: #e8f1e4; color: #16551b; }
+.monitor-steps li.failed { background: #e42313; color: #fff; }
+.monitor-steps strong { font-size: 0.9rem; }
+.monitor-steps span { font-size: 0.76rem; line-height: 1.28; }
+.action-panel { display: grid; gap: 12px; align-content: start; padding: 12px; }
+.task-heading { display: grid; gap: 8px; padding: 14px; border: 1px solid #111; background: #f8f8f5; }
+.task-heading h2 { font-size: clamp(1.4rem, 2.5vw, 2.4rem); line-height: 0.95; letter-spacing: -0.05em; }
+.task-heading p:last-child { max-width: 56ch; color: #444; line-height: 1.4; }
+.example-menu { min-height: 52px; background: #111; color: #fff; }
+.example-menu:hover { background: #e42313; }
+.example-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid #111; border-right: 0; }
+.example-strip figure { border: 0; border-right: 1px solid #111; }
+.example-strip img { aspect-ratio: 1 / 1; }
+.upload-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid #111; border-bottom: 0; }
+.upload-card label { min-height: 92px; display: grid; place-content: center; gap: 5px; cursor: pointer; border-bottom: 1px solid #111; background: #fff; text-align: center; transition: background 120ms ease, color 120ms ease; }
+.upload-card label + label { border-left: 1px solid #111; }
+.upload-card label:hover { background: #f3f3ef; }
 .upload-card input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
-.upload-card span { font-size: 1.08rem; font-weight: 900; }
-.upload-card small, .note, .image-card header p { color: #7c6c5e; }
-.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
+.upload-card span { font-weight: 900; }
+.upload-card small, .note, .image-card header p { color: #666; }
+.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid #111; border-left: 1px solid #111; }
 .prompt-field, .primary { grid-column: 1 / -1; }
-label { display: grid; gap: 7px; font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: #6c5746; }
+label { display: grid; gap: 6px; padding: 10px; border-right: 1px solid #111; border-bottom: 1px solid #111; font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.09em; color: #555; }
 select, textarea, button { font: inherit; }
-select, textarea { width: 100%; border: 1px solid rgba(83, 55, 31, 0.17); border-radius: 14px; padding: 11px 12px; background: #fffaf4; color: #261f1a; text-transform: none; letter-spacing: normal; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
-select:focus, textarea:focus { border-color: #d95b27; box-shadow: 0 0 0 3px rgba(217, 91, 39, 0.15); background: white; }
-textarea { min-height: 78px; resize: vertical; line-height: 1.45; }
-button { border: 0; border-radius: 999px; padding: 12px 16px; font-weight: 900; cursor: pointer; transition: background 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
+select, textarea { width: 100%; border: 1px solid #bbb; border-radius: 0; padding: 9px; background: #fff; color: #111; text-transform: none; letter-spacing: normal; outline: none; }
+select:focus, textarea:focus { border-color: #e42313; box-shadow: 0 0 0 2px rgba(228, 35, 19, 0.14); }
+textarea { min-height: 66px; resize: vertical; line-height: 1.35; }
+button { border: 1px solid #111; border-radius: 0; padding: 11px 14px; font-weight: 900; cursor: pointer; transition: background 120ms ease, color 120ms ease, opacity 120ms ease; }
 button:disabled { cursor: not-allowed; opacity: 0.5; }
-.primary { min-height: 48px; background: #d95b27; color: white; box-shadow: 0 12px 28px rgba(217, 91, 39, 0.25); }
-.primary:hover:not(:disabled) { background: #be4317; box-shadow: 0 16px 34px rgba(217, 91, 39, 0.3); }
-.proof-panel { padding: 16px; border: 1px solid rgba(83, 55, 31, 0.12); border-radius: 22px; background: #fffaf4; }
-.proof-panel h2 { font-size: 1.22rem; line-height: 1.12; letter-spacing: -0.035em; }
-.proof-panel dl { display: grid; gap: 10px; margin: 18px 0 0; }
-.proof-panel div { padding-top: 10px; border-top: 1px solid rgba(83, 55, 31, 0.12); }
-dt { font-size: 0.66rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; color: #8a7768; }
+.primary { min-height: 46px; background: #e42313; color: #fff; }
+.primary:hover:not(:disabled) { background: #111; }
+.proof-panel { padding: 12px; border-left: 1px solid #111; background: #f8f8f5; }
+.proof-panel h2 { font-size: 1.08rem; line-height: 1.08; letter-spacing: -0.025em; }
+.proof-panel dl { display: grid; margin: 16px 0 0; border-top: 1px solid #111; }
+.proof-panel div { padding: 10px 0; border-bottom: 1px solid #111; }
+dt { font-size: 0.64rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #666; }
 dd { margin: 3px 0 0; overflow: hidden; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
-details { margin-top: 18px; border-top: 1px solid rgba(83, 55, 31, 0.12); padding-top: 12px; }
-summary { cursor: pointer; font-size: 0.82rem; font-weight: 900; color: #6c5746; }
-details ol { display: grid; gap: 7px; margin: 10px 0 0; padding-left: 18px; color: #756553; font-size: 0.84rem; line-height: 1.35; }
-.empty-state, .status-message { margin-top: 12px; padding: 18px; }
-.empty-state { background: #fffaf4; }
-.status-message { border-radius: 18px; background: #c93626; color: white; font-weight: 900; }
-.image-grid { display: grid; gap: 14px; margin-top: 14px; }
-.image-card { padding: 16px; }
-.image-card header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
+details { margin-top: 14px; padding-top: 12px; border-top: 1px solid #111; }
+summary { cursor: pointer; font-size: 0.82rem; font-weight: 900; }
+details ol { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 18px; color: #555; font-size: 0.8rem; line-height: 1.3; }
+.empty-state, .status-message { margin-top: 12px; padding: 16px; }
+.status-message { background: #e42313; color: #fff; font-weight: 900; }
+.image-grid { display: grid; gap: 12px; margin-top: 12px; }
+.image-card { padding: 12px; }
+.image-card header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
 .image-card h2 { overflow: hidden; max-width: 520px; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
-.ghost, .variant-row button { background: #fffaf4; color: #261f1a; border: 1px solid rgba(83, 55, 31, 0.14); }
+.ghost, .variant-row button { background: #fff; color: #111; }
 .preview-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-figure { margin: 0; overflow: hidden; border: 1px solid rgba(83, 55, 31, 0.12); border-radius: 18px; background: #eadbc9; }
+figure { margin: 0; overflow: hidden; border: 1px solid #111; background: #ddd; }
 img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
-figcaption { padding: 9px 11px; font-size: 0.78rem; font-weight: 900; color: #6c5746; }
-.generated { background: #30261f; }
+figcaption { padding: 8px 10px; border-top: 1px solid #111; background: #fff; font-size: 0.76rem; font-weight: 900; color: #333; }
+.generated { background: #111; }
 .variant-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
-.variant-row button:hover, .ghost:hover { background: #fff0e4; }
-.variant-row button.active { background: #2f251e; color: white; border-color: #2f251e; }
-.note { margin-top: 12px; font-size: 0.92rem; line-height: 1.45; }
+.variant-row button:hover, .ghost:hover { background: #f3f3ef; }
+.variant-row button.active { background: #111; color: #fff; }
+.note { margin-top: 12px; font-size: 0.9rem; line-height: 1.4; }
 
 @media (max-width: 980px) {
   .workflow-board { min-height: auto; }
   .board-header, .workflow-grid, .preview-pair { grid-template-columns: 1fr; }
-  .workflow-grid { gap: 14px; }
-  .step-rail { order: 2; }
-  .proof-panel { order: 3; }
+  .next-action, .proof-panel, .step-rail { border-left: 0; border-right: 0; }
 }
 
 @media (max-width: 640px) {
-  .studio-shell { width: min(100% - 20px, 720px); padding-top: 10px; }
-  .top-bar { align-items: flex-start; flex-direction: column; border-radius: 16px; }
-  .workflow-board, .image-card, .empty-state { border-radius: 20px; }
-  .workflow-board { padding: 14px; }
-  .upload-card, .controls { grid-template-columns: 1fr; }
-  h1 { font-size: clamp(2.2rem, 14vw, 3.6rem); }
+  .studio-shell { width: min(100% - 18px, 720px); padding-top: 9px; }
+  .top-bar, .upload-card, .controls, .example-strip { grid-template-columns: 1fr; }
+  .upload-card label + label, .example-strip figure { border-left: 0; }
+  h1 { font-size: clamp(2.3rem, 16vw, 3.8rem); }
 }

src/app/app.ts

@@ -3,6 +3,12 @@ import { Component, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { createImages, releaseImage, StudioImage } from './image-file';
 
+type ExampleImage = {
+  name: string;
+  label: string;
+  url: string;
+};
+
 type Variant = {
   id: string;
   label: string;
@@ -77,11 +83,11 @@ function getGenerationEndpoint(): string {
 export class App {
   protected readonly images = signal<StudioImage[]>([]);
   protected readonly prompt = signal(
-    'Maak hiervan een professionele productfoto met mooi licht, scherpe details en een realistische schaduw',
+    'Maak een professionele fastfood menu deal met burger, drinken en friet op een schone witte menu-achtergrond',
   );
   protected readonly preset = signal('studio');
-  protected readonly ratio = signal('16:9');
-  protected readonly mode = signal<'product' | 'menu'>('product');
+  protected readonly ratio = signal('1:1');
+  protected readonly mode = signal<'product' | 'menu'>('menu');
   protected readonly isGenerating = signal(false);
   protected readonly generationError = signal<string | undefined>(undefined);
   protected readonly monitor = signal<MonitorState>({
@@ -112,6 +118,11 @@ export class App {
       note: 'Meer diepte, luxe uitstraling en sterke schaduw.',
     },
   ];
+  protected readonly exampleImages: ExampleImage[] = [
+    { name: 'demo-menu-burger.jpg', label: 'Burger', url: '/demo-menu-burger.jpg' },
+    { name: 'demo-menu-drink.jpg', label: 'Drank', url: '/demo-menu-drink.jpg' },
+    { name: 'demo-menu-fries.jpg', label: 'Friet', url: '/demo-menu-fries.jpg' },
+  ];
 
   protected readonly hasImages = computed(() => this.images().length > 0);
   public readonly selectedImageCountLabel = computed(() => {
@@ -185,6 +196,28 @@ export class App {
     input.value = '';
   }
 
+  protected async onUseExampleMenu(): Promise<void> {
+    const files: File[] = [];
+    for (const exampleImage of this.exampleImages) {
+      const response = await fetch(exampleImage.url);
+      const imageBlob = await response.blob();
+      files.push(new File([imageBlob], exampleImage.name, { type: imageBlob.type }));
+    }
+
+    this.releaseCurrentImages();
+    this.mode.set('menu');
+    this.preset.set('studio');
+    this.ratio.set('1:1');
+    this.prompt.set('Maak een professionele fastfood menu deal met burger, drinken en friet op een schone witte menu-achtergrond');
+    this.images.set(createImages(files));
+    this.monitor.update((current) => ({
+      ...current,
+      status: 'idle',
+      message: 'Voorbeeldmenu is geladen. Maak nu een nieuw beeld.',
+      events: [...current.events, 'Voorbeeldbeelden geladen.'],
+    }));
+  }
+
   protected async onGenerateBatch(): Promise<void> {
     if (!this.hasImages()) {
       return;
@@ -262,6 +295,12 @@ export class App {
     this.images.update((images) => images.filter((item) => item.id !== imageId));
   }
 
+  private releaseCurrentImages(): void {
+    for (const image of this.images()) {
+      releaseImage(image);
+    }
+  }
+
   private findVariant(variantId: string): Variant {
     return this.variants.find((variant) => variant.id === variantId) ?? this.variants[0];
   }