{"id":36898,"date":"2025-02-21T07:00:00","date_gmt":"2025-02-21T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36898"},"modified":"2025-02-21T12:06:13","modified_gmt":"2025-02-21T20:06:13","slug":"generate-video-summary-openai","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/generate-video-summary-openai","title":{"rendered":"Generate a Video Summary With OpenAI"},"content":{"rendered":"\n

Manually summarizing videos can be time-consuming and inefficient, making it challenging to extract key information quickly. Copying and pasting video transcripts into a note-taking tool \u2014 or hunting down written summaries \u2014 is one way to go about it, but it\u2019s not exactly efficient, or, let\u2019s be honest, fun. This is where AI technology steps in to do the heavy lifting for us.\u00a0<\/p>\n\n\n\n

In this blog post, we\u2019ll use Cloudinary’s video transcription services and OpenAI’s <\/a>l<\/a>arge <\/a>l<\/a>anguage <\/a>m<\/a>odel<\/a> <\/a>(<\/a>LLM<\/a>)<\/a> capabilities to generate accurate transcriptions and concise summaries. <\/p>\n\n\n\n

To follow this tutorial, you’ll need a Cloudinary account<\/a> to handle video uploads and transcriptions, a ChatGPT Plus account<\/a> to access the text generation API, and a basic understanding of Next.js and TypeScript. <\/p>\n\n\n\n

The complete source code for the project is available on GitHub<\/a>.<\/p>\n\n\n\n

Setting Up a Next.js Project<\/h2>\n\n\n\n

To get started, create a Next.js app by running the following command:<\/p>\n\n\n

<code<\/span>><\/span>npx create-next-app@14.2 cloudinary-video-summary<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
When prompted, select TypeScript<\/strong>, Tailwind CSS<\/strong>, and App Router<\/strong> to set them up in your application. <\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Next, navigate to the newly created app folder:<\/p>\n\n\n
<code<\/span>><\/span>cd cloudinary-video-summary<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Install the required dependencies, including the Cloudinary Node.js SDK<\/strong> and the OpenAI client library<\/strong>:<\/p>\n\n\n
<code<\/span>><\/span>npm install cloudinary openai<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Once your project is set up, run the development server:<\/p>\n\n\n
<code<\/span>><\/span>npm run dev<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Your Next.js project should now be running at http:\/\/localhost:3000<\/code>. <\/p>\n\n\n\n
\"\"\/
Cloudinary Dashboard<\/figcaption><\/figure>\n\n\n\n
To access the text generation capabilities, you\u2019ll need an OpenAI API key. Go to the OpenAI API key page<\/a> to create a new API key. On the API key page, click Create new secret key<\/strong>. This key will enable text generation<\/a> interaction with the OpenAI API.<\/p>\n\n\n\n
\"\"\/
Create an API Key<\/figcaption><\/figure>\n\n\n\n
In your project\u2019s root directory, create a .env.local file and store the Cloudinary and Open API key credentials, as shown below.<\/p>\n\n\n
\/\/ .env.local\n\nNEXT_PUBLIC_OPENAI_API_KEY=<openai_api_key<\/span>><\/span>\n\nNEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=<cloudinary_api_key<\/span>><\/span>\n\nNEXT_PUBLIC_CLOUDINARY_API_KEY=<cloudinary_api_secret<\/span>><\/span>\n\nCLOUDINARY_API_SECRET=<cloudinary_cloud_name<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
Note:<\/strong> 
Never share your credentials publicly.<\/p>\n<\/div>\n\n\n
Activating the Video Transcription Add-On<\/h2>\n\n\n\n
Before creating a transcript, you\u2019ll need to activate the Cloudinary Google AI Video Transcription add-on. Cloudinary provides automatic video transcription services using the Google AI Video Transcription add-on<\/a>, generating speech-to-text transcripts of videos. The add-on supports transcription of videos in any language.<\/p>\n\n\n\n
Navigate to the Add-on<\/strong> section in Cloudinary, click the Google AI Video Transcription<\/strong> service, and subscribe to the free plan.<\/p>\n\n\n\n
\"This
Head to the Add-on section<\/figcaption><\/figure>\n\n\n\n
\"\"\/
Subscribe to the Free plan<\/figcaption><\/figure>\n\n\n\n
Activating the video transcript Add-on will set up the transcription service needed to transcribe the uploaded video in the next step.<\/p>\n\n\n\n
Upload a Video to Cloudinary<\/h2>\n\n\n\n
Next, you’ll need to upload a video file to initiate the transcription process. To do this, you\u2019ll create a form with an input element to accept the video file you want to transcribe and a button to trigger the upload process. <\/p>\n\n\n\n
Navigate to pages.tsx<\/code> file in the src\/app<\/code> folder and create the form and input element, as shown below.<\/p>\n\n\n
\/\/ src\/app\/pages.tsx<\/span>\n\n\"use client\"<\/span>\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n\n\u00a0 return<\/span> (\n\n\u00a0 <div<\/span> className<\/span>=\"grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]\"<\/span>><\/span>\n\n\u00a0 \u00a0 <nav<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <div<\/span> className<\/span>=\"flex justify-center my-10 items-center rounded-md border-[1px] px-20 py-2 border-blue-800\"<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <form<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <input<\/span> type<\/span>=\"file\"<\/span> name<\/span>=\"video\"<\/span> accept<\/span>=\"video\/*\"<\/span> \/><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <button<\/span> className<\/span>=\"bg-blue-800 text-white p-2 rounded-md uppercase tracking-wider text-sm\"<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Upload\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/form<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 {!summary && <span<\/span> className<\/span>=\"text-xl tracking-wide font-semibold text-center\"<\/span>><\/span>Upload a video to get an instant summary.<\/span<\/span>><\/span>}\n\n\u00a0 \u00a0 \u00a0 <\/nav<\/span>><\/span>\n\n\u00a0 \u00a0 <\/div<\/span>><\/span><\/span>\n\n\u00a0 );\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, create a function within the same pages.tsx file that handles, appends, and sends the video file to an API route. Then, connect the function to the form’s submission event to trigger it upon submission.<\/p>\n\n\n
\/\/ src\/app\/pages.tsx\u00a0<\/span>\n\nexport default<\/span> function<\/span> Home<\/span>()<\/span> <\/span>{\u00a0\n\n\u00a0 const<\/span> [isLoading, setIsLoading] = useState<boolean>(false<\/span>);\n\nconst<\/span> handleUpload = async (e: React.FormEvent<HTMLFormElement>) => {\n\n\u00a0 \u00a0 e.preventDefault(); \u00a0\/\/ Prevents the form from refreshing the page<\/span>\n\n\u00a0 \u00a0 setIsLoading(true<\/span>)\n\n\u00a0 \u00a0 const<\/span> formData = new<\/span> FormData(e.currentTarget);\n\n\u00a0 \u00a0 try<\/span> {\n\n\u00a0 \u00a0 \u00a0 const<\/span> response = await fetch('\/api\/upload'<\/span>, {\n\n\u00a0 \u00a0 \u00a0 \u00a0 method: 'POST'<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 body: formData,\n\n\u00a0 \u00a0 \u00a0 });\n\n\u00a0 \u00a0 \u00a0 if<\/span> (response.ok) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 const<\/span> data = await response.json();\n\n\u00a0 \u00a0 \u00a0 \u00a0 console.log('Upload successful'<\/span>, data);\n\n\u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 } catch<\/span> (error) {\n\n\u00a0 \u00a0 \u00a0 console.error('Error uploading file:'<\/span>, error);\n\n\u00a0 \u00a0 }\n\n\u00a0 };\n\n\u00a0 return<\/span> (\n\n\u00a0 ...\n\n\u00a0 \u00a0 <form onSubmit={handleUpload}>\n\n\u00a0 \u00a0 ... \/\/ input and button elements<\/span>\n\n\u00a0 \u00a0 <\/form>\n\n\u00a0 ...\n\n\u00a0 )}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
In the code above, a FormData<\/code> object is created to extract the video from the form automatically. Then, the form data is sent to the \/api\/upload<\/code> endpoint on the server via a POST request. Finally, the response is logged to the console to see if the upload is successful.<\/p>\n\n\n\n
Next, you\u2019ll define an API route handler file to upload the video to Cloudinary. Navigate to the src\/app<\/code> folder and create a folder called api. In the api folder, create another folder called upload. Then, add a file called route.ts<\/code> and add the following code: <\/p>\n\n\n
\/\/src\/api\/upload\/route.tsx<\/span>\n\nimport<\/span> { NextResponse } from<\/span> 'next\/server'<\/span>;\n\nimport<\/span> cloudinary from<\/span> 'cloudinary'<\/span>;\n\n\/\/ Configure Cloudinary with your account details<\/span>\n\ncloudinary.v2.config({\n\n\u00a0 cloud_name<\/span>: process.env.CLOUDINARY_CLOUD_NAME,\n\n\u00a0 api_key<\/span>: process.env.CLOUDINARY_API_KEY,\n\n\u00a0 api_secret<\/span>: process.env.CLOUDINARY_API_SECRET,\n\n});\n\nexport<\/span> async<\/span> function<\/span> POST<\/span>(req: Request, res: NextResponse<\/span>) <\/span>{\n\n\u00a0 const<\/span> formData = await<\/span> req.formData();\n\n\u00a0 const<\/span> file = formData.get('video'<\/span>) as<\/span> File;\n\n\u00a0 const<\/span> buffer: Buffer = Buffer.from(await<\/span> file.arrayBuffer());\n\n\u00a0 const<\/span> cloud_name: string | undefined<\/span> = process.env.CLOUDINARY_CLOUD_NAME;\n\n\u00a0 const<\/span> videoFile: string = `data:${file.type}<\/span>;base64,${buffer.toString(\n\n\u00a0 \u00a0 'base64'<\/span>\n\n\u00a0 )}<\/span>`<\/span>;\n\n\u00a0 \/\/ Upload the video and generate the transcript URL in a chain<\/span>\n\n\u00a0 try<\/span> {\n\n\u00a0 \u00a0 const<\/span> uploadResult = await<\/span> cloudinary.v2.uploader\n\n\u00a0 \u00a0 \u00a0 .upload(videoFile, {\n\n\u00a0 \u00a0 \u00a0 \u00a0 public_id<\/span>: `videos\/${Date<\/span>.now()}<\/span>`<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 resource_type<\/span>: 'video'<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 raw_convert<\/span>: 'google_speech'<\/span>,\n\n\u00a0 \u00a0 \u00a0 })\n\n\u00a0 \u00a0 const<\/span> videoUrl = uploadResult.secure_url;\n\n\u00a0 \u00a0 const<\/span> transcriptFileUrl = `https:\/\/res.cloudinary.com\/${cloud_name}<\/span>\/raw\/upload\/v${uploadResult.version + 1<\/span>\n\n\u00a0 \u00a0 \u00a0 }<\/span>\/${uploadResult.public_id}<\/span>.transcript`<\/span>;\n\n\u00a0 \u00a0 return<\/span> NextResponse.json(\n\n\u00a0 \u00a0 \u00a0 { uploadResult, transcriptFileUrl, videoUrl },\n\n\u00a0 \u00a0 \u00a0 { status<\/span>: 200<\/span> }\n\n\u00a0 \u00a0 );\n\n\u00a0 } catch<\/span> (error: any) {\n\n\u00a0 \u00a0 return<\/span> NextResponse.json({ message<\/span>: error.message }, { status<\/span>: 500<\/span> })\n\n\u00a0 }\n\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Let\u2019s break down the actions taken in each section of the code snippet above:<\/p>\n\n\n\n
After initializing the project, navigate to Cloudinary\u2019s developer dashboard<\/a> to get all the required credentials for this project.<\/p>\n\n\n\n