ai_qc/frontend/README.md

Visual AI QC - Frontend

This directory contains the frontend web interface for the Visual AI QC application.

Contents

• index.html - Single-page web application interface

Purpose

The frontend is a self-contained HTML file that provides:

• User interface for file uploads
• Authentication with Microsoft Azure AD (MSAL)
• Profile and settings configuration
• Real-time analysis progress tracking
• Results visualization and report downloads
• Reference asset management

Smart Base Path Detection

The frontend automatically detects its deployment location and adjusts API calls accordingly:

function getBasePath() {
    const path = window.location.pathname;
    // Handles both root (/) and subdirectory (/ai_qc/) deployments
    if (path.includes('/ai_qc/')) {
        return path.substring(0, path.indexOf('/ai_qc/') + 7);
    }
    return '/';
}

This means no code changes needed when deploying to different paths!

Deployment Instructions

For Local Testing

Place in any web-accessible directory and open in browser:

# Example: Open directly
open index.html

# Or serve with Python
cd frontend/
python3 -m http.server 8080
# Open http://localhost:8080

For Production (Web Server)

Apache

# Copy to web root
sudo cp index.html /var/www/html/ai_qc/

# Or serve from subdirectory
sudo mkdir -p /var/www/html/ai_qc
sudo cp index.html /var/www/html/ai_qc/

Nginx

server {
    listen 80;
    server_name your-domain.com;

    location / {
        root /var/www/html/ai_qc;
        index index.html;
    }
}

Configuration Requirements

The frontend requires the backend API to be accessible. Configure your web server to proxy API requests:

Apache Proxy Configuration

# Proxy API requests to backend
ProxyPass /api http://localhost:7183/api
ProxyPassReverse /api http://localhost:7183/api

# Or for subdirectory deployment
ProxyPass /ai_qc/api http://localhost:7183/api
ProxyPassReverse /ai_qc/api http://localhost:7183/api

Nginx Proxy Configuration

location /api {
    proxy_pass http://localhost:7183;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

Backend Connection

The frontend communicates with the backend through these API endpoints:

• /api/profiles - Get available QC profiles
• /api/start_analysis - Start file analysis
• /api/progress/{session_id} - Check analysis progress
• /api/output_files - List saved reports
• /auth/login - Authenticate with MSAL token
• /auth/logout - Sign out
• /auth/status - Check authentication status

Authentication

The frontend uses Microsoft Authentication Library (MSAL) for authentication:

• PKCE Flow for secure single-page application authentication
• Popup-based login for seamless user experience
• httpOnly cookies managed by backend for session security

MSAL Configuration Required

// Configured in index.html
const msalConfig = {
    auth: {
        clientId: "YOUR_AZURE_CLIENT_ID",
        authority: "https://login.microsoftonline.com/YOUR_TENANT_ID"
    }
};

Update these values in index.html or set via backend configuration.

Browser Compatibility

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Requires JavaScript enabled for full functionality.

File Size

• index.html: ~110 KB (self-contained)
• No external dependencies (MSAL loaded from CDN)

Updates and Maintenance

To update the frontend:

1. Edit index.html locally
2. Test changes in browser
3. Deploy updated file to web server
4. Clear browser cache if needed

No server restart required for frontend-only changes!

Related Documentation

• Backend Setup: See ../backend/README.md
• Full Migration Guide: See ../MIGRATION_GUIDE.md
• Deployment Structure: See ../DEPLOYMENT_RESTRUCTURE.md

Support

For issues or questions:

• Check browser console (F12) for JavaScript errors
• Verify backend API is running and accessible
• Check authentication configuration (Azure AD client ID)
• Review network tab for failed API requests

---

Visual AI QC Frontend - Simple, secure, and smart 🎨