3.6 KiB
3.6 KiB
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).
- High-quality ad posters designed by Gemini 3 Pro Image (
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/genaiSDK 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:
npm install
Development Server
Start the local development server:
npm run dev
Access the app at http://localhost:5173 (default Vite port).
Production Build
Create a production-ready build:
npm run build
Preview the build locally:
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
ApiKeySelectorcomponent that allows users to select/input a key if running in a specific AI Studio environment.
- It checks for
- Suno API: The
sunoService.tscurrently 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/awaitpattern used extensively in services with error handling for API failures. - Type Safety: Strict TypeScript interfaces for all data models and API responses.
Key Workflows
- Input: User submits
BusinessInfo(including images). - 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.
- Output:
GeneratedAssetsare aggregated and displayed in theResultPlayer.