script-generation-implemented

Author: ARYPROGRAMMER

app/api/get-video-script/route.jsx

@@ -0,0 +1,15 @@
+import { generateCompletion } from "@/configs/aimodel";
+import { NextResponse } from "next/server";
+
+
+export async function POST(req){
+
+    try {
+        const { prompt } = await req.json(); 
+        const completion = await generateCompletion(prompt);
+        return new NextResponse(completion.choices[0].message.content, { status: 200 });
+      } catch (e) {
+
+        return new NextResponse({"Internal Server Error":e}, { status: 500 });
+      }
+}

app/dashboard/create-new/_components/Loading.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {
+    AlertDialog,
+    AlertDialogContent,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import Image from 'next/image'
+
+function CustomLoading({loading}) {
+  return (
+    <AlertDialog open={loading}>
+        <AlertDialogTitle>
+        <AlertDialogContent className='bg-white'>
+           <div className='bg-white flex flex-col items-center my-10 justify-center'>
+            <Image src='/soon.gif' width={100} height={100} alt='loading' />
+            <h2>
+                Generating your Video...Keep Calm
+            </h2>
+           </div>
+        </AlertDialogContent>
+        </AlertDialogTitle>
+    </AlertDialog>
+
+  )
+}
+
+export default CustomLoading

app/dashboard/create-new/page.jsx

@@ -5,12 +5,17 @@ import SelectStyle from './_components/SelectStyle'
 import {Outfit} from 'next/font/google'
 import SelectDuration from './_components/SelectDuration'
 import { Button } from '@/components/ui/button'
+import axios from 'axios'
+import CustomLoading from './_components/Loading'
 
 const outfit = Outfit({subsets: ["latin-ext"],weight: "600"});
 
 function CreateNew() {
 
   const [formData,setFormData]= useState([])
+  const [loading,setLoading]=useState(false)
+  const [videoScript,setVideoScript]=useState()
+
   const onHandleChange=(fieldName,fieldValue)=>{
     console.log(fieldName,fieldValue)
     setFormData(
@@ -20,6 +25,26 @@ function CreateNew() {
       })
     )
   }
+
+  const onCreateClickHandler=()=>{
+    GetVideoScript();
+  }
+
+  //Script to generate video
+  const GetVideoScript = async ()=>{
+    setLoading(true)
+    const fixedPrompt = 
+    "Write a Script that generates "+formData.duration+" video on the topic "+formData.topic+" along with AI Image prompt in "+formData.imageStyle+" Style for each scene and give me the result in JSON format with imagePrompt and contentText as field and without the word json or anything else, just the response. No Plain text";
+    const result = await axios.post('/api/get-video-script',
+      
+      {prompt: fixedPrompt}
+      ).then((response) => {
+        console.log(response.data)
+        setVideoScript(response.data)
+      })
+      setLoading(false)
+  }
+
   return (
     <div className='md:px-20'>
       <h2 className={`text-4xl text-primary text-center ${outfit.className}`}>Create A New Video</h2>
@@ -35,11 +60,13 @@ function CreateNew() {
         <SelectDuration onUserSelect={onHandleChange}/>
 
         {/* Create Button */}
-        <Button className='mt-10 w-full h-10'>
+        <Button className='mt-10 w-full h-10' onClick={onCreateClickHandler}>
           Generate The Video
         </Button>
 
       </div>
+
+      <CustomLoading loading={loading}/>
     </div>
   )
 }

components/ui/alert-dialog.jsx

@@ -0,0 +1,99 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref} />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props} />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+    {...props} />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props} />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

configs/aimodel.js

@@ -0,0 +1,32 @@
+import OpenAI from "openai";
+
+
+const openai = new OpenAI({
+  apiKey: process.env.NEXT_PUBLIC_OPENAI_API_KEY,
+});
+
+export async function generateCompletion(prompt) {
+    try {
+      const completion = await openai.chat.completions.create({
+        model: "gpt-4o",
+        temperature: 0.5,
+        top_p: 0.95,
+        max_tokens: 8192,
+        messages: [
+          {
+            role: "system",
+            content: "You are a Video Script Writer and AI Image Prompt Engineer. You do all the tasks with sincerity.",
+          },
+          {
+            role: "user",
+            content: prompt, 
+          },
+        ],
+      });
+      
+      return completion;
+    } catch (error) {
+      console.error("Error in AI completion: ", error);
+      throw error;
+    }
+  }