Deploy Mplus Studio

.dockerignore

@@ -0,0 +1,11 @@
+node_modules
+backend/node_modules
+dist
+backend/dist
+test-results
+playwright-report
+.angular
+.kaggle-work
+.env
+comfyui-data
+graphify-out

.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.env.example

@@ -0,0 +1,22 @@
+PORT=3000
+GENERATION_PROVIDER=kaggle
+COMMERCIAL_MODE=1
+FLUX_MODEL_ID=black-forest-labs/FLUX.2-klein-4B
+KAGGLE_COMMAND=uv run --with kaggle kaggle
+KAGGLE_CONFIG_DIR=C:\Users\Joel\.kaggle
+KAGGLE_USERNAME=
+KAGGLE_API_TOKEN=
+KAGGLE_ACCELERATOR=NvidiaTeslaT4
+KAGGLE_USE_SMALL_DECODER=0
+KAGGLE_INFERENCE_STEPS=4
+KAGGLE_DATASET_PREFIX=mplus-flux2-input
+KAGGLE_KERNEL_PREFIX=mplus-flux2-generate
+KAGGLE_CACHE_KERNEL_REF=jolvangeest/mplus-flux2-cache
+KAGGLE_POLL_INTERVAL_MS=5000
+KAGGLE_POLL_TIMEOUT_MS=7200000
+DATABASE_URL=postgresql://mplus:mplus@postgres:5432/mplus_studio
+S3_ENDPOINT=http://minio:9000
+S3_BUCKET=mplus-studio
+S3_ACCESS_KEY_ID=mplus
+S3_SECRET_ACCESS_KEY=mplus-studio-secret
+S3_FORCE_PATH_STYLE=1

.gitattributes

@@ -33,3 +33,10 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+docs/demo-menu-burger.jpg filter=lfs diff=lfs merge=lfs -text
+docs/demo-menu-drink.jpg filter=lfs diff=lfs merge=lfs -text
+docs/demo-menu-fries.jpg filter=lfs diff=lfs merge=lfs -text
+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

.gitignore

