feat(image-service): standalone processor

.dockerignore

@@ -1,14 +1,28 @@
 node_modules
+**/node_modules
 .next
+**/.next
 .git
 # .npmrc is allowed as it contains the registry template
 dist
+**/dist
 build
+**/build
 out
+**/out
 coverage
+**/coverage
 .vercel
+**/.vercel
 .turbo
+**/.turbo
 *.log
+**/*.log
 .DS_Store
+**/.DS_Store
 .pnpm-store
+**/.pnpm-store
 .gitea
+**/.gitea
+models
+**/models

.env

@@ -1,5 +1,5 @@
 # Project
-IMAGE_TAG=v1.8.10
+IMAGE_TAG=v1.8.6
 PROJECT_NAME=at-mintel
 PROJECT_COLOR=#82ed20
 GITEA_TOKEN=ccce002e30fe16a31a6c9d5a414740af2f72a582

.gitea/workflows/pipeline.yml

@@ -192,6 +192,9 @@ jobs:
           - image: directus
             file: packages/infra/docker/Dockerfile.directus
             name: Directus (Base)
+          - image: image-processor
+            file: apps/image-service/Dockerfile
+            name: Image Processor
     steps:
       - name: Checkout
         uses: actions/checkout@v4

apps/image-service/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "image-service",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "tsx watch src/index.ts",
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "lint": "eslint src"
+  },
+  "dependencies": {
+    "@mintel/image-processor": "workspace:*",
+    "fastify": "^4.26.2"
+  },
+  "devDependencies": {
+    "@mintel/eslint-config": "workspace:*",
+    "@mintel/tsconfig": "workspace:*",
+    "@types/node": "^20.0.0",
+    "tsx": "^4.7.1",
+    "typescript": "^5.0.0"
+  }
+}

apps/image-service/src/index.ts

@@ -0,0 +1,80 @@
+import Fastify from "fastify";
+import { processImageWithSmartCrop } from "@mintel/image-processor";
+
+const fastify = Fastify({
+  logger: true,
+});
+
+fastify.get("/unsafe/:options/:urlSafeB64", async (request, reply) => {
+  // Compatibility endpoint for old imgproxy calls (optional, but requested by some systems sometimes)
+  // For now, replacing logic in clients is preferred. So we just redirect or error.
+  return reply
+    .status(400)
+    .send({ error: "Legacy imgproxy API not supported. Use /process" });
+});
+
+fastify.get("/process", async (request, reply) => {
+  const query = request.query as {
+    url?: string;
+    w?: string;
+    h?: string;
+    q?: string;
+    format?: string;
+  };
+
+  const { url } = query;
+  const width = parseInt(query.w || "800", 10);
+  const height = parseInt(query.h || "600", 10);
+  const quality = parseInt(query.q || "80", 10);
+  const format = (query.format || "webp") as "webp" | "jpeg" | "png" | "avif";
+
+  if (!url) {
+    return reply.status(400).send({ error: 'Parameter "url" is required' });
+  }
+
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      return reply
+        .status(response.status)
+        .send({
+          error: `Failed to fetch source image: ${response.statusText}`,
+        });
+    }
+
+    const arrayBuffer = await response.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+
+    const processedBuffer = await processImageWithSmartCrop(buffer, {
+      width,
+      height,
+      format,
+      quality,
+    });
+
+    reply.header("Content-Type", `image/${format}`);
+    reply.header("Cache-Control", "public, max-age=31536000, immutable");
+    return reply.send(processedBuffer);
+  } catch (err) {
+    fastify.log.error(err);
+    return reply
+      .status(500)
+      .send({ error: "Internal Server Error processing image" });
+  }
+});
+
+fastify.get("/health", async () => {
+  return { status: "ok" };
+});
+
+const start = async () => {
+  try {
+    await fastify.listen({ port: 8080, host: "0.0.0.0" });
+    console.log(`Server listening on 8080`);
+  } catch (err) {
+    fastify.log.error(err);
+    process.exit(1);
+  }
+};
+
+start();

apps/image-service/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@mintel/tsconfig/base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "noEmit": false
+  },
+  "include": ["src/**/*"]
+}

package.json

