Running Human in serverless environment?

[enszrlu]

I saw this topic on discussions board but is there any other way of running this on serverless environment such us Vercel?

https://github.com/nuxy/human-face-detection

When I tried to deploy my project to Vercel, I have realised how heavy tensorflow is. I am sure there should be ways of doing it but I am very new to backend & dev-ops so this question might be bit basic.

Large Dependencies                                                                     Uncompressed size  Compressed size
--
15:06:29.130 | node_modules/.pnpm/@tensorflow+tfjs-node@4.17.0_seedrandom@3.0.5                               383.26 MB        109.22 MB
15:06:29.130 | node_modules/.pnpm/@tensorflow+tfjs-layers@4.17.0_@tensorflow+tfjs-core@4.17.0                    1.4 MB        267.02 KB
15:06:29.130 | node_modules/.pnpm/next@14.0.4_react-dom@18.2.0_react@18.2.0                                   770.88 KB        236.08 KB
15:06:29.130 | node_modules/.pnpm/@tensorflow+tfjs-core@4.17.0                                                  1.14 MB        217.09 KB
15:06:29.130 | node_modules/.pnpm/@tensorflow+tfjs@4.17.0_seedrandom@3.0.5                                      1.28 MB        208.18 KB
15:06:29.130 | node_modules/.pnpm/@tensorflow+tfjs-converter@4.17.0_@tensorflow+tfjs-core@4.17.0                1.19 MB        191.73 KB
15:06:29.130 | node_modules/.pnpm/@tensorflow+tfjs-backend-webgl@4.17.0_@tensorflow+tfjs-core@4.17.0          952.32 KB        147.14 KB
15:06:29.130 | node_modules/.pnpm/react-dom@18.2.0_react@18.2.0                                               546.21 KB        138.91 KB
15:06:29.130 | node_modules/.pnpm/@vladmandic+human@3.2.1                                                     317.31 KB         109.5 KB
15:06:29.130 |  
15:06:29.130 | All dependencies                                                                               393.85 MB        111.58 MB
15:06:29.131 | Max serverless function size was exceeded for 1 function
15:06:29.137 | Created all serverless functions in: 35.738s
15:06:29.147 | Collected static files (public/, static/, .next/static): 5.465ms
15:06:29.182 | Build Completed in /vercel/output [2m]
15:06:29.379 | Deploying outputs...
15:06:50.056 | Error: A Serverless Function has exceeded the unzipped maximum size of 250 MB. : https://vercel.link/serverless-function-size

[vladmandic]

only realistically viable way is to have shared volume with preinstalled node_modules so each serverless instance just mounts that volume on startup and does not have to install anything locally.

[enszrlu]

I think best solution for me is to use browser version rather than node version. I tried that using human-next example project and I was able to deploy it to vercel without any issue.

I used same approach, exact same code on my own project and somehow page fails to render with below error. I don't see any reason why it would do that. This is mainly caused by Next.js App Router. I tested Human in fresh new Next project and it only works on Pages Router. I thought that maybe next.js is trying to render it in server so human library thinks it is running on the server but could not resolve the issue by putting additional conditions...

This is more of a Next.js problem than Human, but is there anything you can think that would trigger this behaviour?

./node_modules/@vladmandic/human/dist/human.node.js:7:1678
Module not found: Can't resolve '@tensorflow/tfjs-node'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/lib/imageFunctions.ts
./src/app/start/page.tsx

Even below code gets me that error, I am not even running this function. It fails at pre-render checks I believe.

import type { Human, Config } from "@vladmandic/human";
export const detectFace = async (
  image_src: ImageData | ArrayBuffer | Uint8Array | Blob | URL | string,
) => {

  const humanConfig: Partial<Config> = {
    modelBasePath: "file://node_modules/@vladmandic/human/models",
    debug: false,
    face: { enabled: true, detector: { maxDetected: 10, scale: 1 } },
    hand: {
      enabled: true,
      maxDetected: 20,
      minConfidence: 0.5,
      detector: { modelPath: "handtrack.json" },
    }, // use alternative hand model
    body: { enabled: true },
    object: { enabled: true },
  };

  return new Promise((resolve, reject) => {
    import("@vladmandic/human").then(async (H) => {});
  });
};

[vladmandic]

sorry, i'm really not a next.js expert, haven't touched it in years.

[enszrlu]

No worries, I knew that I read on another topic about it. Just wanted to ask to see if you see any reason from this module's point of view but I guess it is all about Human acting based on if it is running on client or server. Thanks again for this great work!