@@ -0,0 +1,53 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/backend/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+/backend/node_modules
+npm-debug.log
+yarn-error.log
+*.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/mcp.json
+.history/*
+
+# Miscellaneous
+/.env
+/.kaggle-work
+/.angular/cache
+/comfyui-data
+/test-results
+/playwright-report
+/graphify-out
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+__screenshots__/
+
+# System files
+.DS_Store
+Thumbs.db

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

.vscode/mcp.json

@@ -0,0 +1,9 @@
+{
+  // For more information, visit: https://angular.dev/ai/mcp
+  "servers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "Changes detected"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation (complete|failed)"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "Changes detected"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation (complete|failed)"
+          }
+        }
+      }
+    }
+  ]
+}

AGENTS.md

@@ -0,0 +1,21 @@
+# Agent Instructions
+
+Follow `coding-guidlines.md` for all code changes in this repository.
+
+Important local rules:
+
+- File suffixes are only used for `.spec` files. Do not create `.component.ts` or `.service.ts` files.
+- Event handlers are prefixed with `on`.
+- Do not use one-letter variable names.
+- Use injected property names that describe the injected dependency.
+- Keep class members ordered as `public`, then `protected`, then `private`. Keep methods in the same order after the constructor.
+- Do not use `as` casts; use `<T>` casts.
+- Use `undefined`, not `null`.
+- Always use braces for `if` statements.
+- Prefer `for..of` over `forEach`.
+- Do not call methods from templates; use signals, computed values, or direct properties.
+- Do not use `this` in templates.
+- Do not root-scope services automatically. If a file has no injected dependencies, make it a helper instead of a service.
+- HTML attributes go on separate lines for larger elements, ordered as class, style bindings, class bindings, events.
+- Source code and comments use English.
+- Remove unused imports, files, and properties in files you touch.

DEPLOYMENT.md

@@ -0,0 +1,128 @@
+# Deployment
+
+## Recommended Free Test Host
+
+Use a Docker-capable free host with server-side secrets, for example Hugging Face Spaces with Docker.
+
+The app must be hosted as one full-stack service because Kaggle credentials must stay on the server. Do not publish `KAGGLE_USERNAME`, `KAGGLE_KEY`, OAuth files, or `.env` in the frontend.
+
+## Required Secrets
+
+- `KAGGLE_USERNAME`
+- `KAGGLE_KEY`
+
+Optional overrides:
+
+- `KAGGLE_CACHE_KERNEL_REF=jolvangeest/mplus-flux2-cache`
+- `KAGGLE_POLL_INTERVAL_MS=5000`
+- `KAGGLE_ACCELERATOR=NvidiaTeslaT4`
+
+Do not mount `.env` into the Docker Compose app service. Compose should not blindly inject local development secrets into hosted containers. Use platform secrets for demo mode or per-user server-side auth for multi-user mode.
+
+## Runtime
+
+The Docker image builds the Angular frontend, builds the Node backend, serves the frontend from Express, and keeps `/api/generations` server-side.
+
+## Multi-User Hosting
+
+A single hosted container must not use one shared Kaggle CLI login for all users. Kaggle CLI stores auth state on disk, so a shared `KAGGLE_CONFIG_DIR` would make every browser session use the same Kaggle account.
+
+Required model for multi-user hosting:
+
+- Store users, sessions, jobs, and ownership in a database.
+- Store uploaded images, generated images, and reports in S3-compatible object storage.
+- Store Kaggle auth material server-side only, encrypted at rest.
+- Give every user a separate Kaggle config directory or credential record.
+- Run Kaggle CLI commands with credentials scoped to the current user.
+- Never send Kaggle credentials or token files to the browser.
+
+Recommended self-hosted stack:
+
+- App container: Angular + Node backend.
+- PostgreSQL: users, sessions, jobs, image metadata, audit events.
+- MinIO: S3-compatible storage for input images, generated images, and reports.
+- Persistent volume: optional temporary Kaggle CLI config dirs if the CLI flow is used.
+
+Recommended hosted stack:
+
+- App container on a Docker-capable host.
+- Managed Postgres if available, otherwise a hosted Postgres service.
+- Managed S3-compatible bucket, or MinIO if the platform supports persistent volumes.
+
+Data model sketch:
+
+```text
+users
+- id
+- display_name
+- created_at
+
+sessions
+- id
+- user_id
+- expires_at
+
+kaggle_connections
+- id
+- user_id
+- encrypted_auth_reference
+- status
+- updated_at
+
+generation_jobs
+- id
+- user_id
+- mode
+- prompt
+- status
+- kaggle_kernel_ref
+- inference_seconds
+- total_seconds
+- created_at
+
+generation_assets
+- id
+- job_id
+- kind: input | output | report
+- object_key
+- mime_type
+- size
+```
+
+Object storage layout:
+
+```text
+users/<user-id>/jobs/<job-id>/inputs/<file-name>
+users/<user-id>/jobs/<job-id>/outputs/generated.png
+users/<user-id>/jobs/<job-id>/report/result.md
+```
+
+For the MVP, uploads can still be sent directly to the backend. The backend writes them to MinIO/S3, starts a Kaggle job, then stores generated output and metrics back in object storage.
+
+Product language should avoid Kaggle in the main flow. Use:
+
+- `Productafbeeldingen maken`
+- `Inloggen en starten`
+- `Je kunt nu productafbeeldingen maken`
+
+Technical wording such as Kaggle, GPU, kernel, notebook, or provider belongs only in admin/help screens.
+
+### Supported Modes
+
+For the current MVP there are two practical modes:
+
+1. `Single-user / demo mode`
+
+   One server-side Kaggle account is configured with secrets. This is simplest for a shared internal demo, but all usage goes through that one Kaggle account.
+
+2. `Multi-user session mode`
+
+   Each browser session gets a separate Kaggle config directory and logs in separately. This is the direction needed when colleagues should use their own Kaggle quota from one hosted container.
+
+The codebase is prepared to keep Kaggle credentials server-side, but the hosted multi-user login flow still needs dedicated session endpoints before it should be exposed broadly.
+
+## Notes
+
+- Free hosts can sleep or have request limits. Kaggle generation can take several minutes.
+- If the host kills long HTTP requests, the next change should be an async job API: submit, poll status, then fetch result.
+- Keep `KAGGLE_CACHE_KERNEL_REF` pointed at a completed cache notebook output to reduce dependency/model setup time.

Dockerfile

@@ -0,0 +1,30 @@
+FROM node:20-bookworm-slim
+
+WORKDIR /app
+
+RUN apt-get update \
+  && apt-get install -y --no-install-recommends python3 python3-pip \
+  && python3 -m pip install --break-system-packages --no-cache-dir kaggle \
+  && rm -rf /var/lib/apt/lists/*
+
+COPY package*.json ./
+COPY backend/package.json ./backend/package.json
+RUN npm ci
+
+COPY . .
+RUN npm run build:all
+
+ENV NODE_ENV=production
+ENV PORT=7860
+ENV GENERATION_PROVIDER=kaggle
+ENV KAGGLE_COMMAND=kaggle
+ENV KAGGLE_ACCELERATOR=NvidiaTeslaT4
+ENV KAGGLE_USE_SMALL_DECODER=0
+ENV KAGGLE_INFERENCE_STEPS=4
+ENV KAGGLE_CACHE_KERNEL_REF=jolvangeest/mplus-flux2-cache
+ENV KAGGLE_POLL_INTERVAL_MS=5000
+ENV KAGGLE_POLL_TIMEOUT_MS=7200000
+
+EXPOSE 7860
+
+CMD ["npm", "run", "start:prod"]

README.md

@@ -1,10 +1,206 @@
----
-title: Mplus Studio
-emoji: 🔥
-colorFrom: blue
-colorTo: yellow
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# MplusKassa Studio
+
+MplusKassa Studio is een MVP voor ondernemers die snel betere productbeelden nodig hebben voor hun kassa, bestelzuil, webshop of menuscherm.
+
+De gebruiker uploadt bestaande productfoto's, kiest het type beeld en laat de Studio een verkoopklare variant maken. Geen losse AI-tools, geen technische instellingen, maar een begeleide flow van foto naar bruikbaar resultaat.
+
+## Demo
+
+Drie losse productfoto's worden samengebracht tot een menu-deal compositie op een schone witte achtergrond.
+
+| Hoofdproduct | Drank | Bijgerecht |
+| --- | --- | --- |
+| ![Burger input](./docs/demo-menu-burger.jpg) | ![Drink input](./docs/demo-menu-drink.jpg) | ![Fries input](./docs/demo-menu-fries.jpg) |
+
+**Gegenereerd resultaat**
+
+![Gegenereerde menu-deal](./docs/demo-menu-result-20260531022723.png)
+
+Deze demo-output komt uit een echte end-to-end run via de backend en Kaggle GPU. De README gebruikt een vaste kopie in `docs/`, zodat nieuwe testruns het voorbeeld niet overschrijven.
+
+## Waarom Dit Bestaat
+
+Veel ondernemers hebben wel productfoto's, maar die zijn niet altijd direct geschikt voor verkoop:
+
+- de achtergrond is rommelig;
+- producten hebben verschillende lichtval of kwaliteit;
+- losse beelden voelen niet als één aanbieding;
+- iemand moet handmatig knippen, schalen en combineren;
+- menu- en webshopbeelden moeten consistent zijn.
+
+Studio maakt daar een eenvoudige workflow van:
+
+```text
+productfoto's uploaden -> type beeld kiezen -> beeld maken -> resultaat controleren
+```
+
+De app is bedoeld als assistent voor één concrete taak: betere productafbeeldingen maken.
+
+## Wat De MVP Kan
+
+- Losse productfoto's uploaden.
+- Een map met meerdere beelden uploaden.
+- Kiezen tussen `Los product` en `Menu deal`.
+- Een klantvriendelijke prompt invullen, bijvoorbeeld: `Maak een professionele fastfood menu deal op een schone witte menu-achtergrond`.
+- Echte beelden genereren via een server-side FLUX.2 model op Kaggle GPU.
+- Origineel en resultaat naast elkaar controleren.
+- Een e2e-bewijsrapport genereren met inputbeelden, outputbeeld en timing.
+
+## Belangrijk Voor De Output
+
+De huidige menu-deal prompt stuurt op drie dingen:
+
+- exacte samenstelling: geen extra producten, dubbele drankjes of extra sauzen;
+- herkenbare producten: vorm, materiaal, glas, ijs, kleur en textuur moeten dicht bij de input blijven;
+- commerciële compositie: hoofdproduct links, drank centraal/achter, bijgerecht rechts, met witte achtergrond en realistische schaduw.
+
+Tekst, prijzen en actielabels worden bewust niet door het image model gemaakt. Die horen later als aparte grafische laag bovenop het beeld.
+
+## Laatste E2E Resultaat
+
+Laatste echte Kaggle-run:
+
+```text
+Model inference only: 77.71s
+Model load: 54.50s
+Setup before model load: 31.13s
+Total Kaggle kernel runtime: 163.40s
+GPU: Tesla T4
+```
+
+Na een nieuwe e2e-run staan de actuele testbestanden hier:
+
+```text
+test-results/e2e/kaggle-demo/result.md
+test-results/e2e/kaggle-demo/generated.png
+test-results/e2e/kaggle-demo/generated-<run>.png
+```
+
+## Architectuur
+
+De app bestaat uit:
+
+- Angular 21 frontend voor de begeleide productflow;
+- Node/Express backend voor uploads, validatie en provider-aansturing;
+- async generation jobs: `POST /api/generations` maakt een taak aan, `GET /api/generations/:jobId` levert status en resultaat;
+- Kaggle als remote GPU-runner voor echte generatie;
+- Docker-voorbereiding voor app, Postgres en MinIO/S3;
+- e2e-rapportage via Playwright.
+
+Kaggle credentials blijven server-side. De frontend ziet alleen de app-flow en krijgt geen toegang tot secrets of providerinstellingen.
+
+## Lokaal Starten
+
+Maak eerst `.env` op basis van `.env.example` en vul je Kaggle configuratie in.
+
+```powershell
+npm install
+npm run backend:dev
+npm run start -- --host 127.0.0.1 --port 5000
+```
+
+Open daarna:
+
+```text
+http://127.0.0.1:5000
+```
+
+## Kaggle Configuratie
+
+Voor lokale ontwikkeling wordt de Kaggle CLI via `uv` gebruikt.
+
+```env
+GENERATION_PROVIDER=kaggle
+COMMERCIAL_MODE=1
+FLUX_MODEL_ID=black-forest-labs/FLUX.2-klein-4B
+KAGGLE_COMMAND=uv run --with kaggle kaggle
+KAGGLE_USERNAME=jouw-kaggle-username
+KAGGLE_ACCELERATOR=NvidiaTeslaT4
+KAGGLE_USE_SMALL_DECODER=0
+KAGGLE_INFERENCE_STEPS=4
+KAGGLE_CACHE_KERNEL_REF=jolvangeest/mplus-flux2-cache
+KAGGLE_POLL_INTERVAL_MS=5000
+KAGGLE_POLL_TIMEOUT_MS=7200000
+```
+
+`FLUX_MODEL_ID` kiest de server-side modelroute. De MVP gebruikt nu de commercial-safe Kaggle-route voor FLUX.2 `[klein] 4B`. Laat `COMMERCIAL_MODE=1` aan in productie, zodat non-commercial modelroutes niet per ongeluk geselecteerd kunnen worden.
+
+Kaggle OAuth login:
+
+```powershell
+uv run --with kaggle kaggle auth login --force
+```
+
+Cache-kernel opnieuw pushen:
+
+```powershell
+npm run kaggle:cache:push
+```
+
+## Testen
+
+Snelle checks:
+
+```powershell
+npm run test:integration
+npm run test:backend
+npm run build:all
+```
+
+Echte Kaggle e2e:
+
+```powershell
+$env:E2E_PORT="5010"
+npx playwright test e2e/studio-flow.spec.ts --project=chromium --workers=1
+```
+
+De echte e2e duurt meestal meerdere minuten door Kaggle scheduling, dependency setup en model load.
+
+## Docker En Publiceren
+
+Voor een private testversie:
+
+1. Gebruik de private GitHub repo.
+2. Deploy met Docker op een host die server-side secrets ondersteunt.
+3. Zet Kaggle credentials als secrets op de host.
+4. Deel alleen de app-URL met collega's.
+
+Zie `DEPLOYMENT.md` voor de Docker-route en `docs/multi-user-architecture.md` voor de multi-user richting met Postgres, MinIO/S3 en per-user Kaggle isolation.
+
+## Gratis Demo Host
+
+Voor een gratis private demo is een Docker-based Hugging Face Space geschikt. Gebruik daar `PORT=7860` en zet secrets server-side:
+
+- `GENERATION_PROVIDER=kaggle`
+- `COMMERCIAL_MODE=1`
+- `FLUX_MODEL_ID=black-forest-labs/FLUX.2-klein-4B`
+- `KAGGLE_COMMAND=kaggle`
+- `KAGGLE_USERNAME=<kaggle-user>`
+- `KAGGLE_API_TOKEN=<kaggle-token>`
+
+Deze route is bedoeld als demo-host. Jobs zijn nog in-memory en resultaten blijven niet persistent na restart/sleep.
+
+Deploy via CLI:
+
+```powershell
+npm run deploy:check
+$env:HF_TOKEN="hf_..."
+$env:HF_SPACE_ID="jouw-hf-naam/mplus-studio"
+$env:KAGGLE_USERNAME="jouw-kaggle-username"
+$env:KAGGLE_API_TOKEN="jouw-kaggle-token"
+npm run deploy:huggingface
+```
+
+De deploy-script maakt een private Docker Space aan, zet de Space secrets en uploadt de repo zonder lokale `.env`, `node_modules`, `dist`, testresultaten of graphify-output.
+
+## Roadmap
+
+De volgende stap is niet meer knoppen toevoegen, maar de workflow slimmer en betrouwbaarder maken:
+
+- presets per branche, zoals snackbar, lunchroom, retail of bakkerij;
+- review-stap met goedkeuren, afkeuren en opnieuw proberen;
+- meerdere outputvarianten per run;
+- automatische tekst en prijzen als aparte grafische laag;
+- database en object storage voor multi-user gebruik;
+- persistente job queue voor multi-instance hosting;
+- providerlaag uitbreiden richting betaalde BFL API-modellen waar dat commercieel zinvol is.

angular.json

@@ -0,0 +1,104 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": false
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "mplus-studio": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss",
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": ["src/styles.scss"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "mplus-studio:build:production"
+            },
+            "development": {
+              "buildTarget": "mplus-studio:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "buildTarget": "mplus-studio:build:development",
+            "tsConfig": "tsconfig.spec.json",
+            "runner": "vitest"
+          }
+        }
+      }
+    }
+  }
+}

backend/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "mplus-studio-backend",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "tsx watch src/server.ts",
+    "build": "tsc -p tsconfig.json",
+    "start": "node dist/server.js",
+    "test": "vitest run src"
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^17.4.2",
+    "express": "^5.2.1",
+    "multer": "^2.0.2",
+    "zod": "^4.2.1"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
+    "@types/multer": "^2.0.0",
+    "@types/node": "^20.19.37",
+    "@types/supertest": "^6.0.3",
+    "supertest": "^7.1.4",
+    "tsx": "^4.21.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.1.7"
+  }
+}

backend/src/app.integration.spec.ts

@@ -0,0 +1,59 @@
+import request from 'supertest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createApp } from './app.js';
+
+describe('generation api', () => {
+  afterEach(() => {
+    vi.unstubAllEnvs();
+  });
+
+  it('returns health status', async () => {
+    await request(createApp()).get('/health').expect(200, { status: 'ok' });
+  });
+
+  it('accepts uploaded images and returns a queued generation job', async () => {
+    const app = createApp();
+    const response = await request(app)
+      .post('/api/generations')
+      .field('prompt', 'Photorealistic product image')
+      .field('preset', 'studio')
+      .field('ratio', '16:9')
+      .field('mode', 'product')
+      .attach('images', Buffer.from('image'), { filename: 'product.png', contentType: 'image/png' })
+      .expect(202);
+
+    expect(response.body).toMatchObject({
+      provider: 'mock',
+      status: expect.stringMatching(/queued|running|completed/),
+    });
+    expect(response.body.jobId).toEqual(expect.any(String));
+
+    await vi.waitFor(async () => {
+      const jobResponse = await request(app).get(`/api/generations/${response.body.jobId}`).expect(200);
+      expect(jobResponse.body).toMatchObject({
+        status: 'completed',
+        result: {
+          provider: 'mock',
+          preset: 'studio',
+          ratio: '16:9',
+          images: [{ originalName: 'product.png' }],
+        },
+      });
+      expect(jobResponse.body.result.images[0].variants).toHaveLength(3);
+    });
+  });
+
+  it('returns 404 for unknown generation jobs', async () => {
+    await request(createApp()).get('/api/generations/missing').expect(404, { error: 'Generation job not found' });
+  });
+
+  it('rejects requests without images', async () => {
+    await request(createApp())
+      .post('/api/generations')
+      .field('prompt', 'Photorealistic product image')
+      .field('preset', 'studio')
+      .field('ratio', '16:9')
+      .field('mode', 'product')
+      .expect(400, { error: 'At least one image is required' });
+  });
+});

backend/src/app.ts

@@ -0,0 +1,129 @@
+import crypto from 'node:crypto';
+import cors from 'cors';
+import express, { Request, Response } from 'express';
+import multer from 'multer';
+import { buildGenerationResponse, GenerationProvider, GenerationResponse, generationRequestSchema, UploadedImage } from './generation/generation.js';
+import { generateKaggleImages } from './providers/kaggle.js';
+
+const upload = multer({ storage: multer.memoryStorage(), limits: { fileSize: 25 * 1024 * 1024, files: 50 } });
+
+type GenerationJob = {
+  id: string;
+  provider: GenerationProvider;
+  status: 'queued' | 'running' | 'completed' | 'failed';
+  createdAt: string;
+  updatedAt: string;
+  result?: GenerationResponse;
+  error?: string;
+};
+
+if (!globalThis.crypto) {
+  globalThis.crypto = <Crypto>crypto.webcrypto;
+}
+
+export function createApp(): express.Express {
+  const app = express();
+  const jobs = new Map<string, GenerationJob>();
+
+  app.use(cors({ origin: true }));
+  app.use(express.json());
+
+  app.get('/health', (_request: Request, response: Response) => {
+    response.json({ status: 'ok' });
+  });
+
+  app.post('/api/generations', upload.array('images'), async (request: Request, response: Response) => {
+    const parsedRequest = generationRequestSchema.safeParse(request.body);
+    if (!parsedRequest.success) {
+      response.status(400).json({ error: 'Invalid generation request' });
+      return;
+    }
+
+    const files = <Express.Multer.File[]>request.files ?? [];
+    const images = files
+      .filter((file) => file.mimetype.startsWith('image/'))
+      .map<UploadedImage>((file) => ({
+        originalName: file.originalname,
+        mimeType: file.mimetype,
+        size: file.size,
+        buffer: file.buffer,
+      }));
+
+    if (images.length === 0) {
+      response.status(400).json({ error: 'At least one image is required' });
+      return;
+    }
+
+    const provider = getGenerationProvider();
+    const now = new Date().toISOString();
+    const job: GenerationJob = {
+      id: crypto.randomUUID(),
+      provider,
+      status: 'queued',
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    jobs.set(job.id, job);
+    runGenerationJob(job, parsedRequest.data, images);
+    response.status(202).json(toJobResponse(job));
+  });
+
+  app.get('/api/generations/:jobId', (request: Request, response: Response) => {
+    const jobId = request.params.jobId;
+    if (typeof jobId !== 'string') {
+      response.status(404).json({ error: 'Generation job not found' });
+      return;
+    }
+
+    const job = jobs.get(jobId);
+    if (job === undefined) {
+      response.status(404).json({ error: 'Generation job not found' });
+      return;
+    }
+
+    response.json(toJobResponse(job));
+  });
+
+  function runGenerationJob(job: GenerationJob, input: ReturnType<typeof generationRequestSchema.parse>, images: UploadedImage[]): void {
+    void (async () => {
+      updateJob(job, { status: 'running' });
+
+      try {
+        const result = job.provider === 'kaggle'
+          ? await generateKaggleImages(input, images)
+          : buildGenerationResponse(input, images);
+
+        updateJob(job, { status: 'completed', result });
+      }
+      catch (error) {
+        updateJob(job, {
+          status: 'failed',
+          error: error instanceof Error ? error.message : 'Generation provider failed',
+        });
+      }
+    })();
+  }
+
+  function updateJob(job: GenerationJob, updates: Partial<GenerationJob>): void {
+    Object.assign(job, updates, { updatedAt: new Date().toISOString() });
+  }
+
+  return app;
+}
+
+function getGenerationProvider(): GenerationProvider {
+  return process.env.GENERATION_PROVIDER === 'kaggle' ? 'kaggle' : 'mock';
+}
+
+function toJobResponse(job: GenerationJob): Record<string, unknown> {
+  return {
+    jobId: job.id,
+    provider: job.provider,
+    status: job.status,
+    createdAt: job.createdAt,
+    updatedAt: job.updatedAt,
+    result: job.result,
+    error: job.error,
+  };
+}

backend/src/generation/generation.ts

@@ -0,0 +1,97 @@
+import { z } from 'zod';
+
+export type UploadedImage = {
+  originalName: string;
+  mimeType: string;
+  size: number;
+  buffer?: Buffer;
+};
+
+export type GenerationVariant = {
+  id: string;
+  label: string;
+  status: 'queued' | 'completed';
+  prompt: string;
+  providerPromptId?: string;
+  imageUrl?: string;
+  imageBase64?: string;
+};
+
+export type GenerationImage = {
+  id: string;
+  originalName: string;
+  variants: GenerationVariant[];
+};
+
+export type GenerationProvider = 'mock' | 'kaggle';
+
+export type GenerationResponse = {
+  jobId: string;
+  provider: GenerationProvider;
+  preset: string;
+  ratio: string;
+  images: GenerationImage[];
+  metrics?: GenerationMetrics;
+};
+
+export type GenerationMetrics = {
+  durationSeconds?: number;
+  inferenceSeconds?: number;
+  modelLoadSeconds?: number;
+  setupSeconds?: number;
+  height?: number;
+  width?: number;
+  steps?: number;
+  smallDecoder?: boolean;
+  cudaAvailable?: boolean;
+  gpuName?: string;
+  hfHome?: string;
+  mode?: GenerationMode;
+  modelId?: string;
+};
+
+export type GenerationMode = 'product' | 'menu';
+
+export const generationRequestSchema = z.object({
+  prompt: z.string().trim().min(1),
+  preset: z.enum(['studio', 'food', 'retail', 'premium']),
+  ratio: z.enum(['16:9', '9:16', '1:1']),
+  mode: z.enum(['product', 'menu']).default('product'),
+});
+
+export function buildGenerationResponse(input: z.infer<typeof generationRequestSchema>, images: UploadedImage[], provider: GenerationProvider = 'mock'): GenerationResponse {
+  return {
+    jobId: crypto.randomUUID(),
+    provider,
+    preset: input.preset,
+    ratio: input.ratio,
+    images: images.map((image) => ({
+      id: crypto.randomUUID(),
+      originalName: image.originalName,
+      variants: buildVariants(input.prompt),
+    })),
+  };
+}
+
+function buildVariants(prompt: string): GenerationVariant[] {
+  return [
+    {
+      id: crypto.randomUUID(),
+      label: 'Clean studio',
+      status: 'queued',
+      prompt: `${prompt}. Clean studio background, realistic product shadow.`,
+    },
+    {
+      id: crypto.randomUUID(),
+      label: 'Warme food sfeer',
+      status: 'queued',
+      prompt: `${prompt}. Warm hospitality setting, photorealistic lighting.`,
+    },
+    {
+      id: crypto.randomUUID(),
+      label: 'Premium donker',
+      status: 'queued',
+      prompt: `${prompt}. Dark premium campaign scene, controlled highlights.`,
+    },
+  ];
+}

backend/src/generation/generation.unit.spec.ts

@@ -0,0 +1,37 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { buildGenerationResponse } from './generation.js';
+
+describe('buildGenerationResponse', () => {
+  beforeEach(() => {
+    vi.stubGlobal('crypto', { randomUUID: vi.fn(() => 'id') });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('creates queued variants for each image', () => {
+    const response = buildGenerationResponse(
+      { prompt: 'Photorealistic bottle', preset: 'studio', ratio: '16:9', mode: 'product' },
+      [{ originalName: 'bottle.png', mimeType: 'image/png', size: 1000 }],
+    );
+
+    expect(response).toMatchObject({
+      jobId: 'id',
+      provider: 'mock',
+      preset: 'studio',
+      ratio: '16:9',
+      images: [
+        {
+          id: 'id',
+          originalName: 'bottle.png',
+          variants: [
+            { id: 'id', label: 'Clean studio', status: 'queued' },
+            { id: 'id', label: 'Warme food sfeer', status: 'queued' },
+            { id: 'id', label: 'Premium donker', status: 'queued' },
+          ],
+        },
+      ],
+    });
+  });
+});

backend/src/providers/kaggle.ts

@@ -0,0 +1,329 @@
+import { spawn } from 'node:child_process';
+import { mkdir, readFile, rm, writeFile } from 'node:fs/promises';
+import { basename, dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { z } from 'zod';
+import { GenerationImage, GenerationMetrics, GenerationResponse, generationRequestSchema, UploadedImage } from '../generation/generation.js';
+
+type KagglePayload = {
+  prompt: string;
+  mode: 'product' | 'menu';
+  preset: string;
+  ratio: string;
+  modelId: string;
+  images: Array<{
+    name: string;
+    mimeType: string;
+  }>;
+};
+
+type FluxModelConfig = {
+  id: string;
+  label: string;
+  provider: 'kaggle';
+  commercialSafe: boolean;
+};
+
+const defaultFluxModelId = 'black-forest-labs/FLUX.2-klein-4B';
+const fluxModels: FluxModelConfig[] = [
+  {
+    id: defaultFluxModelId,
+    label: 'FLUX.2 klein 4B',
+    provider: 'kaggle',
+    commercialSafe: true,
+  },
+];
+
+const backendSourceDirectory = dirname(fileURLToPath(import.meta.url));
+const projectRootDirectory = resolve(backendSourceDirectory, '..', '..', '..');
+const workspaceDirectory = resolve(projectRootDirectory, '.kaggle-work');
+const kernelTemplatePath = resolve(projectRootDirectory, 'kaggle-flux2-klein', 'kernel.py');
+
+export async function generateKaggleImages(input: z.infer<typeof generationRequestSchema>, images: UploadedImage[]): Promise<GenerationResponse> {
+  const kaggleUsername = requiredEnv('KAGGLE_USERNAME');
+  const modelId = getKaggleFluxModelId();
+  const runId = crypto.randomUUID().replaceAll('-', '').slice(0, 16);
+  const datasetSlug = `${process.env.KAGGLE_DATASET_PREFIX ?? 'mplus-flux2-input'}-${runId}`;
+  const kernelSlug = `${process.env.KAGGLE_KERNEL_PREFIX ?? 'mplus-flux2-generate'}-${runId}`;
+  const kernelRef = `${kaggleUsername}/${kernelSlug}`;
+  const runDirectory = resolve(workspaceDirectory, runId);
+  const kernelDirectory = resolve(runDirectory, 'kernel');
+  const outputDirectory = resolve(runDirectory, 'output');
+
+  await mkdir(kernelDirectory, { recursive: true });
+  await mkdir(outputDirectory, { recursive: true });
+
+  try {
+    await writeKernelInput(input, images, kernelDirectory, modelId);
+    await writeKernel(input, images, kernelDirectory, kernelSlug, datasetSlug, modelId);
+    await runKaggle(['kernels', 'push', '-p', kernelDirectory, '--accelerator', process.env.KAGGLE_ACCELERATOR ?? 'NvidiaTeslaT4', '-t', process.env.KAGGLE_KERNEL_TIMEOUT_SECONDS ?? '7200']);
+    await waitForKernel(kernelRef);
+    await runKaggle(['kernels', 'output', kernelRef, '-p', outputDirectory, '-o', '-q', '--file-pattern', 'results.json']);
+    await runKaggle(['kernels', 'output', kernelRef, '-p', outputDirectory, '-o', '-q', '--file-pattern', '.*png']);
+
+    const results = <Record<string, string | Record<string, unknown>>>JSON.parse(await readFile(resolve(outputDirectory, 'results.json'), 'utf8'));
+    if (results.__error !== undefined) {
+      throw new Error(`Kaggle kernel error: ${results.__error}\n${results.__traceback ?? ''}`);
+    }
+
+    const responseImages = input.mode === 'menu' ? [images[0]] : images;
+
+    const generationImages: GenerationImage[] = [];
+    for (const image of responseImages) {
+      generationImages.push({
+        id: crypto.randomUUID(),
+        originalName: image.originalName,
+        variants: [
+          {
+            id: crypto.randomUUID(),
+            label: input.mode === 'menu' ? 'Menu deal' : getModelLabel(modelId),
+            status: 'completed',
+            prompt: buildPrompt(input.prompt, input.preset, input.ratio, input.mode, images.length),
+            providerPromptId: kernelRef,
+            imageBase64: await getGeneratedImage(results, image.originalName, outputDirectory),
+          },
+        ],
+      });
+    }
+
+    return {
+      jobId: runId,
+      provider: 'kaggle',
+      preset: input.preset,
+      ratio: input.ratio,
+      metrics: getMetrics(results),
+      images: generationImages,
+    };
+  }
+  finally {
+    if (process.env.KAGGLE_KEEP_WORKDIR !== '1') {
+      await rm(runDirectory, { recursive: true, force: true });
+    }
+  }
+}
+
+function getMetrics(results: Record<string, string | Record<string, unknown>>): GenerationMetrics | undefined {
+  const metrics = results.__metrics;
+  if (metrics === undefined || typeof metrics === 'string') {
+    return undefined;
+  }
+
+  return generationMetricsSchema.parse(metrics);
+}
+
+const generationMetricsSchema = z.object({
+  durationSeconds: z.number().optional(),
+  inferenceSeconds: z.number().optional(),
+  modelLoadSeconds: z.number().optional(),
+  setupSeconds: z.number().optional(),
+  height: z.number().optional(),
+  width: z.number().optional(),
+  steps: z.number().optional(),
+  smallDecoder: z.boolean().optional(),
+  cudaAvailable: z.boolean().optional(),
+  gpuName: z.string().optional(),
+  hfHome: z.string().optional(),
+  mode: z.enum(['product', 'menu']).optional(),
+  modelId: z.string().optional(),
+});
+
+async function getGeneratedImage(results: Record<string, string | Record<string, unknown>>, imageName: string, outputDirectory: string): Promise<string | undefined> {
+  const imageResult = results[imageName];
+  if (typeof imageResult !== 'string') {
+    return undefined;
+  }
+
+  if (imageResult.startsWith('data:image/')) {
+    return imageResult;
+  }
+
+  const imageBuffer = await readFile(resolve(outputDirectory, sanitizeFileName(imageResult)));
+  return `data:image/png;base64,${imageBuffer.toString('base64')}`;
+}
+
+async function writeKernelInput(input: z.infer<typeof generationRequestSchema>, images: UploadedImage[], kernelDirectory: string, modelId: string): Promise<void> {
+  const payload: KagglePayload = {
+    prompt: buildPrompt(input.prompt, input.preset, input.ratio, input.mode, images.length),
+    mode: input.mode,
+    preset: input.preset,
+    ratio: input.ratio,
+    modelId,
+    images: images.map((image) => ({ name: image.originalName, mimeType: image.mimeType })),
+  };
+
+  await writeFile(resolve(kernelDirectory, 'request.json'), JSON.stringify(payload, undefined, 2));
+
+  for (const image of images) {
+    if (image.buffer === undefined) {
+      throw new Error('Image buffer is required for Kaggle generation');
+    }
+
+    await writeFile(resolve(kernelDirectory, sanitizeFileName(image.originalName)), image.buffer);
+  }
+}
+
+async function writeKernel(input: z.infer<typeof generationRequestSchema>, images: UploadedImage[], kernelDirectory: string, kernelSlug: string, datasetSlug: string, modelId: string): Promise<void> {
+  const payload: KagglePayload = {
+    prompt: buildPrompt(input.prompt, input.preset, input.ratio, input.mode, images.length),
+    mode: input.mode,
+    preset: input.preset,
+    ratio: input.ratio,
+    modelId,
+    images: images.map((image) => ({ name: image.originalName, mimeType: image.mimeType })),
+  };
+  const embeddedImages: Record<string, string> = {};
+
+  for (const image of images) {
+    if (image.buffer === undefined) {
+      throw new Error('Image buffer is required for Kaggle generation');
+    }
+
+    embeddedImages[sanitizeFileName(image.originalName)] = image.buffer.toString('base64');
+  }
+
+  const cacheKernelRef = process.env.KAGGLE_CACHE_KERNEL_REF;
+  const kernelSources = cacheKernelRef === undefined || cacheKernelRef.trim() === '' ? [] : [cacheKernelRef];
+  const kernelSource = (await readFile(kernelTemplatePath, 'utf8'))
+    .replace('__MPLUS_REQUEST_JSON__', JSON.stringify(payload).replaceAll('\\', '\\\\').replaceAll('"', '\\"'))
+    .replace('__MPLUS_IMAGES_JSON__', JSON.stringify(embeddedImages).replaceAll('\\', '\\\\').replaceAll('"', '\\"'))
+    .replace('__MPLUS_MODEL_ID__', modelId)
+    .replace('__MPLUS_USE_SMALL_DECODER__', process.env.KAGGLE_USE_SMALL_DECODER ?? '1')
+    .replace('__MPLUS_INFERENCE_STEPS__', process.env.KAGGLE_INFERENCE_STEPS ?? '4');
+
+  await writeFile(resolve(kernelDirectory, 'kernel.py'), kernelSource);
+  await writeFile(resolve(kernelDirectory, 'kernel-metadata.json'), JSON.stringify({
+    id: `${requiredEnv('KAGGLE_USERNAME')}/${kernelSlug}`,
+    title: kernelSlug,
+    code_file: 'kernel.py',
+    language: 'python',
+    kernel_type: 'script',
+    is_private: true,
+    enable_gpu: true,
+    enable_internet: true,
+    dataset_sources: [],
+    competition_sources: [],
+    kernel_sources: kernelSources,
+    model_sources: [],
+    keywords: [datasetSlug],
+  }, undefined, 2));
+}
+
+async function waitForKernel(kernelRef: string): Promise<void> {
+  const timeoutMs = Number(process.env.KAGGLE_POLL_TIMEOUT_MS ?? 7_200_000);
+  const intervalMs = Number(process.env.KAGGLE_POLL_INTERVAL_MS ?? 30_000);
+  const startedAt = Date.now();
+
+  while (Date.now() - startedAt < timeoutMs) {
+    const status = await runKaggle(['kernels', 'status', kernelRef]);
+
+    if (/complete/i.test(status)) {
+      return;
+    }
+
+    if (/error|failed|cancel/i.test(status)) {
+      throw new Error(`Kaggle kernel failed: ${status.trim()}`);
+    }
+
+    await wait(intervalMs);
+  }
+
+  throw new Error(`Kaggle kernel timed out: ${kernelRef}`);
+}
+
+async function runKaggle(args: string[]): Promise<string> {
+  const command = process.env.KAGGLE_COMMAND ?? 'kaggle';
+  const commandParts = command.split(' ').filter((part) => part.trim() !== '');
+  const executable = commandParts[0];
+  const commandArgs = [...commandParts.slice(1), ...args];
+  const kaggleEnv: NodeJS.ProcessEnv = { ...process.env, PYTHONIOENCODING: 'utf-8', PYTHONUTF8: '1' };
+
+  if (process.env.KAGGLE_USE_CONFIG_DIR !== '1') {
+    delete kaggleEnv.KAGGLE_CONFIG_DIR;
+  }
+
+  return await new Promise((resolvePromise, reject) => {
+    const childProcess = spawn(executable, commandArgs, {
+      env: kaggleEnv,
+      shell: process.platform === 'win32',
+    });
+    const output: string[] = [];
+    const errors: string[] = [];
+
+    childProcess.stdout.on('data', (chunk: Buffer) => output.push(chunk.toString('utf8')));
+    childProcess.stderr.on('data', (chunk: Buffer) => errors.push(chunk.toString('utf8')));
+    childProcess.on('error', reject);
+    childProcess.on('close', (code) => {
+      if (code !== 0) {
+        reject(new Error(errors.join('').trim() || output.join('').trim() || `${command} ${args.join(' ')} failed with code ${code}`));
+        return;
+      }
+
+      resolvePromise(output.join(''));
+    });
+  });
+}
+
+function requiredEnv(name: string): string {
+  const value = process.env[name];
+  if (value === undefined || value.trim() === '') {
+    throw new Error(`${name} is required for Kaggle generation`);
+  }
+
+  return value;
+}
+
+function sanitizeFileName(fileName: string): string {
+  return basename(fileName).replaceAll(/[^a-zA-Z0-9._-]/g, '_');
+}
+
+function wait(ms: number): Promise<void> {
+  return new Promise((resolvePromise) => setTimeout(resolvePromise, ms));
+}
+
+function getKaggleFluxModelId(): string {
+  const modelId = process.env.FLUX_MODEL_ID ?? defaultFluxModelId;
+  const modelConfig = fluxModels.find((model) => model.id === modelId && model.provider === 'kaggle');
+  if (modelConfig === undefined) {
+    throw new Error(`Unsupported Kaggle FLUX model: ${modelId}`);
+  }
+
+  if (process.env.COMMERCIAL_MODE === '1' && !modelConfig.commercialSafe) {
+    throw new Error(`FLUX model is not enabled for commercial mode: ${modelId}`);
+  }
+
+  return modelConfig.id;
+}
+
+function getModelLabel(modelId: string): string {
+  return fluxModels.find((model) => model.id === modelId)?.label ?? modelId;
+}
+
+function buildPrompt(prompt: string, preset: string, ratio: string, mode: 'product' | 'menu', imageCount = 1): string {
+  if (mode === 'menu') {
+    return `${prompt}. Create one premium commercial menu-deal product photo using ${buildReferenceImageList(imageCount)} as the only product references. The goal is a clean sales image for a menu board or webshop: the products should look appetizing, consistent, and commercially lit, while still clearly matching the supplied references. There are exactly ${imageCount} supplied product reference images, so the final image must contain exactly ${imageCount} product groups total. ${buildReferenceRoles(imageCount)} Preserve one visible instance of each referenced product. Keep the product identity, silhouette, container shape, glass shape, material, color, ice, texture, and main visual details as close as possible to each reference image. Improve lighting, contrast, background cleanliness, and scale consistency only; do not redesign the food or drink. For the drink, directly preserve the original glass or cup shape, rim, base, transparency, dark beverage color, and visible ice arrangement instead of replacing it with a different cup or generic soft-drink container. Compose the scene as a menu-deal hero layout: main product larger on the left foreground, drink upright near the center or back, side item on the right foreground, all close enough to feel like one offer, with natural overlap only where it improves depth. Do not duplicate products. Do not add extra products, sauces, cups, drinks, side dishes, desserts, labels, logos, text, prices, hands, packaging claims, brand marks, or clutter. Use a bright white product photography background, realistic scale, contact shadows, subtle depth, and professional commercial food lighting. Output aspect ratio ${ratio}.`;
+  }
+
+  return `${prompt}. Create a photorealistic product image variation for ${preset}. Preserve the product identity, packaging details, proportions, readable labels, colors, and materials. Output aspect ratio ${ratio}. Do not add fake prices or fake promotional text.`;
+}
+
+function buildReferenceImageList(imageCount: number): string {
+  const imageNames = [];
+  for (let imageIndex = 1; imageIndex <= imageCount; imageIndex += 1) {
+    imageNames.push(`image ${imageIndex}`);
+  }
+
+  return imageNames.join(', ');
+}
+
+function buildReferenceRoles(imageCount: number): string {
+  const roles = ['Use image 1 as the main product.'];
+  if (imageCount >= 2) {
+    roles.push('Use image 2 as the drink if it is a drink.');
+  }
+
+  if (imageCount >= 3) {
+    roles.push('Use image 3 as the side item if it is a side item.');
+  }
+
+  return roles.join(' ');
+}

backend/src/server.ts

@@ -0,0 +1,26 @@
+import dotenv from 'dotenv';
+import express from 'express';
+import { existsSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { createApp } from './app.js';
+
+const serverDirectory = dirname(fileURLToPath(import.meta.url));
+dotenv.config();
+dotenv.config({ path: resolve(serverDirectory, '..', '..', '.env') });
+
+const port = Number(process.env.PORT ?? 3000);
+const app = createApp();
+const staticDirectory = resolve(serverDirectory, '..', '..', 'dist', 'mplus-studio', 'browser');
+
+if (existsSync(staticDirectory)) {
+  app.use(express.static(staticDirectory));
+  app.get(/^(?!\/api\/).*/, (_request, response) => {
+    response.sendFile(resolve(staticDirectory, 'index.html'));
+  });
+}
+
+app.listen(port, () => {
+  console.log(`Mplus Studio backend listening on http://localhost:${port}`);
+});

