Serve AI models from Cloudflare R2 via Worker binding

- hooks.server.ts intercepts /models/* requests and serves from R2
- Removed prebuild model fetch from apps/web/package.json
- Models uploaded to shieldcv-models R2 bucket (130 MB)
- Browser sees same-origin /models/ requests, CSP stays clean
- Cache-control: immutable for permanent browser caching
- No model files in build output, bypasses Pages 25 MB limit

Author: cameronhopkin

apps/web/package.json

@@ -5,7 +5,6 @@
   "type": "module",
   "scripts": {
     "dev": "vite dev",
-    "prebuild": "node ../../scripts/fetch-models.mjs",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .js,.ts,.svelte",

apps/web/src/hooks.server.ts

@@ -1,17 +1,43 @@
 import type { Handle } from '@sveltejs/kit';
 import { getSecurityHeaders } from '$lib/security';
 
-function extractCspNonce(response: Response): string | undefined {
-  return response.headers.get('content-security-policy')?.match(/'nonce-([^']+)'/)?.[1];
+const CONTENT_TYPES: Record<string, string> = {
+  '.json': 'application/json',
+  '.onnx': 'application/octet-stream',
+  '.wasm': 'application/wasm',
+};
+
+function getContentType(path: string): string {
+  const ext = path.slice(path.lastIndexOf('.'));
+  return CONTENT_TYPES[ext] || 'application/octet-stream';
 }
 
 export const handle: Handle = async ({ event, resolve }) => {
-  const response = await resolve(event);
-  const nonce = extractCspNonce(response);
+  // Serve AI model files from R2 bucket
+  if (event.url.pathname.startsWith('/models/')) {
+    const key = event.url.pathname.slice(1); // strip leading slash
+    const bucket = /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    (event.platform as any)?.env?.MODELS;
+    if (!bucket) {
+      return new Response('Model storage not configured', { status: 503 });
+    }
+    const object = await bucket.get(key);
+    if (!object) {
+      return new Response('Model not found', { status: 404 });
+    }
+    return new Response(object.body, {
+      headers: {
+        'content-type': getContentType(key),
+        'cache-control': 'public, max-age=31536000, immutable',
+        'access-control-allow-origin': '*',
+      },
+    });
+  }
 
+  const response = await resolve(event);
+  const nonce = response.headers.get('content-security-policy')?.match(/'nonce-([^']+)'/)?.[1];
   for (const [header, value] of Object.entries(getSecurityHeaders(event.url.pathname, { nonce }))) {
     response.headers.set(header, value);
   }
-
   return response;
 };