Remotion Deep Dive into the Automatic Video Tutorials on Coding with GPT-4 and Remotion

Introduction

In the previous article, I introduced the automatic video tutorials on coding, a project that leverages GPT-4 and Remotion to create video tutorials based on JSON inputs generated by GPT-4 fine tune model. In this article, we will focus on how I used the Remotion.js, react-syntax-highlighter library and the getBoundingClientRect method to create the video tutorials.

There is the project :
https://github.com/AdrianGuery/gpt4-gpt3-video-generation

Using Real Code: React-Syntax-Highlighter Library

The react-syntax-highlighter library is a powerful tool that provides syntax highlighting for code snippets in React applications. I chose this library to display the code in the video tutorial project because it supports a wide range of programming languages and offers various customization options.

After installing the library, I imported the necessary components and styles in the React application:

import {Prism as SyntaxHighlighter} from "react-syntax-highlighter";
import {atomDark} from "react-syntax-highlighter/dist/esm/styles/prism";

Next, I used the SyntaxHighlighter component to display the code snippet from the JSON input. I passed the language and style props to customize the appearance of the code:

<SyntaxHighlighter
  customStyle={{width: "100%", height: "100%", fontSize: "20px"}}
  language={example4.language}
  style={atomDark}
  showLineNumbers
  wrapLines={true}
  wrapLongLines
>
  {code}
</SyntaxHighlighter>

Highlighting Code Snippets with getBoundingClientRect

To highlight specific parts of the code snippet, I needed to create a rectangle that surrounds each highlighted code segment. I accomplished this using the getBoundingClientRect method, which returns the size of an element and its position relative to the viewport.

I created a function that finds the first and last words of the highlighted code segment and calculates the bounding rectangle surrounding them:

useEffect(() => {
  ...
  var firstRect = firstElement?.getBoundingClientRect();
  var lastRect = lastElement?.getBoundingClientRect();
  if (firstRect && lastRect) {
    setCurrentHighlightProps({
      x: firstRect.x,
      y: firstRect.y,
      large: lastRect.x - firstRect.x + lastRect.width,
    });
  }
}, [currentIndex]);

Finally, I used this function to create a rectangle for each highlighted code segment in the JSON input:

{currentIndex >= 0 &&
  currentIndex < example4.highlightExplanations.length &&
  currentHighlightProps && (
    <>
      <Highlight
        x={currentHighlightProps.x}
        y={currentHighlightProps.y}
        large={currentHighlightProps.large}
      />
      <Subtitle
        text={
          example4.highlightExplanations[currentIndex].explanation
        }
      />
    </>
  )}

With these highlight bounds, I was able to generate video tutorials that not only display the code snippet, but also highlight and explain specific parts of the code.

Conclusion

In this detailed walkthrough, we explored how we implemented the automatic video tutorials on coding project using GPT-4, Remotion, react-syntax-highlighter library, and the getBoundingClientRect method with real code snippets. By combining these technologies, I was able to create a powerful tool that generates video tutorials based on JSON inputs, helping developers learn and understand code snippets more effectively.