castad-pre-v0.3/castad-data/GEMINI.md

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).

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:

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 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.