Text-Video AI Generator

A full-stack AI-powered application that generates videos and images from text prompts. Built with React frontend, Express.js backend, and integrated with Hugging Face AI models and local Stable Diffusion.

🚀 Features

• AI Video Generation: Create videos from text descriptions using Hugging Face models
• AI Image Generation: Generate high-quality images using local Stable Diffusion v1.4
• Modern Web Interface: Beautiful, responsive React frontend with dark/light mode
• Real-time Processing: Live progress indicators and status updates
• Download Support: Direct download of generated content
• Error Handling: Comprehensive error handling with user-friendly messages
• Cross-platform: Works on Windows, macOS, and Linux

🏗️ Architecture

text-video/
├── frontend/              # React frontend application
│   ├── src/              # Source code
│   ├── public/           # Static assets
│   └── package.json      # Frontend dependencies
├── backend-express/       # Express.js backend API
│   ├── index.js          # Main server file
│   ├── generate_image.py # Python image generation script
│   ├── models/           # Local AI models
│   └── package.json      # Backend dependencies
├── venv/                 # Python virtual environment
└── LICENSE               # MIT License

📋 Prerequisites

• Node.js (v18.0.0 or higher)
• npm (v8.0.0 or higher)
• Python (v3.8 or higher)
• CUDA-compatible GPU (optional, for faster image generation)
• Hugging Face Account (for video generation API access)

🛠️ Installation

1. Clone the Repository

git clone <repository-url>
cd text-video

2. Backend Setup

Install Node.js Dependencies

cd backend-express
npm install

Set up Python Environment

# Navigate to project root
cd ..

# Create virtual environment
python -m venv venv

# Activate virtual environment
# Windows:
venv\Scripts\activate
# macOS/Linux:
source venv/bin/activate

# Install Python dependencies
pip install -r backend-express/requirements.txt

# Install PyTorch with CUDA support (recommended)
pip install torch==2.1.0+cu121 torchvision==0.16.0+cu121 --index-url https://download.pytorch.org/whl/cu121

Configure Environment Variables

# Create .env file in backend-express directory
cd backend-express
echo "HF_TOKEN=your_hugging_face_token_here" > .env

3. Frontend Setup

cd frontend
npm install

🏃‍♂️ Running the Application

Start the Backend Server

cd backend-express
npm run dev

The backend will start on http://localhost:3001

Start the Frontend Application

cd frontend
npm start

The frontend will start on http://localhost:3000

Access the Application

Open your browser and navigate to http://localhost:3000

🎯 Usage

Video Generation

1. Select "Video" mode in the interface
2. Enter a detailed text prompt describing the video you want
3. Click "Generate AI Video"
4. Wait for the generation to complete
5. Preview and download your video

Image Generation

1. Select "Image" mode in the interface
2. Enter a detailed text prompt describing the image you want
3. Click "Generate AI Image"
4. Wait for the generation to complete
5. Preview and download your image

Example Prompts

Video Prompts

• "A cat playing in a garden with butterflies flying around"
• "A futuristic city with flying cars and neon lights"
• "Ocean waves crashing against rocky cliffs at sunset"

Image Prompts

• "A serene mountain landscape at golden hour"
• "A cyberpunk street scene with neon signs"
• "A cozy cabin in a snowy forest"

🔧 Configuration

Backend Configuration

Environment Variables

Variable	Description	Required	Default
HF_TOKEN	Hugging Face API token	Yes	-
PORT	Server port	No	3001

AI Models

• Video Generation: ali-vilab/text-to-video-ms-1.7b
• Image Generation: Local Stable Diffusion v1.4

Frontend Configuration

Environment Variables

# Create .env file in frontend directory
REACT_APP_API_URL=http://localhost:3001
REACT_APP_APP_NAME=VideoCreator

📚 API Documentation

Backend Endpoints

Health Check

GET /health

Video Generation

POST /api/generate-ai-video
Content-Type: application/json

{
  "prompt": "Your video description"
}

Image Generation

POST /api/generate-ai-image
Content-Type: application/json

{
  "prompt": "Your image description"
}

For detailed API documentation, see Backend README.

🛡️ Security

• API Token Security: Hugging Face tokens stored in environment variables
• Input Validation: All prompts validated before processing
• CORS Configuration: Properly configured for frontend integration
• Error Handling: Sensitive information not exposed in error messages

🚀 Deployment

Production Build

Frontend

cd frontend
npm run build

Backend

cd backend-express
npm start

🔄 Development

Project Structure

text-video/
├── frontend/                 # React frontend
│   ├── src/
│   │   ├── App.js           # Main application component
│   │   ├── App.css          # Application styles
│   │   └── index.js         # Application entry point
│   ├── public/              # Static assets
│   └── package.json         # Frontend dependencies
├── backend-express/          # Express.js backend
│   ├── index.js             # Main server file
│   ├── generate_image.py    # Python image generation
│   ├── models/              # Local AI models
│   │   └── stable-diffusion-v1-4/
│   ├── generated-images/    # Generated content storage
│   └── package.json         # Backend dependencies
├── venv/                    # Python virtual environment
├── LICENSE                  # MIT License
└── README.md               # This file

🧪 Testing

Frontend Testing

cd frontend
npm test

Backend Testing

cd backend-express
# Test API endpoints
curl http://localhost:3001/health
curl http://localhost:3001/api/test-hf-token

📊 Performance

Optimization Tips

• GPU Acceleration: Use CUDA for faster image generation
• Model Caching: Models are loaded once and reused
• Memory Management: Attention slicing for large models
• Bundle Optimization: Code splitting and lazy loading

Contribution Guidelines

• Follow existing code style
• Add tests for new features
• Update documentation
• Ensure cross-platform compatibility
• Test with both video and image generation

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Related Projects

• Hugging Face Models - AI models used
• Stable Diffusion - Image generation model
• React Documentation - Frontend framework
• Express.js Guide - Backend framework

Acknowledgments

• Hugging Face for providing AI models and API
• Stability AI for Stable Diffusion
• React Team for the amazing frontend framework
• Express.js Team for the robust backend framework
• Open Source Community for continuous improvements

---