@revideo/create 0.5.10-alpha.1087 → 0.5.10

package/examples/youtube-shorts/package.json

@@ -10,21 +10,21 @@
   },
   "dependencies": {
     "@deepgram/sdk": "^3.3.1",
-    "@revideo/2d": "0.5.3",
-    "@revideo/cli": "0.5.3",
-    "@revideo/core": "0.5.3",
-    "@revideo/ffmpeg": "0.5.3",
-    "@revideo/renderer": "0.5.3",
-    "@revideo/vite-plugin": "0.5.3",
+    "@revideo/2d": "0.5.10",
+    "@revideo/cli": "0.5.10",
+    "@revideo/core": "0.5.10",
+    "@revideo/ffmpeg": "0.5.10",
+    "@revideo/renderer": "0.5.10",
+    "@revideo/vite-plugin": "0.5.10",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
     "openai": "^4.40.2",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@revideo/ui": "0.5.3",
+    "@revideo/ui": "0.5.10",
     "@types/uuid": "^9.0.8",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }
-}
+}

package/examples/youtube-shorts/src/get-assets.ts

@@ -0,0 +1,34 @@
+require('dotenv').config();
+
+import { getVideoScript, generateAudio, getWordTimestamps, dalleGenerate, getImagePromptFromScript } from './utils';
+import { v4 as uuidv4 } from 'uuid';
+import * as fs from 'fs';
+
+async function createAssets(topic: string, voiceName: string){
+    const jobId = uuidv4();
+
+    console.log("Generating assets...")
+    const script = await getVideoScript(topic);
+    console.log("script", script);
+
+    await generateAudio(script, voiceName, `./public/${jobId}-audio.wav`);
+    const words = await getWordTimestamps(`./public/${jobId}-audio.wav`);
+
+    console.log("Generating images...")
+    const imagePromises = Array.from({ length: 5 }).map(async (_, index) => {
+        const imagePrompt = await getImagePromptFromScript(script);
+        await dalleGenerate(imagePrompt, `./public/${jobId}-image-${index}.png`);
+        return `/${jobId}-image-${index}.png`;
+    });
+
+    const imageFileNames = await Promise.all(imagePromises);
+    const metadata = {
+      audioUrl: `${jobId}-audio.wav`,
+      images: imageFileNames,
+      words: words
+    };
+  
+    await fs.promises.writeFile(`./public/${jobId}-metadata.json`, JSON.stringify(metadata, null, 2));
+}
+
+createAssets("The moon landing", "Sarah")

package/examples/youtube-shorts/src/render.ts

@@ -1,43 +1,12 @@
-require('dotenv').config();
-
 import {renderVideo} from '@revideo/renderer';
 import metadata from './metadata.json';
