@revideo/create 0.5.11-alpha.1102 → 0.5.11-alpha.1104

package/examples/youtube-shorts/src/project.meta

@@ -0,0 +1,28 @@
+{
+  "version": 1,
+  "shared": {
+    "background": null,
+    "range": [
+      0,
+      null
+    ],
+    "size": {
+      "x": 1080,
+      "y": 1792
+    },
+    "audioOffset": 0
+  },
+  "preview": {
+    "fps": 30,
+    "resolutionScale": 1
+  },
+  "rendering": {
+    "fps": 30,
+    "resolutionScale": 1,
+    "colorSpace": "srgb",
+    "exporter": {
+      "name": "@revideo/core/wasm",
+      "options": {}
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import {makeProject} from '@revideo/core';
+import example from './scenes/example?scene';
+import metadata from './metadata.json'
+import "./global.css";
+
+export default makeProject({
+  scenes: [example],
+  variables: metadata
+});

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

@@ -0,0 +1,12 @@
+import {renderVideo} from '@revideo/renderer';
+import metadata from './metadata.json';
+
+async function render(){
+    await renderVideo({
+      projectFile: './src/project.ts',
+      variables: metadata,
+      settings: {logProgress: true}
+    });
+}
+
+render();

package/examples/youtube-shorts/src/revideo.d.ts

@@ -0,0 +1 @@
+/// <reference types="@revideo/core/project" />

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

@@ -0,0 +1,224 @@
+import {Audio, Img, makeScene2D, Txt, Rect, Layout} from '@revideo/2d';
+import {all, createRef, waitFor, useScene, Reference, createSignal} from '@revideo/core';
+
+interface Word {
+  punctuated_word: string;
+  start: number;
+  end: number;
+}
+
+interface captionSettings {
+  fontSize: number;
+  textColor: string;
+  fontWeight: number;
+  fontFamily: string;
+  numSimultaneousWords: number;
+  stream: boolean;
+  textAlign: "center" | "left";
+  textBoxWidthInPercent: number;
+  borderColor?: string;
+  borderWidth?: number;
+  currentWordColor?: string;
+  currentWordBackgroundColor?: string;
+  shadowColor?: string;
+  shadowBlur?: number;
+  fadeInAnimation?: boolean;
+}
+
+const textSettings: captionSettings = {
+  fontSize: 80,
+  numSimultaneousWords: 4, // how many words are shown at most simultaneously
+  textColor: "white",
+  fontWeight: 800,
+  fontFamily: "Mulish",
+  stream: false, // if true, words appear one by one
+  textAlign: "center",
+  textBoxWidthInPercent: 70,
+  fadeInAnimation: true,
+  currentWordColor: "cyan",
+  currentWordBackgroundColor: "red", // adds a colored box to the word currently spoken
+  shadowColor: "black",
+  shadowBlur: 30
+}
+
+
+export default makeScene2D(function* (view) {
+  const images = useScene().variables.get('images', [])();
+  const audioUrl = useScene().variables.get('audioUrl', 'none')();
+  const words = useScene().variables.get('words', [])();
+
+  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}
+      />
+      <Audio
+        src={"https://revideo-example-assets.s3.amazonaws.com/chill-beat-2.mp3"}
+        play={true}
+        volume={0.1}
+      />
+    </>
+  );
+
+  yield* all(
+    displayImages(imageContainer, images, duration),
+    displayWords(
+      textContainer,
+      words,
+      textSettings
+    )
+  )
+});
+
+function* displayImages(container: Reference<Layout>, images: string[], totalDuration: number){
+  for(const img of images){
+    const ref = createRef<Img>();
+    container().add(<Img 
+      src={img}
+      size={["100%", "100%"]}
+      ref={ref}
+      zIndex={0}
+    /> 
+    )
+    yield* waitFor(totalDuration/images.length);
+  }
+}
+
+function* displayWords(container: Reference<Layout>, words: Word[], settings: captionSettings){
+  let waitBefore = words[0].start;
+
+  for (let i = 0; i < words.length; i += settings.numSimultaneousWords) {
+    const currentBatch = words.slice(i, i + settings.numSimultaneousWords);
+    const nextClipStart =
+      i < words.length - 1 ? words[i + settings.numSimultaneousWords]?.start || null : null;
+    const isLastClip = i + settings.numSimultaneousWords >= words.length;
+    const waitAfter = isLastClip ? 1 : 0;
+    const textRef = createRef<Txt>();
+    yield* waitFor(waitBefore);
+
+    if(settings.stream){
+      let nextWordStart = 0;
+      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];
+        yield* waitFor(nextWordStart);
+        const optionalSpace = j === currentBatch.length-1? "" : " ";
+        const backgroundRef = createRef<Rect>();
+        const wordRef = createRef<Txt>();
+        const opacitySignal = createSignal(settings.fadeInAnimation ? 0.5 : 1);
+        textRef().add(
+          <Txt
+            fontSize={settings.fontSize}
+            fontWeight={settings.fontWeight}
+            fontFamily={settings.fontFamily}
+            textWrap={true}
+            textAlign={settings.textAlign}
+            fill={settings.currentWordColor}
+            ref={wordRef}
+            lineWidth={settings.borderWidth}
+            shadowBlur={settings.shadowBlur}
+            shadowColor={settings.shadowColor}
+            zIndex={2}
+            stroke={settings.borderColor}
+            opacity={opacitySignal}
+          >
+            {word.punctuated_word}
+          </Txt>
+        );
+        textRef().add(<Txt fontSize={settings.fontSize}>{optionalSpace}</Txt>);
+        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();
+        nextWordStart = currentBatch[j+1]?.start - word.end || 0;
+      }
+      textRef().remove();
+
+    } else {
+      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);
+      for(let j = 0; j < currentBatch.length; j++){
+        const word = currentBatch[j];
+        const optionalSpace = j === currentBatch.length-1? "" : " ";
+        const wordRef = createRef<Txt>();
+        textRef().add(
+          <Txt
+            fontSize={settings.fontSize}
+            fontWeight={settings.fontWeight}
+            ref={wordRef}
+            fontFamily={settings.fontFamily}
+            textWrap={true}
+            textAlign={settings.textAlign}
+            fill={settings.textColor}
+            zIndex={2}
+            stroke={settings.borderColor}
+            lineWidth={settings.borderWidth}
+            shadowBlur={settings.shadowBlur}
+            shadowColor={settings.shadowColor}
+            opacity={opacitySignal}
+          >
+            {word.punctuated_word}
+          </Txt>
+        );
+        textRef().add(<Txt fontSize={settings.fontSize}>{optionalSpace}</Txt>);
+
+        // we have to yield once to await the first word being aligned correctly
+        if(j===0 && i === 0){
+          yield;
+        }
+        wordRefs.push(wordRef);
+      }
+
+      yield* all(
+        opacitySignal(1, Math.min(0.1, (currentBatch[0].end-currentBatch[0].start)*0.5)),
+        highlightCurrentWord(container, currentBatch, wordRefs, settings.currentWordColor, settings.currentWordBackgroundColor),
+        waitFor(currentBatch[currentBatch.length-1].end - currentBatch[0].start + waitAfter), 
+      );
+      textRef().remove();
+    }
+    waitBefore = nextClipStart !== null ? nextClipStart - currentBatch[currentBatch.length-1].end : 0;
+  }
+}
+
+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++){
+    yield* waitFor(nextWordStart);
+    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){
+      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){
+      backgroundRef().remove();
+    }
+  }
+}

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

