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:

```javascript
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:
```bash
# 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
```bash
# 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
```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
```apache
# 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
```nginx
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
```javascript
// 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 🎨