86 lines
3.6 KiB
Markdown
86 lines
3.6 KiB
Markdown
# BizVibe - AI Music Video Generator
|
|
|
|
## Project Overview
|
|
**BizVibe** is a React-based web application designed to automatically generate marketing music videos for businesses. It leverages the power of Google's Gemini ecosystem and Suno AI to create a comprehensive multimedia package including:
|
|
|
|
* **Creative Text:** Ad copy and lyrics/scripts generated by **Gemini 3 Pro**.
|
|
* **Audio:**
|
|
* Custom songs composed by **Suno AI** (V5 model).
|
|
* Professional voiceovers generated by **Gemini TTS** (`gemini-2.5-flash-preview-tts`).
|
|
* **Visuals:**
|
|
* High-quality ad posters designed by **Gemini 3 Pro Image** (`gemini-3-pro-image-preview`).
|
|
* Cinematic video backgrounds created by **Veo** (`veo-3.1-fast-generate-preview`).
|
|
|
|
The application provides an end-to-end flow: collecting business details -> generating assets -> previewing the final music video.
|
|
|
|
## Architecture & Tech Stack
|
|
* **Frontend Framework:** React 19 with Vite.
|
|
* **Language:** TypeScript.
|
|
* **AI Integration:**
|
|
* `@google/genai` SDK for interacting with Gemini and Veo models.
|
|
* Custom REST API integration for Suno AI (via CORS proxy).
|
|
* **Media Processing:** FFmpeg (WASM) is included in dependencies (`@ffmpeg/ffmpeg`), likely for client-side media assembly.
|
|
* **Styling:** Tailwind CSS.
|
|
* **State Management:** React Context / Local State.
|
|
|
|
## Building and Running
|
|
|
|
### Prerequisites
|
|
* Node.js (v18+ recommended)
|
|
* A valid Google Cloud Project with Gemini API access enabled.
|
|
|
|
### Installation
|
|
Install the project dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### Development Server
|
|
Start the local development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
Access the app at `http://localhost:5173` (default Vite port).
|
|
|
|
### Production Build
|
|
Create a production-ready build:
|
|
```bash
|
|
npm run build
|
|
```
|
|
Preview the build locally:
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
### Configuration
|
|
* **API Key:** The application requires a Google Gemini API Key.
|
|
* It checks for `process.env.API_KEY`.
|
|
* It also includes an `ApiKeySelector` component that allows users to select/input a key if running in a specific AI Studio environment.
|
|
* **Suno API:** The `sunoService.ts` currently contains a hardcoded API key and uses a CORS proxy. *Note: This should be externalized in a production environment.*
|
|
|
|
## Development Conventions
|
|
|
|
### File Structure
|
|
* `src/components/`: Reusable UI components (Input forms, Result players, Loading overlays).
|
|
* `src/services/`: specialized modules for API interactions.
|
|
* `geminiService.ts`: Handles Text, Image, Video (Veo), and TTS generation.
|
|
* `sunoService.ts`: Handles music generation via Suno API.
|
|
* `ffmpegService.ts`: Media processing utilities.
|
|
* `src/types.ts`: Centralized TypeScript definitions for domain models (`BusinessInfo`, `GeneratedAssets`, etc.).
|
|
* `App.tsx`: Main application controller handling the generation workflow state machine.
|
|
|
|
### Code Style
|
|
* **Components:** Functional components with Hooks.
|
|
* **Styling:** Utility-first CSS using Tailwind classes.
|
|
* **Async Handling:** `async/await` pattern used extensively in services with error handling for API failures.
|
|
* **Type Safety:** Strict TypeScript interfaces for all data models and API responses.
|
|
|
|
### Key Workflows
|
|
1. **Input:** User submits `BusinessInfo` (including images).
|
|
2. **Processing (Sequential/Parallel):**
|
|
* Text content is generated first.
|
|
* Audio (Song or TTS) is generated using the text.
|
|
* Poster image is generated using uploaded images.
|
|
* Video background is generated using the Poster image.
|
|
3. **Output:** `GeneratedAssets` are aggregated and displayed in the `ResultPlayer`.
|