backend/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "types": ["node", "vitest/globals"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["dist"]
+}

coding-guidelines.md

@@ -0,0 +1,341 @@
+# Coding Guidelines
+
+These guidelines are the default standard for this repository. Source code, comments, identifiers, documentation inside the codebase, and commit-facing technical language should be written in English.
+
+The goal is boring, maintainable software: small files, clear boundaries, explicit names, predictable control flow, and changes that are easy to review.
+
+---
+
+## Core Principles
+
+- Prefer clarity over cleverness. A straightforward solution that everyone can maintain beats a compact abstraction.
+- Keep changes small and goal-driven. Every changed line should map to the current task.
+- Optimize for reading. Code is read more often than it is written.
+- Apply KISS first, DRY second. Duplication is acceptable until the shared concept is real and stable.
+- Follow SOLID pragmatically. Do not introduce interfaces or classes just to satisfy a pattern.
+- Use early returns and guard clauses to keep the happy path shallow.
+- Avoid speculative configuration, compatibility layers, or extension points unless there is a current consumer.
+- Do not mix orchestration, IO, parsing, domain decisions, and UI rendering in the same function or component.
+
+---
+
+## Architecture Boundaries
+
+### Electron Desktop
+
+- Main process code owns OS, filesystem, child processes, IPC registration, native dialogs, and app lifecycle.
+- Renderer code owns UI, local UI state, visual composition, and user interactions.
+- Preload code is the only bridge. Keep exposed APIs narrow and typed.
+- IPC handlers should be thin. Move command resolution, env parsing, process management, and report detection into focused modules.
+- Avoid long `*.ipc.ts` files. Split by capability, for example `test-runner`, `local-apps`, `agent-session`, `reports`, `permissions`.
+- Never let renderer components know command-line construction details. Renderer passes intent; main process resolves execution.
+
+### Agent Runner
+
+- Provider adapters should translate between Specwright contracts and provider APIs only.
+- Shared generation flow belongs outside individual providers.
+- Keep transport concerns separate from protocol concerns. HTTP, SSE, CLI, and ACP should not be interleaved in one long function.
+- Provider selection and environment parsing belong in the registry/config layer, not inside generation logic.
+
+### Plugin Runtime
+
+- `stepHelpers.js` remains the single source of truth for `FIELD_TYPES`.
+- `testDataGenerator.js` remains the single source of truth for generated test data behavior.
+- Step files import `Given`, `When`, `Then`, `Before`, `After`, and `expect` from `fixtures.js` only.
+- Generated tests should prefer stable user-observable behavior over implementation details.
+- Fixture changes must preserve normal Playwright behavior first. Special modes, such as CDP, must be explicit opt-in.
+
+---
+
+## File Size And Module Shape
+
+- Target files under 250 lines.
+- Treat files over 400 lines as refactor candidates.
+- Treat files over 800 lines as architectural debt that needs an extraction plan.
+- A file should have one primary reason to change.
+- Extract by responsibility, not by syntax. Do not create a `utils.ts` dumping ground.
+- Prefer feature folders with local helpers near their consumer.
+- Keep public APIs small. Export only what another module actually uses.
+- Avoid barrels when they hide dependency direction or create circular imports.
+
+Good extraction targets:
+
+- Pure parsing and normalization functions.
+- Process spawning and lifecycle management.
+- External API clients.
+- UI subcomponents with independent state or layout.
+- State selectors and derived view models.
+- Reusable test fixtures or environment adapters.
+
+Bad extraction targets:
+
+- Single-use wrappers with vague names.
+- Abstract base classes without multiple stable implementations.
+- Generic helpers named `common`, `misc`, `utils`, or `helpers` without a domain noun.
+
+---
+
+## Naming
+
+- Use English names everywhere.
+- Use descriptive names. Avoid one-letter variables except conventional local coordinates or indexes in tiny scopes.
+- File names should describe the thing they contain.
+- Avoid suffixes unless they add real information. Keep `.spec` for tests.
+
+```text
+zone-editor.ts       not zone-editor.component.ts
+fonts.ts             not fonts.service.ts, if it is a helper rather than an injectable service
+```
+
+- Event handlers start with `on`.
+
+```ts
+// Bad
+(click)="zoneSelect.emit(zone)"
+
+// Good
+(click)="onZoneClick(zone)"
+```
+
+- Injected service properties must describe the service.
+
+```ts
+// Bad
+private readonly storage = inject(SettingsService);
+
+// Good
+private readonly settingsService = inject(SettingsService);
+```
+
+- Injection tokens are `UPPER_SNAKE_CASE`.
+
+```ts
+export const ZONE_COMPONENTS = new InjectionToken<ZoneComponent[]>('Zone components');
+```
+
+- Library components use the `mpo` prefix. CSS classes use dashed-case.
+- Prefer domain names over technical names: `resolveRunCommand` is better than `processInput`.
+- Boolean names should read as predicates: `isRunning`, `hasAuth`, `canRetry`, `shouldStream`.
+
+---
+
+## TypeScript
+
+- Prefer explicit return types for exported functions, public methods, IPC handlers, and async functions.
+- Avoid `any`. If the shape is unknown, use `unknown` and narrow it.
+- Avoid type assertions. Prefer type guards, schema validation, or typed APIs.
+- Use `undefined` instead of `null` unless an external API requires `null`.
+- Always use braces for control flow.
+- Put `else` on a new line when it is needed. Prefer early return over `else` after a guard.
+- Prefer `for...of` over `forEach`, especially for async code and better stack traces.
+- Store repeated expressions in a named `const`.
+- Use shorthand object notation.
+- Keep filter predicates inline when they are trivial. Extract only if the predicate has a domain name and is reused.
+- Use discriminated unions for state machines instead of loosely related booleans.
+- Use `Record<string, unknown>` carefully. Prefer named types for cross-module contracts.
+
+```ts
+// Bad
+function run(input: any) {
+  if (input.enabled) {
+    doWork(input.value);
+  }
+}
+
+// Good
+function run(input: RunInput): void {
+  if (!input.enabled) {
+    return;
+  }
+
+  doWork(input.value);
+}
+```
+
+---
+
+## Functions
+
+- A function should do one thing at one level of abstraction.
+- Prefer functions under 40 lines. Longer functions need a reason.
+- Use guard clauses for invalid, empty, or unsupported cases.
+- Keep the main path left-aligned.
+- Avoid boolean parameters when they change behavior significantly. Use an options object or split the function.
+- Avoid hidden side effects in functions that look like queries.
+- Do not catch errors only to rethrow the same error.
+- When catching errors, add context or recover intentionally.
+- Name functions after the outcome, not the implementation detail.
+
+```ts
+// Bad
+function handle(data: RawIssue): Issue {
+  if (data.fields) {
+    if (data.fields.title) {
+      return mapIssue(data);
+    }
+  }
+  throw new Error('Invalid issue');
+}
+
+// Good
+function parseIssue(data: RawIssue): Issue {
+  if (!data.fields?.title) {
+    throw new Error('Issue title is required');
+  }
+
+  return mapIssue(data);
+}
+```
+
+---
+
+## Classes And Services
+
+- Prefer functions and small modules until state or lifecycle makes a class useful.
+- Classes should have one responsibility.
+- Keep constructor work minimal. Start IO explicitly.
+- Class members are ordered: `public` then `protected` then `private`.
+- Keep inputs and outputs grouped.
+- Methods follow the same order: public, protected, private.
+
+```ts
+export class MyComponent {
+  public readonly type = input<string>();
+  public readonly valueChanged = output<string>();
+
+  protected readonly zones = this.zoneService.zones;
+
+  private readonly settingsService = inject(SettingsService);
+
+  public save(): void {
+    // ...
+  }
+
+  protected onZoneClick(zone: Zone): void {
+    // ...
+  }
+
+  private buildPayload(): Payload {
+    // ...
+  }
+}
+```
+
+---
+
+## React And Renderer Code
+
+- Components should primarily render. Move command resolution, parsing, persistence, and IO into hooks or services.
+- Split components when separate parts have separate state, effects, or responsibilities.
+- Avoid `useMemo` and `useCallback` by default. Use them only for expensive work, stable dependencies required by a child, or existing project patterns.
+- Effects synchronize with external systems. Do not use effects to derive state that can be computed during render.
+- Prefer custom hooks for reusable UI behavior, not for hiding unrelated complexity.
+- Zustand stores should expose focused actions and selectors. Avoid one store becoming an application service locator.
+- Keep renderer state serializable where possible.
+- Do not construct shell commands in React components.
+
+---
+
+## Angular, Signals, And Resources
+
+- Do not use `this` in templates.
+- Do not call getters or methods from templates. Use signals or computed values.
+- A signal that never changes is a constant.
+- Do not wrap signals in `params` unnecessarily. Pass the signal reference when possible.
+- Store signal output in a local variable when it is read more than once.
+- Always check `hasValue()` before `value()` in reactive contexts.
+- Use `equal: compareObjects` for object-valued signals where supported.
+- Expose `FormControl` values as signals instead of duplicating writable state.
+- Use `rxResource` with `timer` for periodic fetching.
+- Use `OnDestroy` when lifecycle cleanup is required.
+- Use `HostListener` when component inputs need to be checked.
+- Services should be provided at the narrowest useful scope.
+- If a file creates no injectable state and only transforms data, it is a helper, not a service.
+
+---
+
+## Templates
+
+- Keep templates declarative.
+- Move multi-statement template logic into an event handler.
+- HTML attributes go on new lines when the element becomes hard to scan.
+- Attribute order: `class`, `[style]`, `[class]`, bindings, events.
+- Use two spaces for indentation. Do not use tabs.
+- Put `@else` on a new line.
+- Use self-closing tags with a space before the slash.
+
+```html
+<mpo-carousel />
+```
+
+---
+
+## CSS And SCSS
+
+- Prefer design tokens and theme variables over literal colors.
+- Keep CSS close to the component or feature when possible.
+- Large global stylesheets must be split by layer: tokens, base, layout, components, utilities.
+- Avoid unused styles. Delete styles when deleting the UI that uses them.
+- Avoid selector chains that depend on deep DOM structure.
+- Do not use `::ng-deep`. Use `:host`, component APIs, or explicit CSS variables.
+- CSS class names are dashed-case and domain-specific.
+
+---
+
+## Error Handling And Logging
+
+- Error messages should say what failed and include the relevant context.
+- Do not swallow errors silently unless the operation is truly optional.
+- Logs should be actionable. Avoid noisy logs in hot paths.
+- Main-process logs should include the subsystem prefix.
+- Do not log secrets, tokens, full auth payloads, or private user content.
+- Prefer typed result objects for expected failures and exceptions for unexpected failures.
+
+---
+
+## Testing
+
+- Tests should prove behavior, not implementation details.
+- Add or update tests when changing command resolution, process management, provider behavior, fixtures, or generated-output contracts.
+- Playwright assertions should prefer user-visible results and stable accessibility selectors.
+- Avoid fallback assertions that can pass without proving the scenario.
+- When adding a bug fix, reproduce the bug first where feasible.
+- Keep test helpers small and named after user intent.
+
+---
+
+## Comments And Documentation
+
+- Comments must be in English.
+- Explain why, not what the next line already says.
+- Prefer deleting misleading comments over updating around them.
+- Public architecture decisions should live in `docs/`, not as long comments in code.
+- If code needs a long comment to be understandable, consider extracting names or functions first.
+
+---
+
+## Review Checklist
+
+Before opening or merging a change, check:
+
+- Is the main path easy to read without jumping across many files?
+- Did the change stay inside the right architectural boundary?
+- Did any file exceed 400 lines or become noticeably more mixed in responsibility?
+- Are names specific enough to understand intent without comments?
+- Are invalid states impossible or guarded early?
+- Are errors actionable and free of secrets?
+- Are tests or verification commands included for behavior changes?
+- Did you remove unused imports, types, functions, files, and CSS?
+- Did you avoid adding abstractions with only one speculative consumer?
+
+---
+
+## Repository-Specific Rules
+
+- Node must satisfy the repository engine: `>=20.20.2`.
+- Use `pnpm` from the workspace root for installs and workspace commands.
+- Do not run package installs from nested application folders.
+- Keep `.gitignore` in the project root unless a nested repository explicitly requires its own.
+- Generated or scaffolded plugin behavior must preserve existing consumer projects unless a migration is explicit.
+- Desktop builds require `@specwright/agent-runner` to be built when packaging or testing packaged flows.
+- `agent-runner` is CommonJS output; MCP server is ESM/plain JS. Do not blur module-system assumptions.

