Add AI video template

packages/create-video/src/prompts.ts

@@ -25,7 +25,6 @@ export async function selectAsync(
 	const {value} = await prompt({
 		limit: 11,
 		...questions,
-		// @ts-expect-error: onRender not in the types
 		onRender(this: {
 			cursor: number;
 			firstRender: boolean;

packages/create-video/src/templates.ts

@@ -37,6 +37,7 @@ export type Template = {
 		| 'google-tts'
 		| 'audiogram'
 		| 'music-visualization'
+		| 'ai-video'
 		| 'skia'
 		| 'overlay'
 		| 'stargazer'
@@ -376,6 +377,27 @@ export const FEATURED_TEMPLATES: Template[] = [
 		templateInMonorepo: 'template-music-visualization',
 		allowEnableTailwind: true,
 	},
+	{
+		homePageLabel: 'AI Video',
+		shortName: 'AI Video',
+		org: 'remotion-dev',
+		repoName: 'template-ai-video',
+		description: 'Create AI Videos from description',
+		longerDescription:
+			'A template that turns video descriptions into full videos that can be posted on Social Media.',
+		promoVideo: {
+			muxId: 'FGl01Rw6c5YOjBCTdVhn5wrmVaRWDOjDeT28iY3Sv47w',
+			height: 1920,
+			width: 1080,
+		},
+		cliId: 'ai-video' as const,
+		type: 'video' as const,
+		defaultBranch: 'main',
+		featuredOnHomePage: null,
+		previewURL: null,
+		templateInMonorepo: 'template-ai-video',
+		allowEnableTailwind: true,
+	},
 	{
 		homePageLabel: 'Skia',
 		shortName: 'Skia',

packages/template-ai-video/.env.example

@@ -0,0 +1,2 @@
+OPENAI_API_KEY=
+ELEVENLABS_API_KEY=

packages/template-ai-video/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.DS_Store
+.env
+
+# Ignore the output video from Git but not videos you import into src/.
+out

packages/template-ai-video/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "useTabs": false,
+  "bracketSpacing": true,
+  "tabWidth": 2
+}

packages/template-ai-video/README.md

@@ -0,0 +1,120 @@
+# Remotion AI Video template
+
+<p align="center">
+  <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://cdn.webmonch.dev/img/remotion-template-promo.png">
+      <img alt="Animated Remotion Logo" src="https://cdn.webmonch.dev/img/remotion-template-promo.png">
+    </picture>
+</p>
+
+Using this template you can create high quality **AI videos for TikTok or Instagram**.
+
+It includes a CLI that will generate story script, images and voiceover using OpenAI and ElevenLabs.
+
+## Getting started with demo video
+
+**Install Dependencies**
+
+```console
+bun install
+```
+
+**Start Preview**
+
+```console
+npm run dev
+```
+
+## How do I render my video?
+
+Run this:
+
+```console
+npx remotion render
+```
+
+Or check out the [Remotion docs](/docs/render/). There are lots of ways to render.
+
+## Creating your own videos
+
+You can easily create your own videos using provided CLI.
+
+It will generate a script, images, voiceover and timeline based on your story title and topic. (topic can be e.g. history, eli5, fun facts, science, etc)
+
+**Configure environment variables**
+
+Create .env file with following env vars (you can also find them in .env.example):
+
+```
+OPENAI_API_KEY=
+ELEVENLABS_API_KEY=
+```
+
+If you did not create env file - you will be prompted for these variables when using CLI.
+
+**Select voice**
+
+In **generateVoice()** function replace the voice id from ElevenLabs with the one you like. You can use their API for this. Alternatively, you can open any voice on their website and extract the Voice Id from the url (id comes after **voiceId=**)
+
+```console
+https://elevenlabs.io/app/voice-library?voiceId=aTxZrSrp47xsP6Ot4Kgd
+```
+
+**Generate srory timeline**
+
+```console
+bun gen
+```
+
+You will be prompted to enter story title and topic.
+
+Title can be a vague one or long and detailed. Short title on the first slide will be generated based on it.
+
+Topic can be e.g. History, Interesting facts, ELI5 etc.
+
+After you enter title and topic, CLI will generate text, images and audio with timestamps, and combine all those into a timeline that van be used by this template to render a video.
+
+## Technical overview
+
+Remotion is rendering videos based on Timeline (timeline.json in project folder). This timeline is generated by CLI.
+
+It consists of three blocks - Elements, Text and Audio.
+
+Elements define slide backgrounds and include enter/exit transitions (e.g. blur) and animations that are applied while slide is active (e.g. scale, rotate).
+
+Text and audio are self explanatory. The only special thing about them is that they are synced.
+
+You can customize the generation of the timeline in **createTimeLineFromStoryWithDetails()** function.
+
+## Deploying on a remove server
+
+Current project nees light modification if you want to deploy it as a remote service.
+
+Remotion renderer with template bundle shuold be deployed as per usual.
+
+Then you have to update Root.tsx to use timeline url that you will pass as a prop (instead of project name).
+
+The last thing - you have to upload generated resources (images and audio) to server and use urls to them instead of file names when generating a timeline.
+
+## Optimisations
+
+You can significantly speed up the story generation by generating audio and images in parallel.
+
+## Issues
+
+Found an issue with Remotion? Upgrade Remotion to receive fixes:
+
+```
+npx remotion upgrade
+```
+
+Didn't help? [File an issue here](https://github.com/remotion-dev/remotion/issues/new).
+
+## Contributing
+
+The source of this template is in the [Remotion Monorepo](https://github.com/remotion-dev/remotion/tree/main/packages/template-ai-video).  
+Don't send pull requests here, this is only a mirror.
+
+## License
+
+Note that for some entities a company license is needed. [Read the terms here](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md).