@@ -59,6 +59,18 @@
   },
   "version": "1.8.6",
   "pnpm": {
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "@sentry/cli",
+      "@swc/core",
+      "@tensorflow/tfjs-node",
+      "canvas",
+      "core-js",
+      "esbuild",
+      "sharp",
+      "unrs-resolver",
+      "vue-demi"
+    ],
     "overrides": {
       "next": "16.1.6",
       "@sentry/nextjs": "10.38.0"

packages/image-processor/package.json

@@ -18,6 +18,7 @@
     "lint": "eslint src"
   },
   "dependencies": {
+    "@tensorflow/tfjs-node": "^4.22.0",
     "@vladmandic/face-api": "^1.7.13",
     "canvas": "^2.11.2",
     "sharp": "^0.33.2"

packages/image-processor/scripts/download-models.ts

@@ -1,48 +1,55 @@
-import * as fs from 'node:fs';
-import * as path from 'node:path';
-import * as https from 'node:https';
+import * as fs from "node:fs";
+import * as path from "node:path";
+import * as https from "node:https";
 
-const MODELS_DIR = path.join(process.cwd(), 'models');
-const BASE_URL = 'https://raw.githubusercontent.com/vladmandic/face-api/master/model/';
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const MODELS_DIR = path.join(__dirname, "..", "models");
+const BASE_URL =
+  "https://raw.githubusercontent.com/vladmandic/face-api/master/model/";
 
 const models = [
-    'tiny_face_detector_model-weights_manifest.json',
-    'tiny_face_detector_model-shard1'
+  "tiny_face_detector_model-weights_manifest.json",
+  "tiny_face_detector_model-shard1",
 ];
 
 async function downloadModel(filename: string) {
-    const destPath = path.join(MODELS_DIR, filename);
-    if (fs.existsSync(destPath)) {
-        console.log(`Model ${filename} already exists.`);
-        return;
-    }
+  const destPath = path.join(MODELS_DIR, filename);
+  if (fs.existsSync(destPath)) {
+    console.log(`Model ${filename} already exists.`);
+    return;
+  }
 
-    return new Promise((resolve, reject) => {
-        console.log(`Downloading ${filename}...`);
-        const file = fs.createWriteStream(destPath);
-        https.get(BASE_URL + filename, (response) => {
-            response.pipe(file);
-            file.on('finish', () => {
-                file.close();
-                resolve(true);
-            });
-        }).on('error', (err) => {
-            fs.unlinkSync(destPath);
-            reject(err);
+  return new Promise((resolve, reject) => {
+    console.log(`Downloading ${filename}...`);
+    const file = fs.createWriteStream(destPath);
+    https
+      .get(BASE_URL + filename, (response) => {
+        response.pipe(file);
+        file.on("finish", () => {
+          file.close();
+          resolve(true);
         });
-    });
+      })
+      .on("error", (err) => {
+        fs.unlinkSync(destPath);
+        reject(err);
+      });
+  });
 }
 
 async function main() {
-    if (!fs.existsSync(MODELS_DIR)) {
-        fs.mkdirSync(MODELS_DIR, { recursive: true });
-    }
+  if (!fs.existsSync(MODELS_DIR)) {
+    fs.mkdirSync(MODELS_DIR, { recursive: true });
+  }
 
-    for (const model of models) {
-        await downloadModel(model);
-    }
+  for (const model of models) {
+    await downloadModel(model);
+  }
 
-    console.log('All models downloaded successfully!');
+  console.log("All models downloaded successfully!");
 }
 
 main().catch(console.error);

packages/image-processor/src/processor.ts

@@ -1,139 +1,140 @@
-import * as faceapi from '@vladmandic/face-api';
+import * as faceapi from "@vladmandic/face-api";
 // Provide Canvas fallback for face-api in Node.js
-import { Canvas, Image, ImageData } from 'canvas';
-import sharp from 'sharp';
-import * as path from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { Canvas, Image, ImageData } from "canvas";
+import sharp from "sharp";
+import * as path from "node:path";
+import { fileURLToPath } from "node:url";
 
-// @ts-ignore
+// @ts-expect-error FaceAPI does not have type definitions for monkeyPatch
 faceapi.env.monkeyPatch({ Canvas, Image, ImageData });
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 // Path to the downloaded models
-const MODELS_PATH = path.join(__dirname, '..', 'models');
+const MODELS_PATH = path.join(__dirname, "..", "models");
 
 let isModelsLoaded = false;
 
 async function loadModels() {
-    if (isModelsLoaded) return;
-    await faceapi.nets.tinyFaceDetector.loadFromDisk(MODELS_PATH);
-    isModelsLoaded = true;
+  if (isModelsLoaded) return;
+  await faceapi.nets.tinyFaceDetector.loadFromDisk(MODELS_PATH);
+  isModelsLoaded = true;
 }
 
 export interface ProcessImageOptions {
-    width: number;
-    height: number;
-    format?: 'webp' | 'jpeg' | 'png' | 'avif';
-    quality?: number;
+  width: number;
+  height: number;
+  format?: "webp" | "jpeg" | "png" | "avif";
+  quality?: number;
 }
 
 export async function processImageWithSmartCrop(
-    inputBuffer: Buffer,
-    options: ProcessImageOptions
+  inputBuffer: Buffer,
+  options: ProcessImageOptions,
 ): Promise<Buffer> {
-    await loadModels();
+  await loadModels();
 
-    // Load image via Canvas for face-api
-    const img = new Image();
-    img.src = inputBuffer;
+  // Load image via Canvas for face-api
+  const img = new Image();
+  img.src = inputBuffer;
 
-    // Detect faces
-    const detections = await faceapi.detectAllFaces(
-        // @ts-ignore
-        img,
-        new faceapi.TinyFaceDetectorOptions()
-    );
+  // Detect faces
+  const detections = await faceapi.detectAllFaces(
+    // @ts-expect-error FaceAPI does not have type definitions for monkeyPatch
+    img,
+    new faceapi.TinyFaceDetectorOptions(),
+  );
 
-    const sharpImage = sharp(inputBuffer);
-    const metadata = await sharpImage.metadata();
+  const sharpImage = sharp(inputBuffer);
+  const metadata = await sharpImage.metadata();
 
-    if (!metadata.width || !metadata.height) {
-        throw new Error('Could not read image metadata');
+  if (!metadata.width || !metadata.height) {
+    throw new Error("Could not read image metadata");
+  }
+
+  // If faces are found, calculate the bounding box containing all faces
+  if (detections.length > 0) {
+    let minX = metadata.width;
+    let minY = metadata.height;
+    let maxX = 0;
+    let maxY = 0;
+
+    for (const det of detections) {
+      const { x, y, width, height } = det.box;
+      if (x < minX) minX = Math.max(0, x);
+      if (y < minY) minY = Math.max(0, y);
+      if (x + width > maxX) maxX = Math.min(metadata.width, x + width);
+      if (y + height > maxY) maxY = Math.min(metadata.height, y + height);
     }
 
-    // If faces are found, calculate the bounding box containing all faces
-    if (detections.length > 0) {
-        let minX = metadata.width;
-        let minY = metadata.height;
-        let maxX = 0;
-        let maxY = 0;
+    const faceBoxWidth = maxX - minX;
+    const faceBoxHeight = maxY - minY;
 
-        for (const det of detections) {
-            const { x, y, width, height } = det.box;
-            if (x < minX) minX = Math.max(0, x);
-            if (y < minY) minY = Math.max(0, y);
-            if (x + width > maxX) maxX = Math.min(metadata.width, x + width);
-            if (y + height > maxY) maxY = Math.min(metadata.height, y + height);
-        }
+    // Calculate center of the faces
+    const centerX = Math.floor(minX + faceBoxWidth / 2);
+    const centerY = Math.floor(minY + faceBoxHeight / 2);
 
-        const faceBoxWidth = maxX - minX;
-        const faceBoxHeight = maxY - minY;
+    // Provide this as a focus point for sharp's extract or resize
+    // We can use sharp's resize with `position` focusing on crop options,
+    // or calculate an exact bounding box. However, extracting an exact bounding box
+    // and then resizing usually yields the best results when focusing on a specific coordinate.
 
-        // Calculate center of the faces
-        const centerX = Math.floor(minX + faceBoxWidth / 2);
-        const centerY = Math.floor(minY + faceBoxHeight / 2);
+    // A simpler approach is to crop a rectangle with the target aspect ratio
+    // centered on the faces, then resize. Let's calculate the crop box.
 
-        // Provide this as a focus point for sharp's extract or resize
-        // We can use sharp's resize with `position` focusing on crop options,
-        // or calculate an exact bounding box. However, extracting an exact bounding box
-        // and then resizing usually yields the best results when focusing on a specific coordinate.
+    const targetRatio = options.width / options.height;
+    const currentRatio = metadata.width / metadata.height;
 
-        // A simpler approach is to crop a rectangle with the target aspect ratio 
-        // centered on the faces, then resize. Let's calculate the crop box.
+    let cropWidth = metadata.width;
+    let cropHeight = metadata.height;
 
-        const targetRatio = options.width / options.height;
-        const currentRatio = metadata.width / metadata.height;
-
-        let cropWidth = metadata.width;
-        let cropHeight = metadata.height;
-
-        if (currentRatio > targetRatio) {
-            // Image is wider than target, calculate new width
-            cropWidth = Math.floor(metadata.height * targetRatio);
-        } else {
-            // Image is taller than target, calculate new height
-            cropHeight = Math.floor(metadata.width / targetRatio);
-        }
-
-        // Try to center the crop box around the faces
-        let cropX = Math.floor(centerX - cropWidth / 2);
-        let cropY = Math.floor(centerY - cropHeight / 2);
-
-        // Keep crop box within image bounds
-        if (cropX < 0) cropX = 0;
-        if (cropY < 0) cropY = 0;
-        if (cropX + cropWidth > metadata.width) cropX = metadata.width - cropWidth;
-        if (cropY + cropHeight > metadata.height) cropY = metadata.height - cropHeight;
-
-        sharpImage.extract({
-            left: cropX,
-            top: cropY,
-            width: cropWidth,
-            height: cropHeight
-        });
+    if (currentRatio > targetRatio) {
+      // Image is wider than target, calculate new width
+      cropWidth = Math.floor(metadata.height * targetRatio);
+    } else {
+      // Image is taller than target, calculate new height
+      cropHeight = Math.floor(metadata.width / targetRatio);
     }
 
-    // Finally, resize to the requested dimensions and format
-    let finalImage = sharpImage.resize(options.width, options.height, {
-        // If faces weren't found, default to entropy/attention based cropping as fallback
-        fit: 'cover',
-        position: detections.length > 0 ? 'center' : 'attention'
+    // Try to center the crop box around the faces
+    let cropX = Math.floor(centerX - cropWidth / 2);
+    let cropY = Math.floor(centerY - cropHeight / 2);
+
+    // Keep crop box within image bounds
+    if (cropX < 0) cropX = 0;
+    if (cropY < 0) cropY = 0;
+    if (cropX + cropWidth > metadata.width) cropX = metadata.width - cropWidth;
+    if (cropY + cropHeight > metadata.height)
+      cropY = metadata.height - cropHeight;
+
+    sharpImage.extract({
+      left: cropX,
+      top: cropY,
+      width: cropWidth,
+      height: cropHeight,
     });
+  }
 
-    const format = options.format || 'webp';
-    const quality = options.quality || 80;
+  // Finally, resize to the requested dimensions and format
+  let finalImage = sharpImage.resize(options.width, options.height, {
+    // If faces weren't found, default to entropy/attention based cropping as fallback
+    fit: "cover",
+    position: detections.length > 0 ? "center" : "attention",
+  });
 
-    if (format === 'webp') {
-        finalImage = finalImage.webp({ quality });
-    } else if (format === 'jpeg') {
-        finalImage = finalImage.jpeg({ quality });
-    } else if (format === 'png') {
-        finalImage = finalImage.png({ quality });
-    } else if (format === 'avif') {
-        finalImage = finalImage.avif({ quality });
-    }
+  const format = options.format || "webp";
+  const quality = options.quality || 80;
 
-    return finalImage.toBuffer();
+  if (format === "webp") {
+    finalImage = finalImage.webp({ quality });
+  } else if (format === "jpeg") {
+    finalImage = finalImage.jpeg({ quality });
+  } else if (format === "png") {
+    finalImage = finalImage.png({ quality });
+  } else if (format === "avif") {
+    finalImage = finalImage.avif({ quality });
+  }
+
+  return finalImage.toBuffer();
 }