docker-compose.yml

@@ -0,0 +1,54 @@
+services:
+  app:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      PORT: "3000"
+      GENERATION_PROVIDER: kaggle
+      KAGGLE_COMMAND: kaggle
+      KAGGLE_ACCELERATOR: NvidiaTeslaT4
+      KAGGLE_USE_SMALL_DECODER: "0"
+      KAGGLE_INFERENCE_STEPS: "4"
+      KAGGLE_CACHE_KERNEL_REF: jolvangeest/mplus-flux2-cache
+      KAGGLE_POLL_INTERVAL_MS: "5000"
+      KAGGLE_POLL_TIMEOUT_MS: "7200000"
+      DATABASE_URL: postgresql://mplus:mplus@postgres:5432/mplus_studio
+      S3_ENDPOINT: http://minio:9000
+      S3_BUCKET: mplus-studio
+      S3_ACCESS_KEY_ID: mplus
+      S3_SECRET_ACCESS_KEY: mplus-studio-secret
+      S3_FORCE_PATH_STYLE: "1"
+    depends_on:
+      - postgres
+      - minio
+    volumes:
+      - kaggle-sessions:/app/data/kaggle-sessions
+
+  postgres:
+    image: postgres:16-alpine
+    environment:
+      POSTGRES_DB: mplus_studio
+      POSTGRES_USER: mplus
+      POSTGRES_PASSWORD: mplus
+    ports:
+      - "5432:5432"
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+
+  minio:
+    image: minio/minio:latest
+    command: server /data --console-address ":9001"
+    environment:
+      MINIO_ROOT_USER: mplus
+      MINIO_ROOT_PASSWORD: mplus-studio-secret
+    ports:
+      - "9000:9000"
+      - "9001:9001"
+    volumes:
+      - minio-data:/data
+
+volumes:
+  postgres-data:
+  minio-data:
+  kaggle-sessions:

docs/multi-user-architecture.md

@@ -0,0 +1,62 @@
+# Multi-User Architecture
+
+Mplus Studio can run in one hosted Docker environment for multiple users, but Kaggle auth must be isolated per user.
+
+## Services
+
+- App: Angular frontend served by the Node backend.
+- PostgreSQL: users, sessions, jobs, ownership, metrics, and audit records.
+- MinIO: S3-compatible object storage for uploaded images, generated outputs, and reports.
+- Kaggle CLI: executed server-side only, scoped to the current user's auth context.
+
+## User Flow
+
+Product language should stay simple:
+
+```text
+Productafbeeldingen maken
+Inloggen en starten
+Je kunt nu productafbeeldingen maken
+```
+
+The regular user flow should not mention Kaggle, GPU, kernel, notebook, provider, S3, or database.
+
+## Kaggle Isolation
+
+Each user needs one isolated Kaggle auth context.
+
+For CLI-based auth, use a per-user config directory:
+
+```text
+/app/data/kaggle-sessions/<user-id-or-session-id>/
+```
+
+Every Kaggle command for that user must run with:
+
+```text
+KAGGLE_CONFIG_DIR=/app/data/kaggle-sessions/<user-id-or-session-id>
+```
+
+Never expose Kaggle auth files to the browser.
+
+## Storage Model
+
+PostgreSQL stores metadata and ownership. MinIO stores binary assets.
+
+Suggested object keys:
+
+```text
+users/<user-id>/jobs/<job-id>/inputs/<file-name>
+users/<user-id>/jobs/<job-id>/outputs/generated.png
+users/<user-id>/jobs/<job-id>/report/result.md
+```
+
+## Next Implementation Step
+
+The current MVP still generates directly from the request payload. The next backend step is to add:
+
+- session/user table;
+- job table;
+- S3 upload/download helpers;
+- async job status endpoint;
+- per-user Kaggle config resolution.

