GrowthX Buildthon

Course Creation Platform Plan

A concise, instructor-review workflow for building course decks, approving scripts, generating voiceover, and exporting a browser-recorded presentation video.

Human-in-the-loop HTML session deck Script approval ElevenLabs VO Browser video capture

Product Goal

Help instructors turn rough ideas into a polished course by reviewing AI output at every step, while the system handles annotations and content generation automatically.

The user should feel like they are collaborating with the AI, not just prompting it.

Core Workflow

  1. Instructor brainstorms topic, audience, goals, rough ideas, and existing materials.
  2. Instructor and AI align on course goals, lecture plan, and goals for each session.
  3. AI proposes projector/screen surroundings, visual style, annotation style, and transitions.
  4. Instructor works through each session; inside each session they review, revise, and approve individual slides.
  5. AI creates slides with baked-in annotations for each session.
  6. AI converts approved slides into narration script for reading or ElevenLabs.
  7. Instructor approves script and revisions.
  8. Browser opens the presentation and records the final video with the approved surroundings.

What We Build First

  • Course Designer with brainstorm notes, goals, and existing material intake.
  • Custom tone input, not only a fixed tone dropdown, so instructor language is preserved in scripts.
  • Course workspace path: courses/<user_name>/<course_name>-<uniq_identifier>.
  • Lecture plan generator with approve / revise loop that updates existing sessions unless the instructor explicitly asks to add a session.
  • Recording environment choices: projector style, surroundings, transitions, annotations.
  • Session workspace where each lecture/session contains its own slide list.
  • HTML slide deck generator with per-slide feedback and automated annotations.
  • Script approval screen with rewrite requests.
  • Voiceover generation job and asset storage.
  • Basic browser-based video export flow.

Suggested Stack

  • Frontend: Next.js or React
  • Backend: FastAPI
  • Deck UI: Custom HTML deck or Reveal.js
  • Editor: TipTap or Monaco for rich text
  • TTS: ElevenLabs
  • Video: Playwright or Puppeteer + FFmpeg
  • Storage: SQLite for MVP

Recommended Annotation Mode

Annotations should be generated by the system as part of the plan, not drawn live by the instructor. Use an overlay layer on top of the deck so the AI can place highlights, labels, arrows, and callouts while the instructor only reviews and requests changes.

Best MVP tools

  • Canvas or SVG overlay for generated callouts
  • Template-based text labels
  • Arrow / highlight placement rules
  • Versioned review and regenerate controls

Good libraries

  • Konva.js
  • Fabric.js
  • SVG overlay for structured callouts
  • Rough.js for hand-drawn style marks

Data Model

  • CourseProject
  • Outline
  • CourseSession
  • SlideDeck
  • Slide
  • Script
  • VoiceAsset
  • VideoAsset
  • ReviewComment
  • ApprovalState

Buildthon Demo Story

  • Paste a rough topic.
  • Add any existing slides, outline, notes, or script.
  • Describe the desired teaching tone in the instructor's own words.
  • Choose projector/screen style, surroundings, transitions, and annotation style.
  • AI creates session goals and plan.
  • Instructor leaves one review note.
  • Instructor opens each session, reviews individual slides, requests slide-level changes, and approves slides.
  • AI revises the lecture plan, session slides, annotations, and script.
  • VO and browser recording are prepared after approval.

Ready Stack Options

There is no single perfect ready-made stack for this exact product, but there are strong building blocks. The recommended production direction is to combine a brainstorming canvas, human-in-the-loop AI workflow, deck rendering, voice generation, and browser recording.

Best-fit stack

  • Frontend: Next.js
  • Brainstorm canvas: tldraw first choice, Excalidraw alternative
  • AI-in-UI: CopilotKit
  • Workflow engine: LangGraph
  • Backend: FastAPI
  • Storage: SQLite for MVP, Postgres later
  • Voice: ElevenLabs
  • Recording: Playwright + FFmpeg

