CodeToVideo

CodeToVideo is a Next.js application that transforms creative prompts into cinematic product launch videos using AI and cloud rendering. It leverages OpenAI for script generation, Cloudinary for image uploads, and Editframe for video composition and rendering.

Features

• AI-Powered Script Generation: Enter a prompt and get a structured video script (title, subtitle, body, tagline, accent color) generated by OpenAI.
• Cinematic Video Composition: Preview and render videos with dynamic animations and brand styling using Editframe.
• Image Uploads: Upload images to Cloudinary and include them in your video compositions.
• Local & Cloud Rendering: Render videos locally via the Editframe CLI or preview them instantly in the browser.

Tech Stack

• Next.js (App Router)
• React 19
• OpenAI API (for script/content generation)
• Cloudinary (for image uploads)
• Editframe (for video rendering)
• Tailwind CSS (for design system)

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• OpenAI API key
• Cloudinary account (for image uploads)

Installation

1. Clone the repository:

   git clone https://github.com/your-username/codetovideo.git
   cd codetovideo

2. Install dependencies:

   npm install
   # or
   yarn install

3. Create a .env.local file in the root directory and add your credentials:

   OPENAI_API_KEY=your-openai-key
   CLOUDINARY_CLOUD_NAME=your-cloud-name
   CLOUDINARY_API_KEY=your-cloudinary-key
   CLOUDINARY_API_SECRET=your-cloudinary-secret

4. (Optional) Set a custom OpenAI model:

   OPENAI_MODEL=gpt-4o

Running the App

Start the development server:

npm run dev
# or
yarn dev

Visit http://localhost:3000 to use the app.

Rendering Videos

To render videos locally, ensure the dev server is running, then trigger a render from the UI. The Editframe CLI will generate an .mp4 file in public/renders/.

Project Structure

• app/ — Next.js app directory (API routes, pages, preview)
• components/ — React components (Studio, VideoComposition)
• lib/ — API clients and utility libraries (OpenAI, Cloudinary)
• public/renders/ — Output folder for rendered videos

Environment Variables

Ensure the following environment variables are set in .env.local:

• OPENAI_API_KEY — Your OpenAI API key
• CLOUDINARY_CLOUD_NAME — Your Cloudinary cloud name
• CLOUDINARY_API_KEY — Your Cloudinary API key
• CLOUDINARY_API_SECRET — Your Cloudinary API secret
• OPENAI_MODEL — (Optional) OpenAI model to use (default: gpt-4o)

License

MIT