proofmode 0.9.0

# ProofMode Web Example

A Next.js web application demonstrating ProofMode proof generation and verification directly in the browser using WebAssembly.

## Features

- **Proof Verification**: Upload and verify media files with ProofMode proofs
- **Proof Generation**: Generate cryptographic proofs for images and videos
- **Camera Integration**: Capture photos directly from the browser
- **Location Support**: Include GPS coordinates in proofs (with user permission)
- **Device Information**: Automatically captures browser and system metadata
- **Offline Operation**: Runs entirely in the browser with no server uploads

## Technology Stack

- **Next.js 15**: Latest React framework with App Router and optimized builds
- **Material-UI (MUI) 7**: Latest Material Design components
- **TypeScript 5.8**: Modern type-safe development
- **React 19**: Latest React with improved performance
- **Web Workers**: Background processing for WASM operations
- **WebAssembly**: ProofMode Rust library compiled to WASM
- **pnpm**: Fast, efficient package management

## Getting Started

### Prerequisites

1. Install pnpm globally if you haven't already:
   ```bash
   npm install -g pnpm
   ```

2. Build the ProofMode WASM module:
   ```bash
   cd ../.. # Go to project root
   cargo make wasm-pack
   ```

3. Copy the WASM build to the web app:
   ```bash
   cp -r pkg/* examples/web/public/wasm/
   ```

   Or use the provided script:
   ```bash
   cd examples/web
   pnpm build:wasm
   ```

### Installation

```bash
cd examples/web
pnpm install
```

Or use the setup script that installs dependencies and builds WASM:
```bash
pnpm setup
```

### Development

```bash
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser.

### Production Build

```bash
pnpm build
pnpm start
```

## Architecture

### Web Worker Integration

The app uses a Web Worker (`proofmode.worker.js`) to handle WASM operations:
- Prevents blocking the UI thread
- Manages WASM module initialization
- Handles file processing in the background
- Provides progress updates

### Security Features

- **No Server Upload**: All processing happens client-side
- **HTTPS Required**: Camera and location APIs require secure context
- **CORS Headers**: Configured for SharedArrayBuffer support
- **Passphrase Protection**: Optional encryption for generated proofs

### Browser APIs Used

- **File API**: For reading uploaded files
- **Geolocation API**: For GPS coordinates (optional)
- **MediaDevices API**: For camera access
- **Web Workers**: For background processing
- **WebAssembly**: For running ProofMode library

## UI Components

### Verify Tab
- Drag-and-drop file upload
- Displays verification results for:
  - C2PA manifests
  - PGP signatures
  - OpenTimestamps
  - EXIF metadata
- Shows detailed proof information

### Generate Tab
- File selection or camera capture
- Optional passphrase protection
- Location inclusion toggle
- Device information display
- Proof download functionality

## Deployment

### Vercel

```bash
pnpm add -g vercel
vercel
```

Note: Ensure Vercel is configured to use pnpm by adding a `package.json` with:
```json
{
  "packageManager": "pnpm@8.14.0"
}
```

### Docker

```dockerfile
FROM node:18-alpine AS builder

# Install pnpm
RUN corepack enable
RUN corepack prepare pnpm@8.14.0 --activate

WORKDIR /app

# Copy package files
COPY package.json pnpm-lock.yaml* ./
COPY .npmrc* ./

# Install dependencies
RUN pnpm install --frozen-lockfile

# Copy source and build
COPY . .
RUN pnpm build

# Production stage
FROM node:18-alpine
RUN corepack enable
RUN corepack prepare pnpm@8.14.0 --activate

WORKDIR /app

# Copy built application
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./
COPY --from=builder /app/pnpm-lock.yaml* ./
COPY --from=builder /app/.npmrc* ./

# Install production dependencies
RUN pnpm install --frozen-lockfile --prod

EXPOSE 3000
CMD ["pnpm", "start"]
```

### Static Export

For static hosting (with limitations):

```bash
pnpm build
# Files in 'out' directory can be served statically
```

Note: Static export requires updating `next.config.js` with `output: 'export'`

## Browser Compatibility

- **Chrome/Edge**: Full support (88+)
- **Firefox**: Full support (89+)
- **Safari**: Limited WASM threading support (15+)
- **Mobile**: Camera and location features require HTTPS

## Troubleshooting

### WASM Module Not Found
Ensure the WASM files are copied to `public/wasm/` directory.

### Camera Not Working
- Check HTTPS is enabled (required for MediaDevices API)
- Verify camera permissions in browser settings

### Location Access Denied
- Enable location services in browser
- Check site permissions

## Future Enhancements

- [ ] Add QR code generation for proof sharing
- [ ] Support batch file processing
- [ ] Implement proof bundle export
- [ ] Add more visualization for verification results
- [ ] Support for additional file formats
- [ ] Progressive Web App (PWA) features