e2e/studio-flow.spec.ts

@@ -0,0 +1,263 @@
+import { expect, test } from '@playwright/test';
+import { copyFile, mkdir, rm, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+
+const demoMode = process.env.E2E_DEMO_MODE === '1';
+const demoDelayMs = 2000;
+const demoImagePaths = [
+  path.join(process.cwd(), 'e2e', 'fixtures', 'menu-burger.jpg'),
+  path.join(process.cwd(), 'e2e', 'fixtures', 'menu-drink.jpg'),
+  path.join(process.cwd(), 'e2e', 'fixtures', 'menu-fries.jpg'),
+];
+const demoOutputDirectory = path.join(process.cwd(), 'test-results', 'e2e', 'kaggle-demo');
+const demoRunId = new Date().toISOString().replace(/[-:.TZ]/g, '').slice(0, 14);
+const prompt = 'Maak een professionele fastfood menu deal met burger, drinken en friet op een schone witte menu-achtergrond';
+
+type GenerationMetrics = {
+  durationSeconds?: number;
+  inferenceSeconds?: number;
+  modelLoadSeconds?: number;
+  setupSeconds?: number;
+  steps?: number;
+  gpuName?: string;
+};
+
+async function waitForDemo(): Promise<void> {
+  if (!demoMode) {
+    return;
+  }
+
+  await new Promise((resolvePromise) => setTimeout(resolvePromise, demoDelayMs));
+}
+
+test('generates a real menu deal image through Kaggle', async ({ page }) => {
+  test.setTimeout(7_500_000);
+
+  await page.goto('/');
+  await waitForDemo();
+
+  await expect(page.getByRole('heading', { name: 'Maak betere productbeelden.' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Maak nieuwe beelden' })).toBeDisabled();
+
+  await page.locator('input[type="file"]:not([webkitdirectory])').setInputFiles(demoImagePaths);
+  await waitForDemo();
+
+  await expect(page.getByText('menu-burger.jpg')).toBeVisible();
+  await expect(page.getByText('menu-drink.jpg')).toBeVisible();
+  await expect(page.getByText('menu-fries.jpg')).toBeVisible();
+
+  await page.getByLabel('Type beeld').selectOption('menu');
+  await page.getByLabel('Preset').selectOption('studio');
+  await page.getByLabel('Formaat').selectOption('1:1');
+  await page.getByLabel('Gewenste uitstraling').fill(prompt);
+  await waitForDemo();
+
+  const generationResponsePromise = page.waitForResponse('http://127.0.0.1:3000/api/generations', { timeout: 7_200_000 });
+
+  await page.getByRole('button', { name: 'Maak nieuwe beelden' }).click();
+  await expect(page.getByRole('button', { name: 'Beelden maken...' })).toBeVisible();
+  await waitForDemo();
+
+  const generationResponse = await generationResponsePromise;
+  const generationBody = await generationResponse.text();
+  if (generationResponse.status() !== 202) {
+    await writeFailureReport(generationResponse.status(), generationBody);
+  }
+
+  expect(generationResponse.status(), generationBody).toBe(202);
+  const jobId = parseGenerationJobId(generationBody);
+  const completedGenerationResponse = await page.waitForResponse(async (response) => {
+    if (response.url() !== `http://127.0.0.1:3000/api/generations/${jobId}` || response.status() !== 200) {
+      return false;
+    }
+
+    const body = await response.text();
+    return parseGenerationJobStatus(body) === 'completed';
+  }, { timeout: 7_200_000 });
+  const completedGenerationBody = await completedGenerationResponse.text();
+  const generationMetrics = parseGenerationMetrics(completedGenerationBody);
+
+  await expect(page.getByRole('button', { name: 'Maak nieuwe beelden' })).toBeVisible();
+  await expect(page.getByText(/beeld is klaar voor controle\./).first()).toBeVisible({ timeout: 30_000 });
+  await waitForDemo();
+
+  await page.locator('.image-card').first().getByRole('button', { name: 'Clean studio' }).click();
+  await expect(page.locator('.image-card').first().getByText(/beeld is klaar voor controle\./)).toBeVisible();
+  await waitForDemo();
+
+  const generatedSource = await page.locator('.image-card').first().locator('.generated img').getAttribute('src');
+  expect(generatedSource?.startsWith('data:image/')).toBe(true);
+
+  if (generatedSource !== null) {
+    await writeDemoReport(generatedSource, generationMetrics);
+  }
+
+  await page.locator('.image-card').first().getByRole('button', { name: 'Verwijder' }).click();
+  await waitForDemo();
+  await expect(page.getByText('menu-burger.jpg')).not.toBeVisible();
+});
+
+async function writeDemoReport(generatedSource: string, metrics: GenerationMetrics | undefined): Promise<void> {
+  const originalFileNames = ['input-menu-burger.jpg', 'input-menu-drink.jpg', 'input-menu-fries.jpg'];
+  const generatedFileName = `generated-${demoRunId}.png`;
+  const reportFileName = 'result.md';
+
+  await resetDemoOutputDirectory();
+  await mkdir(demoOutputDirectory, { recursive: true });
+  for (const [index, imagePath] of demoImagePaths.entries()) {
+    await copyFile(imagePath, path.join(demoOutputDirectory, originalFileNames[index]));
+  }
+  const generatedImage = decodeDataUrl(generatedSource);
+  await writeFile(path.join(demoOutputDirectory, generatedFileName), generatedImage);
+  await writeFile(path.join(demoOutputDirectory, 'generated.png'), generatedImage);
+  await writeFile(
+    path.join(demoOutputDirectory, reportFileName),
+    [
+      '# Kaggle FLUX.2 klein Production Menu E2E Result',
+      '',
+      '## Prompt',
+      '',
+      prompt,
+      '',
+      '## Input Images',
+      '',
+      ...originalFileNames.map((fileName) => `![Input](./${fileName})`),
+      '',
+      '## Timing',
+      '',
+      ...buildTimingLines(metrics),
+      '',
+      '## Visual Acceptance Criteria',
+      '',
+      '- One composed menu-deal image, not a copied collage.',
+      '- White menu-board/product photography background.',
+      '- Burger, exactly one drink, and exactly one side item must be visible and correctly scaled.',
+      '- No duplicate drinks, duplicate sides, or extra products.',
+      '- No added brand logos, prices, labels, or promotional text.',
+      '',
+      '## Generated Image',
+      '',
+      `![Generated](./${generatedFileName})`,
+      '',
+    ].join('\n'),
+  );
+}
+
+function buildTimingLines(metrics: GenerationMetrics | undefined): string[] {
+  if (metrics === undefined) {
+    return ['- Model inference: not reported by provider.'];
+  }
+
+  return [
+    `- Model inference only: ${formatSeconds(metrics.inferenceSeconds)}`,
+    `- Model load: ${formatSeconds(metrics.modelLoadSeconds)}`,
+    `- Setup before model load: ${formatSeconds(metrics.setupSeconds)}`,
+    `- Total Kaggle kernel runtime: ${formatSeconds(metrics.durationSeconds)}`,
+    `- Steps: ${metrics.steps ?? 'unknown'}`,
+    `- GPU: ${metrics.gpuName ?? 'unknown'}`,
+  ];
+}
+
+function formatSeconds(seconds: number | undefined): string {
+  if (seconds === undefined) {
+    return 'unknown';
+  }
+
+  return `${seconds.toFixed(2)}s`;
+}
+
+function parseGenerationMetrics(responseBody: string): GenerationMetrics | undefined {
+  const response = JSON.parse(responseBody);
+  if (!hasMetrics(response)) {
+    return undefined;
+  }
+
+  return response.result?.metrics ?? response.metrics;
+}
+
+function parseGenerationJobId(responseBody: string): string {
+  const response = JSON.parse(responseBody);
+  if (!hasJobId(response)) {
+    throw new Error('Generation response did not include a job id');
+  }
+
+  return response.jobId;
+}
+
+function parseGenerationJobStatus(responseBody: string): string | undefined {
+  const response = JSON.parse(responseBody);
+  if (typeof response !== 'object' || response === null || !('status' in response)) {
+    return undefined;
+  }
+
+  const status = (<{ status?: unknown }>response).status;
+  return typeof status === 'string' ? status : undefined;
+}
+
+function hasMetrics(value: unknown): value is { metrics: GenerationMetrics } {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+
+  const response = <{ metrics?: unknown; result?: { metrics?: unknown } }>value;
+  const metrics = response.result?.metrics ?? response.metrics;
+  return typeof metrics === 'object' && metrics !== null;
+}
+
+function hasJobId(value: unknown): value is { jobId: string } {
+  if (typeof value !== 'object' || value === null || !('jobId' in value)) {
+    return false;
+  }
+
+  return typeof (<{ jobId?: unknown }>value).jobId === 'string';
+}
+
+async function writeFailureReport(status: number, responseBody: string): Promise<void> {
+  const originalFileNames = ['input-menu-burger.jpg', 'input-menu-drink.jpg', 'input-menu-fries.jpg'];
+  const reportFileName = 'result.md';
+
+  await resetDemoOutputDirectory();
+  await mkdir(demoOutputDirectory, { recursive: true });
+  for (const [index, imagePath] of demoImagePaths.entries()) {
+    await copyFile(imagePath, path.join(demoOutputDirectory, originalFileNames[index]));
+  }
+  await writeFile(
+    path.join(demoOutputDirectory, reportFileName),
+    [
+      '# Kaggle FLUX.2 klein Production Menu E2E Result',
+      '',
+      '## Status',
+      '',
+      `Generation failed with HTTP ${status}.`,
+      '',
+      '## Prompt',
+      '',
+      prompt,
+      '',
+      '## Input Images',
+      '',
+      ...originalFileNames.map((fileName) => `![Input](./${fileName})`),
+      '',
+      '## Error',
+      '',
+      '```json',
+      responseBody,
+      '```',
+      '',
+    ].join('\n'),
+  );
+}
+
+async function resetDemoOutputDirectory(): Promise<void> {
+  await rm(demoOutputDirectory, { force: true, recursive: true });
+}
+
+function decodeDataUrl(dataUrl: string): Buffer {
+  const base64Marker = ';base64,';
+  const markerIndex = dataUrl.indexOf(base64Marker);
+  if (markerIndex === -1) {
+    throw new Error('Generated image was not a base64 data URL');
+  }
+
+  return Buffer.from(dataUrl.slice(markerIndex + base64Marker.length), 'base64');
+}

kaggle-flux2-cache/kernel-metadata.example.json

@@ -0,0 +1,14 @@
+{
+  "id": "jolvangeest/mplus-flux2-cache",
+  "title": "mplus-flux2-cache",
+  "code_file": "kernel.py",
+  "language": "python",
+  "kernel_type": "script",
+  "is_private": true,
+  "enable_gpu": true,
+  "enable_internet": true,
+  "dataset_sources": [],
+  "competition_sources": [],
+  "kernel_sources": [],
+  "model_sources": []
+}

kaggle-flux2-cache/kernel-metadata.json

@@ -0,0 +1,14 @@
+{
+  "id": "jolvangeest/mplus-flux2-cache",
+  "title": "mplus-flux2-cache",
+  "code_file": "kernel.py",
+  "language": "python",
+  "kernel_type": "script",
+  "is_private": true,
+  "enable_gpu": true,
+  "enable_internet": true,
+  "dataset_sources": [],
+  "competition_sources": [],
+  "kernel_sources": [],
+  "model_sources": []
+}

kaggle-flux2-cache/kernel.py

@@ -0,0 +1,71 @@
+from __future__ import annotations
+
+import os
+import subprocess
+import sys
+from pathlib import Path
+
+
+OUTPUT_ROOT = Path("/kaggle/working")
+CACHE_ROOT = OUTPUT_ROOT / "hf-cache"
+DEPENDENCY_ROOT = OUTPUT_ROOT / "python-deps"
+MODEL_ID = "black-forest-labs/FLUX.2-klein-4B"
+
+
+def main() -> None:
+    os.environ["HF_HOME"] = str(CACHE_ROOT)
+    install_dependencies()
+    add_dependency_path()
+    cache_model()
+
+
+def cache_model() -> None:
+    import torch
+    from diffusers import Flux2KleinPipeline
+
+
+    Flux2KleinPipeline.from_pretrained(MODEL_ID, torch_dtype=torch.bfloat16)
+    (OUTPUT_ROOT / "cache-ready.txt").write_text(f"Cached {MODEL_ID} in {CACHE_ROOT}\n")
+
+
+def install_dependencies() -> None:
+    if has_required_dependencies():
+        return
+
+    DEPENDENCY_ROOT.mkdir(parents=True, exist_ok=True)
+    subprocess.check_call([
+        sys.executable,
+        "-m",
+        "pip",
+        "install",
+        "--quiet",
+        "--upgrade",
+        "--prefer-binary",
+        "--target",
+        str(DEPENDENCY_ROOT),
+        "diffusers",
+        "accelerate",
+        "transformers",
+        "sentencepiece",
+    ])
+    add_dependency_path()
+
+
+def add_dependency_path() -> None:
+    if DEPENDENCY_ROOT.exists() and str(DEPENDENCY_ROOT) not in sys.path:
+        sys.path.insert(0, str(DEPENDENCY_ROOT))
+
+
+def has_required_dependencies() -> bool:
+    try:
+        import accelerate
+        import diffusers
+        import transformers
+    except ImportError:
+        return False
+
+    return True
+
+
+if __name__ == "__main__":
+    main()

kaggle-flux2-klein/kernel.py

@@ -0,0 +1,246 @@
+from __future__ import annotations
+
+import base64
+import io
+import json
+import os
+import subprocess
+import sys
+import time
+import traceback
+from pathlib import Path
+from typing import Any
+
+
+INPUT_ROOT = Path("/kaggle/input")
+OUTPUT_ROOT = Path("/kaggle/working")
+SOURCE_ROOT = Path(__file__).parent
+MODEL_ID = "__MPLUS_MODEL_ID__"
+SMALL_DECODER_ID = "black-forest-labs/FLUX.2-small-decoder"
+EMBEDDED_REQUEST_JSON = "__MPLUS_REQUEST_JSON__"
+EMBEDDED_IMAGES_JSON = "__MPLUS_IMAGES_JSON__"
+USE_SMALL_DECODER = "__MPLUS_USE_SMALL_DECODER__" == "1"
+INFERENCE_STEPS = int("__MPLUS_INFERENCE_STEPS__")
+SIZE_BY_RATIO = {
+    "16:9": (768, 432),
+    "9:16": (432, 768),
+    "1:1": (512, 512),
+}
+
+
+def main() -> None:
+    try:
+        run_generation()
+    except Exception as error:
+        write_error_result(error)
+
+
+def write_error_result(error: Exception) -> None:
+    (OUTPUT_ROOT / "results.json").write_text(json.dumps({
+            "__error": str(error),
+            "__traceback": traceback.format_exc(),
+    }))
+
+
+def run_generation() -> None:
+    started_at = time.perf_counter()
+    configure_model_cache()
+    add_dependency_path()
+    install_dependencies()
+
+    import torch
+    from diffusers import AutoencoderKLFlux2, Flux2KleinPipeline
+    from PIL import Image
+
+    request, input_directory, embedded_images = load_request()
+
+    width, height = SIZE_BY_RATIO.get(request["ratio"], (512, 512))
+
+    torch.backends.cuda.matmul.allow_tf32 = True
+    model_load_started_at = time.perf_counter()
+    if USE_SMALL_DECODER:
+        vae = AutoencoderKLFlux2.from_pretrained(SMALL_DECODER_ID, torch_dtype=torch.bfloat16)
+        pipe = Flux2KleinPipeline.from_pretrained(MODEL_ID, vae=vae, torch_dtype=torch.bfloat16)
+    else:
+        pipe = Flux2KleinPipeline.from_pretrained(MODEL_ID, torch_dtype=torch.bfloat16)
+    pipe.enable_model_cpu_offload()
+    model_load_seconds = time.perf_counter() - model_load_started_at
+
+    results: dict[str, Any] = {}
+    inference_seconds = 0.0
+    if request.get("mode") == "menu":
+        inference_started_at = time.perf_counter()
+        generated_image = pipe(
+            image=build_menu_reference(request["images"], input_directory, embedded_images, Image),
+            prompt=request["prompt"],
+            height=height,
+            width=width,
+            guidance_scale=1.0,
+            num_inference_steps=INFERENCE_STEPS,
+        ).images[0]
+        inference_seconds += time.perf_counter() - inference_started_at
+
+        output_file = OUTPUT_ROOT / "menu-deal-generated.png"
+        generated_image.save(output_file)
+        results[request["images"][0]["name"]] = output_file.name
+    else:
+        inference_seconds = generate_product_images(request, input_directory, embedded_images, Image, pipe, height, width, results)
+
+    results["__metrics"] = {
+        "durationSeconds": round(time.perf_counter() - started_at, 2),
+        "inferenceSeconds": round(inference_seconds, 2),
+        "modelLoadSeconds": round(model_load_seconds, 2),
+        "setupSeconds": round(model_load_started_at - started_at, 2),
+        "height": height,
+        "width": width,
+        "steps": INFERENCE_STEPS,
+        "smallDecoder": USE_SMALL_DECODER,
+        "cudaAvailable": torch.cuda.is_available(),
+        "gpuName": torch.cuda.get_device_name(0) if torch.cuda.is_available() else "none",
+        "hfHome": os.environ.get("HF_HOME", ""),
+        "mode": request.get("mode", "product"),
+        "modelId": request.get("modelId", MODEL_ID),
+    }
+    (OUTPUT_ROOT / "results.json").write_text(json.dumps(results))
+
+
+def generate_product_images(
+    request: dict[str, Any],
+    input_directory: Path | None,
+    embedded_images: dict[str, str],
+    image_module: Any,
+    pipe: Any,
+    height: int,
+    width: int,
+    results: dict[str, Any],
+) -> float:
+    inference_seconds = 0.0
+    for image_request in request["images"]:
+        source_image = load_source_image(image_request["name"], input_directory, embedded_images, image_module)
+        inference_started_at = time.perf_counter()
+        generated_image = pipe(
+            image=source_image,
+            prompt=request["prompt"],
+            height=height,
+            width=width,
+            guidance_scale=1.0,
+            num_inference_steps=INFERENCE_STEPS,
+        ).images[0]
+        inference_seconds += time.perf_counter() - inference_started_at
+
+        output_file = OUTPUT_ROOT / f"{Path(image_request['name']).stem}-generated.png"
+        generated_image.save(output_file)
+        results[image_request["name"]] = output_file.name
+
+    return inference_seconds
+
+
+def add_dependency_path() -> None:
+    for dependency_root in INPUT_ROOT.glob("*/python-deps"):
+        if dependency_root.exists() and str(dependency_root) not in sys.path:
+            sys.path.insert(0, str(dependency_root))
+
+
+def build_menu_reference(image_requests: list[dict[str, Any]], input_directory: Path | None, embedded_images: dict[str, str], image_module: Any) -> Any:
+    canvas = image_module.new("RGB", (768, 512), "white")
+    if len(image_requests) == 0:
+        raise ValueError("At least one image is required for menu generation")
+
+    slot_width = canvas.width // min(len(image_requests), 3)
+    for index, image_request in enumerate(image_requests[:3]):
+        source_image = load_source_image(image_request["name"], input_directory, embedded_images, image_module)
+        source_image.thumbnail((slot_width - 48, 360))
+        x_position = (slot_width * index) + ((slot_width - source_image.width) // 2)
+        y_position = 86 + ((360 - source_image.height) // 2)
+        canvas.paste(source_image, (x_position, y_position))
+
+    return canvas
+
+
+def safe_name(file_name: str) -> str:
+    return "".join(character if character.isalnum() or character in "._-" else "_" for character in Path(file_name).name)
+
+
+def load_source_image(image_name: str, input_directory: Path | None, embedded_images: dict[str, str], image_module: Any) -> Any:
+    safe_image_name = safe_name(image_name)
+    if input_directory is not None:
+        return image_module.open(input_directory / safe_image_name).convert("RGB")
+
+    return image_module.open(io.BytesIO(base64.b64decode(embedded_images[safe_image_name]))).convert("RGB")
+
+
+def find_request_path() -> Path | None:
+    input_request_paths = list(INPUT_ROOT.glob("*/request.json"))
+    if input_request_paths:
+        return input_request_paths[0]
+
+    source_request_path = SOURCE_ROOT / "request.json"
+    if source_request_path.exists():
+        return source_request_path
+
+    return None
+
+
+def load_request() -> tuple[dict[str, Any], Path | None, dict[str, str]]:
+    request_path = find_request_path()
+    if request_path is not None:
+        request = json.loads(request_path.read_text())
+        return request, request_path.parent, {}
+
+    request = json.loads(EMBEDDED_REQUEST_JSON)
+    embedded_images = json.loads(EMBEDDED_IMAGES_JSON)
+    if not isinstance(embedded_images, dict):
+        raise ValueError("Embedded images payload must be a JSON object")
+
+    return request, None, embedded_images
+
+
+def install_dependencies() -> None:
+    if has_required_dependencies():
+        return
+
+    subprocess.check_call([
+        sys.executable,
+        "-m",
+        "pip",
+        "install",
+        "--quiet",
+        "--upgrade",
+        "--prefer-binary",
+        "diffusers",
+        "accelerate",
+        "transformers",
+        "sentencepiece",
+    ])
+
+
+def has_required_dependencies() -> bool:
+    try:
+        import accelerate
+        import diffusers
+        import transformers
+    except ImportError:
+        return False
+
+    return True
+
+
+def configure_model_cache() -> None:
+    cache_root = find_cache_root()
+    if cache_root is None:
+        os.environ["HF_HOME"] = str(OUTPUT_ROOT / "hf-cache")
+        return
+
+    os.environ["HF_HOME"] = str(cache_root)
+
+
+def find_cache_root() -> Path | None:
+    for cache_directory in INPUT_ROOT.glob("*/hf-cache"):
+        if cache_directory.exists():
+            return cache_directory
+
+    return None
+
+
+if __name__ == "__main__":
+    main()

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "mplus-studio",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "start:prod": "npm --workspace backend run start",
+    "build": "ng build",
+    "build:all": "npm run build && npm run backend:build",
+    "watch": "ng build --watch --configuration development",
+    "test": "npm run test:unit && npm run test:component && npm run test:integration",
+    "test:unit": "ng test --watch=false --include \"src/**/*.unit.spec.ts\"",
+    "test:component": "ng test --watch=false --include \"src/**/*.component.spec.ts\"",
+    "test:integration": "ng test --watch=false --include \"src/**/*.integration.spec.ts\"",
+    "test:e2e": "playwright test",
+    "test:e2e:kaggle": "playwright test e2e/studio-flow.spec.ts",
+    "deploy:check": "uv run python scripts/deploy-check.py",
+    "deploy:huggingface": "uv run --with huggingface_hub python scripts/deploy-huggingface.py",
+    "kaggle:cache:push": "uv run --with kaggle kaggle kernels push -p kaggle-flux2-cache --accelerator NvidiaTeslaT4 -t 7200",
+    "test:backend": "npm --workspace backend test",
+    "backend:dev": "npm --workspace backend run dev",
+    "backend:build": "npm --workspace backend run build",
+    "test:all": "npm run test && npm run test:backend && npm run test:e2e"
+  },
+  "private": true,
+  "workspaces": ["backend"],
+  "packageManager": "npm@10.8.2",
+  "dependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^21.2.13",
+    "@angular/cli": "^21.2.13",
+    "@angular/compiler-cli": "^21.2.0",
+    "@playwright/test": "^1.60.0",
+    "jsdom": "^29.1.1",
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.2",
+    "vitest": "^4.1.7"
+  }
+}

playwright.config.ts

@@ -0,0 +1,40 @@
+import 'dotenv/config';
+import { defineConfig, devices } from '@playwright/test';
+
+const frontendPort = process.env.E2E_PORT ?? '5000';
+const frontendUrl = `http://127.0.0.1:${frontendPort}`;
+
+export default defineConfig({
+  testDir: './e2e',
+  outputDir: './test-results/e2e/artifacts',
+  reporter: [
+    ['list'],
+    ['json', { outputFile: 'test-results/e2e/playwright-json/results.json' }],
+    ['html', { outputFolder: 'test-results/e2e/html', open: 'never' }],
+  ],
+  use: {
+    baseURL: frontendUrl,
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+  },
+  webServer: [
+    {
+      command: 'npm run backend:dev',
+      url: 'http://127.0.0.1:3000/health',
+      reuseExistingServer: true,
+      timeout: 120_000,
+    },
+    {
+      command: `npm run start -- --host 127.0.0.1 --port ${frontendPort}`,
+      url: frontendUrl,
+      reuseExistingServer: true,
+      timeout: 120_000,
+    },
+  ],
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

scripts/deploy-check.py

@@ -0,0 +1,50 @@
+from __future__ import annotations
+
+import os
+import webbrowser
+
+
+TOKEN_URLS = {
+    "HF_TOKEN": "https://huggingface.co/settings/tokens",
+    "KAGGLE_API_TOKEN": "https://www.kaggle.com/settings/api",
+}
+
+REQUIRED_ENV = ["HF_TOKEN", "HF_SPACE_ID", "KAGGLE_USERNAME", "KAGGLE_API_TOKEN"]
+
+
+def main() -> None:
+    missing = [name for name in REQUIRED_ENV if not os.environ.get(name)]
+
+    print("Mplus Studio deploy check")
+    print("")
+    for name in REQUIRED_ENV:
+        status = "set" if os.environ.get(name) else "missing"
+        print(f"{name}: {status}")
+
+    if not missing:
+        print("")
+        print("All required deploy variables are set. Run: npm run deploy:huggingface")
+        return
+
+    print("")
+    print("Missing variables:")
+    for name in missing:
+        print(f"- {name}")
+
+    for name in missing:
+        url = TOKEN_URLS.get(name)
+        if url is not None:
+            print(f"Opening {name} setup page: {url}")
+            webbrowser.open(url)
+
+    print("")
+    print("Set the variables in this PowerShell session, then run deploy again:")
+    print('$env:HF_TOKEN="hf_..."')
+    print('$env:HF_SPACE_ID="your-huggingface-name/mplus-studio"')
+    print('$env:KAGGLE_USERNAME="your-kaggle-username"')
+    print('$env:KAGGLE_API_TOKEN="your-kaggle-api-token"')
+    print("npm run deploy:huggingface")
+
+
+if __name__ == "__main__":
+    main()

scripts/deploy-huggingface.py

@@ -0,0 +1,72 @@
+from __future__ import annotations
+
+import os
+from pathlib import Path
+
+from huggingface_hub import HfApi
+
+
+REQUIRED_ENV = ["HF_TOKEN", "HF_SPACE_ID", "KAGGLE_USERNAME", "KAGGLE_API_TOKEN"]
+
+
+def main() -> None:
+    missing = [name for name in REQUIRED_ENV if not os.environ.get(name)]
+    if missing:
+        raise SystemExit(f"Missing required environment variables: {', '.join(missing)}")
+
+    project_root = Path(__file__).resolve().parents[1]
+    repo_id = os.environ["HF_SPACE_ID"]
+    token = os.environ["HF_TOKEN"]
+    api = HfApi(token=token)
+
+    api.create_repo(
+        repo_id=repo_id,
+        repo_type="space",
+        space_sdk="docker",
+        private=True,
+        exist_ok=True,
+    )
+
+    secrets = {
+        "PORT": "7860",
+        "GENERATION_PROVIDER": "kaggle",
+        "COMMERCIAL_MODE": "1",
+        "FLUX_MODEL_ID": os.environ.get("FLUX_MODEL_ID", "black-forest-labs/FLUX.2-klein-4B"),
+        "KAGGLE_COMMAND": "kaggle",
+        "KAGGLE_USERNAME": os.environ["KAGGLE_USERNAME"],
+        "KAGGLE_API_TOKEN": os.environ["KAGGLE_API_TOKEN"],
+        "KAGGLE_ACCELERATOR": os.environ.get("KAGGLE_ACCELERATOR", "NvidiaTeslaT4"),
+        "KAGGLE_USE_SMALL_DECODER": os.environ.get("KAGGLE_USE_SMALL_DECODER", "0"),
+        "KAGGLE_INFERENCE_STEPS": os.environ.get("KAGGLE_INFERENCE_STEPS", "4"),
+        "KAGGLE_CACHE_KERNEL_REF": os.environ.get("KAGGLE_CACHE_KERNEL_REF", "jolvangeest/mplus-flux2-cache"),
+        "KAGGLE_POLL_INTERVAL_MS": os.environ.get("KAGGLE_POLL_INTERVAL_MS", "5000"),
+        "KAGGLE_POLL_TIMEOUT_MS": os.environ.get("KAGGLE_POLL_TIMEOUT_MS", "7200000"),
+    }
+
+    for key, value in secrets.items():
+        api.add_space_secret(repo_id=repo_id, key=key, value=value)
+
+    api.upload_folder(
+        repo_id=repo_id,
+        repo_type="space",
+        folder_path=str(project_root),
+        commit_message="Deploy Mplus Studio",
+        ignore_patterns=[
+            ".git/*",
+            ".angular/*",
+            ".kaggle-work/*",
+            ".env",
+            "backend/dist/*",
+            "backend/node_modules/*",
+            "dist/*",
+            "graphify-out/*",
+            "node_modules/*",
+            "test-results/*",
+        ],
+    )
+
+    print(f"Deployed to https://huggingface.co/spaces/{repo_id}")
+
+
+if __name__ == "__main__":
+    main()

src/app/app.component.spec.ts

@@ -0,0 +1,20 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App component', () => {
+  let fixture: ComponentFixture<App>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [App] }).compileComponents();
+    fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+  });
+
+  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(fixture.nativeElement.querySelector('.primary').disabled).toBe(true);
+  });
+});

