Compare commits
30 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
fb7c2f0e9b | ||
|
|
33ee6fbf2e | ||
|
|
e2713913e7 | ||
|
|
3bc7fa16e2 | ||
|
|
173d9d138d | ||
|
|
5492d4dc24 | ||
|
|
39de08abf9 | ||
|
|
fd7884e1b2 | ||
|
|
13728f9252 | ||
|
|
83f5b88d94 | ||
|
|
cb93725139 | ||
|
|
80c72b6e5b | ||
|
|
b88f1fbfa4 | ||
|
|
f4aefb8e99 | ||
|
|
6dab36339a | ||
|
|
eea5fb7560 | ||
|
|
47e91de0a1 | ||
|
|
bc42f35f8c | ||
|
|
8c23875ba2 | ||
|
|
06e60afc88 | ||
|
|
e01f15a2a6 | ||
|
|
3f259a7870 | ||
|
|
904edcb3ff | ||
|
|
d479fd61d8 | ||
|
|
0cca9a699c | ||
|
|
c284f4b85b | ||
|
|
9e3d6e8d01 | ||
|
|
783b782608 | ||
|
|
1532880cd5 | ||
|
|
aa7f0eff11 |
@@ -15,3 +15,9 @@ BRAVE_API_KEY=
|
|||||||
# SearXNG-Secret: beliebig lange Zufallskette. Für Prod mit
|
# SearXNG-Secret: beliebig lange Zufallskette. Für Prod mit
|
||||||
# `openssl rand -hex 32` generieren und in der Pi-.env ablegen.
|
# `openssl rand -hex 32` generieren und in der Pi-.env ablegen.
|
||||||
SEARXNG_SECRET=dev-secret-change-me
|
SEARXNG_SECRET=dev-secret-change-me
|
||||||
|
|
||||||
|
# Gemini Vision (Foto-Rezept-Magie). Ohne Key ist die Funktion graceful
|
||||||
|
# deaktiviert — der Kamera-Button erscheint dann gar nicht erst.
|
||||||
|
GEMINI_API_KEY=
|
||||||
|
GEMINI_MODEL=gemini-2.5-flash
|
||||||
|
GEMINI_TIMEOUT_MS=20000
|
||||||
|
|||||||
@@ -19,6 +19,8 @@ Selbstgehostete Rezept-PWA für die Familie Siegeln. Erreichbar unter `https://k
|
|||||||
| **Preview-Bilder** | `recipe.image_path` kann **absolute URL** (Preview-Modus) oder **lokaler Filename** sein. `RecipeView.svelte` prüft mit `/^https?:\/\//i`. |
|
| **Preview-Bilder** | `recipe.image_path` kann **absolute URL** (Preview-Modus) oder **lokaler Filename** sein. `RecipeView.svelte` prüft mit `/^https?:\/\//i`. |
|
||||||
| **Service Worker nur ab HTTPS** | `npm run dev` liefert HTTP → SW registriert nicht. Für PWA-Tests `npm run build && npm run preview` (localhost) oder Prod-Docker. |
|
| **Service Worker nur ab HTTPS** | `npm run dev` liefert HTTP → SW registriert nicht. Für PWA-Tests `npm run build && npm run preview` (localhost) oder Prod-Docker. |
|
||||||
| **Icon-Rendering** | `npm run render:icons` rendert `icon-192.png` + `icon-512.png` aus `static/icon.svg`. Nur nach SVG-Änderung erneut ausführen + committen. |
|
| **Icon-Rendering** | `npm run render:icons` rendert `icon-192.png` + `icon-512.png` aus `static/icon.svg`. Nur nach SVG-Änderung erneut ausführen + committen. |
|
||||||
|
| **Gemini-Key fehlt** | Wenn `GEMINI_API_KEY` leer ist, rendert das Layout das Camera-Icon nicht, und `/new/from-photo` antwortet mit 503 (`+page.server.ts`-Gate). Graceful Degradation — kein Zombie-Button. |
|
||||||
|
| **sharp + libheif** | Im `Dockerfile`-Builder-Stage ist `vips-dev` nötig, damit `sharp` HEIC-Input (iOS) lesen kann. Runtime-Stage braucht nix zusätzlich (sharp bringt libvips prebuilt mit). |
|
||||||
|
|
||||||
## Dateien, die man typischerweise anfasst
|
## Dateien, die man typischerweise anfasst
|
||||||
|
|
||||||
@@ -26,6 +28,8 @@ Selbstgehostete Rezept-PWA für die Familie Siegeln. Erreichbar unter `https://k
|
|||||||
- `src/routes/+layout.svelte` — Header, mobile expand, Dropdown-Search auf Rezeptseiten
|
- `src/routes/+layout.svelte` — Header, mobile expand, Dropdown-Search auf Rezeptseiten
|
||||||
- `src/routes/recipes/[id]/+page.svelte` — Rezept-Detail mit allen Actions (Rating, Favorit, Cooked, Wunschliste, Kommentar, Umbenennen, Löschen)
|
- `src/routes/recipes/[id]/+page.svelte` — Rezept-Detail mit allen Actions (Rating, Favorit, Cooked, Wunschliste, Kommentar, Umbenennen, Löschen)
|
||||||
- `src/routes/preview/+page.svelte` — importierte Vorschau vor dem Speichern
|
- `src/routes/preview/+page.svelte` — importierte Vorschau vor dem Speichern
|
||||||
|
- `src/routes/new/from-photo/+page.svelte` — Foto-Rezept-Magie (Picker → Spinner → vorbefüllter Editor)
|
||||||
|
- `src/lib/server/ai/` — Gemini-Client, Prompt-Schema, image-preprocess, rate-limit, description-phrases
|
||||||
- `src/lib/components/RecipeView.svelte` / `RecipeEditor.svelte` — Lesen/Edit-Mode des Rezepts. Editor ist in Sub-Components aufgeteilt: `IngredientRow`, `StepList`, `ImageUploadBox`, `TimeDisplay` (+ shared types `recipe-editor-types.ts`)
|
- `src/lib/components/RecipeView.svelte` / `RecipeEditor.svelte` — Lesen/Edit-Mode des Rezepts. Editor ist in Sub-Components aufgeteilt: `IngredientRow`, `StepList`, `ImageUploadBox`, `TimeDisplay` (+ shared types `recipe-editor-types.ts`)
|
||||||
- `src/lib/server/search/searxng.ts` — Web-Suche + Thumbnail-Enrichment + SQLite-Cache
|
- `src/lib/server/search/searxng.ts` — Web-Suche + Thumbnail-Enrichment + SQLite-Cache
|
||||||
- `src/lib/server/recipes/importer.ts` — JSON-LD → Recipe, orchestriert Bild-Download
|
- `src/lib/server/recipes/importer.ts` — JSON-LD → Recipe, orchestriert Bild-Download
|
||||||
|
|||||||
37
Dockerfile
37
Dockerfile
@@ -3,17 +3,44 @@
|
|||||||
FROM node:22-alpine AS builder
|
FROM node:22-alpine AS builder
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
|
|
||||||
# Alpine needs build tools for better-sqlite3 native module
|
# Alpine needs build tools for better-sqlite3 native module.
|
||||||
RUN apk add --no-cache python3 make g++ libc6-compat
|
# vips-dev provides libvips + libheif for sharp (incl. HEIC input from iOS).
|
||||||
|
RUN apk add --no-cache python3 make g++ libc6-compat vips-dev
|
||||||
|
|
||||||
COPY package*.json ./
|
COPY package*.json ./
|
||||||
RUN npm ci
|
# Sharp-Prebuilt-Install unter Docker-Buildx-QEMU war trotz aller Flag-
|
||||||
|
# Varianten unzuverlaessig. Finale Strategie:
|
||||||
|
# - --cpu/--os/--libc explizit setzen: sharp's offizielle Doc-Empfehlung
|
||||||
|
# fuer Cross-Platform-Docker-Builds (siehe sharp-Install-Doku),
|
||||||
|
# umgeht QEMU-Detection-Bugs.
|
||||||
|
# - --ignore-scripts + npm rebuild: loest das Parallel-Install-Race,
|
||||||
|
# bei dem sharp's install-Skript vor dem Entpacken der Prebuilt-Binary
|
||||||
|
# laeuft.
|
||||||
|
# - Explizites Nachinstallieren der Prebuilts als Sicherheit: falls (A)
|
||||||
|
# noch nicht reicht, zwingt (B) die Plattform-Pakete auf Disk.
|
||||||
|
# - node-addon-api + node-gyp als Runtime-Deps: falls am Ende doch alles
|
||||||
|
# nicht klappt und sharp from-source baut (mit dem oben installierten
|
||||||
|
# python3 + make + g++ + vips-dev).
|
||||||
|
RUN npm install --cpu=arm64 --os=linux --libc=musl \
|
||||||
|
--ignore-scripts --include=optional --no-audit --no-fund
|
||||||
|
RUN npm install --cpu=arm64 --os=linux --libc=musl \
|
||||||
|
--ignore-scripts --no-save --no-audit --no-fund \
|
||||||
|
@img/sharp-linuxmusl-arm64@0.34.5 \
|
||||||
|
@img/sharp-libvips-linuxmusl-arm64@1.2.4
|
||||||
|
RUN npm rebuild
|
||||||
|
|
||||||
COPY . .
|
COPY . .
|
||||||
RUN npm run build
|
RUN npm run build
|
||||||
|
|
||||||
# Remove dev dependencies for the runtime image
|
# Fresh-Install fuer den Runtime-Stage: nur Produktions-Deps, gleiche Strategie.
|
||||||
RUN npm prune --omit=dev
|
RUN rm -rf node_modules \
|
||||||
|
&& npm install --cpu=arm64 --os=linux --libc=musl \
|
||||||
|
--ignore-scripts --omit=dev --include=optional --no-audit --no-fund \
|
||||||
|
&& npm install --cpu=arm64 --os=linux --libc=musl \
|
||||||
|
--ignore-scripts --no-save --no-audit --no-fund \
|
||||||
|
@img/sharp-linuxmusl-arm64@0.34.5 \
|
||||||
|
@img/sharp-libvips-linuxmusl-arm64@1.2.4 \
|
||||||
|
&& npm rebuild
|
||||||
|
|
||||||
FROM node:22-alpine AS runner
|
FROM node:22-alpine AS runner
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
|
|||||||
@@ -13,6 +13,14 @@ services:
|
|||||||
- NODE_ENV=production
|
- NODE_ENV=production
|
||||||
# Im Header als kleine Versionsnummer unter dem Logo angezeigt.
|
# Im Header als kleine Versionsnummer unter dem Logo angezeigt.
|
||||||
- KOCHWAS_TAG=${KOCHWAS_TAG:-dev}
|
- KOCHWAS_TAG=${KOCHWAS_TAG:-dev}
|
||||||
|
# Gemini (Foto-Rezept-Magie). Leer = Feature deaktiviert.
|
||||||
|
- GEMINI_API_KEY=${GEMINI_API_KEY:-}
|
||||||
|
- GEMINI_MODEL=${GEMINI_MODEL:-gemini-2.5-flash}
|
||||||
|
- GEMINI_TIMEOUT_MS=${GEMINI_TIMEOUT_MS:-20000}
|
||||||
|
# adapter-node-Default ist 512 KB. Tablet- und iPad-Pro-Kameras liefern
|
||||||
|
# JPEGs/HEICs bis 15 MB. Endpoint-Limit ist 20 MB; hier 25 MB fuer den
|
||||||
|
# Multipart-Overhead.
|
||||||
|
- BODY_SIZE_LIMIT=25000000
|
||||||
depends_on:
|
depends_on:
|
||||||
- searxng
|
- searxng
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
|
|||||||
@@ -58,6 +58,16 @@ src/
|
|||||||
4. User klickt „Speichern" → `/api/recipes/import` → Importer lädt Bild (`images/downloader.ts`), SHA256-Hash-Dedup, speichert lokal, INSERT in `recipe` + `ingredient` + `step` + `recipe_tag`
|
4. User klickt „Speichern" → `/api/recipes/import` → Importer lädt Bild (`images/downloader.ts`), SHA256-Hash-Dedup, speichert lokal, INSERT in `recipe` + `ingredient` + `step` + `recipe_tag`
|
||||||
5. Redirect zu `/recipes/[id]`
|
5. Redirect zu `/recipes/[id]`
|
||||||
|
|
||||||
|
### Foto-Rezept-Magie (AI-Extraktion)
|
||||||
|
|
||||||
|
1. User klickt Camera-Icon im Header → `/new/from-photo` (nur gerendert wenn `GEMINI_API_KEY` gesetzt; disabled wenn offline)
|
||||||
|
2. File-Picker mit `capture="environment"` öffnet direkt die Rückkamera auf Mobile
|
||||||
|
3. Upload als `multipart/form-data` → `POST /api/recipes/extract-from-photo`
|
||||||
|
4. Server: MIME-Whitelist + 8 MB-Gate + Rate-Limit (10/min/IP) → `preprocessImage` (sharp, ≤1600px lange Kante, JPEG-Re-encode, Metadata-Strip) → `extractRecipeFromImage` (Gemini 2.5 Flash mit structured `responseSchema`, `temperature: 0.1`, Zod-validiert, 1× Retry bei Schema-Fehler oder 5xx) → zufällige Description aus `description-phrases.ts` (50er-Pool) → Response mit `Partial<Recipe>`
|
||||||
|
5. **Das Original-Foto wird nicht persistiert.** Der Server loggt keine Prompt/Response-Inhalte — nur Code, Dauer, Byte-Größe.
|
||||||
|
6. Client hält das Ergebnis im `PhotoUploadStore` und rendert `<RecipeEditor recipe={extracted}>`. Weil `recipe.id === null` ist, blendet der Editor den `ImageUploadBox`-Block aus und zeigt nur den Hinweis „Bild kannst du nach dem Speichern hinzufügen."
|
||||||
|
7. User editiert und klickt „Speichern" → `POST /api/recipes` (neuer Scratch-Insert-Endpoint, wrappt `insertRecipe`) → Redirect auf `/recipes/:id`
|
||||||
|
|
||||||
### Web-Suche
|
### Web-Suche
|
||||||
|
|
||||||
Die gesamte Live-Search-Logik ist im `SearchStore` (`src/lib/client/search.svelte.ts`) gekapselt: Debounce, Race-Guard, Pagination, Web-Fallback, Snapshot/Restore für Back-Nav. Sowohl Header-Dropdown (`+layout.svelte`) als auch Startseite (`+page.svelte`) teilen sich die Klasse mit unterschiedlicher `filterParam`-Quelle.
|
Die gesamte Live-Search-Logik ist im `SearchStore` (`src/lib/client/search.svelte.ts`) gekapselt: Debounce, Race-Guard, Pagination, Web-Fallback, Snapshot/Restore für Back-Nav. Sowohl Header-Dropdown (`+layout.svelte`) als auch Startseite (`+page.svelte`) teilen sich die Klasse mit unterschiedlicher `filterParam`-Quelle.
|
||||||
|
|||||||
@@ -187,3 +187,26 @@ Wichtige Config-Eigenschaften:
|
|||||||
- Fixtures unter `tests/e2e/remote/fixtures/`: `profile.ts` (Profile-Auswahl via localStorage vor Seitenladen), `api-cleanup.ts` (idempotente DELETE-Helfer für afterEach).
|
- Fixtures unter `tests/e2e/remote/fixtures/`: `profile.ts` (Profile-Auswahl via localStorage vor Seitenladen), `api-cleanup.ts` (idempotente DELETE-Helfer für afterEach).
|
||||||
|
|
||||||
**Niemals gegen `kochwas.siegeln.net` (ohne `-dev`)** die destruktiven Tests laufen lassen — das ist Prod.
|
**Niemals gegen `kochwas.siegeln.net` (ohne `-dev`)** die destruktiven Tests laufen lassen — das ist Prod.
|
||||||
|
|
||||||
|
|
||||||
|
## Gemini / Foto-Rezept-Magie
|
||||||
|
|
||||||
|
Die Funktion „Foto → Rezept" ruft Google Gemini 2.5 Flash mit Vision auf. Im Header erscheint dann ein Kamera-Icon, das auf `/new/from-photo` führt.
|
||||||
|
|
||||||
|
**Env-Vars** (in `docker-compose.prod.yml`):
|
||||||
|
|
||||||
|
| Variable | Default | Zweck |
|
||||||
|
|---|---|---|
|
||||||
|
| `GEMINI_API_KEY` | _(leer)_ | Ohne Key ist das Feature graceful deaktiviert — Camera-Icon erscheint nicht. |
|
||||||
|
| `GEMINI_MODEL` | `gemini-2.5-flash` | Modell-Wechsel ohne Rebuild, z. B. auf `gemini-2.5-pro` bei harter Handschrift. |
|
||||||
|
| `GEMINI_TIMEOUT_MS` | `20000` | Timeout für den Vision-Call. |
|
||||||
|
|
||||||
|
**Wichtig:** Env-Änderungen greifen erst nach `docker compose up -d --force-recreate`, nicht nach `restart`.
|
||||||
|
|
||||||
|
**Privacy:** Das hochgeladene Foto geht einmal an Google Gemini und wird serverseitig nicht gespeichert. Google trainiert im Paid-Tier nicht auf API-Daten. Der Server loggt nur Status-Code, Dauer und Bildgröße — nie Prompt oder Response-Inhalt.
|
||||||
|
|
||||||
|
**Rate-Limit:** 10 Requests/Minute pro IP (in-memory, resettet beim Prozess-Restart).
|
||||||
|
|
||||||
|
**Key aus Gitea Secrets:** `GEMINI_API_KEY` als Secret in der CI-Umgebung hinterlegen; der Deploy-Schritt injiziert ihn in die `.env` des Pi-Stacks. Ablauf-Monitoring über die Google-Cloud-Konsole (≥1× pro Quartal checken).
|
||||||
|
|
||||||
|
**Build-Dep `sharp`:** Der Foto-Preprocess nutzt `sharp` (libvips). Im `Dockerfile`-Builder-Stage ist `vips-dev` enthalten, damit der npm-install auf arm64 sauber durchläuft — insbesondere für HEIC-Input von iOS-Geräten (libheif kommt via vips-dev).
|
||||||
|
|||||||
2237
docs/superpowers/plans/2026-04-21-photo-recipe-magic.md
Normal file
2237
docs/superpowers/plans/2026-04-21-photo-recipe-magic.md
Normal file
File diff suppressed because it is too large
Load Diff
336
docs/superpowers/specs/2026-04-21-photo-recipe-magic-design.md
Normal file
336
docs/superpowers/specs/2026-04-21-photo-recipe-magic-design.md
Normal file
@@ -0,0 +1,336 @@
|
|||||||
|
# Foto-Rezept-Magie — Design Spec
|
||||||
|
|
||||||
|
**Status:** approved (brainstorming)
|
||||||
|
**Datum:** 2026-04-21
|
||||||
|
**Ziel-Release:** v1.3.0
|
||||||
|
|
||||||
|
## 1. Motivation & Scope
|
||||||
|
|
||||||
|
Nutzer sollen ein **gedrucktes oder handgeschriebenes Rezept** fotografieren können. Das Foto wird an ein Vision-LLM (Gemini 2.5 Flash) gesendet, dort zu einer strukturierten Recipe-Shape extrahiert, und direkt in einen vorausgefüllten `RecipeEditor` gepackt — der Nutzer korrigiert bei Bedarf und speichert. Das Foto selbst wird nie persistiert.
|
||||||
|
|
||||||
|
**In Scope (v1):**
|
||||||
|
|
||||||
|
- Einzelnes Foto von gedrucktem Rezept ODER Handschrift.
|
||||||
|
- Extraktion von Titel, Portionen, Zeiten, Zutaten (mit Menge/Einheit/Name), Zubereitungsschritten.
|
||||||
|
- Auslöse-Button als `Camera`-Icon (lucide) im Header, disabled wenn offline oder ohne API-Key.
|
||||||
|
- Direkter Flow in den `RecipeEditor` (kein separater Preview-Schritt).
|
||||||
|
- Server-seitiger Gemini-Call mit structured-output-Schema, Zod-Validierung, 1× Retry bei Schema-Fehler.
|
||||||
|
- Hartes Nicht-Speichern des Fotos nach dem Call.
|
||||||
|
|
||||||
|
**Explizit Out-of-Scope (v1):**
|
||||||
|
|
||||||
|
- Multi-Foto (Kochbuch-Doppelseite): Endpoint nimmt ein Bild entgegen; Erweiterung auf Array bei Bedarf.
|
||||||
|
- Extraktion von `image_path` aus dem Bild (Dish-Crop aus Kochbuchseite).
|
||||||
|
- Foto-Backup / Persistenz des Input-Fotos.
|
||||||
|
- Claude als Fallback.
|
||||||
|
- Interpretierende Felder: `cuisine`, `category`, `tags`, freie `description`.
|
||||||
|
- Foto-vom-Gericht → AI-erfindet-Rezept (anderer Use-Case).
|
||||||
|
|
||||||
|
## 2. User Flow
|
||||||
|
|
||||||
|
```
|
||||||
|
Header (Camera-Icon, lucide)
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
/new/from-photo (File-Picker: <input type="file" accept="image/*" capture="environment">)
|
||||||
|
│
|
||||||
|
▼ Nutzer wählt/knipst Foto — File bleibt nur im Browser-State
|
||||||
|
│
|
||||||
|
▼ POST /api/recipes/extract-from-photo (multipart/form-data)
|
||||||
|
│ Server: MIME + Größe validieren, sharp-Preprocess, Gemini-Call, Response
|
||||||
|
│ Foto wird NICHT persistiert.
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
Seite swappt Spinner → <RecipeEditor initialData={recipe}>
|
||||||
|
│
|
||||||
|
▼ Nutzer korrigiert, klickt „Speichern" (Editor-Save-Pfad — ob bestehend oder neu: siehe §11)
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
/recipes/:id
|
||||||
|
```
|
||||||
|
|
||||||
|
**Invarianten:**
|
||||||
|
|
||||||
|
- Extraktion erzeugt **kein** DB-Record. Erst der Save-Klick im Editor schreibt.
|
||||||
|
- Bei Tab-Close während Extraktion: kein Müll in der DB, AbortController-fähiger Fetch.
|
||||||
|
- Offline: Kamera-Icon im Header nicht geklickbar; falls trotzdem Route geöffnet, klare Offline-Meldung.
|
||||||
|
|
||||||
|
## 3. Komponenten & Dateien
|
||||||
|
|
||||||
|
**Neue Dateien**
|
||||||
|
|
||||||
|
| Pfad | Zweck |
|
||||||
|
|---|---|
|
||||||
|
| `src/routes/new/from-photo/+page.svelte` | Shell. States: `idle` / `loading` / `success` / `error:<code>`. |
|
||||||
|
| `src/lib/server/ai/gemini-client.ts` | Thin wrapper: `extractRecipeFromImage(buffer, mime): Promise<Partial<Recipe>>`. Liest `GEMINI_API_KEY`, `GEMINI_MODEL`, `GEMINI_TIMEOUT_MS` aus `$env/dynamic/private`. |
|
||||||
|
| `src/lib/server/ai/recipe-extraction-prompt.ts` | System-Prompt (DE) + JSON-Schema für Gemini `responseSchema`. Isoliert, weil iterabel. |
|
||||||
|
| `src/lib/server/ai/description-phrases.ts` | 50er-Pool von Magie-Phrasen für das `description`-Feld. Export `pickRandomPhrase(): string`. Siehe §5a. |
|
||||||
|
| `src/lib/server/ai/image-preprocess.ts` | `sharp`-basierter Resize (≤1600px lange Kante) + JPEG re-encode (quality 85) + Metadata-Strip. HEIC → JPEG. |
|
||||||
|
| `src/routes/api/recipes/extract-from-photo/+server.ts` | POST. Multipart-Parse, Validierung, preprocess, Gemini-Call, Zod-Validierung, Response. |
|
||||||
|
| `src/lib/client/photo-upload.svelte.ts` | Frontend-Store für Upload-Zustand. |
|
||||||
|
| `tests/unit/ai/recipe-extraction-prompt.test.ts` | Schema-Ping, Retry-Pfad, Zod-Ablehnung. |
|
||||||
|
| `tests/unit/ai/image-preprocess.test.ts` | Resize, HEIC, Metadata-Strip. |
|
||||||
|
| `tests/unit/ai/gemini-client.test.ts` | Timeout, 429-no-retry, 5xx-1x-retry, Network-Fehler. |
|
||||||
|
| `tests/unit/ai/description-phrases.test.ts` | Pool hat 50 Einträge, alle unique non-empty, `pickRandomPhrase` liefert nur Pool-Einträge. |
|
||||||
|
| `tests/api/extract-from-photo.test.ts` | Happy-Path, 413, 415, 422 (NO_RECIPE_IN_IMAGE). |
|
||||||
|
| `tests/e2e/remote/photo-import.spec.ts` | Kamera-Icon, Upload-Fixture (Endpoint gestubt), Editor-Prefill, Save, Offline-State. |
|
||||||
|
| `tests/fixtures/photo-recipe/` | 3 Fixture-Fotos: gedrucktes Rezept, Handschrift, No-Recipe-Bild. |
|
||||||
|
|
||||||
|
**Geänderte Dateien**
|
||||||
|
|
||||||
|
| Pfad | Änderung |
|
||||||
|
|---|---|
|
||||||
|
| `src/routes/+layout.svelte` | Header: `Camera`-Icon, `aria-label="Rezept aus Foto erstellen"`. Nur gerendert wenn `GEMINI_API_KEY` gesetzt (Graceful Degradation). Disabled wenn offline (`networkStore`). Führt zu `/new/from-photo`. |
|
||||||
|
| `src/lib/components/RecipeEditor.svelte` | Akzeptiert optionale `initialData?: Partial<Recipe>`-Prop. Wenn gesetzt, Felder vorbefüllen, kein DB-Round-trip. Heute liest der Editor über eine Rezept-ID — dieser Pfad wird abstrahiert. |
|
||||||
|
| `Dockerfile` | `sharp` im Native-Build-Stage ergänzen (wie `better-sqlite3`). |
|
||||||
|
| `docker-compose.yml`, `docker-compose.prod.yml`, `.env.example` | Env-Vars `GEMINI_API_KEY`, `GEMINI_MODEL`, `GEMINI_TIMEOUT_MS` ergänzen. |
|
||||||
|
| `docs/OPERATIONS.md` | Abschnitt zu Gemini-Config + Recreate-Hinweis bei Env-Änderung. |
|
||||||
|
| `docs/ARCHITECTURE.md` | AI-Extraktionspfad ergänzen. |
|
||||||
|
| `CLAUDE.md` | Zeile in Gotcha-Tabelle: Graceful Degradation ohne Key + `sharp` im Build-Stage. |
|
||||||
|
|
||||||
|
**Keine DB-Migration.** Recipe-Shape bleibt; der Endpoint produziert ein `Partial<Recipe>` im Response-Body.
|
||||||
|
|
||||||
|
## 4. API-Contract
|
||||||
|
|
||||||
|
**`POST /api/recipes/extract-from-photo`**
|
||||||
|
|
||||||
|
Request: `multipart/form-data`
|
||||||
|
|
||||||
|
- `photo`: File. Erlaubt: `image/jpeg`, `image/png`, `image/webp`, `image/heic`, `image/heif`.
|
||||||
|
- Max 8 MB (vor Preprocess).
|
||||||
|
|
||||||
|
Response 200:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"recipe": {
|
||||||
|
"title": "Zürcher Geschnetzeltes",
|
||||||
|
"description": "Aus dem Bild herbeigezaubert.",
|
||||||
|
"servings_default": 4,
|
||||||
|
"servings_unit": "Portionen",
|
||||||
|
"prep_time_min": 20,
|
||||||
|
"cook_time_min": 15,
|
||||||
|
"total_time_min": null,
|
||||||
|
"cuisine": null,
|
||||||
|
"category": null,
|
||||||
|
"image_path": null,
|
||||||
|
"source_url": null,
|
||||||
|
"source_domain": null,
|
||||||
|
"ingredients": [
|
||||||
|
{ "position": 1, "quantity": 500, "unit": "g", "name": "Kalbsgeschnetzeltes", "note": null, "section": null },
|
||||||
|
{ "position": 2, "quantity": 200, "unit": "ml", "name": "Rahm", "note": null, "section": null }
|
||||||
|
],
|
||||||
|
"steps": [
|
||||||
|
{ "position": 1, "text": "Fleisch in heißer Pfanne kurz anbraten, herausnehmen." }
|
||||||
|
],
|
||||||
|
"tags": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Response Fehler-Codes:
|
||||||
|
|
||||||
|
| Status | `code` | Bedeutung |
|
||||||
|
|---|---|---|
|
||||||
|
| 413 | `PAYLOAD_TOO_LARGE` | Photo > 8 MB. |
|
||||||
|
| 415 | `UNSUPPORTED_MEDIA_TYPE` | MIME nicht in der Whitelist. |
|
||||||
|
| 422 | `NO_RECIPE_IN_IMAGE` | AI-Output valide, aber `title` leer oder (`ingredients.length === 0` UND `steps.length === 0`). |
|
||||||
|
| 429 | `AI_RATE_LIMITED` | Gemini 429 durchgereicht. |
|
||||||
|
| 503 | `AI_TIMEOUT` | Gemini-Timeout (Default 20 s). |
|
||||||
|
| 503 | `AI_FAILED` | Gemini-5xx nach 1 Retry ODER Schema-Validierung nach 1 Retry fehlgeschlagen. |
|
||||||
|
| 503 | `AI_NOT_CONFIGURED` | `GEMINI_API_KEY` leer — Endpoint sollte dann ohnehin nicht erreichbar sein via UI, belt-and-suspenders. |
|
||||||
|
|
||||||
|
## 5. Prompt-Strategie
|
||||||
|
|
||||||
|
Datei: `src/lib/server/ai/recipe-extraction-prompt.ts`
|
||||||
|
|
||||||
|
- **Sprache:** Deutsch.
|
||||||
|
- **Rolle:** „Du bist ein Rezept-Extraktions-Assistent."
|
||||||
|
- **Regeln:**
|
||||||
|
- Nur was lesbar auf dem Bild steht, ins Ergebnis. Sonst `null` oder leeres Array.
|
||||||
|
- Zutatenmengen: Zahl in `quantity`, Einheit separat (`g`, `ml`, `EL`, `TL`, `Stück`, `Prise`…).
|
||||||
|
- Bruchteile (`½`, `¼`, `1 ½`) zu Dezimalzahlen.
|
||||||
|
- Zubereitungsschritte: pro erkennbarer Nummerierung/Absatz ein Schritt.
|
||||||
|
- `description` wird server-seitig **nach** dem AI-Call aus einem 50er-Pool zufällig gewählt (`description-phrases.ts`, siehe §5a). Die AI bekommt `description` gar nicht erst im Schema — keine Halluzinationsfläche.
|
||||||
|
- **Output:** Gemini `responseMimeType: "application/json"` + `responseSchema`. Strict-typed, keine zusätzlichen Keys.
|
||||||
|
- **Temperature:** `0.1`.
|
||||||
|
- **Retry bei Schema-Fehler:** Genau 1 zusätzlicher Call mit Appendix „Dein letztes JSON war invalid. Schema: … Bitte nur JSON zurück." Dann `AI_FAILED`.
|
||||||
|
|
||||||
|
Zod-Schema spiegelt das Response-Schema serverseitig und wird auf die Gemini-Antwort angewendet.
|
||||||
|
|
||||||
|
## 5a. Description-Phrasen-Pool
|
||||||
|
|
||||||
|
Datei: `src/lib/server/ai/description-phrases.ts`
|
||||||
|
|
||||||
|
50 deutsche Magie-Phrasen, zufällig gezogen pro Extraktions-Call. Die Auswahl geschieht server-seitig im Endpoint, nachdem die AI-Antwort validiert wurde. Der Nutzer kann die Phrase im Editor weiter editieren, sie ist also ein Starter, kein Lock-in.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export const DESCRIPTION_PHRASES: readonly string[] = [
|
||||||
|
'Mit dem Zauberstab aus dem Kochbuch geholt.',
|
||||||
|
'Foto-Magie frisch aus dem Ofen.',
|
||||||
|
'Aus dem Bild herbeigezaubert.',
|
||||||
|
'Ein Klick, ein Foto, fertig.',
|
||||||
|
'Knipsen statt Abtippen.',
|
||||||
|
'Von der Buchseite direkt in die Pfanne.',
|
||||||
|
'Die Kamera hat mitgelesen.',
|
||||||
|
'Abrakadabra — Rezept da.',
|
||||||
|
'Per Linse in die Küche teleportiert.',
|
||||||
|
'Von Oma abfotografiert, von der KI entziffert.',
|
||||||
|
'Frisch aus dem Bilderrahmen.',
|
||||||
|
'Klick, zisch, Rezept.',
|
||||||
|
'Das Foto wurde überredet, sich zu verraten.',
|
||||||
|
'Schnappschuss zur Schüssel.',
|
||||||
|
'Einmal lesen lassen, schon da.',
|
||||||
|
'Keine Hand hat dieses Rezept abgetippt.',
|
||||||
|
'Vom Bild in die Bratpfanne.',
|
||||||
|
'Papier ist geduldig, das Foto war es auch.',
|
||||||
|
'Eine Seite, ein Foto, ein Rezept.',
|
||||||
|
'Die KI hat drübergeschielt.',
|
||||||
|
'Handschriftlich entziffert — oder zumindest versucht.',
|
||||||
|
'Aus der Linse in die Liste.',
|
||||||
|
'Vom Küchentisch zur Kachel.',
|
||||||
|
'Knips und weg — zumindest der Zettel.',
|
||||||
|
'Das Bild hat geredet.',
|
||||||
|
'Keine Tippfehler, nur Sehfehler.',
|
||||||
|
'Per Foto eingebürgert.',
|
||||||
|
'Rezept-Übersetzung aus dem Bild.',
|
||||||
|
'Die Seite hat sich verraten.',
|
||||||
|
'Blitzlicht und dann Gulasch.',
|
||||||
|
'Ein Augenzwinkern der Kamera genügte.',
|
||||||
|
'Geknipst, gelesen, gespeichert.',
|
||||||
|
'Fotografische Gedächtnishilfe.',
|
||||||
|
'Aus der Schublade ans Licht.',
|
||||||
|
'Das Rezept stand schon da — wir haben nur hingeguckt.',
|
||||||
|
'Zaubertrick mit Kamera.',
|
||||||
|
'Vom Papier befreit.',
|
||||||
|
'Ein Foto sagt mehr als tausend Zutatenlisten.',
|
||||||
|
'Eingescannt, rausgelesen, reingeschrieben.',
|
||||||
|
'Die Kamera als Küchenhilfe.',
|
||||||
|
'Handy hoch, Rezept runter.',
|
||||||
|
'Aus dem Kochbuch gebeamt.',
|
||||||
|
'Ein scharfes Foto, ein klares Rezept.',
|
||||||
|
'Vom Regal zur App in einem Schritt.',
|
||||||
|
'Aus dem Bild geschöpft wie Suppe aus dem Topf.',
|
||||||
|
'Optisch erfasst, digital serviert.',
|
||||||
|
'Das Kleingedruckte hat die KI gelesen.',
|
||||||
|
'Vom Kladdenzettel in die Datenbank.',
|
||||||
|
'Kurz gezückt, schon gekocht.',
|
||||||
|
'Kein Schreibkrampf, nur ein Klick.'
|
||||||
|
];
|
||||||
|
|
||||||
|
export function pickRandomPhrase(): string {
|
||||||
|
return DESCRIPTION_PHRASES[Math.floor(Math.random() * DESCRIPTION_PHRASES.length)];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Invariant:** Genau 50 Einträge, alle non-empty, alle unique. Unit-Test prüft das.
|
||||||
|
|
||||||
|
## 6. Fehlerbehandlung
|
||||||
|
|
||||||
|
**Client-Zustände auf `/new/from-photo`:**
|
||||||
|
|
||||||
|
| State | UI |
|
||||||
|
|---|---|
|
||||||
|
| `idle` | `Camera`-Button groß mittig, Text „Foto wählen oder aufnehmen". Hilfetext: „Gedrucktes Rezept oder Handschrift. Eine Seite, scharf, gut ausgeleuchtet." |
|
||||||
|
| `loading` | `Loader2` (spin) + Text „Lese das Rezept…". `X`-Button für Abbrechen (AbortController). |
|
||||||
|
| `success` | `<RecipeEditor initialData={recipe}>`. Top-Banner mit `Wand2`: „Aus Foto erstellt — bitte prüfen und ggf. korrigieren." Verschwindet nach erstem Feld-Edit. |
|
||||||
|
| `error: NO_RECIPE_IN_IMAGE` | Yellow-Box. Buttons: `Camera` „Anderes Foto" (→ idle), `FilePlus` „Leer anlegen" (→ leerer Editor). |
|
||||||
|
| `error: AI_TIMEOUT` / `AI_RATE_LIMITED` / `AI_FAILED` | Red-Toast, Grund. `RotateCw` „Nochmal versuchen" — reused das gleiche File-Objekt, kein Re-Upload durch den Nutzer. |
|
||||||
|
| `error: PAYLOAD_TOO_LARGE` | Toast „Foto zu groß (max 8 MB). In besserer Beleuchtung neu aufnehmen." |
|
||||||
|
| Offline (auf Route) | Hinweis „Diese Funktion braucht Internet." |
|
||||||
|
|
||||||
|
**A11y:** Lade-State `aria-live="polite"`, Fehler-Boxen `role="alert"`, Kamera-Icon mit `aria-label`.
|
||||||
|
|
||||||
|
**Server-Seite:**
|
||||||
|
|
||||||
|
- Gemini-Call mit `AbortSignal`, Default-Timeout `GEMINI_TIMEOUT_MS` (20000).
|
||||||
|
- Retry-Matrix:
|
||||||
|
|
||||||
|
| Gemini-Signal | Verhalten |
|
||||||
|
|---|---|
|
||||||
|
| 429 | `AI_RATE_LIMITED`, kein Retry. |
|
||||||
|
| Network/5xx | 1× Retry mit 500 ms backoff, dann `AI_FAILED`. |
|
||||||
|
| Invalid JSON | 1× Retry mit Append-Prompt, dann `AI_FAILED`. |
|
||||||
|
| Valid JSON aber Schema-invalid | gleicher Pfad wie Invalid JSON. |
|
||||||
|
| Timeout | `AI_TIMEOUT`, kein Retry. |
|
||||||
|
|
||||||
|
- **Logging:** `console.warn` mit `{ code, durationMs, imageKB }` — **ohne** Prompt/Response-Inhalt (Privacy).
|
||||||
|
|
||||||
|
**Icons (alle aus `lucide-svelte`):**
|
||||||
|
|
||||||
|
| Zweck | Icon |
|
||||||
|
|---|---|
|
||||||
|
| Header-Button | `Camera` |
|
||||||
|
| Lade-State | `Loader2` (spin) |
|
||||||
|
| Erfolgs-Banner | `Wand2` |
|
||||||
|
| Fehler | `AlertTriangle` |
|
||||||
|
| „Nochmal versuchen" | `RotateCw` |
|
||||||
|
| „Anderes Foto" | `Camera` |
|
||||||
|
| „Leer anlegen" | `FilePlus` |
|
||||||
|
| Abbrechen (Loading) | `X` |
|
||||||
|
|
||||||
|
## 7. Sicherheit / Missbrauch
|
||||||
|
|
||||||
|
- **Rate-Limit:** 10 Requests/Min pro IP, simple In-Memory-Throttle im Endpoint. Schützt vor versehentlichem Dauer-Tappen und Kosten-Runaways. Übertrieben für's Heimnetz, aber billig einzubauen.
|
||||||
|
- **MIME-Validierung nicht blind client-seitig** — Buffer-Header prüfen (`sharp` metadata) nach Empfang.
|
||||||
|
- **`.heic`/`.heif`** funktioniert, wenn `sharp` mit `libheif` gebaut ist (beim offiziellen sharp-arm64-Build dabei). Fixture-Test dafür.
|
||||||
|
- **Kein Auth** (Kochwas-Policy). Key stays server-side.
|
||||||
|
- **Privacy-Statement** im OPERATIONS.md: „Fotos gehen einmal an Google Gemini und werden danach nicht gespeichert. Gemini nutzt API-Daten im Paid-Tier nicht für Training."
|
||||||
|
|
||||||
|
## 8. Konfiguration
|
||||||
|
|
||||||
|
Env-Vars (alle in `docker-compose.yml`, `docker-compose.prod.yml`, `.env.example` ergänzen):
|
||||||
|
|
||||||
|
| Var | Default | Zweck |
|
||||||
|
|---|---|---|
|
||||||
|
| `GEMINI_API_KEY` | — (required) | Ohne Key: Feature graceful deaktiviert. |
|
||||||
|
| `GEMINI_MODEL` | `gemini-2.5-flash` | Modell-Wechsel (z.B. auf `gemini-2.5-pro`) ohne Rebuild. |
|
||||||
|
| `GEMINI_TIMEOUT_MS` | `20000` | Timeout für Vision-Call. |
|
||||||
|
|
||||||
|
**Wichtig:** Env-Änderungen greifen erst nach `docker compose up -d --force-recreate`, nicht nach `restart` (siehe Auto-Memory `project_deploy_env_recreate.md`).
|
||||||
|
|
||||||
|
## 9. Testing
|
||||||
|
|
||||||
|
**Unit (Vitest, mocked Gemini):**
|
||||||
|
|
||||||
|
- `image-preprocess.test.ts`: Resize, HEIC→JPEG, Metadata-Strip, JPEG-Qualität.
|
||||||
|
- `recipe-extraction-prompt.test.ts`: Prompt enthält Schema; Zod akzeptiert gültige Response; Zod lehnt invalide Response ab; Retry-Logik greift genau 1×.
|
||||||
|
- `gemini-client.test.ts`: Timeout, 429-no-retry, 5xx-1x-retry, Network-Fehler.
|
||||||
|
|
||||||
|
**API (SvelteKit-Endpoint, gemockter Gemini-Client):**
|
||||||
|
|
||||||
|
- `tests/api/extract-from-photo.test.ts`: Happy-Path mit Fixture-JPEG; 413 bei >8MB; 415 bei nicht-Bild; 422 bei Titel-OK-aber-0-Ingredients-UND-0-Steps; 503 mit `AI_NOT_CONFIGURED` wenn Key fehlt.
|
||||||
|
|
||||||
|
**E2E (Playwright gegen `kochwas-dev.siegeln.net`):**
|
||||||
|
|
||||||
|
- `tests/e2e/remote/photo-import.spec.ts`: Kamera-Icon-Klick; File-Upload (Endpoint gestubt, kein echter Gemini-Call); Editor-Prefill; Save; Redirect auf `/recipes/:id`; Kamera-Icon-disabled bei `context.setOffline(true)`.
|
||||||
|
|
||||||
|
**Fixtures:** `tests/fixtures/photo-recipe/`: gedruckte Seite, Handschrift-Karte, No-Recipe-Bild.
|
||||||
|
|
||||||
|
**Explizit nicht getestet:** Die Gemini-Vision-Qualität selbst. Das ist Model-Verhalten, nicht unser Code. Manuelle Verifikation nach Deploy.
|
||||||
|
|
||||||
|
## 10. PWA / Service Worker
|
||||||
|
|
||||||
|
- `/new/from-photo` in den Shell-Pre-Cache aufnehmen.
|
||||||
|
- Feature funktioniert nur online — Offline-State wird bewusst gehandhabt (siehe §6).
|
||||||
|
- Service-Worker ändert nichts am Extract-Endpoint (keine SW-Cachung für `/api/recipes/extract-from-photo`).
|
||||||
|
|
||||||
|
## 11. Offene Kleinigkeiten (in Planung zu entscheiden)
|
||||||
|
|
||||||
|
- **Save-Endpoint:** Ob der bestehende Editor-Save-Endpoint das Anlegen eines Rezepts aus Scratch unterstützt, oder ob `insertRecipe` über einen neuen POST `/api/recipes` exponiert werden muss — vor dem Planning prüfen.
|
||||||
|
- **Sharp Build-Stage:** Verifizieren, dass das offizielle `sharp`-npm-Package auf arm64 mit libheif-Support ausgeliefert wird; andernfalls Build-Stage-Rezept ähnlich zu `better-sqlite3`.
|
||||||
|
- **Rate-Limit-Impl:** In-Memory-LRU oder Redis-like überflüssig — `Map<ip, {count, resetAt}>` reicht.
|
||||||
|
|
||||||
|
## 12. Akzeptanz-Kriterien
|
||||||
|
|
||||||
|
- [ ] Kamera-Icon in der Kopfzeile sichtbar, führt zu `/new/from-photo`.
|
||||||
|
- [ ] Kamera-Icon unsichtbar wenn `GEMINI_API_KEY` leer.
|
||||||
|
- [ ] Kamera-Icon disabled wenn offline (`networkStore.online === false`).
|
||||||
|
- [ ] File-Picker öffnet mobile Rückkamera direkt (`capture="environment"`).
|
||||||
|
- [ ] Gedrucktes Fixture-Rezept wird vom Prompt + Mock-Gemini-Response in gültige Recipe-Shape überführt.
|
||||||
|
- [ ] Handschrift-Fixture ebenso (Mock).
|
||||||
|
- [ ] No-Recipe-Fixture → 422 `NO_RECIPE_IN_IMAGE` → UI zeigt Yellow-Box mit beiden Buttons.
|
||||||
|
- [ ] Editor öffnet mit vorbefüllten Feldern, Nutzer kann editieren, Speichern navigiert zu `/recipes/:id`.
|
||||||
|
- [ ] Foto-Datei wird nach Request nicht auf Disk gefunden (Test-Assertion im API-Test).
|
||||||
|
- [ ] Build im Dockerfile-arm64-Stage erfolgreich mit `sharp`.
|
||||||
|
- [ ] `npm test` + `npm run check` grün.
|
||||||
836
package-lock.json
generated
836
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "kochwas",
|
"name": "kochwas",
|
||||||
"version": "1.2.0",
|
"version": "1.3.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -35,12 +35,15 @@
|
|||||||
"vitest": "^2.1.4"
|
"vitest": "^2.1.4"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@google/generative-ai": "^0.24.1",
|
||||||
"@types/archiver": "^7.0.0",
|
"@types/archiver": "^7.0.0",
|
||||||
"@types/yauzl": "^2.10.3",
|
"@types/yauzl": "^2.10.3",
|
||||||
"archiver": "^7.0.1",
|
"archiver": "^7.0.1",
|
||||||
"better-sqlite3": "^11.5.0",
|
"better-sqlite3": "^11.5.0",
|
||||||
"linkedom": "^0.18.5",
|
"linkedom": "^0.18.5",
|
||||||
"lucide-svelte": "^1.0.1",
|
"lucide-svelte": "^1.0.1",
|
||||||
|
"node-addon-api": "^8.7.0",
|
||||||
|
"node-gyp": "^12.3.0",
|
||||||
"yauzl": "^3.3.0",
|
"yauzl": "^3.3.0",
|
||||||
"zod": "^3.23.8"
|
"zod": "^3.23.8"
|
||||||
}
|
}
|
||||||
|
|||||||
76
src/lib/client/photo-upload.svelte.ts
Normal file
76
src/lib/client/photo-upload.svelte.ts
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
import type { Recipe } from '$lib/types';
|
||||||
|
|
||||||
|
export type UploadStatus = 'idle' | 'loading' | 'success' | 'error';
|
||||||
|
|
||||||
|
export class PhotoUploadStore {
|
||||||
|
status = $state<UploadStatus>('idle');
|
||||||
|
recipe = $state<Recipe | null>(null);
|
||||||
|
errorCode = $state<string | null>(null);
|
||||||
|
errorMessage = $state<string | null>(null);
|
||||||
|
lastFile = $state<File | null>(null);
|
||||||
|
|
||||||
|
private controller: AbortController | null = null;
|
||||||
|
private readonly fetchImpl: typeof fetch;
|
||||||
|
|
||||||
|
constructor(opts: { fetchImpl?: typeof fetch } = {}) {
|
||||||
|
this.fetchImpl = opts.fetchImpl ?? fetch;
|
||||||
|
}
|
||||||
|
|
||||||
|
async upload(file: File): Promise<void> {
|
||||||
|
this.lastFile = file;
|
||||||
|
await this.doUpload(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
async retry(): Promise<void> {
|
||||||
|
if (this.lastFile) await this.doUpload(this.lastFile);
|
||||||
|
}
|
||||||
|
|
||||||
|
reset(): void {
|
||||||
|
this.status = 'idle';
|
||||||
|
this.recipe = null;
|
||||||
|
this.errorCode = null;
|
||||||
|
this.errorMessage = null;
|
||||||
|
this.lastFile = null;
|
||||||
|
this.controller?.abort();
|
||||||
|
this.controller = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
abort(): void {
|
||||||
|
this.controller?.abort();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async doUpload(file: File): Promise<void> {
|
||||||
|
this.status = 'loading';
|
||||||
|
this.recipe = null;
|
||||||
|
this.errorCode = null;
|
||||||
|
this.errorMessage = null;
|
||||||
|
this.controller = new AbortController();
|
||||||
|
const fd = new FormData();
|
||||||
|
fd.append('photo', file);
|
||||||
|
try {
|
||||||
|
const res = await this.fetchImpl('/api/recipes/extract-from-photo', {
|
||||||
|
method: 'POST',
|
||||||
|
body: fd,
|
||||||
|
signal: this.controller.signal
|
||||||
|
});
|
||||||
|
const body = await res.json().catch(() => ({}));
|
||||||
|
if (!res.ok) {
|
||||||
|
this.status = 'error';
|
||||||
|
this.errorCode = typeof body.code === 'string' ? body.code : 'UNKNOWN';
|
||||||
|
this.errorMessage =
|
||||||
|
typeof body.message === 'string' ? body.message : `HTTP ${res.status}`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.recipe = body.recipe as Recipe;
|
||||||
|
this.status = 'success';
|
||||||
|
} catch (e) {
|
||||||
|
if ((e as Error).name === 'AbortError') {
|
||||||
|
this.status = 'idle';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.status = 'error';
|
||||||
|
this.errorCode = 'NETWORK';
|
||||||
|
this.errorMessage = (e as Error).message;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -134,14 +134,20 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="editor">
|
<div class="editor">
|
||||||
|
{#if recipe.id !== null}
|
||||||
<section class="block">
|
<section class="block">
|
||||||
<h2>Bild</h2>
|
<h2>Bild</h2>
|
||||||
<ImageUploadBox
|
<ImageUploadBox
|
||||||
recipeId={recipe.id!}
|
recipeId={recipe.id}
|
||||||
imagePath={recipe.image_path}
|
imagePath={recipe.image_path}
|
||||||
onchange={(p) => onimagechange?.(p)}
|
onchange={(p) => onimagechange?.(p)}
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
|
{:else}
|
||||||
|
<section class="block info">
|
||||||
|
<p class="hint">Bild kannst du nach dem Speichern hinzufügen.</p>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div class="meta">
|
<div class="meta">
|
||||||
<label class="field">
|
<label class="field">
|
||||||
@@ -271,6 +277,15 @@
|
|||||||
margin: 0 0 0.75rem;
|
margin: 0 0 0.75rem;
|
||||||
color: #2b6a3d;
|
color: #2b6a3d;
|
||||||
}
|
}
|
||||||
|
.block.info {
|
||||||
|
background: #f6faf7;
|
||||||
|
border: 1px dashed #cfd9d1;
|
||||||
|
}
|
||||||
|
.hint {
|
||||||
|
color: #666;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
.ing-list {
|
.ing-list {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|||||||
56
src/lib/server/ai/description-phrases.ts
Normal file
56
src/lib/server/ai/description-phrases.ts
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
export const DESCRIPTION_PHRASES: readonly string[] = [
|
||||||
|
'Mit dem Zauberstab aus dem Kochbuch geholt.',
|
||||||
|
'Foto-Magie frisch aus dem Ofen.',
|
||||||
|
'Aus dem Bild herbeigezaubert.',
|
||||||
|
'Ein Klick, ein Foto, fertig.',
|
||||||
|
'Knipsen statt Abtippen.',
|
||||||
|
'Von der Buchseite direkt in die Pfanne.',
|
||||||
|
'Die Kamera hat mitgelesen.',
|
||||||
|
'Abrakadabra — Rezept da.',
|
||||||
|
'Per Linse in die Küche teleportiert.',
|
||||||
|
'Von Oma abfotografiert, von der KI entziffert.',
|
||||||
|
'Frisch aus dem Bilderrahmen.',
|
||||||
|
'Klick, zisch, Rezept.',
|
||||||
|
'Das Foto wurde überredet, sich zu verraten.',
|
||||||
|
'Schnappschuss zur Schüssel.',
|
||||||
|
'Einmal lesen lassen, schon da.',
|
||||||
|
'Keine Hand hat dieses Rezept abgetippt.',
|
||||||
|
'Vom Bild in die Bratpfanne.',
|
||||||
|
'Papier ist geduldig, das Foto war es auch.',
|
||||||
|
'Eine Seite, ein Foto, ein Rezept.',
|
||||||
|
'Die KI hat drübergeschielt.',
|
||||||
|
'Handschriftlich entziffert — oder zumindest versucht.',
|
||||||
|
'Aus der Linse in die Liste.',
|
||||||
|
'Vom Küchentisch zur Kachel.',
|
||||||
|
'Knips und weg — zumindest der Zettel.',
|
||||||
|
'Das Bild hat geredet.',
|
||||||
|
'Keine Tippfehler, nur Sehfehler.',
|
||||||
|
'Per Foto eingebürgert.',
|
||||||
|
'Rezept-Übersetzung aus dem Bild.',
|
||||||
|
'Die Seite hat sich verraten.',
|
||||||
|
'Blitzlicht und dann Gulasch.',
|
||||||
|
'Ein Augenzwinkern der Kamera genügte.',
|
||||||
|
'Geknipst, gelesen, gespeichert.',
|
||||||
|
'Fotografische Gedächtnishilfe.',
|
||||||
|
'Aus der Schublade ans Licht.',
|
||||||
|
'Das Rezept stand schon da — wir haben nur hingeguckt.',
|
||||||
|
'Zaubertrick mit Kamera.',
|
||||||
|
'Vom Papier befreit.',
|
||||||
|
'Ein Foto sagt mehr als tausend Zutatenlisten.',
|
||||||
|
'Eingescannt, rausgelesen, reingeschrieben.',
|
||||||
|
'Die Kamera als Küchenhilfe.',
|
||||||
|
'Handy hoch, Rezept runter.',
|
||||||
|
'Aus dem Kochbuch gebeamt.',
|
||||||
|
'Ein scharfes Foto, ein klares Rezept.',
|
||||||
|
'Vom Regal zur App in einem Schritt.',
|
||||||
|
'Aus dem Bild geschöpft wie Suppe aus dem Topf.',
|
||||||
|
'Optisch erfasst, digital serviert.',
|
||||||
|
'Das Kleingedruckte hat die KI gelesen.',
|
||||||
|
'Vom Kladdenzettel in die Datenbank.',
|
||||||
|
'Kurz gezückt, schon gekocht.',
|
||||||
|
'Kein Schreibkrampf, nur ein Klick.'
|
||||||
|
];
|
||||||
|
|
||||||
|
export function pickRandomPhrase(): string {
|
||||||
|
return DESCRIPTION_PHRASES[Math.floor(Math.random() * DESCRIPTION_PHRASES.length)];
|
||||||
|
}
|
||||||
150
src/lib/server/ai/gemini-client.ts
Normal file
150
src/lib/server/ai/gemini-client.ts
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
import { GoogleGenerativeAI } from '@google/generative-ai';
|
||||||
|
import { env } from '$env/dynamic/private';
|
||||||
|
import {
|
||||||
|
RECIPE_EXTRACTION_SYSTEM_PROMPT,
|
||||||
|
GEMINI_RESPONSE_SCHEMA,
|
||||||
|
extractionResponseSchema,
|
||||||
|
type ExtractionResponse
|
||||||
|
} from './recipe-extraction-prompt';
|
||||||
|
|
||||||
|
export type GeminiErrorCode =
|
||||||
|
| 'AI_NOT_CONFIGURED'
|
||||||
|
| 'AI_RATE_LIMITED'
|
||||||
|
| 'AI_TIMEOUT'
|
||||||
|
| 'AI_FAILED';
|
||||||
|
|
||||||
|
export class GeminiError extends Error {
|
||||||
|
constructor(
|
||||||
|
public readonly code: GeminiErrorCode,
|
||||||
|
message: string
|
||||||
|
) {
|
||||||
|
super(message);
|
||||||
|
this.name = 'GeminiError';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getStatus(err: unknown): number | undefined {
|
||||||
|
if (err && typeof err === 'object' && 'status' in err) {
|
||||||
|
const s = (err as { status?: unknown }).status;
|
||||||
|
if (typeof s === 'number') return s;
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCfg(): { apiKey: string; model: string; timeoutMs: number } {
|
||||||
|
const apiKey = env.GEMINI_API_KEY ?? process.env.GEMINI_API_KEY ?? '';
|
||||||
|
const model =
|
||||||
|
env.GEMINI_MODEL ?? process.env.GEMINI_MODEL ?? 'gemini-2.5-flash';
|
||||||
|
const rawTimeout =
|
||||||
|
env.GEMINI_TIMEOUT_MS ?? process.env.GEMINI_TIMEOUT_MS ?? '20000';
|
||||||
|
const timeoutMs = Number(rawTimeout) || 20000;
|
||||||
|
return { apiKey, model, timeoutMs };
|
||||||
|
}
|
||||||
|
|
||||||
|
async function withTimeout<T>(promise: Promise<T>, ms: number): Promise<T> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const timer = setTimeout(
|
||||||
|
() => reject(new GeminiError('AI_TIMEOUT', `Gemini timeout after ${ms} ms`)),
|
||||||
|
ms
|
||||||
|
);
|
||||||
|
promise.then(
|
||||||
|
(v) => {
|
||||||
|
clearTimeout(timer);
|
||||||
|
resolve(v);
|
||||||
|
},
|
||||||
|
(e) => {
|
||||||
|
clearTimeout(timer);
|
||||||
|
reject(e);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function callGemini(
|
||||||
|
imageBuffer: Buffer,
|
||||||
|
mimeType: string,
|
||||||
|
appendUserNote?: string
|
||||||
|
): Promise<ExtractionResponse> {
|
||||||
|
const { apiKey, model: modelId, timeoutMs } = getCfg();
|
||||||
|
if (!apiKey) {
|
||||||
|
throw new GeminiError('AI_NOT_CONFIGURED', 'GEMINI_API_KEY is not set');
|
||||||
|
}
|
||||||
|
|
||||||
|
const client = new GoogleGenerativeAI(apiKey);
|
||||||
|
const model = client.getGenerativeModel({
|
||||||
|
model: modelId,
|
||||||
|
systemInstruction: RECIPE_EXTRACTION_SYSTEM_PROMPT,
|
||||||
|
generationConfig: {
|
||||||
|
temperature: 0.1,
|
||||||
|
responseMimeType: 'application/json',
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
responseSchema: GEMINI_RESPONSE_SCHEMA as any
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const parts: Array<
|
||||||
|
{ inlineData: { data: string; mimeType: string } } | { text: string }
|
||||||
|
> = [{ inlineData: { data: imageBuffer.toString('base64'), mimeType } }];
|
||||||
|
if (appendUserNote) parts.push({ text: appendUserNote });
|
||||||
|
|
||||||
|
const result = await withTimeout(
|
||||||
|
model.generateContent({ contents: [{ role: 'user', parts }] }),
|
||||||
|
timeoutMs
|
||||||
|
);
|
||||||
|
const text = result.response.text();
|
||||||
|
let parsed: unknown;
|
||||||
|
try {
|
||||||
|
parsed = JSON.parse(text);
|
||||||
|
} catch {
|
||||||
|
throw new GeminiError('AI_FAILED', 'Gemini returned non-JSON output');
|
||||||
|
}
|
||||||
|
const validated = extractionResponseSchema.safeParse(parsed);
|
||||||
|
if (!validated.success) {
|
||||||
|
throw new GeminiError(
|
||||||
|
'AI_FAILED',
|
||||||
|
`Schema validation failed: ${validated.error.message}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return validated.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public entry: one retry on recoverable failures (5xx or schema-invalid),
|
||||||
|
// no retry on 429, AI_TIMEOUT, or config errors.
|
||||||
|
export async function extractRecipeFromImage(
|
||||||
|
imageBuffer: Buffer,
|
||||||
|
mimeType: string
|
||||||
|
): Promise<ExtractionResponse> {
|
||||||
|
try {
|
||||||
|
return await callGemini(imageBuffer, mimeType);
|
||||||
|
} catch (e) {
|
||||||
|
if (e instanceof GeminiError && e.code === 'AI_NOT_CONFIGURED') throw e;
|
||||||
|
if (e instanceof GeminiError && e.code === 'AI_TIMEOUT') throw e;
|
||||||
|
|
||||||
|
const status = getStatus(e);
|
||||||
|
if (status === 429) throw new GeminiError('AI_RATE_LIMITED', 'Gemini rate limit');
|
||||||
|
|
||||||
|
const recoverable =
|
||||||
|
(e instanceof GeminiError && e.code === 'AI_FAILED') ||
|
||||||
|
(status !== undefined && status >= 500);
|
||||||
|
if (!recoverable) {
|
||||||
|
throw e instanceof GeminiError
|
||||||
|
? e
|
||||||
|
: new GeminiError('AI_FAILED', String(e));
|
||||||
|
}
|
||||||
|
|
||||||
|
await new Promise((r) => setTimeout(r, 500));
|
||||||
|
try {
|
||||||
|
return await callGemini(
|
||||||
|
imageBuffer,
|
||||||
|
mimeType,
|
||||||
|
'Dein vorheriger Output war ungültig. Bitte antworte ausschließlich mit JSON gemäß Schema.'
|
||||||
|
);
|
||||||
|
} catch (retryErr) {
|
||||||
|
if (retryErr instanceof GeminiError) throw retryErr;
|
||||||
|
const retryStatus = getStatus(retryErr);
|
||||||
|
if (retryStatus === 429)
|
||||||
|
throw new GeminiError('AI_RATE_LIMITED', 'Gemini rate limit on retry');
|
||||||
|
throw new GeminiError('AI_FAILED', String(retryErr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
54
src/lib/server/ai/image-preprocess.ts
Normal file
54
src/lib/server/ai/image-preprocess.ts
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
import type SharpType from 'sharp';
|
||||||
|
import { createRequire } from 'node:module';
|
||||||
|
|
||||||
|
const MAX_EDGE = 1600;
|
||||||
|
const JPEG_QUALITY = 85;
|
||||||
|
|
||||||
|
export type PreprocessedImage = {
|
||||||
|
buffer: Buffer;
|
||||||
|
mimeType: 'image/jpeg';
|
||||||
|
};
|
||||||
|
|
||||||
|
// sharp per Node-Runtime-require laden, nicht via ES-Import: adapter-node
|
||||||
|
// bundelt ES-Imports (auch dynamische, auch mit @vite-ignore) ins Server-
|
||||||
|
// Bundle, was sharp's internes dynamic-require fuer die Plattform-.node-Binary
|
||||||
|
// zerstoert. createRequire + require() ist pure Node-Runtime-Logik, die
|
||||||
|
// Rollup nicht anfasst -- sharp wird regulaer aus node_modules geladen.
|
||||||
|
const nodeRequire = createRequire(import.meta.url);
|
||||||
|
let sharpModule: typeof SharpType | null = null;
|
||||||
|
function loadSharp(): typeof SharpType {
|
||||||
|
if (!sharpModule) {
|
||||||
|
sharpModule = nodeRequire('sharp') as typeof SharpType;
|
||||||
|
}
|
||||||
|
return sharpModule;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Resize auf max 1600px lange Kante, JPEG re-encode, Metadata strippen.
|
||||||
|
// sharp liest HEIC/HEIF transparent, wenn libheif im libvips-Build enthalten ist
|
||||||
|
// (in Alpine's vips-dev + in den offiziellen sharp-Prebuilds).
|
||||||
|
export async function preprocessImage(input: Buffer): Promise<PreprocessedImage> {
|
||||||
|
const sharp = loadSharp();
|
||||||
|
const pipeline = sharp(input, { failOn: 'error' }).rotate(); // respect EXIF orientation
|
||||||
|
const meta = await pipeline.metadata();
|
||||||
|
if (!meta.width || !meta.height) {
|
||||||
|
throw new Error('Unable to read image dimensions');
|
||||||
|
}
|
||||||
|
|
||||||
|
const longEdge = Math.max(meta.width, meta.height);
|
||||||
|
const resized =
|
||||||
|
longEdge > MAX_EDGE
|
||||||
|
? pipeline.resize({
|
||||||
|
width: meta.width >= meta.height ? MAX_EDGE : undefined,
|
||||||
|
height: meta.height > meta.width ? MAX_EDGE : undefined,
|
||||||
|
withoutEnlargement: true
|
||||||
|
})
|
||||||
|
: pipeline;
|
||||||
|
|
||||||
|
// Default-Verhalten seit sharp 0.33: alle Metadata (EXIF/IPTC/XMP) werden
|
||||||
|
// gestripped. Nur `.keepMetadata()`/`.keepExif()` würde sie erhalten.
|
||||||
|
const buffer = await resized
|
||||||
|
.jpeg({ quality: JPEG_QUALITY, mozjpeg: true })
|
||||||
|
.toBuffer();
|
||||||
|
|
||||||
|
return { buffer, mimeType: 'image/jpeg' };
|
||||||
|
}
|
||||||
21
src/lib/server/ai/rate-limit.ts
Normal file
21
src/lib/server/ai/rate-limit.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
export type RateLimiter = { check: (key: string) => boolean };
|
||||||
|
|
||||||
|
export function createRateLimiter(opts: {
|
||||||
|
windowMs: number;
|
||||||
|
max: number;
|
||||||
|
}): RateLimiter {
|
||||||
|
const store = new Map<string, { count: number; resetAt: number }>();
|
||||||
|
return {
|
||||||
|
check(key: string): boolean {
|
||||||
|
const now = Date.now();
|
||||||
|
const entry = store.get(key);
|
||||||
|
if (!entry || entry.resetAt <= now) {
|
||||||
|
store.set(key, { count: 1, resetAt: now + opts.windowMs });
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (entry.count >= opts.max) return false;
|
||||||
|
entry.count += 1;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
85
src/lib/server/ai/recipe-extraction-prompt.ts
Normal file
85
src/lib/server/ai/recipe-extraction-prompt.ts
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
import { z } from 'zod';
|
||||||
|
import { SchemaType } from '@google/generative-ai';
|
||||||
|
|
||||||
|
export const RECIPE_EXTRACTION_SYSTEM_PROMPT = `Du bist ein Rezept-Extraktions-Assistent.
|
||||||
|
Du bekommst ein Foto eines gedruckten oder handgeschriebenen Rezepts und gibst ein strukturiertes JSON zurück.
|
||||||
|
|
||||||
|
Regeln:
|
||||||
|
- Extrahiere nur, was tatsächlich auf dem Bild lesbar ist. Sonst Feld auf null (oder leeres Array).
|
||||||
|
- Zutaten: quantity als Zahl (Bruchteile wie ½, ¼, 1 ½ als Dezimalzahl 0.5, 0.25, 1.5), unit separat
|
||||||
|
(g, ml, l, kg, EL, TL, Stück, Prise, Msp, …).
|
||||||
|
- Zubereitungsschritte: pro erkennbarer Nummerierung oder Absatz EIN Schritt.
|
||||||
|
- Zeiten in Minuten (ganze Zahl). "1 Stunde" = 60.
|
||||||
|
- Ignoriere Werbung, Foto-Bildunterschriften, Einleitungstexte. Nur das Rezept selbst.
|
||||||
|
- Denke dir NICHTS dazu aus. Was nicht auf dem Bild steht, ist null.
|
||||||
|
- Antworte ausschließlich im vorgegebenen JSON-Schema. Kein Markdown, kein Prosa-Text.`;
|
||||||
|
|
||||||
|
// Gemini responseSchema (Subset von OpenAPI). Wird an GenerativeModel.generateContent
|
||||||
|
// übergeben; Gemini respektiert die Struktur und liefert valides JSON.
|
||||||
|
export const GEMINI_RESPONSE_SCHEMA = {
|
||||||
|
type: SchemaType.OBJECT,
|
||||||
|
properties: {
|
||||||
|
title: { type: SchemaType.STRING, nullable: false },
|
||||||
|
servings_default: { type: SchemaType.INTEGER, nullable: true },
|
||||||
|
servings_unit: { type: SchemaType.STRING, nullable: true },
|
||||||
|
prep_time_min: { type: SchemaType.INTEGER, nullable: true },
|
||||||
|
cook_time_min: { type: SchemaType.INTEGER, nullable: true },
|
||||||
|
total_time_min: { type: SchemaType.INTEGER, nullable: true },
|
||||||
|
ingredients: {
|
||||||
|
type: SchemaType.ARRAY,
|
||||||
|
items: {
|
||||||
|
type: SchemaType.OBJECT,
|
||||||
|
properties: {
|
||||||
|
quantity: { type: SchemaType.NUMBER, nullable: true },
|
||||||
|
unit: { type: SchemaType.STRING, nullable: true },
|
||||||
|
name: { type: SchemaType.STRING, nullable: false },
|
||||||
|
note: { type: SchemaType.STRING, nullable: true }
|
||||||
|
},
|
||||||
|
required: ['name']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
steps: {
|
||||||
|
type: SchemaType.ARRAY,
|
||||||
|
items: {
|
||||||
|
type: SchemaType.OBJECT,
|
||||||
|
properties: {
|
||||||
|
text: { type: SchemaType.STRING, nullable: false }
|
||||||
|
},
|
||||||
|
required: ['text']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
required: ['title', 'ingredients', 'steps']
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
// Zod-Spiegel des Schemas. .strict() verhindert, dass Gemini zusätzliche Keys
|
||||||
|
// unbemerkt durchschmuggelt.
|
||||||
|
const ingredientSchema = z
|
||||||
|
.object({
|
||||||
|
quantity: z.number().nullable(),
|
||||||
|
unit: z.string().max(30).nullable(),
|
||||||
|
name: z.string().min(1).max(200),
|
||||||
|
note: z.string().max(300).nullable()
|
||||||
|
})
|
||||||
|
.strict();
|
||||||
|
|
||||||
|
const stepSchema = z
|
||||||
|
.object({
|
||||||
|
text: z.string().min(1).max(4000)
|
||||||
|
})
|
||||||
|
.strict();
|
||||||
|
|
||||||
|
export const extractionResponseSchema = z
|
||||||
|
.object({
|
||||||
|
title: z.string().min(1).max(200),
|
||||||
|
servings_default: z.number().int().nonnegative().nullable(),
|
||||||
|
servings_unit: z.string().max(30).nullable(),
|
||||||
|
prep_time_min: z.number().int().nonnegative().nullable(),
|
||||||
|
cook_time_min: z.number().int().nonnegative().nullable(),
|
||||||
|
total_time_min: z.number().int().nonnegative().nullable(),
|
||||||
|
ingredients: z.array(ingredientSchema),
|
||||||
|
steps: z.array(stepSchema)
|
||||||
|
})
|
||||||
|
.strict();
|
||||||
|
|
||||||
|
export type ExtractionResponse = z.infer<typeof extractionResponseSchema>;
|
||||||
@@ -16,6 +16,7 @@ export function resolveStrategy(req: RequestShape): CacheStrategy {
|
|||||||
if (
|
if (
|
||||||
path === '/api/recipes/import' ||
|
path === '/api/recipes/import' ||
|
||||||
path === '/api/recipes/preview' ||
|
path === '/api/recipes/preview' ||
|
||||||
|
path === '/api/recipes/extract-from-photo' ||
|
||||||
path.startsWith('/api/recipes/search/web')
|
path.startsWith('/api/recipes/search/web')
|
||||||
) {
|
) {
|
||||||
return 'network-only';
|
return 'network-only';
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { env } from '$env/dynamic/private';
|
|||||||
|
|
||||||
export const load: LayoutServerLoad = () => {
|
export const load: LayoutServerLoad = () => {
|
||||||
return {
|
return {
|
||||||
version: env.KOCHWAS_TAG ?? 'dev'
|
version: env.KOCHWAS_TAG ?? 'dev',
|
||||||
|
geminiConfigured: Boolean(env.GEMINI_API_KEY)
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -2,7 +2,15 @@
|
|||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { goto, afterNavigate } from '$app/navigation';
|
import { goto, afterNavigate } from '$app/navigation';
|
||||||
import { Settings, CookingPot, Utensils, Menu, BookOpen, ArrowLeft } from 'lucide-svelte';
|
import {
|
||||||
|
Settings,
|
||||||
|
CookingPot,
|
||||||
|
Utensils,
|
||||||
|
Menu,
|
||||||
|
BookOpen,
|
||||||
|
ArrowLeft,
|
||||||
|
Camera
|
||||||
|
} from 'lucide-svelte';
|
||||||
import { profileStore } from '$lib/client/profile.svelte';
|
import { profileStore } from '$lib/client/profile.svelte';
|
||||||
import { wishlistStore } from '$lib/client/wishlist.svelte';
|
import { wishlistStore } from '$lib/client/wishlist.svelte';
|
||||||
import { pwaStore } from '$lib/client/pwa.svelte';
|
import { pwaStore } from '$lib/client/pwa.svelte';
|
||||||
@@ -232,6 +240,22 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="bar-right">
|
<div class="bar-right">
|
||||||
|
{#if data.geminiConfigured}
|
||||||
|
<a
|
||||||
|
href={network.online ? '/new/from-photo' : ''}
|
||||||
|
class="nav-link magic-link"
|
||||||
|
class:disabled={!network.online}
|
||||||
|
aria-label="Rezept aus Foto erstellen"
|
||||||
|
title={network.online
|
||||||
|
? 'Rezept aus Foto erstellen'
|
||||||
|
: 'Offline — braucht Internet'}
|
||||||
|
onclick={(e) => {
|
||||||
|
if (!network.online) e.preventDefault();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Camera size={20} strokeWidth={2} />
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
<a
|
<a
|
||||||
href="/wishlist"
|
href="/wishlist"
|
||||||
class="nav-link wishlist-link"
|
class="nav-link wishlist-link"
|
||||||
@@ -537,6 +561,11 @@
|
|||||||
.nav-link:hover {
|
.nav-link:hover {
|
||||||
background: #f4f8f5;
|
background: #f4f8f5;
|
||||||
}
|
}
|
||||||
|
.nav-link.disabled {
|
||||||
|
color: #999;
|
||||||
|
pointer-events: none;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
.badge {
|
.badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
|
|||||||
61
src/routes/api/recipes/+server.ts
Normal file
61
src/routes/api/recipes/+server.ts
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import type { RequestHandler } from './$types';
|
||||||
|
import { json } from '@sveltejs/kit';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { getDb } from '$lib/server/db';
|
||||||
|
import { validateBody } from '$lib/server/api-helpers';
|
||||||
|
import { insertRecipe } from '$lib/server/recipes/repository';
|
||||||
|
|
||||||
|
const IngredientSchema = z.object({
|
||||||
|
position: z.number().int().nonnegative(),
|
||||||
|
quantity: z.number().nullable(),
|
||||||
|
unit: z.string().max(30).nullable(),
|
||||||
|
name: z.string().min(1).max(200),
|
||||||
|
note: z.string().max(300).nullable(),
|
||||||
|
raw_text: z.string().max(500),
|
||||||
|
section_heading: z.string().max(200).nullable()
|
||||||
|
});
|
||||||
|
|
||||||
|
const StepSchema = z.object({
|
||||||
|
position: z.number().int().positive(),
|
||||||
|
text: z.string().min(1).max(4000)
|
||||||
|
});
|
||||||
|
|
||||||
|
const CreateRecipeSchema = z.object({
|
||||||
|
title: z.string().min(1).max(200),
|
||||||
|
description: z.string().max(2000).nullable(),
|
||||||
|
servings_default: z.number().int().nonnegative().nullable(),
|
||||||
|
servings_unit: z.string().max(30).nullable(),
|
||||||
|
prep_time_min: z.number().int().nonnegative().nullable(),
|
||||||
|
cook_time_min: z.number().int().nonnegative().nullable(),
|
||||||
|
total_time_min: z.number().int().nonnegative().nullable(),
|
||||||
|
ingredients: z.array(IngredientSchema),
|
||||||
|
steps: z.array(StepSchema)
|
||||||
|
});
|
||||||
|
|
||||||
|
// Anlegen eines kompletten Rezepts aus Scratch. Wird vom Foto-Import-Flow
|
||||||
|
// genutzt, nachdem der Nutzer im Editor die AI-Extraktion geprüft/korrigiert
|
||||||
|
// und auf Speichern getippt hat. Der bestehende /api/recipes/blank-Endpoint
|
||||||
|
// bleibt für den „leer anlegen"-Flow unverändert.
|
||||||
|
export const POST: RequestHandler = async ({ request }) => {
|
||||||
|
const body = await request.json().catch(() => null);
|
||||||
|
const p = validateBody(body, CreateRecipeSchema);
|
||||||
|
const id = insertRecipe(getDb(), {
|
||||||
|
id: null,
|
||||||
|
title: p.title,
|
||||||
|
description: p.description,
|
||||||
|
source_url: null,
|
||||||
|
source_domain: null,
|
||||||
|
image_path: null,
|
||||||
|
servings_default: p.servings_default,
|
||||||
|
servings_unit: p.servings_unit,
|
||||||
|
prep_time_min: p.prep_time_min,
|
||||||
|
cook_time_min: p.cook_time_min,
|
||||||
|
total_time_min: p.total_time_min,
|
||||||
|
cuisine: null,
|
||||||
|
category: null,
|
||||||
|
ingredients: p.ingredients,
|
||||||
|
steps: p.steps,
|
||||||
|
tags: []
|
||||||
|
});
|
||||||
|
return json({ id }, { status: 201 });
|
||||||
|
};
|
||||||
181
src/routes/api/recipes/extract-from-photo/+server.ts
Normal file
181
src/routes/api/recipes/extract-from-photo/+server.ts
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
import type { RequestHandler } from './$types';
|
||||||
|
import { json } from '@sveltejs/kit';
|
||||||
|
import { extractRecipeFromImage, GeminiError } from '$lib/server/ai/gemini-client';
|
||||||
|
import { preprocessImage } from '$lib/server/ai/image-preprocess';
|
||||||
|
import { pickRandomPhrase } from '$lib/server/ai/description-phrases';
|
||||||
|
import { createRateLimiter } from '$lib/server/ai/rate-limit';
|
||||||
|
import type { Ingredient, Step } from '$lib/types';
|
||||||
|
|
||||||
|
// 20 MB deckt auch Tablet- und iPad-Pro-Fotos ab (oft 10-15 MB JPEG/HEIC).
|
||||||
|
// Muss zusammen mit BODY_SIZE_LIMIT (docker-compose.prod.yml) hochgezogen werden --
|
||||||
|
// SvelteKit rejected groessere Bodies frueher und wirft dann undurchsichtige
|
||||||
|
// "Multipart erwartet"-Fehler.
|
||||||
|
const MAX_BYTES = 20 * 1024 * 1024;
|
||||||
|
const ALLOWED_MIME = new Set([
|
||||||
|
'image/jpeg',
|
||||||
|
'image/png',
|
||||||
|
'image/webp',
|
||||||
|
'image/heic',
|
||||||
|
'image/heif'
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Singleton-Limiter: 10 Requests/Minute pro IP. Verhindert Kosten-Runaways
|
||||||
|
// bei versehentlichem Dauer-Tappen.
|
||||||
|
const limiter = createRateLimiter({ windowMs: 60_000, max: 10 });
|
||||||
|
|
||||||
|
function errJson(status: number, code: string, message: string) {
|
||||||
|
return json({ code, message }, { status });
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildRawText(q: number | null, u: string | null, name: string): string {
|
||||||
|
const parts: string[] = [];
|
||||||
|
if (q !== null) parts.push(String(q).replace('.', ','));
|
||||||
|
if (u) parts.push(u);
|
||||||
|
parts.push(name);
|
||||||
|
return parts.join(' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
export const POST: RequestHandler = async ({ request, getClientAddress }) => {
|
||||||
|
const ip = getClientAddress();
|
||||||
|
if (!limiter.check(ip)) {
|
||||||
|
return errJson(
|
||||||
|
429,
|
||||||
|
'RATE_LIMITED',
|
||||||
|
'Zu viele Anfragen — bitte einen Moment warten.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Header-Snapshot fuer Diagnose beim Upload-Parse-Fehler. Wir loggen
|
||||||
|
// Content-Type, -Length und User-Agent — nichts, was Inhalt verraet.
|
||||||
|
const contentType = request.headers.get('content-type') ?? '(missing)';
|
||||||
|
const contentLength = request.headers.get('content-length') ?? '(missing)';
|
||||||
|
const userAgent = request.headers.get('user-agent')?.slice(0, 120) ?? '(missing)';
|
||||||
|
|
||||||
|
let form: FormData;
|
||||||
|
try {
|
||||||
|
form = await request.formData();
|
||||||
|
} catch (e) {
|
||||||
|
const err = e as Error;
|
||||||
|
console.warn(
|
||||||
|
`[extract-from-photo] formData() failed: name=${err.name} msg=${err.message} ` +
|
||||||
|
`ct="${contentType}" len=${contentLength} ua="${userAgent}"`
|
||||||
|
);
|
||||||
|
return errJson(
|
||||||
|
400,
|
||||||
|
'BAD_REQUEST',
|
||||||
|
`Upload konnte nicht gelesen werden (${err.name}: ${err.message}).`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const photo = form.get('photo');
|
||||||
|
if (!(photo instanceof Blob)) {
|
||||||
|
console.warn(
|
||||||
|
`[extract-from-photo] photo field missing or not a Blob. ct="${contentType}" ` +
|
||||||
|
`len=${contentLength} fields=${[...form.keys()].join(',')}`
|
||||||
|
);
|
||||||
|
return errJson(400, 'BAD_REQUEST', 'Feld "photo" fehlt.');
|
||||||
|
}
|
||||||
|
console.info(
|
||||||
|
`[extract-from-photo] received photo size=${photo.size} mime="${photo.type}" ua="${userAgent}"`
|
||||||
|
);
|
||||||
|
if (photo.size > MAX_BYTES) {
|
||||||
|
return errJson(
|
||||||
|
413,
|
||||||
|
'PAYLOAD_TOO_LARGE',
|
||||||
|
`Foto zu groß (max ${MAX_BYTES / 1024 / 1024} MB).`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (!ALLOWED_MIME.has(photo.type)) {
|
||||||
|
return errJson(
|
||||||
|
415,
|
||||||
|
'UNSUPPORTED_MEDIA_TYPE',
|
||||||
|
`MIME "${photo.type}" nicht unterstützt.`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const rawBuffer = Buffer.from(await photo.arrayBuffer());
|
||||||
|
let preprocessed: { buffer: Buffer; mimeType: 'image/jpeg' };
|
||||||
|
try {
|
||||||
|
preprocessed = await preprocessImage(rawBuffer);
|
||||||
|
} catch (e) {
|
||||||
|
return errJson(
|
||||||
|
415,
|
||||||
|
'UNSUPPORTED_MEDIA_TYPE',
|
||||||
|
`Bild konnte nicht gelesen werden: ${(e as Error).message}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const startedAt = Date.now();
|
||||||
|
let extracted;
|
||||||
|
try {
|
||||||
|
extracted = await extractRecipeFromImage(
|
||||||
|
preprocessed.buffer,
|
||||||
|
preprocessed.mimeType
|
||||||
|
);
|
||||||
|
} catch (e) {
|
||||||
|
if (e instanceof GeminiError) {
|
||||||
|
const status =
|
||||||
|
e.code === 'AI_RATE_LIMITED'
|
||||||
|
? 429
|
||||||
|
: e.code === 'AI_TIMEOUT'
|
||||||
|
? 503
|
||||||
|
: e.code === 'AI_NOT_CONFIGURED'
|
||||||
|
? 503
|
||||||
|
: 503;
|
||||||
|
// Nur Code + Meta loggen, niemals Prompt/Response-Inhalt.
|
||||||
|
console.warn(
|
||||||
|
`[extract-from-photo] ${e.code} after ${Date.now() - startedAt}ms, ${preprocessed.buffer.byteLength} bytes`
|
||||||
|
);
|
||||||
|
return errJson(status, e.code, 'Die Bild-Analyse ist fehlgeschlagen.');
|
||||||
|
}
|
||||||
|
console.warn(`[extract-from-photo] UNEXPECTED ${(e as Error).message}`);
|
||||||
|
return errJson(503, 'AI_FAILED', 'Die Bild-Analyse ist fehlgeschlagen.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Minimum-Gültigkeit: Titel + (mind. 1 Zutat ODER mind. 1 Schritt).
|
||||||
|
if (
|
||||||
|
!extracted.title.trim() ||
|
||||||
|
(extracted.ingredients.length === 0 && extracted.steps.length === 0)
|
||||||
|
) {
|
||||||
|
return errJson(
|
||||||
|
422,
|
||||||
|
'NO_RECIPE_IN_IMAGE',
|
||||||
|
'Ich konnte kein Rezept im Bild erkennen.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const ingredients: Ingredient[] = extracted.ingredients.map((i, idx) => ({
|
||||||
|
position: idx + 1,
|
||||||
|
quantity: i.quantity,
|
||||||
|
unit: i.unit,
|
||||||
|
name: i.name,
|
||||||
|
note: i.note,
|
||||||
|
raw_text: buildRawText(i.quantity, i.unit, i.name),
|
||||||
|
section_heading: null
|
||||||
|
}));
|
||||||
|
|
||||||
|
const steps: Step[] = extracted.steps.map((s, idx) => ({
|
||||||
|
position: idx + 1,
|
||||||
|
text: s.text
|
||||||
|
}));
|
||||||
|
|
||||||
|
return json({
|
||||||
|
recipe: {
|
||||||
|
id: null,
|
||||||
|
title: extracted.title,
|
||||||
|
description: pickRandomPhrase(),
|
||||||
|
source_url: null,
|
||||||
|
source_domain: null,
|
||||||
|
image_path: null,
|
||||||
|
servings_default: extracted.servings_default,
|
||||||
|
servings_unit: extracted.servings_unit,
|
||||||
|
prep_time_min: extracted.prep_time_min,
|
||||||
|
cook_time_min: extracted.cook_time_min,
|
||||||
|
total_time_min: extracted.total_time_min,
|
||||||
|
cuisine: null,
|
||||||
|
category: null,
|
||||||
|
ingredients,
|
||||||
|
steps,
|
||||||
|
tags: []
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
12
src/routes/new/from-photo/+page.server.ts
Normal file
12
src/routes/new/from-photo/+page.server.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import type { PageServerLoad } from './$types';
|
||||||
|
import { error } from '@sveltejs/kit';
|
||||||
|
import { env } from '$env/dynamic/private';
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async () => {
|
||||||
|
if (!env.GEMINI_API_KEY) {
|
||||||
|
error(503, {
|
||||||
|
message: 'Foto-Import ist nicht konfiguriert (GEMINI_API_KEY fehlt).'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return {};
|
||||||
|
};
|
||||||
271
src/routes/new/from-photo/+page.svelte
Normal file
271
src/routes/new/from-photo/+page.svelte
Normal file
@@ -0,0 +1,271 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
import {
|
||||||
|
Camera,
|
||||||
|
ImageUp,
|
||||||
|
Loader2,
|
||||||
|
Wand2,
|
||||||
|
AlertTriangle,
|
||||||
|
RotateCw,
|
||||||
|
FilePlus,
|
||||||
|
X
|
||||||
|
} from 'lucide-svelte';
|
||||||
|
import RecipeEditor from '$lib/components/RecipeEditor.svelte';
|
||||||
|
import { PhotoUploadStore } from '$lib/client/photo-upload.svelte';
|
||||||
|
import { alertAction } from '$lib/client/confirm.svelte';
|
||||||
|
import { network } from '$lib/client/network.svelte';
|
||||||
|
import type { Recipe, Ingredient, Step } from '$lib/types';
|
||||||
|
|
||||||
|
const store = new PhotoUploadStore();
|
||||||
|
let saving = $state(false);
|
||||||
|
let cameraInput = $state<HTMLInputElement | null>(null);
|
||||||
|
let fileInput = $state<HTMLInputElement | null>(null);
|
||||||
|
|
||||||
|
function onPick(e: Event) {
|
||||||
|
const file = (e.target as HTMLInputElement).files?.[0];
|
||||||
|
if (file) void store.upload(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
type SavePatch = {
|
||||||
|
title: string;
|
||||||
|
description: string | null;
|
||||||
|
servings_default: number | null;
|
||||||
|
prep_time_min: number | null;
|
||||||
|
cook_time_min: number | null;
|
||||||
|
total_time_min: number | null;
|
||||||
|
ingredients: Ingredient[];
|
||||||
|
steps: Step[];
|
||||||
|
};
|
||||||
|
|
||||||
|
async function onSave(patch: SavePatch) {
|
||||||
|
if (!store.recipe) return;
|
||||||
|
saving = true;
|
||||||
|
try {
|
||||||
|
const body = {
|
||||||
|
title: patch.title,
|
||||||
|
description: patch.description,
|
||||||
|
servings_default: patch.servings_default,
|
||||||
|
servings_unit: store.recipe.servings_unit,
|
||||||
|
prep_time_min: patch.prep_time_min,
|
||||||
|
cook_time_min: patch.cook_time_min,
|
||||||
|
total_time_min: patch.total_time_min,
|
||||||
|
ingredients: patch.ingredients,
|
||||||
|
steps: patch.steps
|
||||||
|
};
|
||||||
|
const res = await fetch('/api/recipes', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'content-type': 'application/json' },
|
||||||
|
body: JSON.stringify(body)
|
||||||
|
});
|
||||||
|
if (!res.ok) {
|
||||||
|
const err = await res.json().catch(() => ({}));
|
||||||
|
await alertAction({
|
||||||
|
title: 'Speichern fehlgeschlagen',
|
||||||
|
message: err.message ?? `HTTP ${res.status}`
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { id } = await res.json();
|
||||||
|
await goto(`/recipes/${id}`);
|
||||||
|
} finally {
|
||||||
|
saving = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onCancel() {
|
||||||
|
history.back();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head><title>Rezept aus Foto — Kochwas</title></svelte:head>
|
||||||
|
|
||||||
|
{#if store.status === 'idle'}
|
||||||
|
<section class="picker">
|
||||||
|
<Camera size={48} strokeWidth={1.5} />
|
||||||
|
<h1>Rezept aus Foto</h1>
|
||||||
|
<p class="hint">
|
||||||
|
Fotografiere ein gedrucktes oder handgeschriebenes Rezept. Eine Seite,
|
||||||
|
scharf, gut ausgeleuchtet.
|
||||||
|
</p>
|
||||||
|
<div class="row">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn primary"
|
||||||
|
onclick={() => cameraInput?.click()}
|
||||||
|
disabled={!network.online}
|
||||||
|
>
|
||||||
|
<Camera size={18} strokeWidth={2} />
|
||||||
|
<span>Kamera</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn ghost"
|
||||||
|
onclick={() => fileInput?.click()}
|
||||||
|
disabled={!network.online}
|
||||||
|
>
|
||||||
|
<ImageUp size={18} strokeWidth={2} />
|
||||||
|
<span>Aus Dateien</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Zwei separate Inputs: capture="environment" oeffnet direkt die Kamera,
|
||||||
|
das andere zeigt den Datei-/Fotomediathek-Picker. Android-Chrome auf
|
||||||
|
Tablet zeigt sonst bei capture="environment" nur die Kamera; ohne
|
||||||
|
capture dagegen nur den Datei-Picker. Explizite Wahl ist eindeutig. -->
|
||||||
|
<input
|
||||||
|
bind:this={cameraInput}
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
capture="environment"
|
||||||
|
hidden
|
||||||
|
onchange={onPick}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
bind:this={fileInput}
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
hidden
|
||||||
|
onchange={onPick}
|
||||||
|
/>
|
||||||
|
{#if !network.online}
|
||||||
|
<p class="offline">Offline — diese Funktion braucht Internet.</p>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
{:else if store.status === 'loading'}
|
||||||
|
<section class="state" aria-live="polite">
|
||||||
|
<div class="spin"><Loader2 size={48} /></div>
|
||||||
|
<p>Lese das Rezept…</p>
|
||||||
|
<button type="button" class="btn ghost" onclick={() => store.abort()}>
|
||||||
|
<X size={18} /><span>Abbrechen</span>
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
{:else if store.status === 'error'}
|
||||||
|
{#if store.errorCode === 'NO_RECIPE_IN_IMAGE'}
|
||||||
|
<section class="state yellow" role="alert">
|
||||||
|
<AlertTriangle size={40} />
|
||||||
|
<h2>Kein Rezept im Bild</h2>
|
||||||
|
<p>Ich konnte auf dem Foto kein Rezept erkennen.</p>
|
||||||
|
<div class="row">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn primary"
|
||||||
|
onclick={() => {
|
||||||
|
store.reset();
|
||||||
|
fileInput?.click();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Camera size={18} /><span>Anderes Foto</span>
|
||||||
|
</button>
|
||||||
|
<a class="btn ghost" href="/">
|
||||||
|
<FilePlus size={18} /><span>Startseite</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{:else}
|
||||||
|
<section class="state red" role="alert">
|
||||||
|
<AlertTriangle size={40} />
|
||||||
|
<h2>Fehler</h2>
|
||||||
|
<p>{store.errorMessage ?? 'Unbekannter Fehler.'}</p>
|
||||||
|
<div class="row">
|
||||||
|
<button type="button" class="btn primary" onclick={() => store.retry()}>
|
||||||
|
<RotateCw size={18} /><span>Nochmal versuchen</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn ghost" onclick={() => store.reset()}>
|
||||||
|
<Camera size={18} /><span>Anderes Foto</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
{:else if store.status === 'success' && store.recipe}
|
||||||
|
<div class="banner">
|
||||||
|
<Wand2 size={18} />
|
||||||
|
<span>Aus Foto erstellt — bitte prüfen und ggf. korrigieren.</span>
|
||||||
|
</div>
|
||||||
|
<RecipeEditor
|
||||||
|
recipe={store.recipe as Recipe}
|
||||||
|
{saving}
|
||||||
|
onsave={onSave}
|
||||||
|
oncancel={onCancel}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.picker,
|
||||||
|
.state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 3rem 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.hint {
|
||||||
|
color: #666;
|
||||||
|
max-width: 400px;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
padding: 0.8rem 1.1rem;
|
||||||
|
min-height: 48px;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
border: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
.btn.primary {
|
||||||
|
background: #2b6a3d;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.btn.primary:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.btn.ghost {
|
||||||
|
background: white;
|
||||||
|
color: #444;
|
||||||
|
border: 1px solid #cfd9d1;
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.state.yellow {
|
||||||
|
background: #fff6d7;
|
||||||
|
border: 1px solid #e6d48a;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
.state.red {
|
||||||
|
background: #fde4e4;
|
||||||
|
border: 1px solid #e6a0a0;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
.banner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.7rem 1rem;
|
||||||
|
background: #eef8ef;
|
||||||
|
border: 1px solid #b7d9c0;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 0.75rem 0 1rem;
|
||||||
|
color: #2b6a3d;
|
||||||
|
}
|
||||||
|
.spin {
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.offline {
|
||||||
|
color: #a05b00;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
80
tests/e2e/remote/photo-import.spec.ts
Normal file
80
tests/e2e/remote/photo-import.spec.ts
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
import { test, expect } from '@playwright/test';
|
||||||
|
import { resolve } from 'node:path';
|
||||||
|
|
||||||
|
// Wir stubben den Extract-Endpoint server-side nicht (das Feature liegt auf
|
||||||
|
// dev hinter dem echten Gemini-Key), sondern auf context-Ebene: Playwright
|
||||||
|
// fängt alle Requests auf /api/recipes/extract-from-photo ab und liefert
|
||||||
|
// einen deterministischen JSON-Body zurück. Keine Gemini-Kosten in CI.
|
||||||
|
|
||||||
|
test('Foto-Import Happy-Path mit gestubtem Extract-Endpoint', async ({
|
||||||
|
page,
|
||||||
|
context
|
||||||
|
}) => {
|
||||||
|
await context.route('**/api/recipes/extract-from-photo', async (route) => {
|
||||||
|
await route.fulfill({
|
||||||
|
status: 200,
|
||||||
|
contentType: 'application/json',
|
||||||
|
body: JSON.stringify({
|
||||||
|
recipe: {
|
||||||
|
id: null,
|
||||||
|
title: 'E2E Testrezept',
|
||||||
|
description: 'Aus dem Bild herbeigezaubert.',
|
||||||
|
source_url: null,
|
||||||
|
source_domain: null,
|
||||||
|
image_path: null,
|
||||||
|
servings_default: 2,
|
||||||
|
servings_unit: 'Portionen',
|
||||||
|
prep_time_min: 5,
|
||||||
|
cook_time_min: 10,
|
||||||
|
total_time_min: null,
|
||||||
|
cuisine: null,
|
||||||
|
category: null,
|
||||||
|
ingredients: [
|
||||||
|
{
|
||||||
|
position: 1,
|
||||||
|
quantity: 1,
|
||||||
|
unit: 'Stk',
|
||||||
|
name: 'E2E-Apfel',
|
||||||
|
note: null,
|
||||||
|
raw_text: '1 Stk E2E-Apfel',
|
||||||
|
section_heading: null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
steps: [{ position: 1, text: 'Apfel waschen.' }],
|
||||||
|
tags: []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
await page.goto('/new/from-photo');
|
||||||
|
await expect(page.getByRole('heading', { name: 'Rezept aus Foto' })).toBeVisible();
|
||||||
|
|
||||||
|
const fixture = resolve(__dirname, '../../fixtures/photo-recipe/sample-printed.jpg');
|
||||||
|
await page.locator('input[type="file"]').setInputFiles(fixture);
|
||||||
|
|
||||||
|
await expect(page.getByText('Aus Foto erstellt')).toBeVisible({ timeout: 5000 });
|
||||||
|
// Titel-Feld (das erste text-input im Editor)
|
||||||
|
await expect(page.locator('input[type="text"]').first()).toHaveValue(
|
||||||
|
'E2E Testrezept'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Camera-Icon im Header wird disabled, wenn der Client offline geht', async ({
|
||||||
|
page,
|
||||||
|
context
|
||||||
|
}) => {
|
||||||
|
await page.goto('/');
|
||||||
|
const icon = page.locator('[aria-label="Rezept aus Foto erstellen"]');
|
||||||
|
// Nur relevant, wenn der Dev-Server einen Gemini-Key hat — andernfalls ist
|
||||||
|
// das Icon per Graceful-Degradation gar nicht gerendert und der Test wird
|
||||||
|
// hier early-skipped. (Im Prod und Dev mit Key gilt der zweite Pfad.)
|
||||||
|
if ((await icon.count()) === 0) {
|
||||||
|
test.skip(true, 'Dev-Env hat keinen GEMINI_API_KEY gesetzt.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await expect(icon).toBeVisible();
|
||||||
|
await context.setOffline(true);
|
||||||
|
await page.waitForFunction(() => !navigator.onLine);
|
||||||
|
await expect(icon).toHaveClass(/disabled/);
|
||||||
|
});
|
||||||
BIN
tests/fixtures/photo-recipe/sample-printed.jpg
vendored
Normal file
BIN
tests/fixtures/photo-recipe/sample-printed.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 519 B |
140
tests/integration/extract-from-photo.test.ts
Normal file
140
tests/integration/extract-from-photo.test.ts
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
import sharp from 'sharp';
|
||||||
|
|
||||||
|
const { mockExtract } = vi.hoisted(() => ({ mockExtract: vi.fn() }));
|
||||||
|
|
||||||
|
vi.mock('$lib/server/ai/gemini-client', () => ({
|
||||||
|
extractRecipeFromImage: mockExtract,
|
||||||
|
GeminiError: class GeminiError extends Error {
|
||||||
|
constructor(
|
||||||
|
public readonly code: string,
|
||||||
|
message: string
|
||||||
|
) {
|
||||||
|
super(message);
|
||||||
|
this.name = 'GeminiError';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { POST } from '../../src/routes/api/recipes/extract-from-photo/+server';
|
||||||
|
import { GeminiError } from '$lib/server/ai/gemini-client';
|
||||||
|
|
||||||
|
async function makeJpeg(): Promise<Buffer> {
|
||||||
|
return sharp({
|
||||||
|
create: { width: 100, height: 100, channels: 3, background: '#888' }
|
||||||
|
})
|
||||||
|
.jpeg()
|
||||||
|
.toBuffer();
|
||||||
|
}
|
||||||
|
|
||||||
|
function mkEvent(body: FormData, ip = '1.2.3.4') {
|
||||||
|
return {
|
||||||
|
request: new Request('http://test/api/recipes/extract-from-photo', {
|
||||||
|
method: 'POST',
|
||||||
|
body
|
||||||
|
}),
|
||||||
|
getClientAddress: () => ip
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const validAiResponse = {
|
||||||
|
title: 'Testrezept',
|
||||||
|
servings_default: 4,
|
||||||
|
servings_unit: 'Portionen',
|
||||||
|
prep_time_min: 10,
|
||||||
|
cook_time_min: 20,
|
||||||
|
total_time_min: null,
|
||||||
|
ingredients: [{ quantity: 1, unit: null, name: 'Apfel', note: null }],
|
||||||
|
steps: [{ text: 'Apfel schälen.' }]
|
||||||
|
};
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
mockExtract.mockReset();
|
||||||
|
process.env.GEMINI_API_KEY = 'test-key';
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('POST /api/recipes/extract-from-photo', () => {
|
||||||
|
it('happy path: 200 with recipe shape', async () => {
|
||||||
|
mockExtract.mockResolvedValueOnce(validAiResponse);
|
||||||
|
const fd = new FormData();
|
||||||
|
fd.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }), 'x.jpg');
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
const res = await POST(mkEvent(fd) as any);
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const body = await res.json();
|
||||||
|
expect(body.recipe.title).toBe('Testrezept');
|
||||||
|
expect(typeof body.recipe.description).toBe('string');
|
||||||
|
expect(body.recipe.description.length).toBeGreaterThan(0);
|
||||||
|
expect(body.recipe.image_path).toBeNull();
|
||||||
|
expect(body.recipe.ingredients[0].raw_text).toContain('Apfel');
|
||||||
|
expect(body.recipe.id).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('413 when file exceeds 20 MB', async () => {
|
||||||
|
const big = Buffer.alloc(21 * 1024 * 1024);
|
||||||
|
const fd = new FormData();
|
||||||
|
fd.append('photo', new Blob([new Uint8Array(big)], { type: 'image/jpeg' }));
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
const res = await POST(mkEvent(fd, '1.1.1.1') as any);
|
||||||
|
expect(res.status).toBe(413);
|
||||||
|
expect((await res.json()).code).toBe('PAYLOAD_TOO_LARGE');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('415 when content-type not in whitelist', async () => {
|
||||||
|
const fd = new FormData();
|
||||||
|
fd.append('photo', new Blob([new Uint8Array(Buffer.from('hi'))], { type: 'text/plain' }));
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
const res = await POST(mkEvent(fd, '2.2.2.2') as any);
|
||||||
|
expect(res.status).toBe(415);
|
||||||
|
expect((await res.json()).code).toBe('UNSUPPORTED_MEDIA_TYPE');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('400 when no photo field', async () => {
|
||||||
|
const fd = new FormData();
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
const res = await POST(mkEvent(fd, '3.3.3.3') as any);
|
||||||
|
expect(res.status).toBe(400);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('422 NO_RECIPE_IN_IMAGE when 0 ingredients AND 0 steps', async () => {
|
||||||
|
mockExtract.mockResolvedValueOnce({
|
||||||
|
...validAiResponse,
|
||||||
|
ingredients: [],
|
||||||
|
steps: []
|
||||||
|
});
|
||||||
|
const fd = new FormData();
|
||||||
|
fd.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }));
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
const res = await POST(mkEvent(fd, '4.4.4.4') as any);
|
||||||
|
expect(res.status).toBe(422);
|
||||||
|
expect((await res.json()).code).toBe('NO_RECIPE_IN_IMAGE');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('503 AI_NOT_CONFIGURED when GeminiError thrown', async () => {
|
||||||
|
mockExtract.mockRejectedValueOnce(
|
||||||
|
new GeminiError('AI_NOT_CONFIGURED', 'no key')
|
||||||
|
);
|
||||||
|
const fd = new FormData();
|
||||||
|
fd.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }));
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
const res = await POST(mkEvent(fd, '5.5.5.5') as any);
|
||||||
|
expect(res.status).toBe(503);
|
||||||
|
expect((await res.json()).code).toBe('AI_NOT_CONFIGURED');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('429 when rate limit exceeded for same IP', async () => {
|
||||||
|
mockExtract.mockResolvedValue(validAiResponse);
|
||||||
|
const ip = '9.9.9.9';
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
const fd = new FormData();
|
||||||
|
fd.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }));
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
await POST(mkEvent(fd, ip) as any);
|
||||||
|
}
|
||||||
|
const last = new FormData();
|
||||||
|
last.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }));
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
const res = await POST(mkEvent(last, ip) as any);
|
||||||
|
expect(res.status).toBe(429);
|
||||||
|
});
|
||||||
|
});
|
||||||
86
tests/integration/recipes-post.test.ts
Normal file
86
tests/integration/recipes-post.test.ts
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||||
|
import { openInMemoryForTest } from '../../src/lib/server/db';
|
||||||
|
|
||||||
|
const { testDb } = vi.hoisted(() => {
|
||||||
|
// Lazy holder; real DB instantiated in beforeEach.
|
||||||
|
return { testDb: { current: null as ReturnType<typeof openInMemoryForTest> | null } };
|
||||||
|
});
|
||||||
|
|
||||||
|
vi.mock('$lib/server/db', async () => {
|
||||||
|
const actual =
|
||||||
|
await vi.importActual<typeof import('../../src/lib/server/db')>(
|
||||||
|
'../../src/lib/server/db'
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
...actual,
|
||||||
|
getDb: () => {
|
||||||
|
if (!testDb.current) throw new Error('test DB not initialised');
|
||||||
|
return testDb.current;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
import { POST } from '../../src/routes/api/recipes/+server';
|
||||||
|
|
||||||
|
function mkReq(body: unknown) {
|
||||||
|
return {
|
||||||
|
request: new Request('http://test/api/recipes', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'content-type': 'application/json' },
|
||||||
|
body: JSON.stringify(body)
|
||||||
|
})
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const validBody = {
|
||||||
|
title: 'Aus Foto erstellt',
|
||||||
|
description: 'Abrakadabra — Rezept da.',
|
||||||
|
servings_default: 4,
|
||||||
|
servings_unit: 'Portionen',
|
||||||
|
prep_time_min: 10,
|
||||||
|
cook_time_min: 20,
|
||||||
|
total_time_min: null,
|
||||||
|
ingredients: [
|
||||||
|
{
|
||||||
|
position: 1,
|
||||||
|
quantity: 1,
|
||||||
|
unit: null,
|
||||||
|
name: 'Apfel',
|
||||||
|
note: null,
|
||||||
|
raw_text: '1 Apfel',
|
||||||
|
section_heading: null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
steps: [{ position: 1, text: 'Apfel schneiden.' }]
|
||||||
|
};
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
testDb.current = openInMemoryForTest();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('POST /api/recipes', () => {
|
||||||
|
it('happy path returns 201 + id', async () => {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
const res = await POST(mkReq(validBody) as any);
|
||||||
|
expect(res.status).toBe(201);
|
||||||
|
const body = await res.json();
|
||||||
|
expect(typeof body.id).toBe('number');
|
||||||
|
expect(body.id).toBeGreaterThan(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('400 on empty title', async () => {
|
||||||
|
await expect(
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
POST(mkReq({ ...validBody, title: '' }) as any)
|
||||||
|
).rejects.toMatchObject({ status: 400 });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('400 on missing ingredients array', async () => {
|
||||||
|
const bad = { ...validBody } as Partial<typeof validBody>;
|
||||||
|
delete bad.ingredients;
|
||||||
|
await expect(
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
POST(mkReq(bad) as any)
|
||||||
|
).rejects.toMatchObject({ status: 400 });
|
||||||
|
});
|
||||||
|
});
|
||||||
26
tests/unit/description-phrases.test.ts
Normal file
26
tests/unit/description-phrases.test.ts
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { describe, it, expect } from 'vitest';
|
||||||
|
import { DESCRIPTION_PHRASES, pickRandomPhrase } from '../../src/lib/server/ai/description-phrases';
|
||||||
|
|
||||||
|
describe('description-phrases', () => {
|
||||||
|
it('contains exactly 50 entries', () => {
|
||||||
|
expect(DESCRIPTION_PHRASES).toHaveLength(50);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('has no empty or whitespace-only entries', () => {
|
||||||
|
for (const phrase of DESCRIPTION_PHRASES) {
|
||||||
|
expect(phrase.trim().length).toBeGreaterThan(0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it('has no duplicates', () => {
|
||||||
|
const set = new Set(DESCRIPTION_PHRASES);
|
||||||
|
expect(set.size).toBe(DESCRIPTION_PHRASES.length);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('pickRandomPhrase returns a member of the pool', () => {
|
||||||
|
const pool = new Set(DESCRIPTION_PHRASES);
|
||||||
|
for (let i = 0; i < 100; i++) {
|
||||||
|
expect(pool.has(pickRandomPhrase())).toBe(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
128
tests/unit/gemini-client.test.ts
Normal file
128
tests/unit/gemini-client.test.ts
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
|
||||||
|
const mockGenerateContent = vi.fn();
|
||||||
|
|
||||||
|
vi.mock('@google/generative-ai', async () => {
|
||||||
|
const actual = await vi.importActual<typeof import('@google/generative-ai')>(
|
||||||
|
'@google/generative-ai'
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
...actual,
|
||||||
|
GoogleGenerativeAI: vi.fn().mockImplementation(() => ({
|
||||||
|
getGenerativeModel: () => ({ generateContent: mockGenerateContent })
|
||||||
|
}))
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// $env/dynamic/private is mocked via SvelteKit's own mock; here we lean on
|
||||||
|
// process.env (the client falls back to it).
|
||||||
|
import {
|
||||||
|
extractRecipeFromImage,
|
||||||
|
GeminiError
|
||||||
|
} from '../../src/lib/server/ai/gemini-client';
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
mockGenerateContent.mockReset();
|
||||||
|
process.env.GEMINI_API_KEY = 'test-key';
|
||||||
|
process.env.GEMINI_MODEL = 'gemini-2.5-flash';
|
||||||
|
process.env.GEMINI_TIMEOUT_MS = '5000';
|
||||||
|
});
|
||||||
|
|
||||||
|
const validResponse = {
|
||||||
|
title: 'Apfelkuchen',
|
||||||
|
servings_default: 8,
|
||||||
|
servings_unit: 'Stück',
|
||||||
|
prep_time_min: 20,
|
||||||
|
cook_time_min: 45,
|
||||||
|
total_time_min: null,
|
||||||
|
ingredients: [{ quantity: 500, unit: 'g', name: 'Mehl', note: null }],
|
||||||
|
steps: [{ text: 'Ofen auf 180 °C vorheizen.' }]
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('extractRecipeFromImage', () => {
|
||||||
|
it('happy path: returns parsed recipe data', async () => {
|
||||||
|
mockGenerateContent.mockResolvedValueOnce({
|
||||||
|
response: { text: () => JSON.stringify(validResponse) }
|
||||||
|
});
|
||||||
|
const result = await extractRecipeFromImage(Buffer.from('fake'), 'image/jpeg');
|
||||||
|
expect(result.title).toBe('Apfelkuchen');
|
||||||
|
expect(result.ingredients).toHaveLength(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('retries once on schema-invalid JSON, then succeeds', async () => {
|
||||||
|
mockGenerateContent
|
||||||
|
.mockResolvedValueOnce({ response: { text: () => '{"title": "no arrays"}' } })
|
||||||
|
.mockResolvedValueOnce({
|
||||||
|
response: { text: () => JSON.stringify(validResponse) }
|
||||||
|
});
|
||||||
|
const result = await extractRecipeFromImage(Buffer.from('fake'), 'image/jpeg');
|
||||||
|
expect(result.title).toBe('Apfelkuchen');
|
||||||
|
expect(mockGenerateContent).toHaveBeenCalledTimes(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('throws AI_FAILED after schema-invalid + retry also invalid', async () => {
|
||||||
|
mockGenerateContent
|
||||||
|
.mockResolvedValueOnce({ response: { text: () => '{}' } })
|
||||||
|
.mockResolvedValueOnce({
|
||||||
|
response: { text: () => '{"title": "still bad"}' }
|
||||||
|
});
|
||||||
|
await expect(
|
||||||
|
extractRecipeFromImage(Buffer.from('fake'), 'image/jpeg')
|
||||||
|
).rejects.toMatchObject({ code: 'AI_FAILED' });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('throws AI_RATE_LIMITED without retry on 429', async () => {
|
||||||
|
const err = new Error('429 Too Many Requests') as Error & { status?: number };
|
||||||
|
err.status = 429;
|
||||||
|
mockGenerateContent.mockRejectedValueOnce(err);
|
||||||
|
await expect(
|
||||||
|
extractRecipeFromImage(Buffer.from('fake'), 'image/jpeg')
|
||||||
|
).rejects.toMatchObject({ code: 'AI_RATE_LIMITED' });
|
||||||
|
expect(mockGenerateContent).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('retries once on 5xx, then succeeds', async () => {
|
||||||
|
const err = new Error('500 Server Error') as Error & { status?: number };
|
||||||
|
err.status = 500;
|
||||||
|
mockGenerateContent
|
||||||
|
.mockRejectedValueOnce(err)
|
||||||
|
.mockResolvedValueOnce({
|
||||||
|
response: { text: () => JSON.stringify(validResponse) }
|
||||||
|
});
|
||||||
|
const result = await extractRecipeFromImage(Buffer.from('fake'), 'image/jpeg');
|
||||||
|
expect(result.title).toBe('Apfelkuchen');
|
||||||
|
expect(mockGenerateContent).toHaveBeenCalledTimes(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('throws AI_FAILED after 5xx + retry also fails', async () => {
|
||||||
|
const err = new Error('500') as Error & { status?: number };
|
||||||
|
err.status = 500;
|
||||||
|
mockGenerateContent.mockRejectedValue(err);
|
||||||
|
await expect(
|
||||||
|
extractRecipeFromImage(Buffer.from('fake'), 'image/jpeg')
|
||||||
|
).rejects.toMatchObject({ code: 'AI_FAILED' });
|
||||||
|
expect(mockGenerateContent).toHaveBeenCalledTimes(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('throws AI_TIMEOUT when generateContent never resolves', async () => {
|
||||||
|
process.env.GEMINI_TIMEOUT_MS = '50';
|
||||||
|
mockGenerateContent.mockImplementation(
|
||||||
|
() => new Promise(() => {}) // never resolves
|
||||||
|
);
|
||||||
|
await expect(
|
||||||
|
extractRecipeFromImage(Buffer.from('fake'), 'image/jpeg')
|
||||||
|
).rejects.toMatchObject({ code: 'AI_TIMEOUT' });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('throws AI_NOT_CONFIGURED when GEMINI_API_KEY is empty', async () => {
|
||||||
|
process.env.GEMINI_API_KEY = '';
|
||||||
|
await expect(
|
||||||
|
extractRecipeFromImage(Buffer.from('fake'), 'image/jpeg')
|
||||||
|
).rejects.toMatchObject({ code: 'AI_NOT_CONFIGURED' });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('GeminiError has a code property', () => {
|
||||||
|
const e = new GeminiError('AI_FAILED', 'x');
|
||||||
|
expect(e.code).toBe('AI_FAILED');
|
||||||
|
});
|
||||||
|
});
|
||||||
71
tests/unit/image-preprocess.test.ts
Normal file
71
tests/unit/image-preprocess.test.ts
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
import { describe, it, expect } from 'vitest';
|
||||||
|
import sharp from 'sharp';
|
||||||
|
import { preprocessImage } from '../../src/lib/server/ai/image-preprocess';
|
||||||
|
|
||||||
|
async function makeTestImage(
|
||||||
|
width: number,
|
||||||
|
height: number,
|
||||||
|
format: 'jpeg' | 'png' | 'webp' = 'jpeg'
|
||||||
|
): Promise<Buffer> {
|
||||||
|
return sharp({
|
||||||
|
create: {
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
channels: 3,
|
||||||
|
background: { r: 128, g: 128, b: 128 }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.toFormat(format)
|
||||||
|
.toBuffer();
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('preprocessImage', () => {
|
||||||
|
it('resizes a landscape image so long edge <= 1600px', async () => {
|
||||||
|
const input = await makeTestImage(4000, 2000);
|
||||||
|
const { buffer, mimeType } = await preprocessImage(input);
|
||||||
|
const meta = await sharp(buffer).metadata();
|
||||||
|
expect(Math.max(meta.width ?? 0, meta.height ?? 0)).toBeLessThanOrEqual(1600);
|
||||||
|
expect(Math.max(meta.width ?? 0, meta.height ?? 0)).toBeGreaterThan(1000);
|
||||||
|
expect(mimeType).toBe('image/jpeg');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('resizes a portrait image so long edge <= 1600px', async () => {
|
||||||
|
const input = await makeTestImage(2000, 4000);
|
||||||
|
const { buffer } = await preprocessImage(input);
|
||||||
|
const meta = await sharp(buffer).metadata();
|
||||||
|
expect(Math.max(meta.width ?? 0, meta.height ?? 0)).toBeLessThanOrEqual(1600);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('does not upscale smaller images', async () => {
|
||||||
|
const input = await makeTestImage(800, 600);
|
||||||
|
const { buffer } = await preprocessImage(input);
|
||||||
|
const meta = await sharp(buffer).metadata();
|
||||||
|
expect(meta.width).toBe(800);
|
||||||
|
expect(meta.height).toBe(600);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('converts PNG input to JPEG output', async () => {
|
||||||
|
const input = await makeTestImage(1000, 1000, 'png');
|
||||||
|
const { buffer, mimeType } = await preprocessImage(input);
|
||||||
|
const meta = await sharp(buffer).metadata();
|
||||||
|
expect(meta.format).toBe('jpeg');
|
||||||
|
expect(mimeType).toBe('image/jpeg');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('strips EXIF metadata', async () => {
|
||||||
|
const input = await sharp({
|
||||||
|
create: { width: 100, height: 100, channels: 3, background: '#888' }
|
||||||
|
})
|
||||||
|
.withMetadata({ exif: { IFD0: { Copyright: 'test' } } })
|
||||||
|
.jpeg()
|
||||||
|
.toBuffer();
|
||||||
|
const { buffer } = await preprocessImage(input);
|
||||||
|
const meta = await sharp(buffer).metadata();
|
||||||
|
expect(meta.exif).toBeUndefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('rejects non-image buffers', async () => {
|
||||||
|
const notAnImage = Buffer.from('hello world');
|
||||||
|
await expect(preprocessImage(notAnImage)).rejects.toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
87
tests/unit/photo-upload-store.test.ts
Normal file
87
tests/unit/photo-upload-store.test.ts
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
import { describe, it, expect, vi } from 'vitest';
|
||||||
|
import { PhotoUploadStore } from '../../src/lib/client/photo-upload.svelte';
|
||||||
|
|
||||||
|
const validRecipe = {
|
||||||
|
id: null,
|
||||||
|
title: 'T',
|
||||||
|
description: 'D',
|
||||||
|
source_url: null,
|
||||||
|
source_domain: null,
|
||||||
|
image_path: null,
|
||||||
|
servings_default: null,
|
||||||
|
servings_unit: null,
|
||||||
|
prep_time_min: null,
|
||||||
|
cook_time_min: null,
|
||||||
|
total_time_min: null,
|
||||||
|
cuisine: null,
|
||||||
|
category: null,
|
||||||
|
ingredients: [],
|
||||||
|
steps: [{ position: 1, text: 'S' }],
|
||||||
|
tags: []
|
||||||
|
};
|
||||||
|
|
||||||
|
function fakeFetch(responses: Response[]): typeof fetch {
|
||||||
|
let i = 0;
|
||||||
|
return vi.fn(async () => responses[i++]) as unknown as typeof fetch;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mkFile(): File {
|
||||||
|
return new File([new Uint8Array([1, 2, 3])], 'x.jpg', { type: 'image/jpeg' });
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('PhotoUploadStore', () => {
|
||||||
|
it('starts in idle', () => {
|
||||||
|
const s = new PhotoUploadStore();
|
||||||
|
expect(s.status).toBe('idle');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('transitions loading → success on happy path', async () => {
|
||||||
|
const s = new PhotoUploadStore({
|
||||||
|
fetchImpl: fakeFetch([
|
||||||
|
new Response(JSON.stringify({ recipe: validRecipe }), { status: 200 })
|
||||||
|
])
|
||||||
|
});
|
||||||
|
await s.upload(mkFile());
|
||||||
|
expect(s.status).toBe('success');
|
||||||
|
expect(s.recipe?.title).toBe('T');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('transitions to error with code on 422', async () => {
|
||||||
|
const s = new PhotoUploadStore({
|
||||||
|
fetchImpl: fakeFetch([
|
||||||
|
new Response(
|
||||||
|
JSON.stringify({ code: 'NO_RECIPE_IN_IMAGE', message: 'nope' }),
|
||||||
|
{ status: 422 }
|
||||||
|
)
|
||||||
|
])
|
||||||
|
});
|
||||||
|
await s.upload(mkFile());
|
||||||
|
expect(s.status).toBe('error');
|
||||||
|
expect(s.errorCode).toBe('NO_RECIPE_IN_IMAGE');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('reset() brings store back to idle', async () => {
|
||||||
|
const s = new PhotoUploadStore({
|
||||||
|
fetchImpl: fakeFetch([new Response('{"code":"X"}', { status: 503 })])
|
||||||
|
});
|
||||||
|
await s.upload(mkFile());
|
||||||
|
expect(s.status).toBe('error');
|
||||||
|
s.reset();
|
||||||
|
expect(s.status).toBe('idle');
|
||||||
|
expect(s.errorCode).toBeNull();
|
||||||
|
expect(s.lastFile).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('retry re-uploads lastFile', async () => {
|
||||||
|
const s = new PhotoUploadStore({
|
||||||
|
fetchImpl: fakeFetch([
|
||||||
|
new Response('{"code":"X"}', { status: 503 }),
|
||||||
|
new Response(JSON.stringify({ recipe: validRecipe }), { status: 200 })
|
||||||
|
])
|
||||||
|
});
|
||||||
|
await s.upload(mkFile());
|
||||||
|
expect(s.status).toBe('error');
|
||||||
|
await s.retry();
|
||||||
|
expect(s.status).toBe('success');
|
||||||
|
});
|
||||||
|
});
|
||||||
29
tests/unit/rate-limit.test.ts
Normal file
29
tests/unit/rate-limit.test.ts
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
|
||||||
|
import { createRateLimiter } from '../../src/lib/server/ai/rate-limit';
|
||||||
|
|
||||||
|
describe('rate-limit', () => {
|
||||||
|
beforeEach(() => vi.useFakeTimers());
|
||||||
|
afterEach(() => vi.useRealTimers());
|
||||||
|
|
||||||
|
it('allows first 10 requests, rejects 11th', () => {
|
||||||
|
const limiter = createRateLimiter({ windowMs: 60_000, max: 10 });
|
||||||
|
for (let i = 0; i < 10; i++) expect(limiter.check('1.2.3.4')).toBe(true);
|
||||||
|
expect(limiter.check('1.2.3.4')).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('tracks per-IP independently', () => {
|
||||||
|
const limiter = createRateLimiter({ windowMs: 60_000, max: 2 });
|
||||||
|
expect(limiter.check('a')).toBe(true);
|
||||||
|
expect(limiter.check('a')).toBe(true);
|
||||||
|
expect(limiter.check('a')).toBe(false);
|
||||||
|
expect(limiter.check('b')).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('resets after window elapses', () => {
|
||||||
|
const limiter = createRateLimiter({ windowMs: 1000, max: 1 });
|
||||||
|
expect(limiter.check('x')).toBe(true);
|
||||||
|
expect(limiter.check('x')).toBe(false);
|
||||||
|
vi.advanceTimersByTime(1001);
|
||||||
|
expect(limiter.check('x')).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
71
tests/unit/recipe-extraction-prompt.test.ts
Normal file
71
tests/unit/recipe-extraction-prompt.test.ts
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
import { describe, it, expect } from 'vitest';
|
||||||
|
import {
|
||||||
|
RECIPE_EXTRACTION_SYSTEM_PROMPT,
|
||||||
|
GEMINI_RESPONSE_SCHEMA,
|
||||||
|
extractionResponseSchema,
|
||||||
|
type ExtractionResponse
|
||||||
|
} from '../../src/lib/server/ai/recipe-extraction-prompt';
|
||||||
|
|
||||||
|
describe('recipe-extraction-prompt', () => {
|
||||||
|
it('system prompt is in German and mentions Rezept + Zutaten + Zubereitung', () => {
|
||||||
|
const p = RECIPE_EXTRACTION_SYSTEM_PROMPT.toLowerCase();
|
||||||
|
expect(p).toContain('rezept');
|
||||||
|
expect(p).toContain('zutaten');
|
||||||
|
expect(p).toContain('zubereitung');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Gemini response schema has required top-level keys', () => {
|
||||||
|
expect(GEMINI_RESPONSE_SCHEMA.type).toBeDefined();
|
||||||
|
expect(Object.keys(GEMINI_RESPONSE_SCHEMA.properties)).toEqual(
|
||||||
|
expect.arrayContaining(['title', 'ingredients', 'steps'])
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Zod validator accepts a well-formed response', () => {
|
||||||
|
const good: ExtractionResponse = {
|
||||||
|
title: 'Testrezept',
|
||||||
|
servings_default: 4,
|
||||||
|
servings_unit: 'Portionen',
|
||||||
|
prep_time_min: 15,
|
||||||
|
cook_time_min: 30,
|
||||||
|
total_time_min: null,
|
||||||
|
ingredients: [{ quantity: 100, unit: 'g', name: 'Mehl', note: null }],
|
||||||
|
steps: [{ text: 'Mehl in eine Schüssel geben.' }]
|
||||||
|
};
|
||||||
|
expect(() => extractionResponseSchema.parse(good)).not.toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Zod validator rejects missing title', () => {
|
||||||
|
const bad = { servings_default: 4, ingredients: [], steps: [] };
|
||||||
|
expect(() => extractionResponseSchema.parse(bad)).toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Zod validator accepts quantity=null and unit=null', () => {
|
||||||
|
const ok: ExtractionResponse = {
|
||||||
|
title: 'Prise-Rezept',
|
||||||
|
servings_default: null,
|
||||||
|
servings_unit: null,
|
||||||
|
prep_time_min: null,
|
||||||
|
cook_time_min: null,
|
||||||
|
total_time_min: null,
|
||||||
|
ingredients: [{ quantity: null, unit: null, name: 'Salz', note: 'nach Geschmack' }],
|
||||||
|
steps: [{ text: 'Einfach so.' }]
|
||||||
|
};
|
||||||
|
expect(() => extractionResponseSchema.parse(ok)).not.toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Zod validator rejects unexpected extra top-level keys (strict)', () => {
|
||||||
|
const bad = {
|
||||||
|
title: 'x',
|
||||||
|
servings_default: null,
|
||||||
|
servings_unit: null,
|
||||||
|
prep_time_min: null,
|
||||||
|
cook_time_min: null,
|
||||||
|
total_time_min: null,
|
||||||
|
ingredients: [],
|
||||||
|
steps: [],
|
||||||
|
malicious_extra_field: 'pwned'
|
||||||
|
};
|
||||||
|
expect(() => extractionResponseSchema.parse(bad)).toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -3,6 +3,13 @@ import { defineConfig } from 'vitest/config';
|
|||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [sveltekit()],
|
plugins: [sveltekit()],
|
||||||
|
// sharp muss extern bleiben: der Server-Bundle-Schritt kann sharp's
|
||||||
|
// dynamic-require fuer die native .node-Binary nicht aufloesen. Wenn
|
||||||
|
// sharp nicht gebundelt wird, laedt Node es zur Laufzeit regulaer aus
|
||||||
|
// node_modules/@img/sharp-linuxmusl-arm64, das dann funktioniert.
|
||||||
|
ssr: {
|
||||||
|
external: ['sharp']
|
||||||
|
},
|
||||||
test: {
|
test: {
|
||||||
include: ['tests/**/*.test.ts'],
|
include: ['tests/**/*.test.ts'],
|
||||||
globals: false,
|
globals: false,
|
||||||
|
|||||||
Reference in New Issue
Block a user