Freezmo: self-hosted notes-to-activities study app

Next.js 15 app that turns photos, PDFs, DOCX/PPTX and text into a swipeable
feed of AI-generated activities (flashcards, multiple choice, true/false,
fill-in-the-blank, matching, ordering, short answer) using the user's own
Ollama models.

Highlights:
- All AI calls run in server route handlers; the browser never talks to Ollama.
- Bring-your-own-key mode (default): the key lives only in the browser and is
  sent per-request; server, local-daemon and shared-key modes also supported.
- Client-side document extraction (pdf.js, mammoth, jszip) with scanned-PDF
  page rendering for the vision model; notes stay in their original language.
- ChatGPT-style shell: collapsible sidebar / mobile drawer, neutral token-based
  light + dark themes, folder organisation, PWA (manifest, SW, offline page).
- Strict JSON validation with zod + auto-repair, rate limiting, and request
  guards (cross-origin, body-size, API-key sanitising).
- setup.sh bootstraps deps, .env.local and a production build.

Gitignore excludes .env*, the generated pdf.js worker and local scratch files.

lib/image.ts

@@ -0,0 +1,131 @@
+"use client";
+
+/** Client-side image helpers: validation, resizing and compression. */
+
+export const MAX_IMAGE_DIMENSION = 1600;
+export const JPEG_QUALITY = 0.82;
+export const MAX_FILE_BYTES = 20 * 1024 * 1024; // 20 MB per source file
+export const MAX_IMAGES = 8;
+export const ACCEPTED_TYPES = ["image/jpeg", "image/png", "image/webp", "image/gif", "image/heic", "image/heif"];
+
+export type PreparedImage = {
+  id: string;
+  dataUrl: string;
+  name: string;
+  width: number;
+  height: number;
+  bytes: number;
+};
+
+export function isImageFile(file: File): boolean {
+  if (file.type.startsWith("image/")) return true;
+  return /\.(jpe?g|png|webp|gif|heic|heif|bmp)$/i.test(file.name);
+}
+
+export function describeFileError(file: File): string | null {
+  if (!isImageFile(file)) return `"${file.name}" is not an image.`;
+  if (file.size > MAX_FILE_BYTES) return `"${file.name}" is larger than 20 MB.`;
+  return null;
+}
+
+/** Rough byte length of a base64 data URL. */
+export function dataUrlBytes(dataUrl: string): number {
+  const index = dataUrl.indexOf(",");
+  if (index === -1) return dataUrl.length;
+  return Math.floor(((dataUrl.length - index - 1) * 3) / 4);
+}
+
+async function loadBitmap(blob: Blob, fallbackName: string): Promise<{ width: number; height: number; draw: (ctx: CanvasRenderingContext2D, w: number, h: number) => void }> {
+  // Prefer createImageBitmap: it respects EXIF orientation and is fast.
+  if (typeof createImageBitmap === "function") {
+    try {
+      const bitmap = await createImageBitmap(blob, { imageOrientation: "from-image" });
+      return {
+        width: bitmap.width,
+        height: bitmap.height,
+        draw: (ctx, w, h) => ctx.drawImage(bitmap, 0, 0, w, h),
+      };
+    } catch {
+      /* fall through to the <img> path (Safari/HEIC edge cases) */
+    }
+  }
+
+  const url = URL.createObjectURL(blob);
+  try {
+    const image = await new Promise<HTMLImageElement>((resolve, reject) => {
+      const element = new Image();
+      element.onload = () => resolve(element);
+      element.onerror = () => reject(new Error(`Could not read "${fallbackName}".`));
+      element.src = url;
+    });
+    return {
+      width: image.naturalWidth || image.width,
+      height: image.naturalHeight || image.height,
+      draw: (ctx, w, h) => ctx.drawImage(image, 0, 0, w, h),
+    };
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+
+/**
+ * Resize to max 1600px and re-encode as JPEG to keep uploads small.
+ * Accepts any image blob (photos, canvas output from PDF pages, images
+ * embedded in documents).
+ */
+export async function prepareImageFromBlob(blob: Blob, name = "image.jpg"): Promise<PreparedImage> {
+  const bitmap = await loadBitmap(blob, name);
+  const scale = Math.min(1, MAX_IMAGE_DIMENSION / Math.max(bitmap.width, bitmap.height));
+  const width = Math.max(1, Math.round(bitmap.width * scale));
+  const height = Math.max(1, Math.round(bitmap.height * scale));
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Your browser could not process this image.");
+  ctx.fillStyle = "#ffffff"; // flatten transparency before JPEG encoding
+  ctx.fillRect(0, 0, width, height);
+  bitmap.draw(ctx, width, height);
+
+  const dataUrl = canvas.toDataURL("image/jpeg", JPEG_QUALITY);
+
+  return {
+    id: `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`,
+    dataUrl,
+    name,
+    width,
+    height,
+    bytes: dataUrlBytes(dataUrl),
+  };
+}
+
+/** Resize to max 1600px and re-encode as JPEG to keep uploads small. */
+export async function prepareImage(file: File): Promise<PreparedImage> {
+  return prepareImageFromBlob(file, file.name || "photo.jpg");
+}
+
+/** Extract image files from a paste or drop event. */
+export function imageFilesFromDataTransfer(data: DataTransfer | null): File[] {
+  if (!data) return [];
+  const files: File[] = [];
+  if (data.files?.length) {
+    for (const file of Array.from(data.files)) if (isImageFile(file)) files.push(file);
+  }
+  if (data.items?.length) {
+    for (const item of Array.from(data.items)) {
+      if (item.kind !== "file") continue;
+      const file = item.getAsFile();
+      if (file && isImageFile(file) && !files.some((f) => f.name === file.name && f.size === file.size)) {
+        files.push(file);
+      }
+    }
+  }
+  return files;
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}