src/app/app.config.ts

@@ -0,0 +1,5 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideBrowserGlobalErrorListeners()],
+};

src/app/app.html

@@ -0,0 +1,187 @@
+<main class="studio-shell">
+  <section class="workflow-board" aria-label="Beeldworkflow">
+    <header class="board-header">
+      <div>
+        <p class="eyebrow">MplusKassa Studio MVP</p>
+        <h1>Maak betere productbeelden.</h1>
+      </div>
+      <p class="next-action">{{ nextAction() }}</p>
+    </header>
+
+    <div class="workflow-grid">
+      <aside class="step-rail" aria-label="Stappen">
+        <ol class="monitor-steps">
+          @for (step of monitorSteps(); track step.label) {
+            <li [class]="step.state">
+              <strong>{{ step.label }}</strong>
+              <span>{{ step.detail }}</span>
+            </li>
+          }
+        </ol>
+      </aside>
+
+      <section class="action-panel" aria-label="Volgende actie">
+        <div class="upload-card">
+          <label>
+            <input
+              type="file"
+              accept="image/*"
+              multiple
+              (change)="onFilesSelected($event)"
+            />
+            <span>Foto’s kiezen</span>
+            <small>{{ selectedImageCountLabel() }}</small>
+          </label>
+
+          <label>
+            <input
+              type="file"
+              accept="image/*"
+              multiple
+              webkitdirectory
+              (change)="onFilesSelected($event)"
+            />
+            <span>Map kiezen</span>
+            <small>Meerdere foto’s tegelijk</small>
+          </label>
+        </div>
+
+        <div class="controls" aria-label="Transformatie instellingen">
+          <label>
+            Type beeld
+            <select
+              [ngModel]="mode()"
+              (ngModelChange)="mode.set($event)"
+            >
+              <option value="product">Los product</option>
+              <option value="menu">Menu deal</option>
+            </select>
+          </label>
+
+          <label>
+            Preset
+            <select
+              [ngModel]="preset()"
+              (ngModelChange)="preset.set($event)"
+            >
+              <option value="studio">Witte menu achtergrond</option>
+              <option value="food">Warme horeca sfeer</option>
+              <option value="retail">Winkelpresentatie</option>
+              <option value="premium">Luxe campagnebeeld</option>
+            </select>
+          </label>
+
+          <label>
+            Formaat
+            <select
+              [ngModel]="ratio()"
+              (ngModelChange)="ratio.set($event)"
+            >
+              <option value="16:9">Breed scherm</option>
+              <option value="9:16">Staand scherm</option>
+              <option value="1:1">Vierkant beeld</option>
+            </select>
+          </label>
+
+          <label class="prompt-field">
+            Gewenste uitstraling
+            <textarea
+              [ngModel]="prompt()"
+              (ngModelChange)="prompt.set($event)"
+              rows="2"
+            ></textarea>
+          </label>
+
+          <button
+            class="primary"
+            type="button"
+            [disabled]="!hasImages() || isGenerating()"
+            (click)="onGenerateBatch()"
+          >
+            {{ isGenerating() ? 'Beelden maken...' : 'Maak nieuwe beelden' }}
+          </button>
+        </div>
+      </section>
+
+      <aside class="proof-panel" aria-label="Status en bewijs">
+        <p class="eyebrow">Status</p>
+        <h2>{{ monitor().message }}</h2>
+        <dl>
+          <div>
+            <dt>Beelden</dt>
+            <dd>{{ selectedImageCountLabel() }}</dd>
+          </div>
+          <div>
+            <dt>Referentie</dt>
+            <dd>{{ monitor().jobId }}</dd>
+          </div>
+          <div>
+            <dt>Systeem</dt>
+            <dd>{{ monitor().provider }}</dd>
+          </div>
+        </dl>
+      </aside>
+    </div>
+  </section>
+
+  @if (generationError(); as error) {
+    <p class="status-message">{{ error }}</p>
+  }
+
+  @if (!hasImages()) {
+    <section class="empty-state">
+      <h2>Start met productfoto’s</h2>
+      <p>De workflow houdt de volgende stap zichtbaar: uploaden, maken, controleren.</p>
+    </section>
+  }
+
+  <section class="image-grid">
+    @for (image of viewImages(); track image.id) {
+      <article class="image-card">
+        <header>
+          <div>
+            <h2>{{ image.name }}</h2>
+            <p>{{ image.size }} · {{ ratio() }}</p>
+          </div>
+          <button
+            class="ghost"
+            type="button"
+            (click)="removeImage(image.id)"
+          >Verwijder</button>
+        </header>
+
+        <div class="preview-pair">
+          <figure>
+            <img
+              [src]="image.url"
+              [alt]="image.name + ' origineel'"
+            />
+            <figcaption>Origineel</figcaption>
+          </figure>
+          <figure class="generated">
+            <img
+              [src]="image.previewUrl"
+              [style.filter]="image.previewFilter"
+              [alt]="image.name + ' variant'"
+            />
+            <figcaption>{{ image.selectedVariantData.label }}</figcaption>
+          </figure>
+        </div>
+
+        <div class="variant-row">
+          @for (variant of variants; track variant.id) {
+            <button
+              type="button"
+              [class.active]="image.selectedVariant === variant.id"
+              (click)="selectVariant(image.id, variant.id)"
+            >
+              {{ variant.label }}
+            </button>
+          }
+        </div>
+
+        <p class="note">{{ image.note }}</p>
+      </article>
+    }
+  </section>
+</main>

