Lernflix

This is a Next.js project bootstrapped with create-next-app.

Content-Engine (Phase 1)

Aus einem Themen-Queue erzeugt die Engine automatisch ein fertiges, fachlich geprüftes Short-Paket (noch kein Video, noch kein Posten).

Ablauf: GET /api/generate → nimmt das nächste pending-Topic → generatePaket() (lib/brain.ts) erstellt Hook/Skript/On-Screen-Texte → checkMathe() (lib/qa.ts) prüft die Mathematik fachlich → Ergebnis landet in content_log, das Topic wird auf done (QA ok) oder failed gesetzt.

Modell für beide Schritte: claude-sonnet-4-6. Alle Keys werden nur serverseitig gelesen.

Setup (das muss Kleana manuell machen)

1. Supabase-SQL ausführen. Im Supabase SQL-Editor den Inhalt von supabase/content_engine_schema.sql ausführen. Das legt die Tabellen topics + content_log an und seedet die 8 Themen (Klasse 9) als pending.
2. .env füllen. .env.example nach .env kopieren und die drei Keys eintragen:
   • ANTHROPIC_API_KEY
   • SUPABASE_URL
   • SUPABASE_SERVICE_ROLE_KEY (Service-Role-Key, nicht den anon-Key!)
3. Starten: npm install (falls noch nicht geschehen), dann npm run dev.
4. Testen: im Browser http://localhost:3000/api/generate öffnen. Du solltest ein geprüftes Short-Paket sehen — und in Supabase einen neuen Eintrag in content_log mit qa_ok = true. Jeder weitere Aufruf arbeitet das nächste Topic ab. Sind alle Themen abgearbeitet, kommt { done: true }.

Content-Engine (Phase 2) — Video-Produktion

Aus einem geprüften Paket (qa_ok = true) rendert die Engine ein fertiges 9:16-MP4 mit deutscher Stimme und Untertiteln über die JSON2Video-v2-API (noch kein Posten — das kommt in Phase 3).

Ablauf (Zwei-Phasen, Hobby-Plan-tauglich): GET /api/render macht pro Aufruf nur einen schnellen Schritt:

• Läuft noch kein Render? → nimmt die nächste content_log-Zeile mit qa_ok = true und video_status = 'none', baut via buildMovieSpec() (lib/video.ts) das Movie-Objekt (9:16, weibliche TTS-Stimme spricht Hook + Skript, Hook als Titel, On-Screen-Texte als Overlays, automatische Untertitel, heller Markenhintergrund), startet den Render (submitRender()), speichert die video_project-id und setzt video_status = 'rendering'.
• Läuft schon ein Render? → fragt den Status einmal ab (pollRender()). Fertig → video_url + video_status = 'ready'; Fehler → failed; sonst rendering.

Du rufst /api/render also einfach wiederholt auf (~alle 30 s), bis video_status: "ready" mit der video_url zurückkommt. So bleibt jeder Aufruf unter dem 60-s-Limit des Hobby-Plans.

Setup Phase 2 (das muss Kleana manuell machen)

1. JSON2Video-Key holen: bei json2video.com anmelden, API-Key kopieren.
2. Key eintragen: in Vercel als JSON2VIDEO_API_KEY (alle Environments) → neu deployen. Lokal: in .env ergänzen.
3. Supabase-SQL ausführen: den Inhalt von supabase/phase2_video_columns.sql im SQL-Editor ausführen (fügt video_url, video_status + video_project zu content_log hinzu).
4. Testen: GET /api/render aufrufen — erster Aufruf startet den Render, weitere Aufrufe (~alle 30 s) holen ihn ab, bis video_status: "ready" mit der video_url kommt. Die URL im Browser öffnen und das Short prüfen (deutsche Stimme, lesbare Formeln/Texte, Untertitel vorhanden?).

Phase 3 (Zeitplan → automatisches Posten) folgt, sobald die Videos passen.

Content-Engine (Phase 2b) — echte Mathe-Animation (Manim)

Statt einfacher Text-Overlays erzeugt diese Variante programmierte Mathe-Animationen im 3Blue1Brown-Stil: Formeln bauen sich Schritt für Schritt auf, Flächen/Geometrie werden gezeigt, und die Stimme ist synchron zur Animation (via manim-voiceover — jede gesprochene Aussage läuft genau so lange wie ihre Animation).

Manim braucht Python + LaTeX und läuft nicht auf Vercel. Daher rendert ein GitHub-Actions-Workflow (.github/workflows/animate.yml):

Ablauf: Workflow starten → nimmt das nächste geprüfte Paket (qa_ok = true, animation_status = 'none') → Claude (claude-sonnet-4-6) schreibt aus dem Paket ein manim-voiceover-Skript (9:16, deutsche Stimme, Schritt-für-Schritt-Mathe, Marken-Ton „Anna", witzig) → Manim rendert das MP4 (mit Selbst-Reparatur: crasht der Code, geht Fehler + Code zurück an Claude) → Upload nach Supabase Storage → animation_url + animation_status = 'ready' (sonst failed).

Setup Phase 2b (das muss Kleana manuell machen)

1. Supabase-SQL ausführen: supabase/phase2b_animation_columns.sql (fügt animation_url, animation_status, manim_code hinzu).
2. Storage-Bucket anlegen: Supabase → Storage → New bucket → Name shorts → Public aktivieren (dorthin lädt der Renderer die MP4s).
3. ElevenLabs-Key holen: bei elevenlabs.io anmelden (Free-Tier reicht zum Start), API-Key kopieren — er liefert die natürliche, synchrone Stimme.
4. GitHub-Secrets setzen: Repo → Settings → Secrets and variables → Actions → New repository secret, diese vier anlegen:
   • ANTHROPIC_API_KEY
   • SUPABASE_URL
   • SUPABASE_SERVICE_ROLE_KEY
   • ELEVENLABS_API_KEY
5. Workflow starten: Repo → Actions → „Manim Animation Render" → Run workflow (Feld leer lassen = nächstes Paket; oder eine content_log-id eintragen). Der Lauf dauert einige Minuten (LaTeX-Installation + Render). Ergebnis: animation_url in content_log.

Hinweis: Von Claude generierter Animationscode kann beim ersten Mal fehlschlagen — der Workflow repariert bis zu 4×. Der Look/Stil lässt sich über den Prompt in scripts/render_animation.py (SYSTEM_PROMPT) weiter justieren.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.