Demo

An app for generating cinematic videos using the Veo 3 API and proceeding to 3D rendering using multiple AI 3D rendering techniques.

• Text Prompt Input: Enter video descriptions via textarea or upload text files
• Veo 3 API Integration: Generate 8-second cinematic videos using veo-3.0-generate-preview
• Real-time Loading: Beautiful spinner animations during video generation
• Video Preview: In-browser MP4 video player with controls
• Regeneration: Edit prompts and regenerate videos
• 3D Processing: Proceed to 3D rendering with finalized videos
• Modern UI: Clean, responsive design with gradient backgrounds

live-it/
├── client/                 # React frontend
│   ├── public/
│   ├── src/
│   │   ├── App.tsx        # Main application component
│   │   ├── App.css        # Application styles
│   │   ├── index.tsx      # React entry point
│   │   └── index.css      # Global styles
│   ├── package.json
│   └── tsconfig.json
├── server/                 # Node.js backend
│   ├── index.js           # Express server
│   ├── package.json
│   └── .env               # Environment variables
├── package.json           # Root package.json
└── README.md

• Node.js (v16 or higher)
• npm or yarn
• Veo 3 API key

1. Clone the repository

   git clone <repository-url>
   cd epicvideo3d

2. Install root dependencies

   npm install

3. Install server dependencies

   cd server
   npm install
   cd ..

4. Install client dependencies

   cd client
   npm install
   cd ..

5. Environment Configuration

   cd server
   cp .env.example .env

   Edit server/.env with your API credentials:

   PORT=5000
   VEO3_API_KEY=your_actual_veo3_api_key
   VEO3_API_URL=https://api.veo3.com/v1/generate-preview
   

Run both frontend and backend simultaneously:

npm run dev

This will start:

• Frontend: http://localhost:3000
• Backend: http://localhost:5000

Backend only:

npm run server

Frontend only:

npm run client

• POST /api/generate-video - Generate video from text prompt
• GET /api/video-status/:jobId - Check video generation status
• POST /api/proceed-to-3d - Initiate 3D rendering process
• GET /api/health - Health check endpoint

1. Enter Prompt: Type a video description or upload a text file
2. Generate: Click "Generate Video" to call Veo 3 API
3. Wait: Loading spinner shows while video is being generated
4. Preview: Generated MP4 video appears in the player
5. Edit/Regenerate: Modify prompt and regenerate if needed
6. Proceed: Click "Proceed to 3D" to send video for 3D processing

• React 18 with TypeScript
• Modern CSS with gradients and animations
• Responsive design for mobile/desktop
• File upload handling

• Node.js with Express
• Axios for API calls
• CORS enabled
• Environment variable configuration
• Error handling and logging

##Production Deployment

1. Build the frontend:

   cd client
   npm run build

2. Start the server:

   cd server
   npm start

3. Configure environment variables for production

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

Make sure you run gh repo clone donmccurdy/three-gltf-viewer in the root node. We used this open source project for our basic preview

MIT License