UGC Video Generator

A lightweight web app for generating short UGC-style product videos from two images: one product shot and one person photo. It uses Google's Gemini stack to build the script, compose the scene, and generate a vertical video with French voiceover and subtitles.

Why I built this

I wanted a faster way to turn static product assets into social-ready UGC concepts without needing to film every variation manually. The goal was to make creative testing faster: upload two images, pick a style and setting, and get a usable video concept in under a minute.

What makes it stand out

• Simple input: upload a product image and a person image, then generate.
• Built for UGC formats: testimonial, review, promo, before/after, and unboxing.
• French-first output: script, UI feedback, and subtitle handling are tailored for French content.
• End-to-end flow: script generation, scene composition, video generation, preview, download, and regenerate.
• No framework overhead: pure HTML, CSS, and JavaScript.

Quick start

Requirements

• A modern browser
• A Google Gemini API key

Install

git clone <your-repo-url>
cd UGC-Video-Generator-web-application

Add your Gemini API key in config.js. For production, move API calls behind a backend or serverless proxy instead of exposing the key in the browser.

Start a local server:

npm run dev

Or:

python3 -m http.server 8000

Then open http://localhost:8000.

How it works

1. Upload a product image and a person image.
2. Choose a content style and background setting.
3. Generate the video.
4. Preview, download, or regenerate.

The current pipeline uses Gemini for product/script/image steps and Veo for video generation. Output is vertical 1080x1920 MP4, designed for short-form social content.

Core features

• Drag-and-drop image upload
• Multiple UGC content styles
• Multiple scene settings
• Real-time generation progress
• French voiceover and subtitle support
• Download and regenerate actions
• Responsive interface

Tech stack

• HTML5
• CSS3
• Vanilla JavaScript
• Google Gemini API
• Veo video generation

Important note for production

This project is currently front-end only. Do not expose a real API key in production client-side code. For a real deployment, route requests through a backend or serverless proxy.

Project structure

index.html   Main UI
styles.css   Styling and responsive layout
app.js       UI state and interactions
api.js       Gemini/Veo integration
config.js    Settings and API configuration
logo.svg     Project logo

Author

Pierre-Henry Soria is a software AI engineer focused on automating content creation workflows.

• Website: pH7.me
• X: @phenrysay
• GitHub: pH-7
• YouTube: pH7Programming
• Bluesky: pierrehenry.dev
• Support: Buy me a coffee

License

UGC Video Generator is generously distributed under the MIT License. Enjoy!