-import { getVideoScript, generateAudio, getWordTimestamps, dalleGenerate, getImagePromptFromScript } from './utils';
-import { v4 as uuidv4 } from 'uuid';
-import * as fs from 'fs';
-
-async function createVideo(topic: string, voiceName: string){
-    const jobId = uuidv4();
-
-    console.log("Generating assets...")
-    const script = await getVideoScript(topic);
-    console.log("script", script);
-
-    await generateAudio(script, voiceName, `./public/${jobId}-audio.wav`);
-    const words = await getWordTimestamps(`./public/${jobId}-audio.wav`);
-
-    console.log("Generating images...")
-    const imagePromises = Array.from({ length: 5 }).map(async (_, index) => {
-        const imagePrompt = await getImagePromptFromScript(script);
-        await dalleGenerate(imagePrompt, `./public/${jobId}-image-${index}.png`);
-        return `/${jobId}-image-${index}.png`;
-    });
-
-    const imageFileNames = await Promise.all(imagePromises);
-    const metadata = {
-      audioUrl: `${jobId}-audio.wav`,
-      images: imageFileNames,
-      words: words
-    };
-  
-    await fs.promises.writeFile(`./public/${jobId}-metadata.json`, JSON.stringify(metadata, null, 2));
 
-    console.log("Assets generated! Rendering video...")
+async function render(){
     await renderVideo({
       projectFile: './src/project.ts',
-      variables: metadata
+      variables: metadata,
+      settings: {logProgress: true}
     });
-    console.log("Render finished");
 }
 
-createVideo("The moon landing", "Sarah");
+render();

package/examples/youtube-shorts/src/scenes/example.tsx

@@ -1,4 +1,4 @@
-import {Audio, Img, makeScene2D, Txt, View2D, Rect} from '@revideo/2d';
+import {Audio, Img, makeScene2D, Txt, Rect, Layout} from '@revideo/2d';
 import {all, createRef, waitFor, useScene, Reference, createSignal} from '@revideo/core';
 
 interface Word {
@@ -49,8 +49,19 @@ export default makeScene2D(function* (view) {
 
   const duration = words[words.length-1].end + 0.5;
 
+  const imageContainer = createRef<Layout>();
+  const textContainer = createRef<Layout>();
+
   yield view.add(
     <>
+      <Layout
+        size={"100%"}
+        ref={imageContainer}
+      />
+      <Layout
+        size={"100%"}
+        ref={textContainer}
+      />
       <Audio
         src={audioUrl}
         play={true}
@@ -64,19 +75,19 @@ export default makeScene2D(function* (view) {
   );
 
   yield* all(
-    displayImages(view, images, duration),
+    displayImages(imageContainer, images, duration),
     displayWords(
-      view,
+      textContainer,
       words,
       textSettings
     )
   )
 });
 
-function* displayImages(view: View2D, images: string[], totalDuration: number){
+function* displayImages(container: Reference<Layout>, images: string[], totalDuration: number){
   for(const img of images){
     const ref = createRef<Img>();
-    view.add(<Img 
+    container().add(<Img 
       src={img}
       size={["100%", "100%"]}
       ref={ref}
@@ -87,7 +98,7 @@ function* displayImages(view: View2D, images: string[], totalDuration: number){
   }
 }
 
-function* displayWords(view: View2D, words: Word[], settings: captionSettings){
+function* displayWords(container: Reference<Layout>, words: Word[], settings: captionSettings){
   let waitBefore = words[0].start;
 
   for (let i = 0; i < words.length; i += settings.numSimultaneousWords) {
@@ -101,7 +112,7 @@ function* displayWords(view: View2D, words: Word[], settings: captionSettings){
 
     if(settings.stream){
       let nextWordStart = 0;
-      yield view.add(<Txt width={`${settings.textBoxWidthInPercent}%`} textWrap={true} zIndex={2} textAlign={settings.textAlign} ref={textRef}/>);
+      yield container().add(<Txt width={`${settings.textBoxWidthInPercent}%`} textWrap={true} zIndex={2} textAlign={settings.textAlign} ref={textRef}/>);
 
       for(let j = 0; j < currentBatch.length; j++){
         const word = currentBatch[j];
@@ -130,7 +141,7 @@ function* displayWords(view: View2D, words: Word[], settings: captionSettings){
           </Txt>
         );
         textRef().add(<Txt fontSize={settings.fontSize}>{optionalSpace}</Txt>);
-        view.add(<Rect fill={settings.currentWordBackgroundColor} zIndex={1} size={wordRef().size} position={wordRef().position} radius={10} padding={10} ref={backgroundRef} />);
+        container().add(<Rect fill={settings.currentWordBackgroundColor} zIndex={1} size={wordRef().size} position={wordRef().position} radius={10} padding={10} ref={backgroundRef} />);
         yield* all(waitFor(word.end-word.start), opacitySignal(1, Math.min((word.end-word.start)*0.5, 0.1)));
         wordRef().fill(settings.textColor);
         backgroundRef().remove();
@@ -139,7 +150,7 @@ function* displayWords(view: View2D, words: Word[], settings: captionSettings){
       textRef().remove();
 
     } else {
-      yield view.add(<Txt width={`${settings.textBoxWidthInPercent}%`} textAlign={settings.textAlign} ref={textRef} textWrap={true} zIndex={2}/>);
+      yield container().add(<Txt width={`${settings.textBoxWidthInPercent}%`} textAlign={settings.textAlign} ref={textRef} textWrap={true} zIndex={2}/>);
 
       const wordRefs = [];
       const opacitySignal = createSignal(settings.fadeInAnimation ? 0.5 : 1);
@@ -177,7 +188,7 @@ function* displayWords(view: View2D, words: Word[], settings: captionSettings){
 
       yield* all(
         opacitySignal(1, Math.min(0.1, (currentBatch[0].end-currentBatch[0].start)*0.5)),
-        highlightCurrentWord(view, currentBatch, wordRefs, settings.currentWordColor, settings.currentWordBackgroundColor),
+        highlightCurrentWord(container, currentBatch, wordRefs, settings.currentWordColor, settings.currentWordBackgroundColor),
         waitFor(currentBatch[currentBatch.length-1].end - currentBatch[0].start + waitAfter), 
       );
       textRef().remove();
@@ -186,7 +197,7 @@ function* displayWords(view: View2D, words: Word[], settings: captionSettings){
   }
 }
 
-function* highlightCurrentWord(view: View2D, currentBatch: Word[], wordRefs: Reference<Txt>[], wordColor: string, backgroundColor: string){
+function* highlightCurrentWord(container: Reference<Layout>, currentBatch: Word[], wordRefs: Reference<Txt>[], wordColor: string, backgroundColor: string){
   let nextWordStart = 0;
 
   for(let i = 0; i < currentBatch.length; i++){
@@ -194,14 +205,16 @@ function* highlightCurrentWord(view: View2D, currentBatch: Word[], wordRefs: Ref
     const word = currentBatch[i];
     const originalColor = wordRefs[i]().fill();
     nextWordStart = currentBatch[i+1]?.start - word.end || 0;
+    wordRefs[i]().text(wordRefs[i]().text());
     wordRefs[i]().fill(wordColor);
 
     const backgroundRef = createRef<Rect>();
     if(backgroundColor){
-      view.add(<Rect fill={backgroundColor} zIndex={1} size={wordRefs[i]().size} position={wordRefs[i]().position} radius={10} padding={10} ref={backgroundRef} />);
+      container().add(<Rect fill={backgroundColor} zIndex={1} size={wordRefs[i]().size} position={wordRefs[i]().position} radius={10} padding={10} ref={backgroundRef} />);
     }
 
     yield* waitFor(word.end-word.start);
+    wordRefs[i]().text(wordRefs[i]().text());
     wordRefs[i]().fill(originalColor);
 
     if(backgroundColor){

package/index.js

@@ -9,23 +9,97 @@ import path from 'path';
 import prompts from 'prompts';
 
 const templates = [
+  {
+    value: 'default',
+    title: 'Minimal, standalone Revideo project',
+    description: 'A minimal example to get started with Revideo.',
+    recommended: true,
+    startcommands: 'default',
+  },
   {
     value: 'saas-template',
-    title: 'Revideo with Next.js (recommended)',
-    description: 'An example project to get started with Revideo and Next.js.',
+    title: 'Revideo with Next.js',
+    description: 'A minimal web app built with Revideo and Next.js.',
+    recommended: true,
+    startCommands: 'next',
   },
   {
-    value: 'default',
-    title: 'Minial, standalone Revideo project',
-    description: 'A minimal example to get started with Revideo.',
+    value: 'avatar-with-background',
+    title: 'Avatar with Background',
+    description: 'Create an avatar with a custom background.',
+    startcommands: 'default',
+  },
+  {
+    value: 'github-stars-celebration',
+    title: 'GitHub Stars Celebration',
+    description: 'Animate a celebration of GitHub repository stars.',
+    startcommands: 'default',
+  },
+  {
+    value: 'google-cloud-run-parallelized',
+    title: 'Google Cloud Run Parallelized',
+    description: 'Example of parallelized rendering using Google Cloud Run.',
+    startcommands: 'readme',
+  },
+  {
+    value: 'marketing-templates',
+    title: 'Marketing Templates',
+    description: 'A collection of templates for marketing videos.',
+    startcommands: 'readme',
+  },
+  {
+    value: 'minimal-drag-drop',
+    title: 'Drag and Drop Example',
+    description:
+      'A minimal example of an editor with drag-and-drop editing functionality.',
+    startcommands: 'next',
+  },
+  {
+    value: 'parallelized-aws-lambda',
+    title: 'Parallelized AWS Lambda',
+    description: 'Example of parallelized rendering using AWS Lambda.',
+    startcommands: 'readme',
+  },
+  {
+    value: 'reddit-post-video',
+    title: 'Reddit Post Video',
+    description: 'Generate a video from a Reddit post.',
+    startcommands: 'default',
+  },
+  {
+    value: 'rive-explanation-video',
+    title: 'Rive Explanation Video',
+    description: 'Create a code explanation video along with Rive animations.',
+    startcommands: 'default',
+  },
+  {
+    value: 'stitching-videos',
+    title: 'Stitching Videos',
+    description: 'Example of how to concatenate multiple videos together.',
+    startcommands: 'default',
+  },
+  {
+    value: 'three-js-example',
+    title: 'Three.js Example',
+    description: 'Integrate Three.js with Revideo for 3D animations.',
+    startcommands: 'default',
+  },
+  {
+    value: 'youtube-shorts',
+    title: 'YouTube Shorts',
+    description: 'Template for creating YouTube Shorts videos.',
+    startcommands: 'default',
   },
 ];
 
 async function run() {
   const options = minimist(process.argv.slice(2));
 
-  prompts.override(options);
-  const response = await prompts([
+  const templateFlag = Object.keys(options).find(key =>
+    templates.some(template => template.value === key),
+  );
+
+  const pathResponse = await prompts([
     // Prompt for project name
     {
       type: 'text',
@@ -64,21 +138,41 @@ async function run() {
       },
       format: value => path.resolve(value),
     },
-    // Prompt for which example to scaffold
-    {
-      type: 'select',
-      name: 'starter',
-      message: 'Choose a starter template',
-      choices: templates,
-    },
   ]);
 
+  console.log(); // linebreak for better readability
+
+  let templateResponse;
+  if (templateFlag) {
+    templateResponse = {starter: templateFlag};
+  } else {
+    // Prompt for which example to scaffold
+    templateResponse = await prompts([
+      {
+        type: 'select',
+        name: 'starter',
+        message: 'Choose a starter template',
+        choices: templates.map(template => ({
+          title: template.recommended
+            ? template.title + kleur.bold(' (Recommended)')
+            : template.title,
+          value: template.value,
+          description: template.description,
+        })),
+      },
+    ]);
+  }
+
+  const response = {...pathResponse, ...templateResponse};
+
   // Abort if the user didn't provide a project name
   if (!response.path) {
     console.log(kleur.red('× Scaffolding aborted by the user.\n'));
     return;
   }
 
+  console.log('Scaffolding, this can take a few seconds...');
+
   // Clone files
   const templateDir = path.resolve(
     fileURLToPath(import.meta.url),
@@ -123,10 +217,16 @@ async function run() {
   const installCommand =
     manager === 'yarn' ? `  ${boldManager}` : `  ${boldManager} install`;
 
-  if (response.starter == 'default') {
+  const selectedTemplate = getTemplate(response.starter);
+
+  if (!selectedTemplate) {
+    throw Error(`Template ${response.starter.name} does not exist`);
+  }
+
+  if (selectedTemplate.startcommands === 'default') {
     console.log(installCommand);
     console.log(`  ${boldManager} start`);
-  } else {
+  } else if (selectedTemplate.startcommands === 'next') {
     console.log(kleur.blue('\n√ Start the NextJS server:'));
     console.log(`  ${kleur.bold('cd')} next`);
     console.log(installCommand);
@@ -138,6 +238,8 @@ async function run() {
     console.log(`  ${kleur.bold('cd')} revideo`);
     console.log(installCommand);
     console.log(`  ${kleur.bold('npx')} revideo serve`);
+  } else {
+    console.log(kleur.blue('\nNow find the setup instructions in README.md'));
   }
   console.log();
 }
@@ -171,6 +273,10 @@ function getPackageManager() {
   return ua?.split(' ')[0].split('/')[0] ?? 'npm';
 }
 
+function getTemplate(value) {
+  return templates.find(template => template.value === value);
+}
+
 void run().catch(e => {
   console.error(e);
   sendEvent(EventName.Error, {error: e});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revideo/create",
-  "version": "0.5.10-alpha.1087+09caa1bb",
+  "version": "0.5.10",
   "description": "Quickly scaffold revideo projects",
   "main": "index.js",
   "author": "revideo",
@@ -20,17 +20,17 @@
     "url": "https://github.com/havenhq/revideo.git"
   },
   "devDependencies": {
-    "@revideo/2d": "^0.5.10-alpha.1087+09caa1bb",
-    "@revideo/core": "^0.5.10-alpha.1087+09caa1bb",
-    "@revideo/ffmpeg": "^0.5.10-alpha.1087+09caa1bb",
-    "@revideo/renderer": "^0.5.10-alpha.1087+09caa1bb",
-    "@revideo/ui": "^0.5.10-alpha.1087+09caa1bb",
-    "@revideo/vite-plugin": "^0.5.10-alpha.1087+09caa1bb"
+    "@revideo/2d": "0.5.10",
+    "@revideo/core": "0.5.10",
+    "@revideo/ffmpeg": "0.5.10",
+    "@revideo/renderer": "0.5.10",
+    "@revideo/ui": "0.5.10",
+    "@revideo/vite-plugin": "0.5.10"
   },
   "dependencies": {
-    "@revideo/telemetry": "^0.5.10-alpha.1087+09caa1bb",
+    "@revideo/telemetry": "0.5.10",
     "minimist": "^1.2.8",
     "prompts": "^2.4.2"
   },
-  "gitHead": "09caa1bb5c62d8e239faf5c426c178da50d57a39"
+  "gitHead": "56d48446d0f2dd2146bf594516b880b38a6e36a9"
 }