822c5fcac9
The same file could be uploaded again and again without a word (three copies of several catalogues), the list of about 150 materials had no search or filter, and clicking a material that downloads instead of opening seemed to do nothing. Uploading a file whose name is already in the Brain now asks first, and cancelling skips those files; the list has a search box and a status filter with counts; and a material that is downloaded says so. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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).
# 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 keENGINE_URL(defaulthttp://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(defaulthttp://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
summarydengan 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_videodanrun_schedule. Setiap proses membuat satu video (4 adegan, 40 detik), jadi pilihannya hanya 1 per hari atau 1 per minggu. Batas kredit diambil dariagents/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+quiz10 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).