KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #codex #ai-agents #claude-code #dsh #dsh-plugin #cli #macos #ai-agent #deepseek-harness #open-source

UGC-Video-Generator-web-application

★ 1 Open GitHub ↗

A complete web application that generates authentic User-Generated Content (UGC) style videos using Google's Gemini AI models. Upload product and person images, select a content style and setting, then automatically generate professional UGC videos with French voiceover and subtitles

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 analyze the product, write the French script, compose the scene, and generate a vertical Veo video.

## 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 one simple flow.

## 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 prompts and UI feedback 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 from [Google AI Studio](https://aistudio.google.com/apikey)

### Install

```bash
git clone https://github.com/AwesomeMobileApps/UGC-Video-Generator-web-application.git
cd UGC-Video-Generator-web-application
```

Start a local server:

```bash
python3 -m http.server 8000
```

Or:

```bash
npm run dev
```

Then open `http://localhost:8000` and add your Gemini API key in the app. The key is stored only in your browser's local storage.

## 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 a vertical 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 script and voiceover direction
- 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

```text
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
tests/       Focused API response tests
LICENSE      MIT license
```

## Author

[![Pierre-Henry Soria](https://s.gravatar.com/avatar/a210fe61253c43c869d71eaed0e90149?s=200)](https://PH7.me)

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

- Website: [pH7.me](https://ph7.me)
- X: [@phenrysay](https://x.com/phenrysay)
- GitHub: [pH-7](https://github.com/pH-7)
- YouTube: [pH7Programming](https://www.youtube.com/@pH7Programming)
- Bluesky: [pierrehenry.dev](https://bsky.app/profile/pierrehenry.dev)
- Support: [Buy me a coffee](https://ko-fi.com/phenry)

## License

**UGC Video Generator** is generously distributed under the *[MIT License](./LICENSE)*. Enjoy!

UGC-Video-Generator-web-application

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README