@@ -0,0 +1,123 @@
+import OpenAI from 'openai';
+import axios from "axios";
+import * as fs from "fs";
+import { createClient } from "@deepgram/sdk";
+
+const deepgram = createClient(process.env["DEEPGRAM_API_KEY"] || "");
+const openai = new OpenAI({
+	apiKey: process.env['OPENAI_API_KEY'],
+  });  
+
+export async function getWordTimestamps(audioFilePath: string){
+    const {result} = await deepgram.listen.prerecorded.transcribeFile(fs.readFileSync(audioFilePath), {
+		model: "nova-2",
+		smart_format: true,
+	});
+
+    if (result) {
+        return result.results.channels[0].alternatives[0].words;
+    } else {
+		throw Error("transcription result is null");
+    }
+
+}
+
+export async function generateAudio(text: string, voiceName: string, savePath: string) {
+	const data = {
+		model_id: "eleven_multilingual_v2",
+		text: text,
+	};
+
+	const voiceId = await getVoiceByName(voiceName);
+
+	const response = await axios.post(`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`, data, {
+		headers: {
+			"Content-Type": "application/json",
+			"xi-api-key": process.env.ELEVEN_API_KEY || "",
+		},
+		responseType: "arraybuffer",
+	});
+
+	fs.writeFileSync(savePath, response.data);
+}
+
+async function getVoiceByName(name: string) {
+	const response = await fetch("https://api.elevenlabs.io/v1/voices", {
+		method: "GET",
+		headers: {
+			"xi-api-key": process.env.ELEVEN_API_KEY || "",
+		},
+	});
+
+	if (!response.ok) {
+		throw new Error(`HTTP error! status: ${response.status}`);
+	}
+
+	const data: any = await response.json();
+	const voice = data.voices.find((voice: {name: string; voice_id: string}) => voice.name === name);
+	return voice ? voice.voice_id : null;
+}
+
+export async function getVideoScript(videoTopic: string) {
+  const prompt = `Create a script for a youtube short. The script should be around 60 to 80 words long and be an interesting text about the provided topic, and it should start with a catchy headline, something like "Did you know that?" or "This will blow your mind". Remember that this is for a voiceover that should be read, so things like hashtags should not be included. Now write the script for the following topic: "${videoTopic}". Now return the script and nothing else, also no meta-information - ONLY THE VOICEOVER.`;
+
+  const chatCompletion = await openai.chat.completions.create({
+    messages: [{ role: 'user', content: prompt }],
+    model: 'gpt-4-turbo-preview',
+  });
+
+  const result = chatCompletion.choices[0].message.content;
+
+  if (result) {
+    return result;
+  } else {
+    throw Error("returned text is null");
+  }
+
+}
+
+export async function getImagePromptFromScript(script: string) {
+  const prompt = `My goal is to create a Youtube Short based on the following script. To create a background image for the video, I am using a text-to-video AI model. Please write a short (not longer than a single sentence), suitable prompt for such a model based on this script: ${script}.\n\nNow return the prompt and nothing else.`;
+
+  const chatCompletion = await openai.chat.completions.create({
+    messages: [{ role: 'user', content: prompt }],
+    model: 'gpt-4-turbo-preview',
+    temperature: 1.0 // high temperature for "creativeness"
+  });
+
+  const result = chatCompletion.choices[0].message.content;
+
+  if (result) {
+    return result;
+  } else {
+    throw Error("returned text is null");
+  }
+
+}
+
+export async function dalleGenerate(prompt: string, savePath: string) {
+	const response = await openai.images.generate({
+		model: "dall-e-3",
+		prompt: prompt,
+		size: "1024x1792",
+		quality: "standard",
+		n: 1,
+	});
+
+	if (!response.data || !response.data[0]) {
+		throw new Error("No image generated");
+	}
+
+	const url = response.data[0].url;
+	const responseImage = await axios.get(url || "", {
+		responseType: "arraybuffer",
+	});
+	const buffer = Buffer.from(responseImage.data, "binary");
+	
+	try {
+		await fs.promises.writeFile(savePath, buffer);
+	  } catch (error) {
+		console.error("Error saving the file:", error);
+		throw error; // Rethrow the error so it can be handled by the caller
+	  }
+	}

