Export Capabilities of OpenMAIC: Multi-Modal Video and Interactive Content Packaging

OpenMAIC provides six distinct export formats—including classroom-quality MP4 videos, sandboxed interactive HTML bundles, and distributable skill packages—through a deterministic TypeScript pipeline centralized in lib/video-export/.

The export capabilities of OpenMAIC enable developers to transform interactive learning scenes into portable, production-ready assets suitable for distribution across multiple platforms. Located primarily within the lib/video-export/ directory of the THU-MAIC/OpenMAIC repository, this system exposes a stable public API through @openmaic/renderer and @openmaic/editor, allowing programmatic generation of videos, HTML bundles, and metadata manifests from a single source scene graph.

Core Export Architecture and Pipeline

The OpenMAIC export system implements a strict four-stage pipeline that guarantees deterministic output for CI/CD environments. Each stage is isolated by ESLint purity boundaries to prevent runtime state contamination.

Asset Collection and Timeline Building

The pipeline initiates with collectVideoAssets, defined in lib/video-export/collect.ts, which traverses the compiled scene graph to resolve images, audio tracks, fonts, and external scripts into a normalized dependency structure. Following collection, buildTimeline constructs a type-safe VideoTimeline object validated against VideoTimelineSchema, mapping slide transitions, media synchronization points, and visual effect triggers to precise timecodes.

Hyper-Frame Generation and Packaging

The emitHyperframes function, implemented across modules in lib/video-export/emit-hyperframes/, converts timeline events into composable visual layers including spotlight effects, laser pointers, and zoom transformations. Finally, buildExportZip in lib/video-export/build-export-zip.ts assembles the distributable bundle, embedding version-hashed assets and cryptographically signing the archive for integrity verification.

Supported Export Formats

OpenMAIC delivers six primary export targets, each optimized for specific distribution channels and use cases.

Classroom Video Export (MP4)

The classroom-video export generates self-contained MP4 files featuring synchronized audio, embedded subtitles, and professional visual effects. The entry point in lib/video-export/index.ts orchestrates compilation while automatic font embedding from /vendor/video-export/fonts/ ensures typographic consistency. This format supports quiz-integrated slides, PPT-style layouts, and LaTeX rendering, with visual effects rendered through the hyper-frame system.

Interactive HTML Export

Interactive HTML exports produce sandboxed bundles containing the full classroom UI, including live video streams, Q&A modules, and drawing tools. The prepareInteractiveHtmlScenes function in lib/video-export/prepare-interactive-html.ts generates isolated HTML files served within null-origin iframes to prevent XSS attacks. Media dependencies are resolved by collect.ts and embedded with content hashes for aggressive caching strategies.

Skill Package Export

Skill-package exports create distributable ZIP archives compatible with the OpenMAIC skill store. The package-zip.ts module generates a manifest.json describing required permissions, UI entry points, and asset inventories, supporting incremental upgrades with backward-compatible manifests. End-to-end validation occurs in tests/server/skill-export.test.ts, ensuring store compliance before distribution.

Slide Image and Subtitle Export

Individual slide snapshots utilize vector-based rendering through packages/@openmaic/renderer/src/elements/shape/PatternDefs.tsx and GradientDefs.tsx, exporting to either lossless SVG or rasterized PNG formats. Subtitle generation leverages toSrt and toVtt helpers defined in lib/video-export/subtitles.ts, producing time-coded files that respect slide transitions and media synchronization points.

Metadata Export

JSON manifests describing course structure, asset inventories, and temporal metadata are emitted by lib/video-export/emit.ts. This output guarantees deterministic generation for CI pipeline validation, as verified by tests/video-export/emit.test.ts, ensuring reproducible builds across environments.

Implementing Exports in Practice

The following examples demonstrate how to invoke the OpenMAIC export API from TypeScript applications.

Building a Complete Video Export

