BillEye - Billboard Compliance Monitoring System

An advanced billboard compliance monitoring system for Odisha, powered by Google Cloud Vision API for AI-powered image analysis.

🚀 Features

• AI-Powered Analysis: Uses Google Cloud Vision API for text detection, object recognition, and image labeling
• Compliance Monitoring: Automatically detects violations in billboard content, size, and location
• Real-time Dashboard: Comprehensive analytics and reporting interface
• Multi-language Support: English, Hindi, and Odia language support
• Responsive Design: Works seamlessly on desktop and mobile devices
• Interactive Maps: Visual representation of billboard locations and violations

🛠️ Technology Stack

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Backend: Node.js, Express.js
• AI/ML: Google Cloud Vision API
• Maps: Leaflet.js
• Charts: Chart.js
• Styling: Custom CSS with glassmorphism design

📋 Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Google Cloud Platform account with Vision API enabled
• Service account credentials JSON file

🔧 Installation & Setup

1. Clone the Repository

git clone <repository-url>
cd billeye-final

2. Install Dependencies

npm install

3. Google Cloud Vision API Setup

1. Create a Google Cloud Project (if you don't have one)

   • Go to Google Cloud Console
   • Create a new project or select an existing one

2. Enable Vision API

   • Navigate to "APIs & Services" > "Library"
   • Search for "Cloud Vision API"
   • Click "Enable"

3. Create Service Account

   • Go to "APIs & Services" > "Credentials"
   • Click "Create Credentials" > "Service Account"
   • Fill in the details and create the account

4. Download Service Account Key

   • Click on the created service account
   • Go to "Keys" tab
   • Click "Add Key" > "Create New Key"
   • Choose JSON format and download
   • Rename the downloaded file to gen-lang-client-0467919735-806b1880565e.json
   • Place it in the project root directory

4. Start the Application

# Development mode (with auto-restart)
npm run dev

# Production mode
npm start

The application will be available at http://localhost:3000

🎯 Usage

Upload & Analyze Billboards

1. Navigate to Upload Section

   • Click the hamburger menu (mobile) or sidebar (desktop)
   • Select "Upload & Detect"

2. Upload Images

   • Drag and drop billboard images or click to browse
   • Supported formats: JPG, PNG, WEBP (up to 10MB)

3. View Analysis Results

   • AI will analyze the image for:
     • Text content violations
     • Size violations
     • Location violations
   • Results show confidence scores and detailed analysis

Dashboard Features

• Statistics Overview: Total reports, violations found, pending reviews
• Compliance Trends: Visual charts showing compliance rates over time
• Recent Activity: Latest reports and their status

Map View

• Interactive Maps: View billboard locations on an interactive map
• Heat Maps: Toggle between climate and billboard violation heat maps
• Location Detection: Automatic GPS location detection for mobile users

🔍 AI Analysis Capabilities

Text Detection

• Extracts and analyzes text content from billboard images
• Detects inappropriate content (alcohol, tobacco, gambling, etc.)
• Provides confidence scores for text recognition

Object Recognition

• Identifies billboards, signs, and advertising structures
• Analyzes size and positioning
• Detects structural violations

Image Labeling

• Categorizes image content and context
• Identifies restricted areas (schools, hospitals, religious sites)
• Provides environmental context analysis

🚨 Compliance Violation Detection

Content Violations

• High Severity: Inappropriate content (alcohol, tobacco, gambling)
• Medium Severity: Misleading advertising
• Low Severity: Minor content issues

Size Violations

• Large Billboards: Exceeding size regulations
• Oversized Signs: Beyond permitted dimensions
• Structural Issues: Improper installation

Location Violations

• Restricted Areas: Near schools, hospitals, religious sites
• Unauthorized Locations: Areas not zoned for advertising
• Safety Violations: Blocking traffic signs or signals

🌐 Multi-language Support

The application supports three languages:

• English (en) - Default
• Hindi (hi) - हिंदी
• Odia (od) - ଓଡ଼ିଆ

Change language through Settings in the hamburger menu.

🎨 Theme Options

Three theme options available:

• System: Follows device theme preference
• Light: Light mode with clean interface
• Dark: Dark mode for better visibility

📱 Mobile Responsiveness

• Touch-friendly Interface: Optimized for mobile devices
• Hamburger Menu: Easy navigation on small screens
• Gesture Support: Swipe and touch interactions
• GPS Integration: Location services for mobile users

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

PORT=3000
NODE_ENV=development
GOOGLE_CLOUD_PROJECT_ID=your-project-id

Customization

• Violation Rules: Modify detection rules in server.js
• UI Themes: Customize colors in style.css
• Language: Add new translations in app.js

🚀 Deployment

Local Development

npm run dev

Production Deployment

npm start

Docker Deployment

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

📊 API Endpoints

Health Check

GET /api/health

Billboard Analysis

POST /api/analyze-billboard
Content-Type: application/json

{
  "imageData": "base64-encoded-image-data"
}

🔒 Security Considerations

• Service Account: Keep credentials secure and never commit to version control
• CORS: Configure CORS settings for production deployment
• Rate Limiting: Implement rate limiting for API endpoints
• Input Validation: Validate all user inputs and file uploads

🐛 Troubleshooting

Common Issues

1. Vision API Not Working

   • Check service account credentials
   • Verify Vision API is enabled
   • Check billing is set up

2. Server Won't Start

   • Ensure Node.js version is 16+
   • Check all dependencies are installed
   • Verify port 3000 is available

3. Image Upload Fails

   • Check file size (max 10MB)
   • Verify file format (JPG, PNG, WEBP)
   • Check browser console for errors

Debug Mode

Enable debug logging by setting:

DEBUG=billeye:* npm start

📈 Performance Optimization

• Image Compression: Automatically compresses large images
• Caching: Implements response caching for repeated requests
• Lazy Loading: Images load only when needed
• Progressive Enhancement: Works without JavaScript for basic functionality

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

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

🆘 Support

For support and questions:

• Check the troubleshooting section
• Review the API documentation
• Open an issue on GitHub

🔄 Version History

• v1.0.0: Initial release with basic functionality
• v2.0.0: Added Google Cloud Vision API integration
• v3.0.0: Enhanced UI/UX with glassmorphism design
• v4.0.0: Added multi-language support
• v5.0.0: Improved mobile responsiveness
• v6.0.0: Fixed hamburger menu scroll issues

---

BillEye - An Eye on Every Billboard 🏛️