##Überblick
ThumbMe ist ein KI-gestützter Thumbnail-Generator, der professionelle Vorschaubilder für YouTube, Social Media und Blogs in Sekunden erstellt. Referenzbilder werden per Upload oder Drag & Drop bereitgestellt — danach generiert Google Gemini 2.5 Flash auf Basis eines Prompts und eines Style-Presets ein fertiges Thumbnail.
Jedes Ergebnis wird automatisch in der persönlichen Nutzerbibliothek gespeichert. Der Gemini API-Key bleibt dabei ausschließlich serverseitig in einer Supabase Edge Function — er ist nie im Client-Bundle enthalten.
##Kern-Features
KI-Thumbnail-Generierung
- Referenzbilder per Upload oder Drag & Drop hochladen
- Client komprimiert Bilder mit Canvas API (JPEG 0.7, max. 800px)
- Google Gemini 2.5 Flash generiert das Thumbnail
- Bis zu 3 automatische Retries bei transienten Fehlern
- Ergebnis wird sofort als data URL angezeigt
Style Presets
- Creator — heller, einladender YouTube-Stil
- Gaming — episch, hoher Kontrast mit Neonfarben
- Cinematic — filmisch, dramatische Lichtstimmung
- Minimal — sauber und professionell
- Clickbait — fett, emotional, aufmerksamkeitsstark
- Tutorial, Vlog, Tech — weitere Stile
Bibliothek & Speicherung
- Automatisches Hochladen zu Supabase Storage nach Generierung
- Metadaten (Prompt, Ratio, Modell) in Postgres gespeichert
- Thumbnail-Grid mit Download- und Lösch-Funktion
- Row Level Security — jeder sieht nur seine eigenen Bilder
- Dateipfad: {user_id}/thumb_{timestamp}_{random}.png
Auth & Sicherheit
- E-Mail/Passwort Login via Supabase Auth
- hCaptcha auf Login- und Signup-Formular (Bot-Schutz)
- E-Mail-Bestätigung nach Registrierung
- GEMINI_API_KEY nur serverseitig in der Edge Function
- DSGVO: Account + alle Nutzerdaten löschbar
##Architektur
ThumbMe folgt einer klaren Client/Server-Trennung. Das React-Frontend kommuniziert ausschließlich mit Supabase — direkt für Auth, Storage und Datenbank, und über Edge Functions für die KI-Generierung.
Frontend-Struktur
Auth-Layer
Login, Signup und hCaptcha-Verifizierung — vollständig vor der App gerendert.
Generator-Seite
Upload, Prompt-Eingabe, Style-Auswahl und Generierungslogik mit Retry-Mechanismus.
Bibliothek-Seite
Thumbnail-Grid aller gespeicherten Bilder mit Download- und Löschfunktion.
Modals & Toast
Settings, Prompt-Tipps, rechtliche Texte und Feedback-Benachrichtigungen.
Backend (Supabase)
- Auth — E-Mail/Passwort Authentifizierung
- Postgres DB — Tabelle `thumbnails` mit Metadaten aller Bilder
- Storage — öffentlicher Bucket `thumbnails`
- Edge Function generate-thumbnail — ruft Gemini API auf, gibt Base64-Bild zurück
- Edge Function delete-account — löscht Account + alle Nutzerdaten (DSGVO-konform)
##Datenfluss: Generierung
Von der Bildauswahl bis zum gespeicherten Thumbnail durchläuft jede Generierung exakt diese Schritte:
- 1.Nutzer lädt Referenzbilder hoch (File Picker oder Drag & Drop)
- 2.Client komprimiert Bilder mit Canvas API → JPEG 0.7, max. 800px (512px wenn >2 Bilder)
- 3.POST → supabase.functions.invoke('generate-thumbnail') mit images[], prompt, aspectRatio, title, subtitle
- 4.Edge Function validiert Rate-Limit (10 Generierungen / 5 Stunden pro Nutzer)
- 5.Edge Function ruft Google Gemini 2.5 Flash API auf
- 6.Gemini gibt generiertes Bild als Base64 zurück
- 7.Edge Function gibt { image, mimeType, remaining } zurück
- 8.Client zeigt Bild direkt an (data URL)
- 9.Client lädt Bild zu Supabase Storage hoch
- 10.Client schreibt Metadaten in DB-Tabelle `thumbnails`
Bei transienten Fehlern: bis zu 3 automatische Retries mit Backoff.
##Datenmodell
Tabelle: thumbnails
| Spalte | Typ | Beschreibung |
|---|---|---|
| id | uuid | Primary Key |
| prompt | text | Verwendeter Prompt |
| aspect_ratio | text | z.B. "16:9" |
| model | text | Immer "gemini-2.5-flash" |
| image_url | text | Öffentliche URL im Storage |
| created_at | timestamp | Automatisch gesetzt |
Row Level Security ist aktiv — jeder Nutzer sieht nur seine eigenen Einträge. Storage-Pfad: user_id/thumb_timestamp_random.png