How to use each piece

  • tldraw: visual brainstorming, sticky notes, lecture cards, course maps.
  • CopilotKit: AI can read app state, propose changes, and ask for approval.
  • LangGraph: tracks Course Designer → Lecture Plan → Sessions → Slides → Script → VO → Recording.
  • Reveal.js/custom React deck: render approved slides in browser.
  • Playwright/FFmpeg: open browser deck and export final video.

Buildthon path: Phase 1 is now implemented as a structured brainstorming board inside the current static MVP. It organizes course alignment, source material, lecture cards, and recording style without adding tldraw yet. Add tldraw only if the visual brainstorm experience becomes central to the demo. Add LangGraph/FastAPI when we need real AI workflow persistence and approvals.

Course Workspace Convention

Every new course must get its own stable workspace folder. All future uploaded materials, generated lecture plans, slide decks, scripts, audio clips, and exported videos should live under this path.

courses/<user_name>/<course_name>-<uniq_identifier>

Example

  • user_name: anup
  • course_name: advanced-ai-course-production-workflow
  • workspace: courses/anup/advanced-ai-course-production-workflow-9eb9y2

Current MVP behavior

  • Course Designer has an Instructor / user name field.
  • The app shows a live workspace path preview.
  • The brainstorming board includes the workspace path.
  • The final Voice + Recording asset plan includes the workspace path.

Login + Local Auth

The MVP now includes a real local authentication layer using FastAPI sessions and SQLite. This keeps the app ready for per-user course workspaces and later persistence under the course folder convention.

Backend

  • server.py serves the app and API.
  • SQLite database: courseforge.db.
  • Session cookie: courseforge_session.
  • Endpoints: /api/login, /api/logout, /api/me.

Test account

  • email: test@example.com
  • password: test1234
  • Use only for local development.

Current MVP Implementation

The current implementation is a local FastAPI + SQLite web app in this folder. It starts with login, then a Course Designer stage: brainstorm notes, existing material intake, course goals, lecture count, projector/screen style, recording surroundings, transitions, and annotation style. The rest of the flow generates a lecture plan, session workspaces, slide-level review controls, automated annotations, scripts, and recording assets.

index.html styles.css app.js server.py SQLite login simulation.html test@example.com README.md uv-managed Python serve.py courses/user/course-id convention course designer existing material intake recording style planning structured brainstorm board sessions + slides slide-level review Phase 1 complete static MVP no instructor editing

Latest Test Findings from input.md

The calculus/JEE test input completed the full local flow, but it exposed important MVP behavior to fix before demo polish.

Passed

  • Login, brainstorm board, lecture plan, session workspace, script, and final asset plan all completed.
  • Lecture count 4 initially generated 4 sessions.
  • Each session generated 3 slides: outcome, teaching flow, and learner action.
  • Session 2 opened correctly and slide S2.2 could be rewritten and approved.
  • Browser console showed no JavaScript errors during the end-to-end test.

Fix next

  • Custom tone: input used “Practical, theoretical foundational”, but the dropdown did not preserve it. Script output became “In a tone...”.
  • Revision behavior: lecture-plan revision added “Revision focus 1” as a new 5th session instead of editing the existing 4-session plan.
  • Clip count: 4 sessions × 3 slides should produce 12 VO clips. The current revised flow produced 15 only because it accidentally added a 5th session.
  • Slide note: blank slide-level review notes fall back to a generic rewrite. The UI should encourage a concrete note or disable rewrite until a note is entered.

LLM + Python Asset Generation

The backend now calls a real LLM for course generation, and it does not yet execute Python jobs for generated visual assets. Python asset execution is the next important backend slice.

