Brandtech Sandbox

A secure AI tools sandbox environment for exploring generative AI capabilities. This repository contains the main landing page and video streaming infrastructure for the Brandtech Sandbox platform.

🚀 Features

• 12 AI Tools - LLM Chat, Image Generation, Text-to-Speech, Video Processing, and more
• Secure Video Streaming - Training videos served via Google Cloud Storage with presigned URLs
• Responsive Design - Works on desktop and mobile devices
• Dark Mode Support - Toggle between light and dark themes
• Modal Video Player - Professional in-browser video viewing experience

🛠 Tech Stack

• Frontend: HTML5, CSS3, JavaScript, Bootstrap 4
• Video API: Node.js + Express
• Cloud Storage: Google Cloud Storage (GCS)
• Authentication: Microsoft Azure AD (currently disabled for build)

📦 Installation

Prerequisites

• Node.js 16+ and npm
• Google Cloud SDK (gcloud CLI)
• Access to Google Cloud Project: optical-brandtech
• MAMP or similar local web server (for development)

1. Clone and Setup

git clone git@bitbucket.org:zlalani/btg-sandbox-index.git
cd btg-sandbox-index

2. Set Up Google Cloud Storage

# Set your project
export PROJECT_ID="optical-brandtech"
gcloud config set project $PROJECT_ID

# Create the private video bucket
gsutil mb gs://optical-brandtech-videos
gsutil acl set private gs://optical-brandtech-videos

# Create service account for video access
gcloud iam service-accounts create brandtech-video-service \
    --description="Service account for brandtech sandbox video access" \
    --display-name="Brandtech Video Service"

# Grant permissions
gcloud projects add-iam-policy-binding $PROJECT_ID \
    --member="serviceAccount:brandtech-video-service@$PROJECT_ID.iam.gserviceaccount.com" \
    --role="roles/storage.objectViewer"

# Create service account key
gcloud iam service-accounts keys create ./video-api/brandtech-video-key.json \
    --iam-account=brandtech-video-service@$PROJECT_ID.iam.gserviceaccount.com

# Set up CORS for development
cat > cors.json << 'EOF'
[
  {
    "origin": ["http://localhost:*", "http://127.0.0.1:*", "file://"],
    "method": ["GET", "HEAD", "OPTIONS"],
    "responseHeader": ["Content-Type", "Content-Range", "Accept-Ranges"],
    "maxAgeSeconds": 3600
  }
]
EOF

gsutil cors set cors.json gs://optical-brandtech-videos

3. Upload Training Videos

# Download videos from SharePoint first, then upload all at once
gsutil -m cp "/path/to/videos/"*.{mov,mp4} gs://optical-brandtech-videos/

4. Start the Video API Server

cd video-api
npm install
npm start

The API server will run on http://localhost:3001

5. Serve the Frontend

Use MAMP or any web server to serve the main directory. The page should be accessible at your local development URL.

🎬 Video System

How It Works

1. Secure Storage: Videos are stored in a private GCS bucket
2. API Endpoint: Node.js server generates presigned URLs (valid for 2 hours)
3. Modal Player: Videos open in a responsive modal with full controls
4. No Downloads: Videos stream directly in the browser

Video API Endpoints

• GET /api/health - Health check
• GET /api/videos - List all available videos
• GET /api/video/:videoName - Get presigned URL for specific video

Adding New Videos

1. Upload video to GCS bucket: gsutil cp video.mov gs://optical-brandtech-videos/
2. Add mapping in video-api/server.js videoMap object
3. Add link in HTML with data-video="video-name" attribute
4. Restart API server

🔧 Available AI Tools

Row 1

• LLM Chat - Multi-model AI chat interface
• Image Generator Advanced - Advanced image creation and editing
• Text to Speech 2.0 - Voice generation from text
• Video Query - AI-powered video analysis

Row 2

• Image Scale - AI-powered image upscaling
• Topaz Video Upscaler 2.0 - Video resolution enhancement
• Vivid Alt Text Generator - Accessibility text generation
• Render Mermaid Charts - Diagram and flowchart creation

Row 3

• Markdown to HTML Formatter - Document formatting
• Video Subtitle Generator - Automatic subtitle creation
• Clipping Magic - Background removal from images
• Sound Effects - AI-generated audio effects

⚠️ Security Notice

IMPORTANT: Authentication is currently DISABLED for build/development purposes.

• Microsoft Azure AD authentication is commented out
• All content is publicly accessible
• Security features are hidden in HTML comments
• Re-enable authentication before production deployment

To Re-enable Security:

1. Uncomment MSAL script includes in index.html
2. Uncomment authentication buttons and login flow
3. Change #protected-content { display: flex; } back to display: none;
4. Uncomment authorization.js script reference
5. Update CORS settings for production domain

🌐 Deployment

Development

• Use MAMP or similar local server
• API runs on localhost:3001
• Videos served via presigned URLs

Production

• Deploy frontend to web hosting service
• Deploy API server to cloud platform (Google Cloud Run, etc.)
• Update CORS settings with production domain
• Re-enable authentication system
• Configure proper SSL certificates

📁 Project Structure

├── index.html              # Main landing page
├── assets/                  # Static assets (CSS, JS, images)
│   ├── css/                # Stylesheets
│   ├── js/                 # JavaScript files
│   └── img/                # Icons and images
├── video-api/              # Video streaming API
│   ├── server.js           # Express API server
│   ├── package.json        # Dependencies
│   └── brandtech-video-key.json  # GCS service account key
├── video-link-helper.js    # Frontend video handling
└── README.md              # This file

🤝 Contributing

This is a private sandbox environment. Changes should be tested locally before committing to the repository.

📞 Support

For issues or questions about the Brandtech Sandbox, please contact the development team.

---

⚠️ This is a development/testing environment - NOT FOR PRODUCTION USE