LANGCHAIN — Can Graphite Labs Create Personalized Videos at Scale?

Real artists ship. — Steve Jobs.

Creating personalized videos at scale is a complex task that involves integrating various technologies and platforms. In this tutorial, we’ll explore how Rubric Labs and Graphite leveraged LangChain and other technologies to create personalized videos for GitHub users at scale.

Tech Stack

Before we delve into the details, let’s take a look at the technologies used in this project:

• GitHub GraphQL API: Used to fetch GitHub stats for the users.
• LangChain.js & OpenAI GPT-4-turbo: Utilized to generate the video_manifest (the script) based on user data.
• Remotion: Employed to create and play the video.
• AWS Lambda & AWS S3: Used to render and store the video.
• Three.js: Utilized for 3D objects.
• Supabase: Employed for database and authentication.
• Next.js 13: Used for frontend.
• Vercel: Employed for hosting.
• Tailwind: Utilized for styling.
• Zod: Used for schema validation.

Overview of the Architecture

The architecture involves several key steps:

1. Authentication and Data Fetching: Authenticating a GitHub user using Supabase auth, fetching user-specific data from the GitHub GraphQL API, and storing it in a PostgreSQL database hosted on Supabase.
2. Generating the Manifest: Passing user stats to OpenAI’s gpt-4-turbo model via LangChain, along with a prompt on how to format its response to generate the video_manifest.
3. Playing the Video: Mapping scenes to React components using Remotion to play the actual video.
4. Rendering the Video: Using Remotion lambda to render the video and storing the file in an S3 bucket.

Code Snippets

Fetching Stats

interface Stats {
  username: string
  year: number
  email: string
  // ... other stats
}

Generating the Manifest

// Prompt to format the AI's response
const prompt = ChatPromptTemplate.fromMessages([
  ['system', `You are Github Video Maker...`],
  ['human', `The GitHub stats are as follows: ${stats}`]
]);

Video Manifest Schema

import z from 'zod'

export const videoSchema = z.object({
  scenes: z.array(
    z.object({
      text: z.string().describe('Displays on screen'),
      animation: z.discriminatedUnion('type', [
        // ... animation types
      ])
    }).describe('Scenes in the video')
  )
})

export type Manifest = z.infer<typeof videoSchema>

Playing the Video

export const Video = ({ video }) => {
  const { fps } = useVideoConfig()

  return video.scenes.map(({ text, animation }, i) => {
    switch (animation?.type) {
      case 'languages':
        return (
          <Languages from={i * fps * 5} languages={animation.languages} />
        )
      // ... other cases
      default:
        return (
          <Conclusion from={i * fps * 5} text={text} />
        )
    }
  })
}

Conclusion

This project showcases the integration of various cutting-edge technologies to create personalized videos at scale. By following this tutorial, you can understand how to leverage LangChain, LLMs, and other tools to build similar projects in 2024.

Ready for takeoff? Give Year in code a try. Translate your keystrokes into stardust. Find solace in your retrospection, let others join you in your journey, and connect with starfarers alike.

Your chronicle awaits.