LLM wiring (done)

  • Generation runs through the local hermes CLI (one-shot subprocess call per request) instead of a raw OpenAI API key — hermes is already authenticated on this machine via OAuth, defaulting to the gpt-5.4-mini model.
  • No API key is loaded on the FastAPI server for generation; nothing is exposed to the browser either way.
  • Backend generation endpoints exist for board, session plan, slides, and script (/api/generate/board|outline|slides|script); course-pack export is still outstanding.
  • Frontend calls these backend APIs instead of generating course content entirely in app.js templates.
  • All LLM responses return structured JSON (schema described in-prompt and parsed from hermes's stdout) so sessions, slides, scripts, and review notes remain editable and exportable.

Python assets for slides

  • LLM can propose safe Python code for plots, diagrams, simulations, charts, and other course-specific visuals.
  • Backend executes approved Python in a controlled course workspace, never in the browser.
  • Generated assets should be saved under the course folder, e.g. visual-assets/graphs and visual-assets/manim.
  • Slides can embed generated PNG/SVG/GIF/MP4 assets once files exist.
  • Asset planning must be topic-specific: math courses may need plots, software courses may need screenshots, business courses may need frameworks/charts, and language courses may need examples/dialogues.

Latest Test Case: Calculus Course Production

The calculus/JEE course is only a test case for the generic course-creator platform, not the product's fixed domain. The platform should create any course from instructor input. This test pack proved the production mechanics: browser-openable HTML slides, course-specific visual assets, scripts, worksheets, and WAV voiceover clips generated from the local TTS server on port 8000.

Generated files

  • Workspace: courses/test-instructor/calculus-convexity-multivariate-extrema-jee.
  • Start file for instructor: slides/deck.html.
  • 4 session HTML decks plus one full deck.
  • 12 slides with embedded SVG visuals for this specific test topic.
  • 4 generated visual assets for this specific test topic: derivative intuition, convex/concave graph, Hessian bowl, Hessian saddle.
  • 12 by-slide scripts plus full-script.md/json.
  • Worksheet and answer key.
  • 12 WAV voiceover clips generated through the local TTS server.

Verified

  • HTML deck opens in the browser from the local filesystem.
  • All 12 embedded SVG images load correctly.
  • Course production zip was created under course-packs/.
  • No final video has been generated yet.
  • Audio is WAV from the requested TTS server, not MP3.

Downloadable Course Pack

The instructor should be able to download a zip at any stage. The pack includes only useful assets that already exist. It should not include empty folders or placeholder files for unfinished work.

Include when available

  • README.md explaining what is included and what is not ready yet.
  • manifest.json and course.json with course metadata, export date, stage, and included asset flags.
  • source-material/instructor-input.md with the instructor's submitted brief, notes, and existing material.
  • plan/session-plan.md and plan/session-plan.json after the lecture/session plan exists.
  • slides/deck.html that opens directly in a browser for non-technical instructors.
  • slides/session-01.html, session-02.html, etc. for browser-openable per-session slide decks.
  • slides/deck.json plus session-level slide markdown after slides exist.
  • script/full-script.md, script/full-script.json, and script/by-slide/*.md after script exists.
  • handouts/worksheet.md and handouts/answer-key.md when worksheets are generated.
  • visual-assets/ only for generated graphs, Manim renders, diagrams, or images that are actually ready.
  • video/final-course.mp4 only after browser recording/export is actually complete.

Exclude by default

  • No MP3/audio files in the default course pack. Scripts are useful for the instructor; raw generated audio is not necessary for this download.
  • No empty voiceover folder if ElevenLabs has not run.
  • No placeholder video if final video is not ready.
  • No incomplete slide deck if slides have not been generated yet; once slides exist, include HTML first because instructors may not be computer-friendly.
  • No internal transcript/debug files that are not useful to the instructor.

Principles

1

Human review at every stage

Do not hide the AI output. Let instructors approve, request changes, or reject each step before moving forward.

2

Granular regeneration

Regenerate only the outline section, slide, or script block that needs work instead of restarting the whole course.

3

Asset versioning

Keep every revision of the outline, deck, script, audio, and video so the instructor can iterate safely.

Saved locally in this folder for the GrowthX buildthon workflow.