101 lines
3.2 KiB
Markdown
101 lines
3.2 KiB
Markdown
# Gnommo Player
|
|
|
|
This project is a proof of concept for an interactive lecture player.
|
|
|
|
## Reusable Player Surface
|
|
|
|
The player is now organized so it can be embedded in a larger React app such as GnommoEditor.
|
|
|
|
The intended host integration looks like this:
|
|
|
|
```tsx
|
|
import {
|
|
GlitchPlayer,
|
|
defaultSlideRegistry,
|
|
createSessionId,
|
|
type PresentationDefinition,
|
|
type VoteRequest
|
|
} from "./player";
|
|
import "./player/styles.css";
|
|
|
|
function GnommoEditorPreview({
|
|
presentation,
|
|
onVoteCommit
|
|
}: {
|
|
presentation: PresentationDefinition;
|
|
onVoteCommit: (vote: VoteRequest) => Promise<void> | void;
|
|
}) {
|
|
return (
|
|
<GlitchPlayer
|
|
presentation={presentation}
|
|
slideRegistry={defaultSlideRegistry}
|
|
initialSessionId={createSessionId()}
|
|
onVoteCommit={onVoteCommit}
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
The key boundary is:
|
|
|
|
- the host app fetches the presentation
|
|
- the host app provides the slide registry
|
|
- the host app owns vote/event persistence
|
|
- the player owns playback, timing, layout, gestures, and rendering
|
|
|
|
## Why This Exists
|
|
|
|
The goal is not just to make ordinary videos or ordinary slide decks.
|
|
|
|
The goal is to build a pipeline for AI-assisted lecture creation, where a lecture can eventually become a normal YouTube video, but starts as a richer structured presentation format.
|
|
|
|
The underlying idea is:
|
|
|
|
- A creator writes a lecture script in a web-based presentation editor, similar to Keynote.
|
|
- The creator defines a timed slide show and only decides high-level layout behavior, such as whether a slide should be square or fullscreen.
|
|
- The creator records talking-head video segments and uploads them.
|
|
- Those segments are stitched into a continuous lecture timeline and transcribed.
|
|
- The spoken words become the scaffold for when slide events should happen.
|
|
- The actual slide contents can then be generated or refined by AI using available templates.
|
|
|
|
That slide content does not need to be limited to static slides. A slide may be:
|
|
|
|
- a React component
|
|
- a chart or visualization
|
|
- an image
|
|
- a 3D scene
|
|
- an interactive explanatory surface
|
|
|
|
This creates a new kind of lecture format:
|
|
|
|
- the talking head provides narrative continuity
|
|
- the slide layer provides rich explanation
|
|
- the viewer can inspect, manipulate, and compare alternate variants of the same explanation
|
|
|
|
## Product Vision
|
|
|
|
The long-term vision is a system for authoring lectures as structured, interactive presentations first, and rendering them into linear video later.
|
|
|
|
That means:
|
|
|
|
- creators can use AI to help generate visual explanations
|
|
- multiple candidate slide variants can compete for the same moment in the lecture
|
|
- viewers can browse or interact with those variants
|
|
- the format can later crystallize into a fixed canonical video suitable for YouTube
|
|
|
|
## Why The Player Matters
|
|
|
|
This player is the runtime for that format.
|
|
|
|
It proves that a lecture can be represented as:
|
|
|
|
- stitched talking-head video segments
|
|
- timed slide events on a continuous timeline
|
|
- square or fullscreen slide presentation modes
|
|
- interactive slide content
|
|
- variant selection and future preference learning
|
|
|
|
In short:
|
|
|
|
This project exists to explore an AI-assisted interactive lecture format that can begin as a live structured presentation and later become a standard video.
|