// Compile scene graph to distributable ZIP
import { compileVideoTimeline, emitHyperframes } from '@/lib/video-export';
import { prepareInteractiveHtmlScenes } from '@/lib/video-export-app/prepare-interactive-html';
import { buildExportZip } from '@/lib/video-export-app/build-export-zip';

// Assume `scene` is a compiled OpenMAIC scene (type: CompilerScene)
const timeline = compileVideoTimeline(scene);
const hyperFrames = emitHyperframes(timeline);
const interactiveHtml = await prepareInteractiveHtmlScenes([scene]);

const zip = await buildExportZip({
  timeline,
  hyperFrames,
  interactiveHtml,
  coverLabels: { title: 'My Course', subtitle: 'Lesson 1' },
});
await zip.saveToFile('my-course-export.zip');

Exporting Subtitle Files

// Generate SRT from timeline subtitles
import { toSrt } from '@/lib/video-export';

const srt = toSrt(timeline.subtitles);
await Deno.writeTextFile('my-course.srt', srt);

Generating Slide Snapshots

// Render slide to static PNG
import { SlideCanvas } from '@openmaic/renderer';
import { renderToStaticMarkup } from 'react-dom/server';
import { writeFileSync } from 'fs';

const svg = renderToStaticMarkup(
  <SlideCanvas width={1920} height={1080}>
    <SlideElement elementInfo={slideElement} />
  </SlideCanvas>
);

// Rasterize SVG to PNG using headless canvas
writeFileSync('slide-snapshot.png', pngBuffer);

Purity Boundaries and Security

All export operations are guarded by strict ESLint purity boundaries enforced in tests/video-export/eslint-boundary.test.ts. These boundaries prevent runtime state leakage from live classroom sessions into export artifacts, ensuring that the pipeline remains safe for server-side execution and deterministic across build environments. Interactive HTML exports specifically utilize null-origin sandboxing to isolate potentially untrusted content.

Summary

• OpenMAIC supports six export formats through a unified TypeScript pipeline in lib/video-export/, including MP4 video, interactive HTML, skill packages, slide images, subtitles, and JSON metadata.
• The four-stage pipeline (collect, build, emit, package) utilizes type-safe schemas and purity boundaries to guarantee CI-safe, deterministic output.
• Video exports combine MP4 containers with embedded fonts from /vendor/video-export/fonts/ and composable hyper-frame visual effects.
• Security measures include null-origin iframe sandboxing for HTML bundles and ESLint purity boundaries preventing state contamination.
• Skill packages include versioned manifest.json files supporting incremental updates and are validated by tests/server/skill-export.test.ts.
• Vector-based rendering through PatternDefs.tsx and GradientDefs.tsx enables lossless slide export to SVG or PNG formats.

Frequently Asked Questions

What video formats does OpenMAIC support for export?

OpenMAIC generates self-contained MP4 files with synchronized audio and embedded subtitle tracks in SRT or VTT format. The system also exports individual slide snapshots as PNG raster images or SVG vector graphics for documentation and presentation reuse, utilizing rendering primitives from packages/@openmaic/renderer/src/elements/.

How does OpenMAIC ensure export security and isolation?

The system implements null-origin iframe sandboxing for interactive HTML exports to prevent XSS attacks. Additionally, strict ESLint purity boundaries defined in tests/video-export/eslint-boundary.test.ts prevent live classroom runtime state from contaminating export artifacts, making the pipeline safe for CI/CD execution.

Can OpenMAIC content be exported for offline usage?

Yes, the skill-package export creates fully offline-capable ZIP bundles containing all runtime code, assets, and metadata manifests. The package-zip.ts module generates store-compatible archives validated by tests/server/skill-export.test.ts, supporting offline playback without network dependencies.

Where is the public export API documented and exposed?

The public export API resides in lib/video-export/index.ts and is distributed through the @openmaic/renderer and @openmaic/editor packages. Key functions include compileVideoTimeline for timeline generation, emitHyperframes for visual effect layering, and buildExportZip for final package assembly, all fully typed for TypeScript consumers.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}