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,13 +1,18 @@
-import * as fs from 'node:fs';
+import * as fs from "node:fs";
-import * as path from 'node:path';
+import * as path from "node:path";
-import * as https from 'node:https';
+import * as https from "node:https";
 
-const MODELS_DIR = path.join(process.cwd(), 'models');
+import { fileURLToPath } from "node:url";
-const BASE_URL = 'https://raw.githubusercontent.com/vladmandic/face-api/master/model/';
+
+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-weights_manifest.json",
-    'tiny_face_detector_model-shard1'
+  "tiny_face_detector_model-shard1",
 ];
 
 async function downloadModel(filename: string) {
@@ -20,13 +25,15 @@ async function downloadModel(filename: string) {
   return new Promise((resolve, reject) => {
     console.log(`Downloading ${filename}...`);
     const file = fs.createWriteStream(destPath);
-        https.get(BASE_URL + filename, (response) => {
+    https
+      .get(BASE_URL + filename, (response) => {
         response.pipe(file);
-            file.on('finish', () => {
+        file.on("finish", () => {
           file.close();
           resolve(true);
         });
-        }).on('error', (err) => {
+      })
+      .on("error", (err) => {
         fs.unlinkSync(destPath);
         reject(err);
       });
@@ -42,7 +49,7 @@ async function main() {
     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,18 +1,18 @@
-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 { Canvas, Image, ImageData } from "canvas";
-import sharp from 'sharp';
+import sharp from "sharp";
-import * as path from 'node:path';
+import * as path from "node:path";
-import { fileURLToPath } from 'node:url';
+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;
 
@@ -25,13 +25,13 @@ async function loadModels() {
 export interface ProcessImageOptions {
   width: number;
   height: number;
-    format?: 'webp' | 'jpeg' | 'png' | 'avif';
+  format?: "webp" | "jpeg" | "png" | "avif";
   quality?: number;
 }
 
 export async function processImageWithSmartCrop(
   inputBuffer: Buffer,
-    options: ProcessImageOptions
+  options: ProcessImageOptions,
 ): Promise<Buffer> {
   await loadModels();
 
@@ -41,16 +41,16 @@ export async function processImageWithSmartCrop(
 
   // Detect faces
   const detections = await faceapi.detectAllFaces(
-        // @ts-ignore
+    // @ts-expect-error FaceAPI does not have type definitions for monkeyPatch
     img,
-        new faceapi.TinyFaceDetectorOptions()
+    new faceapi.TinyFaceDetectorOptions(),
   );
 
   const sharpImage = sharp(inputBuffer);
   const metadata = await sharpImage.metadata();
 
   if (!metadata.width || !metadata.height) {
-        throw new Error('Could not read image metadata');
+    throw new Error("Could not read image metadata");
   }
 
   // If faces are found, calculate the bounding box containing all faces
@@ -105,33 +105,34 @@ export async function processImageWithSmartCrop(
     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;
+    if (cropY + cropHeight > metadata.height)
+      cropY = metadata.height - cropHeight;
 
     sharpImage.extract({
       left: cropX,
       top: cropY,
       width: cropWidth,
-            height: cropHeight
+      height: cropHeight,
     });
   }
 
   // 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',
+    fit: "cover",
-        position: detections.length > 0 ? 'center' : 'attention'
+    position: detections.length > 0 ? "center" : "attention",
   });
 
-    const format = options.format || 'webp';
+  const format = options.format || "webp";
   const quality = options.quality || 80;
 
-    if (format === 'webp') {
+  if (format === "webp") {
     finalImage = finalImage.webp({ quality });
-    } else if (format === 'jpeg') {
+  } else if (format === "jpeg") {
     finalImage = finalImage.jpeg({ quality });
-    } else if (format === 'png') {
+  } else if (format === "png") {
     finalImage = finalImage.png({ quality });
-    } else if (format === 'avif') {
+  } else if (format === "avif") {
     finalImage = finalImage.avif({ quality });
   }