- Add dashboard shell with auth integration - Wire Better Auth / Convex (client, server, HTTP routes) - Add shadcn-style UI primitives and logo assets - Update global styles and landing page - Add internal docs (.docs) Made-with: Cursor
561 lines
28 KiB
Markdown
561 lines
28 KiB
Markdown
# đ LemonSpace
|
||
## Product Requirements Document
|
||
*Self-Hosted, Source-Available Alternative to Freepik Spaces*
|
||
|
||
| Version | Status | Datum | Projekt |
|
||
|---------|--------|-------|---------|
|
||
| v1.1 | Draft | MĂ€rz 2026 | lemonspace.app |
|
||
|
||
---
|
||
|
||
## Changelog
|
||
|
||
| Version | Ănderung |
|
||
|---------|----------|
|
||
| v0.2 | KI-Integrationsstrategie: OpenRouter als primÀre AI-Layer, Freepik API auf Stock-Assets reduziert |
|
||
| v0.3 | Agent Layer eingefĂŒhrt: Agent Nodes als Canvas-native Smart Batch Processor |
|
||
| v0.4 | VollstĂ€ndige Node-Taxonomie: fĂŒnf Kategorien, Semantik je Node-Typ |
|
||
| v0.5 | Auth: Better Auth. Pricing: 4-Tier-Abo, Credit-System 30% Marge. Tailwind v4 bestÀtigt |
|
||
| v0.6 | Lizenz: BSL 1.1 mit 3-Jahres-Change-Date zu Apache 2.0 |
|
||
| v0.7 | Tech Stack: Redis, Zod, Unsend + Stalwart, Rybbit, Sentry, Cloudflare |
|
||
| v0.8 | Text-Overlay Node eingefĂŒhrt (Kategorie 5: Canvas & Layout) |
|
||
| v0.9 | Zwei-Repo-Strategie (Web-App + Landing Page), Auth-Cookie-Sharing |
|
||
| v1.0 | Self-Hosting-Strategie, Credit Reservation+Commit, UX-Latenzen/Skeleton-Nodes, Convex Lock-in dokumentiert |
|
||
| v1.1 | Monorepo verworfen â Zwei unabhĂ€ngige Repos (lemonspace-web + lemonspace-landing), Auth-Cookie-Sharing via .lemonspace.io |
|
||
|
||
---
|
||
|
||
## 1. Vision & Zielsetzung
|
||
|
||
LemonSpace ist eine self-hosted, source-available Alternative zu Freepik Spaces â ein kollaboratives, KI-gestĂŒtztes Creative-Workflow-Tool mit einer Infinite-Canvas-OberflĂ€che. Ziel ist ein freier und erweiterbarer Workspace fĂŒr kreative Teams, der auf eigener Infrastruktur betrieben werden kann.
|
||
|
||
---
|
||
|
||
## 2. Problemstellung
|
||
|
||
Freepik Spaces ist ein leistungsstarkes Tool fĂŒr KI-gestĂŒtzte kreative Workflows, aber:
|
||
|
||
- ProprietÀres SaaS-Produkt ohne Self-Hosting-Option
|
||
- Nutzer abhĂ€ngig von Freepiks Pricing und VerfĂŒgbarkeit
|
||
- Keine Anpassbarkeit oder Erweiterbarkeit
|
||
- Datenschutzbedenken bei der Speicherung kreativer Assets auf externen Servern
|
||
|
||
---
|
||
|
||
## 3. Zielgruppe
|
||
|
||
| Segment | PrimÀrer Zugang | Beschreibung |
|
||
|---------|-----------------|--------------|
|
||
| Designer & kreative Teams | Gehostete Version (lemonspace.app) | DatensouverĂ€nitĂ€t ohne technischen Aufwand â zahlende Kernkunden |
|
||
| Entwickler & Tech-Teams | Self-Hosted | Anpassbare KI-Canvas-Plattform auf eigener Infra |
|
||
| Compliance-sensible Unternehmen | Self-Hosted | Regulatorische Anforderungen, die Cloud-SaaS einschrÀnken |
|
||
| Open-Source-Community | Self-Hosted / Contributing | Creative-Tools-Ăkosystem, BSL-Lizenz bis Change Date |
|
||
|
||
---
|
||
|
||
## 4. Core Features
|
||
|
||
### 4.1 Infinite Canvas
|
||
|
||
- Zoom, Pan und Navigation auf einem unbegrenzten Canvas
|
||
- Nodes als wiederverwendbare kreative Bausteine
|
||
- Drag & Drop von Assets, KI-Outputs und Mediendateien
|
||
- Gruppierung und Layering von Canvas-Elementen
|
||
|
||
### 4.2 Node-System
|
||
|
||
Das Canvas-System basiert auf einem erweiterbaren Node-Modell. Nodes sind typisierte Bausteine, die untereinander verbunden werden und Daten weitergeben. Es gibt fĂŒnf Kategorien.
|
||
|
||
#### Kategorie 1: Quelle
|
||
|
||
Quelle-Nodes bringen Inhalte in den Canvas. Sie haben keine eingehenden Verbindungen, nur ausgehende.
|
||
|
||
| Node | Beschreibung | Phase |
|
||
|------|--------------|-------|
|
||
| Bild | Upload eigener Bilder (PNG, JPG, WebP) oder Einbindung per URL. Basis-Asset fĂŒr alle weiteren Operationen. | 1 |
|
||
| Text | Freitextfeld mit Markdown-Support. EnthĂ€lt Inhalte (Copy, Brief, Beschreibung) â semantisch verschieden vom Prompt-Node. | 1 |
|
||
| Prompt | Dedizierter Node fĂŒr Modellinstruktionen. Verbindet sich ausschlieĂlich mit KI-Nodes. | 2 |
|
||
| Farbe / Palette | Definiert Farben oder Farbpaletten als Style-Referenz. Kann an KI-Nodes oder Style-Transfer ĂŒbergeben werden. | 2 |
|
||
| Video | Upload von Videodateien oder Einbindung per Link. Darstellung als Thumbnail-Node, Playback im Panel. | 2 |
|
||
| Asset | Freepik Stock-Assets (Fotos, Vektoren, Icons), direkt aus dem Asset Browser auf den Canvas gezogen. | 2 |
|
||
|
||
#### Kategorie 2: KI-Ausgabe
|
||
|
||
KI-Ausgabe-Nodes sind das Ergebnis einer Modell-Operation. Sie werden vom System erzeugt, nicht vom Nutzer angelegt.
|
||
|
||
| Node | Beschreibung | Phase |
|
||
|------|--------------|-------|
|
||
| KI-Bild | Output eines Bildgenerierungs-Calls. Speichert Prompt, verwendetes Modell und Generierungsparameter. | 1 |
|
||
| KI-Text | Output eines Text/Reasoning-Calls. EnthÀlt generierten Copy, Captions, strukturierte Texte. | 2 |
|
||
| KI-Video | Output eines Videogenerierungs-Calls. Keyframe-basierte Generierung aus Bild-Input möglich. | 2 |
|
||
| Agent-Ausgabe | Bundle-Output eines Agent Nodes. Kann mehrere typisierte Sub-Outputs enthalten. | 3 |
|
||
|
||
#### Kategorie 3: Transformation
|
||
|
||
| Node | Beschreibung | Phase |
|
||
|------|--------------|-------|
|
||
| Crop / Resize | Freie Bildausschnitt-Auswahl direkt auf dem Canvas, mit Aspect-Ratio-Lock. | 2 |
|
||
| BG entfernen | Hintergrundentfernung via rembg. Output ist ein freigestelltes Bild. Batch-Modus möglich. | 2 |
|
||
| Upscale | Hochskalierung via Real-ESRGAN. UnterstĂŒtzt Faktoren 2Ă, 4Ă, 8Ă. | 2 |
|
||
| Style Transfer | ĂbertrĂ€gt visuellen Stil eines Referenzbildes auf einen anderen Input. | 3 |
|
||
| Gesicht | Face Restoration via GFPGAN. Verbessert Gesichtsdetails in generierten oder degradierten Bildern. | 3 |
|
||
|
||
#### Kategorie 4: Steuerung & Flow
|
||
|
||
| Node | Semantik | Beschreibung | Phase |
|
||
|------|----------|--------------|-------|
|
||
| Splitter | 1 â N | Verteilt 1 Input auf N identische oder abgeleitete Outputs. Ohne Bedingung. | 2 |
|
||
| Loop | Liste â N | Iteriert ĂŒber eine Liste von Inputs und fĂŒhrt dieselbe verknĂŒpfte Operation fĂŒr jeden Eintrag aus. | 2 |
|
||
| Agent | N â Plan â N | LLM-Orchestrator. Analysiert Inputs, plant strukturierten AusfĂŒhrungsplan, delegiert Operationen. | 2 |
|
||
| Mixer / Merge | N â 1 | Kombiniert N Inputs zu 1 Output durch Ăberblendung, Komposition oder Selektion. | 3 |
|
||
| Weiche | 1 â Pfad A/B/... | Bedingter Router. Leitet den Input anhand einer definierbaren Bedingung auf einen von mehreren Ausgangspfaden. | 3 |
|
||
|
||
#### Kategorie 5: Canvas & Layout
|
||
|
||
| Node | Beschreibung | Phase |
|
||
|------|--------------|-------|
|
||
| Gruppe | Container fĂŒr andere Nodes. UnterstĂŒtzt Collapse/Expand und benannte Scopes. | 1 |
|
||
| Frame | Artboard mit definierter Auflösung. Dient als Export-Boundary. | 1 |
|
||
| Notiz | Annotation auf dem Canvas. Markdown-Support, kein Datenanschluss. | 1 |
|
||
| Text-Overlay | Editierbarer Text-Layer ĂŒber Bild- oder Video-Nodes innerhalb eines Frames. Verbraucht keine Credits. | 2 |
|
||
| Compare | Stellt zwei Bilder nebeneinander mit interaktivem Slider dar. | 2 |
|
||
| Kommentar | Kollaborations-Node fĂŒr Reviews. UnterstĂŒtzt Threads, @mentions und Resolve-Status. | 3 |
|
||
| PrÀsentation | Definiert Canvas-Bereiche als geordnete Slideshow. Export als PDF möglich. | 3 |
|
||
|
||
### 4.3 Agent Nodes
|
||
|
||
Agent Nodes sind ein spezieller Node-Typ auf dem Canvas. Sie fungieren als Smart Batch Processor: Sie nehmen mehrere Input-Nodes entgegen, orchestrieren komplexe Multi-Step-Workflows ĂŒber ein Text/Reasoning LLM und produzieren mehrere Output-Nodes direkt auf dem Canvas.
|
||
|
||
**AusfĂŒhrungsphasen:**
|
||
|
||
1. **Analyse:** Agent erhĂ€lt alle verbundenen Inputs, LLM prĂŒft ob alle nötigen Informationen vorhanden sind
|
||
2. **Clarification (optional):** Fehlen Angaben, stellt der Agent gezielt RĂŒckfragen direkt am Node
|
||
3. **Execution:** LLM plant einen strukturierten Output-Plan (JSON), der dann als Batch abgearbeitet wird
|
||
4. **Output:** Ergebnisse landen als neue Nodes auf dem Canvas, verbunden mit dem Agent Node
|
||
|
||
**Vordefinierte Agent Templates:**
|
||
|
||
| Template | Typische Inputs | Typische Outputs |
|
||
|----------|-----------------|------------------|
|
||
| Instagram Curator | Produktfotos, Brand Brief, Zielgruppe | Feed Posts, Text-Overlays, Captions, Hashtag-Sets |
|
||
| (weitere folgen) | â | â |
|
||
|
||
---
|
||
|
||
## 5. Tech Stack
|
||
|
||
| Bereich | Technologie | Version / Hinweis |
|
||
|---------|-------------|-------------------|
|
||
| Frontend Framework | Next.js | 16.1.1 â App Router, Server Components |
|
||
| Styling | Tailwind CSS | v4 |
|
||
| UI Komponenten | ShadCN/UI | Aktuelle stabile Version |
|
||
| Backend / Realtime | Convex | Self-hosted via convex-backend |
|
||
| Authentifizierung | Better Auth | Self-hosted, open-source |
|
||
| Canvas / Flow | @xyflow/react | ehem. react-flow-renderer |
|
||
| Drag & Drop | dnd-kit | Empfohlen ĂŒber react-dnd (bessere Performance) |
|
||
| Deployment | Coolify | VPS-Deployment fĂŒr alle Self-hosted Services |
|
||
| Payment | Lemon Squeezy | Merchant of Record, VAT-Handling |
|
||
| Input Validation | Zod | Frontend + Backend, Convex Mutations |
|
||
| In-Memory Store | Redis | Self-hosted via Coolify |
|
||
| Rate Limiting | Redis-backed | Next.js Middleware / Route Handler |
|
||
| E-Mail | Unsend + Stalwart | Self-hosted via Coolify |
|
||
| Analytics | Rybbit | Self-hosted via Coolify |
|
||
| Error Tracking | Sentry Cloud | Free Tier (5.000 Errors/Monat) |
|
||
| DNS / DDoS / CDN | Cloudflare | Domain-Routing, DDoS-Schutz, Asset-Caching |
|
||
| Package Manager | pnpm | Je Repo |
|
||
|
||
### Zwei-Repo-Strategie
|
||
|
||
Statt eines Monorepos werden zwei unabhĂ€ngige Repositories gepflegt. Zwischen den Repos gibt es keinen geteilten Code â die Landing Page hat keine AbhĂ€ngigkeit auf Convex-Schemas, Node-Types oder andere App-Logik.
|
||
|
||
| Repo | Domain | Inhalt |
|
||
|------|--------|--------|
|
||
| `lemonspace-web` | app.lemonspace.io | Next.js App (Canvas, Dashboard, Auth, AI, Convex) |
|
||
| `lemonspace-landing` | lemonspace.io | Next.js Marketing Site |
|
||
|
||
**Auth-Cookie-Sharing:** BetterAuth setzt einen Session-Cookie auf `.lemonspace.io` (Dot-Prefix = gilt fĂŒr alle Subdomains). Die Landing Page liest diesen Cookie, um den Login-State zu erkennen und zwischen "Get Started" und "Dashboard" Button zu wechseln. Die Landing Page fĂŒhrt keine Auth-Operationen durch â sie liest nur den Cookie.
|
||
|
||
### Self-Hosting-Strategie
|
||
|
||
Self-Hosting richtet sich primĂ€r an technisch versierte Nutzer und Entwickler. Die gehostete Version (lemonspace.app) ist der empfohlene Weg fĂŒr alle anderen â insbesondere fĂŒr Designer und kreative Teams ohne DevOps-Erfahrung.
|
||
|
||
Das Self-Hosting-Paket umfasst:
|
||
|
||
- **`docker-compose.yml`** â fasst alle Services zusammen: Next.js, Convex, Redis, Stalwart, Rybbit, rembg, Real-ESRGAN, GFPGAN
|
||
- **`.env.example`** â alle Umgebungsvariablen mit Kommentaren und Standardwerten
|
||
- **Setup-README** â Schritt-fĂŒr-Schritt-Anleitung (Voraussetzungen: Docker + Coolify oder plain Docker)
|
||
|
||
> **Hinweis:** Self-hosted KI-Services (rembg, Real-ESRGAN, GFPGAN) bleiben in separaten Repositories mit eigenem Docker/Infra-Lifecycle und werden ĂŒber Coolify unabhĂ€ngig deployt.
|
||
|
||
### Convex: Architektonische Entscheidung & Lock-in
|
||
|
||
Convex liefert Realtime-Sync, File Storage und Background Jobs out-of-the-box, ohne dass eine eigene WebSocket-Infrastruktur, S3-Integration und Queue-Lösung zusammengestĂŒckelt werden muss. Dieser Geschwindigkeitsvorteil rechtfertigt den bewussten Vendor Lock-in.
|
||
|
||
> **Risiko (bewusst akzeptiert):** Der gesamte Realtime-, Storage- und Job-Stack ist an Convex gebunden. Eine spĂ€tere Migration ist aufwĂ€ndig. Es wird keine kĂŒnstliche Abstraktionsschicht eingebaut, da sie den Kernvorteil von Convex aufheben wĂŒrde.
|
||
|
||
Dokumentierter Migrations-Pfad bei Skalierung: Convex Cloud mit EU-Standort. Convex bietet das eigene Migrations-Tooling und kennt das Ăkosystem. Self-hosted Convex bleibt die Default-Strategie fĂŒr Phase 1.
|
||
|
||
---
|
||
|
||
## 6. KI-Integrationsstrategie
|
||
|
||
### Zwei LLM-Rollen im System
|
||
|
||
| Rolle | Zweck | Beispielmodelle | Aufgerufen von |
|
||
|-------|-------|-----------------|----------------|
|
||
| Text / Reasoning | Agent-Logik, Planung, Clarification, Copywriting | Claude 3.5 Sonnet, GPT-4o | Agent Node |
|
||
| Image Generation | Bildgenerierung auf dem Canvas | Gemini 2.5 Flash Image, Flux.1 Pro, GPT-5 Image | Canvas-Aktionen + Agent Node |
|
||
|
||
### OpenRouter â Image Generation
|
||
|
||
| Modell | OpenRouter ID | StÀrke | ~Kosten/Bild |
|
||
|--------|---------------|--------|--------------|
|
||
| Gemini 2.5 Flash Image | google/gemini-2.5-flash-image | Multi-Turn Editing, gĂŒnstig | ~âŹ0,02â0,04 |
|
||
| FLUX.2 Klein 4B | black-forest-labs/flux.2-klein-4b | Photorealismus, schnellstes Flux | ~âŹ0,01â0,03 |
|
||
| Seedream 4.5 | bytedance-seed/seedream-4.5 | Editing-Konsistenz, Portraits | ~âŹ0,04 |
|
||
| Gemini 3.1 Flash Image | google/gemini-3.1-flash-image-preview | Pro-QualitĂ€t bei Flash-Speed | ~âŹ0,04â0,08 |
|
||
| GPT-5 Image Mini | openai/gpt-5-image-mini | Gutes Preis-Leistungs-VerhĂ€ltnis | ~âŹ0,04â0,08 |
|
||
| Riverflow V2 Fast | sourceful/riverflow-v2-fast | Custom Font Rendering, schnell | ~âŹ0,02 |
|
||
| Riverflow V2 Pro | sourceful/riverflow-v2-pro | Text-Rendering, 4K Output | ~âŹ0,15â0,33 |
|
||
| Gemini 3 Pro Image | google/gemini-3-pro-image-preview | Multi-Image, 4K, bestes Text-Rendering | ~âŹ0,08â0,15 |
|
||
| GPT-5 Image | openai/gpt-5-image | Instruction Following, Text in Bild | ~âŹ0,10â0,20 |
|
||
|
||
### Self-hosted Services
|
||
|
||
| Service | Funktion | Credits |
|
||
|---------|----------|---------|
|
||
| rembg | Hintergrundentfernung | Kostenlos |
|
||
| Real-ESRGAN | Upscaling (2Ă, 4Ă, 8Ă) | Kostenlos |
|
||
| GFPGAN | Face Restoration | Kostenlos |
|
||
|
||
---
|
||
|
||
## 7. High-Level Architektur
|
||
|
||
```
|
||
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
||
â Next.js Frontend â
|
||
â Infinite Canvas (@xyflow/react + dnd-kit) â
|
||
â â
|
||
â Node-Kategorien: â
|
||
â [Quelle] [KI-Ausgabe] [Transformation] â
|
||
â [Steuerung] [Canvas & Layout] â
|
||
âââââââââââââââââââââââââŹâââââââââââââââââââââââââââââââââââ
|
||
â
|
||
âââââââââââŒââââââââââ
|
||
â Convex Backend â
|
||
â (Self-hosted) â
|
||
â - Realtime Sync â
|
||
â - File Storage â
|
||
â - Auth â
|
||
â - Modell-Router â
|
||
â - Agent Executor â
|
||
ââââŹâââââââââŹââââŹââââ
|
||
â â â
|
||
ââââââââââââââŒâââ âââââŒâââââââââââââââ ââââŒâââââââââââ
|
||
â OpenRouter â â Self-hosted KI â â Freepik API â
|
||
â Image Gen + â â rembg / ESRGAN â â (Assets) â
|
||
â Text/Reason â â GFPGAN â âââââââââââââââ
|
||
âââââââââââââââââ ââââââââââââââââââââ
|
||
```
|
||
|
||
---
|
||
|
||
## 8. Datenmodell (High-Level)
|
||
|
||
### Canvas & Node
|
||
|
||
```
|
||
Canvas
|
||
âââ id, name, ownerId, createdAt / updatedAt
|
||
âââ nodes[]
|
||
|
||
Node (Basis)
|
||
âââ id, canvasId
|
||
âââ type (image | text | prompt | color | video | asset |
|
||
â ai-image | ai-text | ai-video | agent-output |
|
||
â crop | bg-remove | upscale | style-transfer | face-restore |
|
||
â splitter | loop | agent | mixer | switch |
|
||
â group | frame | note | text-overlay | compare | comment | presentation)
|
||
âââ position { x, y }
|
||
âââ size { width, height }
|
||
âââ data (je nach Typ)
|
||
âââ createdAt
|
||
```
|
||
|
||
### Credit-System
|
||
|
||
```
|
||
CreditBalance
|
||
âââ id, userId
|
||
âââ balance // tatsĂ€chlich verfĂŒgbare Credits (Euro-Cent)
|
||
âââ reserved // aktuell gesperrte Credits (laufende Jobs)
|
||
âââ available // computed: balance - reserved
|
||
âââ monthlyAllocation // Credits aus dem Abo
|
||
âââ updatedAt
|
||
|
||
CreditTransaction
|
||
âââ id, userId
|
||
âââ amount // positiv = Gutschrift, negativ = Verbrauch
|
||
âââ type // subscription | topup | usage | reservation | refund
|
||
âââ status // committed | reserved | released | failed
|
||
âââ description // z.B. "Bildgenerierung â Gemini 2.5 Flash Image"
|
||
âââ nodeId? // Referenz auf den auslösenden Node
|
||
âââ openRouterCost? // tatsĂ€chliche OpenRouter-Kosten (gecacht)
|
||
âââ createdAt
|
||
|
||
Subscription
|
||
âââ id, userId
|
||
âââ tier // free | starter | pro | business
|
||
âââ status // active | cancelled | past_due
|
||
âââ currentPeriodStart / currentPeriodEnd
|
||
âââ lemonSqueezySubscriptionId?
|
||
```
|
||
|
||
---
|
||
|
||
## 9. Pricing & Credit-System
|
||
|
||
### Abo-Stufen
|
||
|
||
| Tier | Preis/Monat | Marge (30%) | Credits (70%) | Credits gesamt | Zielgruppe |
|
||
|------|-------------|-------------|---------------|----------------|------------|
|
||
| Free | âŹ0 | â | â | âŹ0,50 (Geschenk) | Testen & Evaluieren |
|
||
| Starter | âŹ9 | âŹ2,70 | âŹ6,30 | âŹ6,30 | Einzelnutzer |
|
||
| Pro | âŹ49 | âŹ12,98 | âŹ34,30 | âŹ36,02 (+5%) | Aktive Creator |
|
||
| Business | âŹ99 | âŹ22,77 | âŹ69,30 | âŹ76,23 (+10%) | Teams, hoher Durchsatz |
|
||
|
||
### Credit Reservation + Commit (Option C)
|
||
|
||
Credits werden vor jedem KI-Call reserviert und erst nach erfolgreichem Abschluss committed. Bei Fehler werden reservierte Credits automatisch freigegeben â kein manueller Refund-Prozess nötig.
|
||
|
||
**Flow:**
|
||
|
||
```
|
||
1. RESERVE â CreditTransaction (type: reservation, status: reserved)
|
||
CreditBalance.reserved += estimated_cost
|
||
CreditBalance.available = balance - reserved
|
||
|
||
2a. SUCCESS â Transaction status: committed
|
||
CreditBalance.balance -= actual_cost
|
||
CreditBalance.reserved -= estimated_cost
|
||
|
||
2b. FAILURE â Transaction status: released
|
||
CreditBalance.reserved -= estimated_cost
|
||
(balance bleibt unverĂ€ndert â voller Refund)
|
||
```
|
||
|
||
> **Preisbasis:** Credits werden auf Basis der gecachten OpenRouter-Preise (Redis, TTL ~10 Minuten) reserviert und abgebucht. Minimale Abweichungen zum tatsÀchlichen API-Preis werden bewusst akzeptiert. Keine nachtrÀgliche Korrektur.
|
||
|
||
### Agent Partial Failure
|
||
|
||
Bei Agent-Workflows lÀuft Reservation + Commit pro Suboperation. SchlÀgt Step 3 von 5 fehl: Steps 1+2 sind committed, Step 3 wird released, Steps 4+5 werden nicht mehr reserviert. Nur tatsÀchlich verbrauchte Credits werden berechnet.
|
||
|
||
### Credit-Verbrauch
|
||
|
||
| Operation | Modell / Service | UngefÀhre Kosten |
|
||
|-----------|------------------|------------------|
|
||
| Bildgenerierung (Budget) | FLUX.2 Klein 4B | ~âŹ0,01â0,03 |
|
||
| Bildgenerierung (Standard) | Gemini 2.5 Flash Image | ~âŹ0,02â0,04 |
|
||
| Bildgenerierung (Premium) | GPT-5 Image / Nano Banana Pro | ~âŹ0,10â0,20 |
|
||
| Agent Reasoning Call | Claude 3.5 Sonnet | ~âŹ0,01â0,05 |
|
||
| BG-Entfernung | rembg (self-hosted) | Kostenlos |
|
||
| Upscaling | Real-ESRGAN (self-hosted) | Kostenlos |
|
||
| Face Restoration | GFPGAN (self-hosted) | Kostenlos |
|
||
| Canvas-Operationen | â | Kostenlos |
|
||
| Text-Overlay | â | Kostenlos |
|
||
| Export-Funktionen | â | Kostenlos |
|
||
|
||
---
|
||
|
||
## 10. UX-Strategie fĂŒr Latenzen
|
||
|
||
KI-Operationen haben inhĂ€rente Wartezeiten. Einzelne Bildgenerierungen dauern 3â15 Sekunden, Agent-Workflows 20â60+ Sekunden. Die UI ĂŒberbrĂŒckt diese Wartezeiten durch optimistische Darstellung direkt am Node â kein globales Loading-Banner, kein blockierendes Modal.
|
||
|
||
### Node-Status-Modell
|
||
|
||
Jeder ausfĂŒhrende Node zeigt seinen Zustand visuell direkt auf dem Canvas:
|
||
|
||
```
|
||
idle â analyzing â clarifying â executing (Step X/N) â done | error
|
||
```
|
||
|
||
Agent Nodes zeigen zusĂ€tzlich den Step-Progress wĂ€hrend der Execution ("Generating Feed Post 2/3"). Bei Fehler wechselt der Node in einen Error-State mit kurzem Hinweis direkt am Node ("Timeout â Credits wurden nicht abgebucht").
|
||
|
||
### Skeleton Nodes
|
||
|
||
Sobald der Agent seinen Execution-Plan (JSON) erstellt hat, kennt das System Anzahl und Typ aller Output-Nodes. Ab diesem Moment werden Skeleton-Nodes auf dem Canvas platziert â noch bevor ein einziger API-Call fĂŒr die Generierung lĂ€uft.
|
||
|
||
```
|
||
Agent Status: analyzing
|
||
â Plan fertig: 3x KI-Bild, 2x KI-Text, 1x Text-Overlay
|
||
â 6 Skeleton-Nodes erscheinen auf dem Canvas, korrekt positioniert
|
||
â Agent Status: executing (1/6)
|
||
â Skeletons fĂŒllen sich der Reihe nach mit echten Outputs
|
||
```
|
||
|
||
- Skeleton-Nodes sind bereits verschiebbar und arrangierbar bevor der Output fertig ist
|
||
- Sobald der Output fertig ist, ersetzt er den Skeleton in-place â Position bleibt erhalten
|
||
- Visuell: gedimmter Node-Rahmen mit Shimmer-Effekt, Node-Typ-Icon sichtbar (Bild vs. Text)
|
||
|
||
### Browser Notifications (Tab-Wechsel)
|
||
|
||
- Opt-in Browser Notifications API: wenn der Nutzer den Tab verlÀsst und der Job fertig wird, native Browser-Benachrichtigung
|
||
- Nicht erzwungen â Nutzer die im Tab bleiben sehen den Node-Status direkt
|
||
|
||
---
|
||
|
||
## 11. Entwicklungsphasen
|
||
|
||
### Phase 1 â Foundation (MVP)
|
||
|
||
**Nodes:**
|
||
- Quelle: Bild, Text
|
||
- KI-Ausgabe: KI-Bild
|
||
- Canvas & Layout: Gruppe, Frame, Notiz
|
||
|
||
**Infrastruktur & Features:**
|
||
|
||
| Task | Status |
|
||
|------|--------|
|
||
| Projektsetup: Next.js 16 + Tailwind v4 + ShadCN | â Offen |
|
||
| Zwei Repos aufsetzen (`lemonspace-web` fĂŒr app.lemonspace.io, `lemonspace-landing` fĂŒr lemonspace.io) | â Offen |
|
||
| Convex Self-hosted Backend aufsetzen | â Offen |
|
||
| Basis-Canvas mit @xyflow/react | â Offen |
|
||
| Drag & Drop von Bildern via dnd-kit | â Offen |
|
||
| Authentifizierung via Better Auth | â Offen |
|
||
| OpenRouter Integration (Image Gen, Gemini 2.5 Flash Image) | â Offen |
|
||
| Credit-System: Balance-Tracking, Reservation+Commit, Kosten-Voranzeige | â Offen |
|
||
| Abo-Verwaltung: Free/Starter/Pro/Business Tiers, monatliche Credit-Zuweisung | â Offen |
|
||
| Lemon Squeezy Integration: Checkout, Webhooks, Credit-Zuweisung | â Offen |
|
||
| Credit-Nachkauf (Top-Up) zum Selbstkostenpreis | â Offen |
|
||
| Node-Status-Modell (idle/executing/done/error) direkt am Node | â Offen |
|
||
| docker-compose.yml + .env.example + Setup-README | â Offen |
|
||
|
||
### Phase 2 â KI-Features
|
||
|
||
**Nodes:**
|
||
- Quelle: Prompt, Farbe / Palette, Video, Asset
|
||
- KI-Ausgabe: KI-Text, KI-Video
|
||
- Transformation: Crop / Resize, BG entfernen, Upscale
|
||
- Steuerung: Splitter, Loop, Agent
|
||
- Canvas & Layout: Text-Overlay, Compare
|
||
|
||
**Infrastruktur & Features:**
|
||
|
||
| Task | Status |
|
||
|------|--------|
|
||
| VollstĂ€ndige OpenRouter Image Gen Integration (alle 9 Modelle) | â Offen |
|
||
| Experten-Modus: Modellauswahl-UI im Canvas AI Panel | â Offen |
|
||
| OpenRouter Text/Reasoning Integration (Claude 3.5 Sonnet) | â Offen |
|
||
| Agent Node: Analyse, Clarification, Execution, Output | â Offen |
|
||
| Skeleton-Nodes: Platzierung nach Plan-Erstellung, sequenzielle BefĂŒllung | â Offen |
|
||
| Browser Notifications API (opt-in, Tab-Wechsel) | â Offen |
|
||
| Erster Agent Template: Instagram Curator | â Offen |
|
||
| Self-hosted KI-Services (rembg, Real-ESRGAN) | â Offen |
|
||
| Freepik Asset Browser (Stock-Fotos, Vektoren) | â Offen |
|
||
| Prompt-History und Re-Generation | â Offen |
|
||
|
||
### Phase 3 â Kollaboration & Polish
|
||
|
||
**Nodes:**
|
||
- Transformation: Style Transfer, Gesicht (GFPGAN)
|
||
- Steuerung: Mixer, Weiche
|
||
- Canvas & Layout: Kommentar, PrÀsentation
|
||
|
||
**Infrastruktur & Features:**
|
||
|
||
| Task | Status |
|
||
|------|--------|
|
||
| Echtzeit-Kollaboration via Convex Subscriptions | â Offen |
|
||
| Kommentar- und Annotations-System | â Offen |
|
||
| Versions-History | â Offen |
|
||
| Weitere Agent Templates | â Offen |
|
||
| Export-Funktionen (PNG, PDF, ZIP) | â Offen |
|
||
| Performance-Optimierung fĂŒr groĂe Canvases | â Offen |
|
||
|
||
---
|
||
|
||
## 12. Offene Entscheidungen
|
||
|
||
| Thema | Entscheidung / Status |
|
||
|-------|----------------------|
|
||
| Authentifizierung | â
Better Auth (self-hosted, open-source) |
|
||
| Tailwind v4 | â
v4 ist Standard, keine Migration nötig |
|
||
| Pricing / Credit-System | â
4-Tier Abo + Credit-System, 30% Marge, Reservation+Commit |
|
||
| Payment Provider | â
Lemon Squeezy (Merchant of Record, VAT-Handling) |
|
||
| Self-Hosting-Strategie | â
docker-compose.yml + .env.example + README, fĂŒr technisch versierte Nutzer |
|
||
| Convex Lock-in | â
Bewusst akzeptiert; Migrations-Pfad: Convex Cloud EU |
|
||
| OpenRouter Image-Modelle | â
9 Modelle definiert, alle Tiers haben Zugriff |
|
||
| Lizenz | â
BSL 1.1, 3 Jahre Change Date, Apache 2.0, nur private Nutzung frei |
|
||
| Repo-Strategie | â
Zwei unabhÀngige Repos (lemonspace-web + lemonspace-landing), Auth-Cookie-Sharing via .lemonspace.io |
|
||
| Job Queue | â
Convex native (Phase 1), externe Lösung bei Bedarf |
|
||
| E-Mail | â
Unsend + Stalwart, self-hosted |
|
||
| Analytics | â
Rybbit, self-hosted |
|
||
| Error Tracking | â
Sentry Cloud (Free Tier) |
|
||
| Cache-Strategie | â
Cloudflare (Edge) + Redis (Application, TTL ~10min fĂŒr OpenRouter-Preise) |
|
||
| E2E-Testing | â
Kein E2E in Phase 1, Neubewertung bei Skalierung |
|
||
| UX-Latenzen | â
Node-Status-Modell, Skeleton-Nodes, Browser Notifications (opt-in) |
|
||
| Credit Fehlerbehandlung | â
Reservation + Commit, gecachte Preise, kein nachtrÀglicher Ausgleich |
|
||
| Kollaborationstiefe | âł Cursor-Sync, gleichzeitige Edits, Kommentare |
|
||
| Agent Clarification UX | âł Inline am Node vs. Modal vs. Chat-Sidebar |
|
||
| Agent Template Format | âł Markdown-Datei vs. strukturiertes JSON-Schema |
|
||
| Weiche: Bedingungslogik | âł Visueller Rule-Builder vs. Ausdruckssprache |
|
||
| Mixer: Blend Modes | âł min. Normal, Multiply, Screen, Overlay |
|
||
| Canvas-Export | âł PNG, PDF, ZIP (Phase 3, Library TBD) |
|
||
|
||
---
|
||
|
||
## 13. Nicht-funktionale Anforderungen
|
||
|
||
| Anforderung | Beschreibung |
|
||
|-------------|--------------|
|
||
| Self-hostable | VollstÀndiger Betrieb auf eigenem VPS möglich; docker-compose.yml als primÀres Deployment-Artefakt |
|
||
| Source Available | BSL 1.1 â Quellcode öffentlich, kommerzielle Nutzung lizenzpflichtig (siehe Abschnitt 15) |
|
||
| Performance | Canvas mit 100+ Nodes ohne spĂŒrbare Verzögerung |
|
||
| Datenschutz | Keine externen Tracking-Dienste; Ausnahme: Sentry Cloud fĂŒr Error Tracking |
|
||
| Skalierbarkeit | Convex-Backend skaliert mit wachsender Nutzerzahl; Migrations-Pfad: Convex Cloud EU |
|
||
| Sicherheit | Rate Limiting auf allen API-Endpunkten via Redis, DDoS-Schutz via Cloudflare |
|
||
| UX-Resilienz | Alle KI-Operationen zeigen Status direkt am Node; Skeleton-Nodes bei Agent-Workflows |
|
||
| Credit-IntegritÀt | Reservation+Commit-Mechanismus verhindert Credit-Verlust bei fehlgeschlagenen API-Calls |
|
||
|
||
---
|
||
|
||
## 14. NĂ€chste Schritte
|
||
|
||
1. Zwei Repos aufsetzen (`lemonspace-web` mit Next.js 16 + Tailwind v4 + ShadCN + Better Auth + Convex, `lemonspace-landing` mit Next.js 16 + Tailwind v4 + ShadCN)
|
||
2. Convex Schema: Detailliertes Datenbankschema entwerfen (Node-Taxonomie + Credit-System inkl. CreditBalance.reserved/available)
|
||
3. UI/UX Wireframes: Canvas-Interface, Node-Status-Modell, Skeleton-Nodes, Agent Clarification-UX skizzieren
|
||
4. API-Prototyp: OpenRouter Anbindung testen â Image Gen (Gemini 2.5 Flash Image) und Text/Reasoning (Claude 3.5 Sonnet)
|
||
5. Lemon Squeezy Integration: Abo-Tiers anlegen, Webhook-Handling fĂŒr Subscription-Events und Credit-Zuweisung
|
||
6. docker-compose.yml + .env.example + Setup-README ausarbeiten
|
||
|
||
---
|
||
|
||
## 15. Lizenzmodell
|
||
|
||
Die Software wird unter der Business Source License 1.1 (BSL 1.1) veröffentlicht. Der vollstĂ€ndige Quellcode ist öffentlich einsehbar, auditierbar und fĂŒr private/persönliche Nutzung kostenlos. Kommerzielle Nutzung erfordert eine separate Lizenzvereinbarung.
|
||
|
||
### Parameter
|
||
|
||
| Parameter | Wert |
|
||
|-----------|------|
|
||
| Lizenz | Business Source License 1.1 |
|
||
| Change Date | 3 Jahre nach Veröffentlichung jedes Releases |
|
||
| Change License | Apache License 2.0 |
|
||
| Additional Use Grant | Nutzung ausschlieĂlich fĂŒr private und persönliche, nicht-kommerzielle Zwecke |
|
||
|
||
### Kommerzielle Lizenzen (geplant)
|
||
|
||
| Lizenz | Zielgruppe | Details |
|
||
|--------|------------|---------|
|
||
| Small Business | Unternehmen †10 Mitarbeiter | Preis und Konditionen TBD |
|
||
| Enterprise | Unternehmen > 10 Mitarbeiter | Preis und Konditionen TBD |
|
||
| OEM / Reseller | Einbettung in Drittprodukte | Individuelle Vereinbarung |
|
||
|
||
> **Positionierung:** LemonSpace wird als âSource Available" bzw. âFair Source" positioniert â nicht als âOpen Source" im Sinne der OSI-Definition. Der Quellcode ist vollstĂ€ndig öffentlich und transparent; Nutzungsrechte sind eingeschrĂ€nkt bis zum Erreichen des Change Date.
|
||
|
||
---
|
||
|
||
*LemonSpace PRD v1.1 â MĂ€rz 2026*
|