2b37d80e26
The Instruction page is now a conversation with the Express Agent. Each message updates the draft plan, and when something is unclear (a part it did not understand, a video count with no cadence, a schedule over 50 per week, weekly research with no day, a missing topic) the agent asks right in the chat, one question at a time, with replies to pick or type. Once the plan is clear it offers to start the schedules and reports the result in the chat. The plan stays editable beside the chat. The chat text is also larger and darker than the mockup's 9-11px grey. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
40 lines
3.5 KiB
Markdown
40 lines
3.5 KiB
Markdown
# Learning Lab Express
|
||
|
||
Express Mode untuk learning-lab: UI sederhana di mana tim L&D mengunggah materi ke **Brain**, memberi satu **Instruction** ("bikin 3 video per minggu"), lalu AI menjadwalkan dan terus membuat konten yang tampil di **Results**. Semua logika AI ada di engine **learning-lab** (FastAPI, `/api/v1`); app ini hanya klien.
|
||
|
||
Stack: React 19, Vite 7, TypeScript, React Router 7, TanStack Query, Clerk (instance yang sama dengan learning-lab). Gaya diambil apa adanya dari `mockup.html` (`src/styles/mockup.css`).
|
||
|
||
```bash
|
||
# 1. jalankan engine: cd ../learning-lab && docker compose up → http://localhost:8000
|
||
# 2. jalankan Express
|
||
npm install
|
||
npm run dev # http://localhost:5174
|
||
npm test # tes parser, jadwal, SCORM, dan ekspor (Vitest)
|
||
```
|
||
|
||
- `/api/*` di-proxy oleh Vite ke `ENGINE_URL` (default `http://localhost:8000`), jadi engine tidak perlu CORS.
|
||
- Clerk key dibaca dari `VITE_CLERK_PUBLISHABLE_KEY`, atau otomatis dari `../learning-lab/backend/.env`.
|
||
- Tombol "Open in Learning Studio" di Results membuka `VITE_STUDIO_URL` (default `http://localhost:5173`).
|
||
- Dua bahasa: English (default) dan Indonesia, lewat tombol EN/ID di topbar dan halaman login. Teks ada di `src/i18n.ts`; pilihan disimpan per perangkat.
|
||
- Instruction berbentuk chat dengan agen (`src/express/agent.ts`): bila ada yang belum jelas (bagian yang tidak dipahami, frekuensi video, hari riset, topik), agen langsung bertanya di chat dengan opsi jawaban, lalu menawarkan untuk memulai jadwal. Pemahamannya tetap memakai parser deterministik, bukan LLM.
|
||
- Login wajib memakai akun Clerk dengan organisasi aktif: agents, jadwal, dan kredit semuanya per organisasi.
|
||
|
||
| Folder | Isi |
|
||
|---|---|
|
||
| `src/api/` | `client.ts` (fetch + token Clerk), `engine.ts` (dokumen, compose, agents) |
|
||
| `src/auth/` | Gerbang login dan pemilihan organisasi |
|
||
| `src/pages/` | Brain (`/brain`), Instruction (`/instruction`), Schedule (`/schedule`), Results (`/results`) |
|
||
| `src/express/` | Parser instruksi (EN/ID), pembuat jadwal di atas Agents engine, hasil, dan ekspor SCORM (`scorm.ts`) |
|
||
| `src/components/` | Layout dengan panduan alur, toast, pemutar audio |
|
||
| `prototype/` | Prototipe HTML satu file sebelumnya (referensi alur) |
|
||
|
||
Status: semua fase sudah dikerjakan.
|
||
|
||
- **Fase 0–3 dan 6**: kerangka, auth, Brain, Instruction → jadwal, Schedule dengan "Produce now", dan Results.
|
||
- **Fase 4 · Audio**: jadwal konten `summary` dengan brief naskah narasi. Results memutarnya dengan suara perangkat (Web Speech API) dan mengunduh naskahnya (.txt). Belum ada MP3, karena engine belum punya keluaran audio untuk agen; yang ada hanya TTS di dalam Video Studio.
|
||
- **Fase 5 · Video**: agen dengan `studio.create_video` dan `run_schedule`. Setiap proses membuat satu video (4 adegan, 40 detik), jadi pilihannya hanya 1 per hari atau 1 per minggu. Batas kredit diambil dari `agents/video-quote`. Video yang sudah siap bisa diputar, disetujui atau ditolak, dan diunduh sebagai MP4. Ada juga tombol "Buat video sekarang" di Schedule.
|
||
- **Fase 7 · SCORM**: jadwal konten dengan dua keluaran (`summary` + `quiz` 10 soal) per item, digabung menjadi satu modul di Results. Setiap hasil teks bisa diunduh sebagai paket SCORM 1.2 (.zip) yang dibuat di browser. Paket ini melaporkan selesai, atau nilai dan lulus/tidak (batas lulus 70%), ke LMS.
|
||
- **Pemantapan**: toast menggantikan `alert()`, ada panduan alur di sidebar, dan ada tes Vitest.
|
||
|
||
Produksi konten otomatis di engine baru jalan bila harga `agent.content.plan` > 0 (admin Learning Studio → Pricing).
|