src/app/app.integration.spec.ts

@@ -0,0 +1,198 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { App } from './app';
+
+describe('App studio flow', () => {
+  let fixture: ComponentFixture<App>;
+
+  beforeEach(async () => {
+    vi.stubGlobal('crypto', { randomUUID: vi.fn(() => `image-${Math.random()}`) });
+    vi.stubGlobal('fetch', vi.fn());
+    vi.stubGlobal('URL', {
+      createObjectURL: vi.fn((file: File) => `blob:${file.name}`),
+      revokeObjectURL: vi.fn(),
+    });
+
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('shows the empty starting state', () => {
+    expect(text()).toContain('Start met productfoto’s');
+    expect(fixture.nativeElement.querySelector('.primary').disabled).toBe(true);
+    expect(fixture.nativeElement.querySelectorAll('.image-card')).toHaveLength(0);
+  });
+
+  it('loads multiple images from the picker and renders previews', () => {
+    selectFiles([
+      new File(['one'], 'broodje.png', { type: 'image/png' }),
+      new File(['two'], 'koffie.jpg', { type: 'image/jpeg' }),
+      new File(['skip'], 'artikelen.csv', { type: 'text/csv' }),
+    ]);
+
+    expect(text()).toContain('broodje.png');
+    expect(text()).toContain('koffie.jpg');
+    expect(text()).not.toContain('artikelen.csv');
+    expect(fixture.nativeElement.querySelectorAll('.image-card')).toHaveLength(2);
+    expect(fixture.nativeElement.querySelector('.primary').disabled).toBe(false);
+  });
+
+  it('updates settings, generates variants and shows the generated result', async () => {
+    mockCompletedGenerationJob('job-1', {
+      images: [
+        {
+          originalName: 'cola.webp',
+          variants: [
+            {
+              label: 'FLUX.2 Flex',
+              imageBase64: 'data:image/png;base64,generated',
+            },
+          ],
+        },
+      ],
+    });
+
+    selectFiles([new File(['one'], 'cola.webp', { type: 'image/webp' })]);
+
+    const selects = fixture.nativeElement.querySelectorAll('select') as NodeListOf<HTMLSelectElement>;
+    selects[1].value = 'premium';
+    selects[1].dispatchEvent(new Event('change'));
+    selects[2].value = '9:16';
+    selects[2].dispatchEvent(new Event('change'));
+
+    const textarea = fixture.nativeElement.querySelector('textarea') as HTMLTextAreaElement;
+    textarea.value = 'Maak een realistische koeling achtergrond';
+    textarea.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+
+    click('.primary');
+    expect(text()).toContain('Beelden maken...');
+
+    await waitForGeneration();
+    fixture.detectChanges();
+
+    expect(text()).toContain('Maak nieuwe beelden');
+    expect(text()).toContain('cola.webp');
+    expect(text()).toContain('9:16');
+    expect(text()).toContain('FLUX.2 Flex beeld is klaar voor controle.');
+    expect(fixture.nativeElement.querySelector('.generated img').src).toBe('data:image/png;base64,generated');
+
+    expect(fetch).toHaveBeenCalledWith('/api/generations', expect.objectContaining({ method: 'POST' }));
+    expect(fetch).toHaveBeenCalledWith('/api/generations/job-1');
+  });
+
+  it('submits menu mode with multiple products', async () => {
+    mockCompletedGenerationJob('job-menu', {
+      images: [
+        {
+          originalName: 'burger.jpg',
+          variants: [{ label: 'Menu deal', imageBase64: 'data:image/png;base64,menu' }],
+        },
+      ],
+    });
+
+    selectFiles([
+      new File(['burger'], 'burger.jpg', { type: 'image/jpeg' }),
+      new File(['cola'], 'cola-bottle.jpg', { type: 'image/jpeg' }),
+      new File(['fries'], 'fries.jpg', { type: 'image/jpeg' }),
+    ]);
+
+    const selects = fixture.nativeElement.querySelectorAll('select') as NodeListOf<HTMLSelectElement>;
+    selects[0].value = 'menu';
+    selects[0].dispatchEvent(new Event('change'));
+    fixture.detectChanges();
+
+    click('.primary');
+    await waitForGeneration();
+    fixture.detectChanges();
+
+    const form = vi.mocked(fetch).mock.calls[0][1]?.body as FormData;
+    expect(form.get('mode')).toBe('menu');
+    expect(form.getAll('images')).toHaveLength(3);
+    expect(text()).toContain('Menu deal beeld is klaar voor controle.');
+  });
+
+  it('shows an error when backend generation fails', async () => {
+    vi.mocked(fetch).mockResolvedValue(new Response(undefined, { status: 502 }));
+    selectFiles([new File(['one'], 'cola.webp', { type: 'image/webp' })]);
+
+    click('.primary');
+    await waitForGeneration();
+    fixture.detectChanges();
+
+    expect(text()).toContain('De beeldgenerator kon het verzoek niet verwerken:');
+  });
+
+  it('shows an error when an async job fails', async () => {
+    vi.mocked(fetch).mockResolvedValueOnce(new Response(
+      JSON.stringify({ jobId: 'job-failed', provider: 'kaggle', status: 'queued' }),
+      { status: 202, headers: { 'Content-Type': 'application/json' } },
+    ));
+    vi.mocked(fetch).mockResolvedValueOnce(new Response(
+      JSON.stringify({ jobId: 'job-failed', provider: 'kaggle', status: 'failed', error: 'Kaggle failed' }),
+      { status: 200, headers: { 'Content-Type': 'application/json' } },
+    ));
+    selectFiles([new File(['one'], 'cola.webp', { type: 'image/webp' })]);
+
+    click('.primary');
+    await waitForGeneration();
+    fixture.detectChanges();
+
+    expect(text()).toContain('De beeldgenerator kon het verzoek niet verwerken: Kaggle failed');
+  });
+
+  it('removes an image and releases the object url', () => {
+    selectFiles([new File(['one'], 'pizza.png', { type: 'image/png' })]);
+
+    click('.ghost');
+
+    expect(text()).not.toContain('pizza.png');
+    expect(fixture.nativeElement.querySelectorAll('.image-card')).toHaveLength(0);
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:pizza.png');
+  });
+
+  function mockCompletedGenerationJob(jobId: string, result: object): void {
+    vi.mocked(fetch).mockResolvedValueOnce(new Response(
+      JSON.stringify({ jobId, provider: 'kaggle', status: 'queued' }),
+      { status: 202, headers: { 'Content-Type': 'application/json' } },
+    ));
+    vi.mocked(fetch).mockResolvedValueOnce(new Response(
+      JSON.stringify({ jobId, provider: 'kaggle', status: 'completed', result }),
+      { status: 200, headers: { 'Content-Type': 'application/json' } },
+    ));
+  }
+
+  function selectFiles(files: File[]): void {
+    const input = <HTMLInputElement>fixture.nativeElement.querySelector('input[type="file"]');
+    Object.defineProperty(input, 'files', {
+      configurable: true,
+      value: files,
+    });
+
+    input.dispatchEvent(new Event('change'));
+    fixture.detectChanges();
+  }
+
+  function click(selector: string): void {
+    fixture.debugElement.query(By.css(selector)).nativeElement.click();
+    fixture.detectChanges();
+  }
+
+  function text(): string {
+    return fixture.nativeElement.textContent.replace(/\s+/g, ' ').trim();
+  }
+
+  async function waitForGeneration(): Promise<void> {
+    await fixture.whenStable();
+    await new Promise((resolve) => window.setTimeout(resolve));
+    await fixture.whenStable();
+  }
+});

src/app/app.scss

@@ -0,0 +1,70 @@
+:host { display: block; min-height: 100dvh; color: #242424; background: #fafafa; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+.studio-shell { width: min(1220px, calc(100% - 24px)); margin: 0 auto; padding: 12px 0 32px; }
+.workflow-board, .empty-state, .image-card { border: 1px solid #e6e6e6; border-radius: 6px; background: white; }
+.workflow-board { min-height: calc(100dvh - 24px); padding: 18px; display: grid; grid-template-rows: auto 1fr; gap: 14px; }
+.board-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 18px; align-items: end; padding-bottom: 14px; border-bottom: 1px solid #eaeaea; }
+.eyebrow { margin: 0 0 8px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #e94e1b; }
+h1, h2, p { margin: 0; }
+h1 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 0.94; letter-spacing: -0.055em; }
+.next-action { padding: 12px 14px; border-left: 3px solid #e94e1b; background: #fdf1ed; font-weight: 800; line-height: 1.35; }
+.workflow-grid { display: grid; grid-template-columns: 230px minmax(420px, 1fr) 280px; gap: 14px; min-height: 0; }
+.step-rail, .action-panel, .proof-panel { min-height: 0; }
+.monitor-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
+.monitor-steps li { display: grid; gap: 5px; padding: 12px; border: 1px solid #eaeaea; border-radius: 4px; background: #fafafa; color: #666; }
+.monitor-steps li.active { border-color: #e94e1b; background: #fceae4; color: #af1200; }
+.monitor-steps li.completed { border-color: #bde5c1; background: #edf8ee; color: #24702b; }
+.monitor-steps li.failed { border-color: #e74c3c; background: #e74c3c; color: white; }
+.monitor-steps span { font-size: 0.82rem; line-height: 1.35; }
+.action-panel { display: grid; grid-template-rows: 150px auto; gap: 12px; }
+.upload-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid #eaeaea; border-radius: 4px; background: #eaeaea; text-align: center; }
+.upload-card label { display: grid; place-content: center; gap: 6px; cursor: pointer; background: #fafafa; transition: background 160ms ease, transform 160ms ease; }
+.upload-card label:hover { background: #fceae4; }
+.upload-card label:active, button:active:not(:disabled) { transform: translateY(1px); }
+.upload-card input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
+.upload-card span { font-size: 1rem; font-weight: 800; }
+.upload-card small, .note, .image-card header p { color: #6f6f6f; }
+.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
+.prompt-field, .primary { grid-column: 1 / -1; }
+label { display: grid; gap: 6px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #555; }
+select, textarea, button { font: inherit; }
+select, textarea { width: 100%; border: 1px solid #dfdfdf; border-radius: 4px; padding: 9px 10px; background: #fafafa; color: #242424; text-transform: none; letter-spacing: normal; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; }
+select:focus, textarea:focus { border-color: #e94e1b; box-shadow: 0 0 0 2px rgba(233, 78, 27, 0.14); }
+textarea { min-height: 72px; resize: vertical; }
+button { border: 0; border-radius: 4px; padding: 11px 14px; font-weight: 800; cursor: pointer; transition: background 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease; }
+button:disabled { cursor: not-allowed; opacity: 0.5; }
+.primary { min-height: 44px; background: #e94e1b; color: white; }
+.primary:hover:not(:disabled) { background: #d92508; }
+.proof-panel { padding: 14px; border: 1px solid #eaeaea; border-radius: 4px; background: #fafafa; }
+.proof-panel h2 { font-size: 1.15rem; line-height: 1.15; letter-spacing: -0.025em; }
+.proof-panel dl { display: grid; gap: 10px; margin: 18px 0 0; }
+.proof-panel div { padding-top: 10px; border-top: 1px solid #e2e2e2; }
+dt { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: #777; }
+dd { margin: 3px 0 0; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
+.empty-state, .status-message { margin-top: 12px; padding: 16px; }
+.status-message { border-radius: 4px; background: #e74c3c; color: white; font-weight: 800; }
+.image-grid { display: grid; gap: 12px; margin-top: 12px; }
+.image-card { padding: 14px; }
+.image-card header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
+.image-card h2 { overflow: hidden; max-width: 520px; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
+.ghost, .variant-row button { background: #fafafa; color: #242424; border: 1px solid #eaeaea; }
+.preview-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+figure { margin: 0; overflow: hidden; border: 1px solid #eaeaea; border-radius: 4px; background: #dedede; }
+img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
+figcaption { padding: 8px 10px; font-size: 0.78rem; font-weight: 800; color: #555; }
+.generated { background: #303030; }
+.variant-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
+.variant-row button:hover, .ghost:hover { background: #fceae4; }
+.variant-row button.active { background: #e94e1b; color: white; border-color: #e94e1b; }
+.note { margin-top: 12px; font-size: 0.92rem; line-height: 1.45; }
+
+@media (max-width: 980px) {
+  .workflow-board { min-height: auto; }
+  .board-header, .workflow-grid, .preview-pair { grid-template-columns: 1fr; }
+  .action-panel { grid-template-rows: auto auto; }
+}
+
+@media (max-width: 640px) {
+  .studio-shell { width: min(100% - 20px, 720px); padding-top: 10px; }
+  .workflow-board { padding: 14px; }
+  .upload-card, .controls { grid-template-columns: 1fr; }
+}

src/app/app.ts

@@ -0,0 +1,399 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { createImages, releaseImage, StudioImage } from './image-file';
+
+type Variant = {
+  id: string;
+  label: string;
+  filter: string;
+  note: string;
+};
+
+type ViewImage = StudioImage & {
+  selectedVariantData: Variant;
+  previewUrl: string;
+  previewFilter: string;
+  note: string;
+};
+
+type GenerationResponse = {
+  provider?: string;
+  images?: Array<{
+    originalName?: string;
+    variants?: Array<{
+      imageBase64?: string;
+      imageUrl?: string;
+      label?: string;
+    }>;
+  }>;
+};
+
+type GenerationJobResponse = {
+  jobId?: string;
+  provider?: string;
+  status?: 'queued' | 'running' | 'completed' | 'failed';
+  result?: GenerationResponse;
+  error?: string;
+};
+
+type GenerationErrorResponse = {
+  error?: string;
+};
+
+type MonitorStepState = 'pending' | 'active' | 'completed' | 'failed';
+
+type MonitorStep = {
+  label: string;
+  detail: string;
+  state: MonitorStepState;
+};
+
+type MonitorState = {
+  provider: string;
+  jobId: string;
+  status: 'idle' | 'uploading' | 'running' | 'processing' | 'completed' | 'failed';
+  message: string;
+  events: string[];
+};
+
+const generationEndpoint = getGenerationEndpoint();
+const generationPollIntervalMs = 3000;
+
+function getGenerationEndpoint(): string {
+  if (globalThis.location?.hostname === '127.0.0.1' && globalThis.location.port !== '3000') {
+    return 'http://127.0.0.1:3000/api/generations';
+  }
+
+  return '/api/generations';
+}
+
+@Component({
+  selector: 'app-root',
+  imports: [CommonModule, FormsModule],
+  templateUrl: './app.html',
+  styleUrl: './app.scss',
+})
+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',
+  );
+  protected readonly preset = signal('studio');
+  protected readonly ratio = signal('16:9');
+  protected readonly mode = signal<'product' | 'menu'>('product');
+  protected readonly isGenerating = signal(false);
+  protected readonly generationError = signal<string | undefined>(undefined);
+  protected readonly monitor = signal<MonitorState>({
+    provider: 'Nog niet gestart',
+    jobId: '-',
+    status: 'idle',
+    message: 'Kies productfoto’s en maak nieuwe beelden.',
+    events: ['Klaar om te starten.'],
+  });
+
+  protected readonly variants: Variant[] = [
+    {
+      id: 'clean',
+      label: 'Clean studio',
+      filter: 'contrast(1.06) saturate(1.04) brightness(1.03)',
+      note: 'Witte/lichte achtergrond, product blijft centraal.',
+    },
+    {
+      id: 'warm',
+      label: 'Warme food sfeer',
+      filter: 'contrast(1.08) saturate(1.18) sepia(0.12) brightness(1.04)',
+      note: 'Geschikt voor horeca, lunch en dagmenu.',
+    },
+    {
+      id: 'premium',
+      label: 'Premium donker',
+      filter: 'contrast(1.18) saturate(0.96) brightness(0.9)',
+      note: 'Meer diepte, luxe uitstraling en sterke schaduw.',
+    },
+  ];
+
+  protected readonly hasImages = computed(() => this.images().length > 0);
+  public readonly selectedImageCountLabel = computed(() => {
+    const count = this.images().length;
+
+    if (count === 0) {
+      return 'Nog geen foto’s';
+    }
+
+    if (count === 1) {
+      return '1 foto klaar';
+    }
+
+    return `${count} foto’s klaar`;
+  });
+  public readonly nextAction = computed(() => {
+    if (!this.hasImages()) {
+      return 'Upload losse productfoto’s om te starten.';
+    }
+
+    if (this.isGenerating()) {
+      return 'Wacht tot het nieuwe beeld klaar is.';
+    }
+
+    if (this.monitor().status === 'completed') {
+      return 'Controleer het resultaat en verwijder wat je niet gebruikt.';
+    }
+
+    return 'Controleer de instellingen en maak nieuwe beelden.';
+  });
+  protected readonly monitorSteps = computed<MonitorStep[]>(() => {
+    const status = this.monitor().status;
+
+    return [
+      {
+        label: 'Upload',
+        detail: 'Productfoto’s worden klaargezet.',
+        state: this.resolveStepState(status, ['uploading'], ['running', 'processing', 'completed'], 'failed'),
+      },
+      {
+        label: 'Beelden maken',
+        detail: 'Nieuwe productbeelden worden gemaakt. Dit kan even duren.',
+        state: this.resolveStepState(status, ['running'], ['processing', 'completed'], 'failed'),
+      },
+      {
+        label: 'Resultaten',
+        detail: 'De nieuwe beelden worden naast het origineel gezet.',
+        state: this.resolveStepState(status, ['processing'], ['completed'], 'failed'),
+      },
+    ];
+  });
+  protected readonly viewImages = computed<ViewImage[]>(() =>
+    this.images().map((image) => {
+      const selectedVariantData = this.findVariant(image.selectedVariant);
+
+      return {
+        ...image,
+        selectedVariantData,
+        previewUrl: image.generatedUrl ?? image.url,
+        previewFilter: image.generatedUrl === undefined ? selectedVariantData.filter : 'none',
+        note: image.generationNote ?? selectedVariantData.note,
+      };
+    }),
+  );
+
+  protected onFilesSelected(event: Event): void {
+    const input = <HTMLInputElement>event.target;
+    const nextImages = createImages(Array.from(input.files ?? []));
+
+    this.images.update((current) => [...current, ...nextImages]);
+    input.value = '';
+  }
+
+  protected async onGenerateBatch(): Promise<void> {
+    if (!this.hasImages()) {
+      return;
+    }
+
+    this.isGenerating.set(true);
+    this.generationError.set(undefined);
+    this.setMonitor('uploading', 'Productfoto’s worden voorbereid.', 'Productfoto’s en instellingen zijn ontvangen.');
+
+    try {
+      const response = await fetch(generationEndpoint, {
+        method: 'POST',
+        body: this.buildGenerationForm(),
+      });
+
+      this.setMonitor('running', 'Nieuwe productbeelden worden gemaakt.', 'De beelden worden nu gemaakt. Dit kan enkele minuten duren.');
+
+      if (!response.ok) {
+        throw new Error(await this.getGenerationResponseError(response));
+      }
+
+      const jobResponse = <GenerationJobResponse>await response.json();
+      if (jobResponse.jobId === undefined) {
+        throw new Error('De beeldgenerator gaf geen taaknummer terug.');
+      }
+
+      this.monitor.update((current) => ({
+        ...current,
+        provider: this.getFriendlyProviderName(jobResponse.provider ?? current.provider),
+        jobId: jobResponse.jobId ?? current.jobId,
+      }));
+
+      const completedJob = await this.pollGenerationJob(jobResponse.jobId);
+      const generationResponse = completedJob.result;
+      if (generationResponse === undefined) {
+        throw new Error('De beeldgenerator gaf geen resultaat terug.');
+      }
+
+      this.setMonitor('processing', 'Resultaten worden klaargezet.', 'Nieuwe beelden worden in het overzicht geplaatst.');
+      this.applyGenerationResponse(generationResponse);
+      this.monitor.update((current) => ({
+        ...current,
+        provider: this.getFriendlyProviderName(generationResponse.provider ?? current.provider),
+        jobId: completedJob.jobId ?? current.jobId,
+        status: 'completed',
+        message: 'Nieuwe productbeelden zijn klaar.',
+        events: [...current.events, 'Klaar. Bekijk en vergelijk het resultaat.'],
+      }));
+    } catch (error) {
+      const errorMessage = this.getGenerationErrorMessage(error);
+      this.generationError.set(errorMessage);
+      this.monitor.update((current) => ({
+        ...current,
+        status: 'failed',
+        message: errorMessage,
+        events: [...current.events, 'Er ging iets mis tijdens het maken van de beelden.'],
+      }));
+    } finally {
+      this.isGenerating.set(false);
+    }
+  }
+
+  protected selectVariant(imageId: string, variantId: string): void {
+    this.images.update((images) =>
+      images.map((image) => (image.id === imageId ? { ...image, selectedVariant: variantId } : image)),
+    );
+  }
+
+  protected removeImage(imageId: string): void {
+    const image = this.images().find((item) => item.id === imageId);
+    if (image) {
+      releaseImage(image);
+    }
+
+    this.images.update((images) => images.filter((item) => item.id !== imageId));
+  }
+
+  private findVariant(variantId: string): Variant {
+    return this.variants.find((variant) => variant.id === variantId) ?? this.variants[0];
+  }
+
+  private resolveStepState(status: MonitorState['status'], activeStates: MonitorState['status'][], completedStates: MonitorState['status'][], failedState: MonitorState['status']): MonitorStepState {
+    if (status === failedState) {
+      return 'failed';
+    }
+
+    if (completedStates.includes(status)) {
+      return 'completed';
+    }
+
+    if (activeStates.includes(status)) {
+      return 'active';
+    }
+
+    return 'pending';
+  }
+
+  private setMonitor(status: MonitorState['status'], message: string, event: string): void {
+    this.monitor.update((current) => ({
+      ...current,
+      provider: current.provider === 'Nog niet gestart' ? 'Beeldgenerator' : current.provider,
+      status,
+      message,
+      events: [...current.events, event],
+    }));
+  }
+
+  private buildGenerationForm(): FormData {
+    const form = new FormData();
+    form.append('prompt', this.prompt());
+    form.append('preset', this.preset());
+    form.append('ratio', this.ratio());
+    form.append('mode', this.mode());
+
+    for (const image of this.images()) {
+      form.append('images', image.file, image.name);
+    }
+
+    return form;
+  }
+
+  private applyGenerationResponse(response: GenerationResponse): void {
+    this.images.update((images) =>
+      images.map((image) => {
+        const generatedImage = response.images?.find((item) => item.originalName === image.name);
+        const variant = generatedImage?.variants?.[0];
+        const generatedUrl = variant?.imageBase64 ?? variant?.imageUrl;
+
+        if (generatedUrl === undefined) {
+          return image;
+        }
+
+        return {
+          ...image,
+          generatedUrl,
+          generationNote: `${variant?.label ?? 'AI'} beeld is klaar voor controle.`,
+        };
+      }),
+    );
+  }
+
+  private async pollGenerationJob(jobId: string): Promise<GenerationJobResponse> {
+    while (true) {
+      const response = await fetch(`${generationEndpoint}/${jobId}`);
+      if (!response.ok) {
+        throw new Error(await this.getGenerationResponseError(response));
+      }
+
+      const jobResponse = <GenerationJobResponse>await response.json();
+      if (jobResponse.status === 'failed') {
+        throw new Error(jobResponse.error ?? 'Het maken van nieuwe beelden is mislukt.');
+      }
+
+      if (jobResponse.status === 'completed') {
+        return jobResponse;
+      }
+
+      this.monitor.update((current) => ({
+        ...current,
+        provider: this.getFriendlyProviderName(jobResponse.provider ?? current.provider),
+        jobId: jobResponse.jobId ?? current.jobId,
+        status: 'running',
+        message: 'Nieuwe productbeelden worden gemaakt.',
+      }));
+
+      await this.wait(generationPollIntervalMs);
+    }
+  }
+
+  private wait(ms: number): Promise<void> {
+    return new Promise((resolvePromise) => window.setTimeout(resolvePromise, ms));
+  }
+
+  private getFriendlyProviderName(provider: string): string {
+    if (provider === 'kaggle' || provider === 'flux2-klein' || provider === 'openrouter') {
+      return 'AI beeldgenerator';
+    }
+
+    if (provider === 'mock') {
+      return 'Voorbeeldmodus';
+    }
+
+    return provider;
+  }
+
+  private getGenerationErrorMessage(error: unknown): string {
+    if (error instanceof TypeError) {
+      return 'De beeldgenerator is niet bereikbaar. Start de lokale generator en probeer het daarna opnieuw.';
+    }
+
+    if (error instanceof Error && error.message.trim() !== '') {
+      return `De beeldgenerator kon het verzoek niet verwerken: ${error.message}`;
+    }
+
+    return 'Het maken van nieuwe beelden is niet gelukt. Controleer de verbinding met de beeldgenerator en probeer het opnieuw.';
+  }
+
+  private async getGenerationResponseError(response: Response): Promise<string> {
+    try {
+      const errorResponse = <GenerationErrorResponse>await response.json();
+      if (errorResponse.error !== undefined && errorResponse.error.trim() !== '') {
+        return errorResponse.error;
+      }
+    }
+    catch {
+      return `HTTP ${response.status}`;
+    }
+
+    return `HTTP ${response.status}`;
+  }
+
+}