@revideo/create 0.5.8-beta.1082 → 0.5.9-alpha.1086

package/examples/reddit-post-video/src/render.ts

@@ -0,0 +1,157 @@
+import { createClient } from "@deepgram/sdk";
+import { renderVideo } from "@revideo/renderer";
+import axios from "axios";
+import * as fs from "fs";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+
+export interface Word {
+  punctuated_word: string;
+  start: number;
+  end: number;
+}
+
+export interface MetaData {
+  audioFile: string;
+  text: Word[];
+  textColor: string;
+}
+
+export const deepgramClient = createClient(
+  process.env.DEEPGRAM_API_KEY,
+);
+
+async function getPostText(postUrl: string) {
+  const response = await axios.get(postUrl + ".json");
+  const responseData = response.data;
+
+  return (
+    responseData[0].data.children[0].data.title +
+    ".\n" +
+    responseData[0].data.children[0].data.selftext
+  );
+}
+
+async function voiceNameToId(voiceName: string): Promise<string | null> {
+  const url = "https://api.elevenlabs.io/v1/voices";
+  const headers = {
+    "Content-Type": "application/json",
+    "xi-api-key": process.env.ELEVEN_API_KEY,
+  };
+
+  try {
+    const response = await axios.get(url, { headers });
+    const voices = response.data.voices;
+    const voice = voices.find((v: any) => v.name === voiceName);
+    return voice ? voice.voice_id : null;
+  } catch (error) {
+    console.error("Error fetching voices:", error);
+    throw error;
+  }
+}
+
+async function textToSpeech(post: string, voiceId: string, modelId: string) {
+  const url = `https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`;
+  const headers = {
+    "Content-Type": "application/json",
+    "xi-api-key": process.env.ELEVEN_API_KEY,
+  };
+  const data = {
+    model_id: modelId,
+    text: post,
+  };
+
+  try {
+    const response = await axios.post(url, data, {
+      headers,
+      responseType: "arraybuffer",
+    });
+    return response.data;
+  } catch (error) {
+    console.error("Error making text-to-speech request:", error);
+    throw error;
+  }
+}
+
+export async function speechToText(filePath: string) {
+  const { result } = await deepgramClient.listen.prerecorded.transcribeFile(
+    fs.readFileSync(filePath),
+    {
+      model: "nova-2",
+      smart_format: true,
+    },
+  );
+
+  return result;
+}
+
+async function main() {
+  const argv = await yargs(hideBin(process.argv)).options({
+    voice: {
+      alias: "v",
+      describe: "The name of the eleven labs voice to use",
+      type: "string",
+      default: "Sarah",
+    },
+    post: {
+      alias: "p",
+      describe: "The Reddit post URL",
+      type: "string",
+      default:
+        "https://www.reddit.com/r/TrueOffMyChest/comments/1bllfgk/i_hate_having_old_parents/",
+    },
+    textcolor: {
+      alias: "c",
+      describe: "color of the text",
+      type: "string",
+      default: "red",
+    },
+    onlyMetadata: {
+      alias: "m",
+      describe: "only save metadata and do not render the video",
+      type: "boolean",
+      default: false,
+    },
+  }).argv;
+
+  const url = argv.post;
+  const voiceName = argv.voice;
+  const textColor = argv.textcolor;
+
+  const post = await getPostText(url);
+  const voiceId = await voiceNameToId(voiceName);
+  const ttsRes = await textToSpeech(post, voiceId, "eleven_multilingual_v2");
+
+  await fs.writeFileSync("./output/audio.wav", ttsRes);
+
+  const transcriptionResponse = await speechToText("./output/audio.wav");
+  const words =
+    transcriptionResponse.results.channels[0].alternatives[0].words.map(
+      (word: any) => ({
+        punctuated_word: word.punctuated_word,
+        start: word.start,
+        end: word.end,
+      }),
+    );
+
+  const metaData: MetaData = {
+    audioFile: "./output/audio.wav",
+    text: words,
+    textColor: textColor,
+  };
+
+  fs.writeFileSync("./metadata.json", JSON.stringify(metaData, null, 2));
+  console.log("saved metadata to ./metadata.json");
+
+  if (!argv.onlyMetadata) {
+    const file = renderVideo({
+      projectFile: "./vite.config.ts", 
+      variables: { data: metaData },
+      settings: { logProgress: true }
+    });
+
+    console.log(`rendered video to ${file}`)
+  }
+}
+
+main();

package/examples/reddit-post-video/src/revideo.d.ts

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

package/examples/reddit-post-video/src/scenes/example.meta

@@ -0,0 +1,5 @@
+{
+  "version": 0,
+  "timeEvents": [],
+  "seed": 3377806303
+}

package/examples/reddit-post-video/src/scenes/example.tsx

@@ -0,0 +1,74 @@
+import { Audio, Txt, Video, View2D, makeScene2D } from "@revideo/2d";
+import { createRef, useScene, waitFor } from "@revideo/core";
+import { MetaData, Word } from "../render";
+
+export default makeScene2D(function* (view) {
+  const videoRef = createRef<Video>();
+  const data: MetaData = useScene().variables.get("data", {
+    audioFile: "hi",
+    text: [],
+    textColor: "red",
+  })();
+
+  yield view.add(
+    <>
+      <Video
+        ref={videoRef}
+        volume={0}
+        src={"https://revideo-example-assets.s3.amazonaws.com/minecraft.mp4"}
+        play={true}
+        size={"100%"}
+      />
+      <Audio src={data.audioFile} play={true} />
+    </>,
+  );
+
+  let waitBefore = data.text[0].start;
+
+  for (let i = 0; i < data.text.length; i++) {
+    const currentClip = data.text[i];
+    const nextClipStart =
+      i < data.text.length - 1 ? data.text[i + 1].start : null;
+    const isLastClip = i === data.text.length - 1;
+    const waitAfter = isLastClip ? 1 : 0;
+    yield* displayTextClip(
+      currentClip,
+      waitBefore,
+      waitAfter,
+      view,
+      data.textColor,
+    );
+    waitBefore = nextClipStart !== null ? nextClipStart - currentClip.end : 0;
+  }
+});
+
+function* displayTextClip(
+  textClip: Word,
+  waitBefore: number,
+  waitAfter: number,
+  view: View2D,
+  textColor: string,
+) {
+  const textRef = createRef<Txt>();
+  yield* waitFor(waitBefore);
+  view.add(
+    <Txt
+      fontSize={100}
+      fontWeight={800}
+      ref={textRef}
+      fontFamily={"Raleway"}
+      textWrap={true}
+      textAlign={"center"}
+      fill={textColor}
+      width={"70%"}
+      lineWidth={2}
+      shadowOffset={10}
+      shadowBlur={30}
+      shadowColor={"black"}
+    >
+      {textClip.punctuated_word}
+    </Txt>,
+  );
+  yield* waitFor(textClip.end - textClip.start + waitAfter);
+  textRef().remove();
+}

package/examples/reddit-post-video/tsconfig.json

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

package/examples/reddit-post-video/vite.config.ts

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

package/examples/rive-explanation-video/README.md

@@ -0,0 +1,9 @@
+# Rive Explanation Video
+
+This is the code for a small video showing how you can use Rive animations in Revideo using the `<Rive />` component.
+
+
+https://github.com/user-attachments/assets/0302a3c2-65e4-4392-8b6c-90c4a505d23d
+
+
+