Remotion Deep Dive into the Automatic Video Tutorials on Coding with GPT-4 and Remotion
Tags: gpt3, webdev, video, remotion
Published: 2023-03-29 06:30:00


![JSON to video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sp1rz538ttxlkagur0lk.gif)


## 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:

```javascript
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:

```javascript
<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:

```javascript
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:

```javascript
{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.