Zebla

Sprachlern-App zum Erstellen von Geschichten (Dialog, Storyboard, Film, Diashow) – mit KI.

Film-Grobplan (lebend): docs/ZEBLA_PLAN.md — Stadtplan für Cursor und Jean-Marie. Nicht den Chat als Gedächtnis nutzen.

Cloud-Stack: Vercel (Hosting + API) · Firebase Auth · Firestore · Google Gemini

Funktionen

• Anmeldung mit Google oder Schülercode (ohne Passwort)
• Jede Geschichte liegt in einem Projektordner: Dialog, Storyboard, Film, Diashow
• Welt-Regal: Figuren, Räume, Möbel gelten für alle Geschichten
• Dialoge per Film-Prompt erstellen, übersetzen, Birkenbihl, KI-Bilder (16:9)
• Diashow mit Vorlesen, Wort-Markierung und wählbaren Schriften (Zielschrift / Romanisierung / Übersetzung)
• Oberfläche auf Deutsch, English, Français, فارسی
• Cloud-Sprachausgabe: Gemini-TTS für Persisch/Dari, Koreanisch, Japanisch, Chinesisch, Arabisch; sonst Google Neural2
• Figuren zuerst als Einzelportraits, danach Szenenbilder davon abgeleitet (Gesicht bleibt gleich)
• Cloud-Sprachausgabe (Google Text-to-Speech) – natürliche Stimmen auch für Persisch/Dari, ohne Windows-Sprachpaket

---

1. Firebase einrichten

1. Firebase Console → Neues Projekt
2. Authentication aktivieren → Anbieter Google einschalten
3. Firestore erstellen (Production-Modus)
4. Web-App registrieren → Config-Werte notieren (apiKey, authDomain, projectId, appId)
5. Projekteinstellungen → Dienstkonten → Neuen privaten Schlüssel generieren (JSON)

Firestore-Regeln deployen (Firebase CLI):

npm install -g firebase-tools
firebase login
firebase init firestore   # firestore.rules & firestore.indexes.json auswählen
firebase deploy --only firestore:rules,firestore:indexes

Schülercodes seeden:

cp .env.example .env
# Firebase Admin-Werte aus dem JSON eintragen
npm run seed

Demo-Codes: DEMO123, KLASSE7A, SCHUELER2024

Cloud-Sprachausgabe (empfohlen für Persisch/Dari)

1. Cloud Text-to-Speech API aktivieren (Deutsch, Französisch, …)
2. Vertex AI API aktivieren – nötig für Persisch/Dari (Gemini-TTS, kein klassisches fa-IR-Stimmenpaket)
3. Abrechnungskonto im Google-Projekt verknüpft (Blaze/Firebase reicht oft)
4. Dem Firebase-Service-Account (FIREBASE_CLIENT_EMAIL auf Vercel) die IAM-Rolle Vertex AI User geben – sonst schlägt Gemini-TTS mit fehlender Berechtigung aiplatform.endpoints.predict fehl

Zebla nutzt die vorhandenen FIREBASE_*-Zugangsdaten. In der Diashow: „☁️ Cloud-Sprachausgabe“ wenn alles funktioniert; bei Problemen erscheint eine rote Fehlermeldung mit Hinweis.

Kosten (grobe Orientierung): APIs aktivieren ist kostenlos. Pro Dialogzeile fällt einmalig Cloud-TTS an (typisch wenige Cent pro kompletten Dialog mit ~20 Zeilen). Beim Wiederabspielen wird das gespeicherte MP3 aus Firebase Storage geladen – keine erneute TTS-Abrechnung. Storage/Firestore sind vernachlässigbar klein.

Audio-Cache: Jede Zeile bekommt beim ersten Mal eine MP3 in Storage (audioUrl am Dialog). Diashow: „Audio vorbereiten“ erzeugt alle fehlenden Dateien auf einmal; MP3-ZIP / Gesamt-Audio (WAV) zum Download.

---

2. Lokal entwickeln

npm install
cp .env.example .env
# .env ausfüllen (Firebase + GEMINI_API_KEY)
npm run seed
npm run dev

npm run dev startet Vercel Dev – Frontend und API unter http://localhost:3000

Alternativ nur Frontend:

npm run dev:client

(API-Routen brauchen dann vercel dev oder Deployment)

---

3. Auf Vercel deployen

1. Repo auf GitHub pushen
2. vercel.com → Import Project
3. Framework: Vite (wird automatisch erkannt)
4. Environment Variables setzen:

Variable	Wo
GEMINI_API_KEY	Server (Google AI Studio, eigener Key „zebla“)
FIREBASE_PROJECT_ID	Server
FIREBASE_CLIENT_EMAIL	Server
FIREBASE_PRIVATE_KEY	Server (kompletter Key mit \n)
VITE_FIREBASE_API_KEY	Client
VITE_FIREBASE_AUTH_DOMAIN	Client
VITE_FIREBASE_PROJECT_ID	Client
VITE_FIREBASE_APP_ID	Client

5. Deploy klicken

Google-Anmeldung in Production

In Firebase Console → Authentication → Autorisierte Domains hinzufügen:

• dein-projekt.vercel.app
• Eigene Domain (falls vorhanden, z.B. zebla.zebotools.ch)

Vercel-Git-Vorschauen (…-git-….vercel.app) sind nicht eingetragen. Google-Anmeldung dort geht nicht — auf der Live-Domain testen.

---

Projektstruktur

Zebla/
├── api/              # Vercel Serverless Functions
├── lib/              # Firebase Admin, Firestore, Gemini
├── shared/           # TypeScript-Typen
├── src/              # React Frontend
├── firestore.rules
└── vercel.json

Skripte

Befehl	Beschreibung
npm run dev	Vercel Dev (Frontend + API)
npm run build	Production-Build
npm run seed	Demo-Schülercodes in Firestore
npm run lint	ESLint

Hinweise

• KI-Bilder: Werden als Base64 im Dialog gespeichert. Für dauerhafte Speicherung später Firebase Storage ergänzen.
• Kosten: Google Gemini (eigener API-Key „zebla“) und Firebase – Nutzung getrennt von anderen Apps trackbar.
• Schülercodes: Werden nur serverseitig geprüft (nicht aus Firestore-Client lesbar).