package/examples/youtube-shorts/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@revideo/2d/tsconfig.project.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "dist",
+    "module": "CommonJS"
+  }
+}

package/examples/youtube-shorts/vite.config.ts

@@ -0,0 +1,8 @@
+import {defineConfig} from 'vite';
+import motionCanvas from '@revideo/vite-plugin';
+
+export default defineConfig({
+  plugins: [
+    motionCanvas()
+  ],
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revideo/create",
-  "version": "0.5.11-alpha.1102+0e7e4d50",
+  "version": "0.5.11-alpha.1104+bde9632d",
   "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.11-alpha.1102+0e7e4d50",
-    "@revideo/core": "^0.5.11-alpha.1102+0e7e4d50",
-    "@revideo/ffmpeg": "^0.5.11-alpha.1102+0e7e4d50",
-    "@revideo/renderer": "^0.5.11-alpha.1102+0e7e4d50",
-    "@revideo/ui": "^0.5.11-alpha.1102+0e7e4d50",
-    "@revideo/vite-plugin": "^0.5.11-alpha.1102+0e7e4d50"
+    "@revideo/2d": "^0.5.11-alpha.1104+bde9632d",
+    "@revideo/core": "^0.5.11-alpha.1104+bde9632d",
+    "@revideo/ffmpeg": "^0.5.11-alpha.1104+bde9632d",
+    "@revideo/renderer": "^0.5.11-alpha.1104+bde9632d",
+    "@revideo/ui": "^0.5.11-alpha.1104+bde9632d",
+    "@revideo/vite-plugin": "^0.5.11-alpha.1104+bde9632d"
   },
   "dependencies": {
-    "@revideo/telemetry": "^0.5.11-alpha.1102+0e7e4d50",
+    "@revideo/telemetry": "^0.5.11-alpha.1104+bde9632d",
     "minimist": "^1.2.8",
     "prompts": "^2.4.2"
   },
-  "gitHead": "0e7e4d507edb33100545ec8d052af54452455a04"
+  "gitHead": "bde9632d22c56cf625242c5ea2136a83fd39b952"
 }