fix(backend): headless browser install, if chrome not found (#31)

Author: gorillamoe

backend/bun/package.json

@@ -8,5 +8,8 @@
     "format": "prettier --write .",
     "prepublishOnly": "npm run build && npm run lint"
   },
-  "private": true
+  "private": true,
+  "devDependencies": {
+    "@types/puppeteer": "7.0.4"
+  }
 }

backend/bun/src/generators/image.ts

@@ -1,17 +1,21 @@
-import fs from "fs";
-import nodeHtmlToImage from "node-html-to-image";
-
 import type {
   JSONObjectHTMLSuccessRequest,
   JSONObjectImageSuccessRequest,
   NodeHTMLToImageBuffer,
 } from "./../types";
 import { HTMLGenerator } from ".";
 import { getFullOutputPath } from "../utils/file";
+import { setupPuppeteer } from "../utils/puppeteer";
+import { htmlToImage } from "../utils/htmlToImage";
 
 export const ImageGenerator = async (
   json: JSONObjectImageSuccessRequest,
 ): Promise<[NodeHTMLToImageBuffer, string]> => {
+  // Setup Puppeteer cache directory and ensure browser is installed
+  // This must be done before generating the image
+  // Returns the executable path if browser was installed
+  const executablePath = await setupPuppeteer();
+
   // HTMLGenerator already handles font size conversion and generates the HTML
   const [code] = await HTMLGenerator(
     json as unknown as JSONObjectHTMLSuccessRequest,
@@ -24,14 +28,15 @@ export const ImageGenerator = async (
   );
 
   const filepath = outputFilepath + "." + json.data.outputImageFormat;
-  // The HTML is already fully generated with correct font sizes, so we just pass it to nodeHtmlToImage
-  return [
-    await nodeHtmlToImage({
-      output: filepath,
-      html: code,
-      transparent: json.data.transparent,
-      type: json.data.outputImageFormat,
-    }),
-    filepath,
-  ];
+  // Convert HTML to image using our custom Puppeteer implementation
+  // Pass the executable path explicitly to ensure Puppeteer uses the installed browser
+  const buffer = await htmlToImage({
+    output: filepath,
+    html: code,
+    transparent: json.data.transparent,
+    type: json.data.outputImageFormat,
+    executablePath: executablePath,
+  });
+
+  return [buffer, filepath];
 };

backend/bun/src/utils/htmlToImage.ts

@@ -0,0 +1,86 @@
+import puppeteer from "puppeteer";
+import type { ScreenshotOptions, LaunchOptions } from "puppeteer";
+
+export interface HtmlToImageOptions {
+  html: string;
+  output?: string;
+  transparent?: boolean;
+  type?: "png" | "jpeg" | "webp";
+  quality?: number;
+  waitUntil?: "load" | "domcontentloaded" | "networkidle0" | "networkidle2";
+  executablePath?: string | null;
+}
+
+/**
+ * Converts HTML to an image using Puppeteer.
+ * @param options - Configuration options for the image generation
+ * @returns Buffer containing the image data
+ */
+export async function htmlToImage(
+  options: HtmlToImageOptions,
+): Promise<Buffer> {
+  const {
+    html,
+    output,
+    transparent = false,
+    type = "png",
+    quality = 90,
+    waitUntil = "networkidle2",
+    executablePath,
+  } = options;
+
+  // Launch browser with appropriate settings
+  const launchOptions: LaunchOptions = {
+    headless: true,
+    args: [
+      "--no-sandbox",
+      "--disable-setuid-sandbox",
+      "--disable-dev-shm-usage",
+      "--disable-gpu",
+    ],
+  };
+
+  // If executable path is provided, use it explicitly
+  if (executablePath) {
+    launchOptions.executablePath = executablePath;
+  }
+
+  const browser = await puppeteer.launch(launchOptions);
+
+  try {
+    const page = await browser.newPage();
+
+    // Set content with HTML
+    await page.setContent(html, {
+      waitUntil: waitUntil,
+    });
+
+    // Configure screenshot options
+    const screenshotOptions: ScreenshotOptions = {
+      type: type,
+      fullPage: true,
+      omitBackground: transparent,
+    };
+
+    // Add quality for JPEG/WebP
+    if (type === "jpeg" || type === "webp") {
+      screenshotOptions.quality = quality;
+    }
+
+    // Take screenshot - get buffer directly for efficiency
+    const screenshotBuffer = await page.screenshot({
+      ...screenshotOptions,
+      ...(output && { path: output }),
+    });
+
+    // Convert to Buffer if needed
+    const buffer =
+      screenshotBuffer instanceof Buffer
+        ? screenshotBuffer
+        : Buffer.from(screenshotBuffer);
+
+    return buffer;
+  } finally {
+    await browser.close();
+  }
+}

backend/bun/src/utils/index.ts

@@ -1,3 +1,5 @@
 export * from "./stdin.ts";
 export * from "./clipboard.ts";
 export * from "./display.ts";
+export * from "./puppeteer.ts";
+export * from "./htmlToImage.ts";

backend/bun/src/utils/puppeteer.ts

@@ -0,0 +1,140 @@
+import { mkdir } from "node:fs/promises";
+import path from "node:path";
+import puppeteer from "puppeteer";
+import os from "node:os";
+import { existsSync } from "node:fs";
+import {
+  Browser,
+  BrowserPlatform,
+  BrowserTag,
+  Cache,
+  computeExecutablePath,
+  install,
+  resolveBuildId,
+} from "@puppeteer/browsers";
+import { writeJSONToStdout } from "./stdin";
+
+/**
+ * Gets the executable path for the installed Chrome browser.
+ * @param cacheDir - The cache directory where browsers are stored
+ * @returns The executable path, or null if not found
+ */
+const getInstalledBrowserPath = (cacheDir: string): string | null => {
+  try {
+    const platformMap: Record<string, BrowserPlatform> = {
+      win32: BrowserPlatform.WIN32,
+      darwin: BrowserPlatform.MAC,
+      linux: BrowserPlatform.LINUX,
+    };
+
+    const currentPlatform = process.platform;
+    const browserPlatform =
+      platformMap[currentPlatform] || BrowserPlatform.LINUX;
+
+    // Try to get the latest installed browser
+    const cache = new Cache(cacheDir);
+    const installedBrowsers = cache.getInstalledBrowsers();
+    const chromeBrowser = installedBrowsers.find(
+      (b) => b.browser === Browser.CHROME && b.platform === browserPlatform,
+    );
+
+    if (chromeBrowser) {
+      return computeExecutablePath({
+        cacheDir: cacheDir,
+        browser: Browser.CHROME,
+        platform: browserPlatform,
+        buildId: chromeBrowser.buildId,
+      });
+    }
+
+    return null;
+  } catch (/* eslint-disable-line */ error) {
+    return null;
+  }
+};
+
+/**
+ * Sets up Puppeteer cache directory and ensures browser is installed.
+ * This is necessary when running in a bundled binary where the default
+ * cache path might not be accessible.
+ * Uses platform-specific default cache directories:
+ * - Windows: %LOCALAPPDATA%\puppeteer
+ * - macOS: ~/Library/Caches/puppeteer
+ * - Linux: ~/.cache/puppeteer
+ * @returns The executable path of the installed browser, or null if not found
+ */
+export const setupPuppeteer = async (): Promise<string | null> => {
+  // Use platform-specific default cache directory
+  const cacheDir = path.join(os.homedir(), ".cache", "puppeteer");
+
+  // Ensure the cache directory exists
+  await mkdir(cacheDir, { recursive: true });
+
+  // Check if browser is installed
+  let executablePath: string | null = null;
+  let needsInstall = false;
+
+  // First, try to get the executable path from installed browsers
+  executablePath = getInstalledBrowserPath(cacheDir);
+
+  // If not found, try Puppeteer's method
+  if (!executablePath) {
+    try {
+      executablePath = puppeteer.executablePath();
+      // Check if the executable actually exists
+      if (!executablePath || !existsSync(executablePath)) {
+        needsInstall = true;
+      }
+    } catch (/* eslint-disable-line */ error: unknown) {
+      // Browser is not installed, we'll try to install it below
+      needsInstall = true;
+    }
+  }
+
+  if (needsInstall) {
+    try {
+      const platformMap: Record<string, BrowserPlatform> = {
+        win32: BrowserPlatform.WIN32,
+        darwin: BrowserPlatform.MAC,
+        linux: BrowserPlatform.LINUX,
+      };
+
+      const currentPlatform = process.platform;
+      const browserPlatform =
+        platformMap[currentPlatform] || BrowserPlatform.LINUX;
+
+      const buildId = await resolveBuildId(
+        Browser.CHROME,
+        browserPlatform,
+        BrowserTag.LATEST,
+      );
+
+      // Install the browser with the correct buildId
+      // This may take 30-60 seconds, so ensure timeout is set appropriately
+      await install({
+        browser: Browser.CHROME,
+        buildId: buildId,
+        cacheDir: cacheDir,
+      });
+
+      // After installation, get the executable path
+      executablePath = computeExecutablePath({
+        cacheDir: cacheDir,
+        browser: Browser.CHROME,
+        platform: browserPlatform,
+        buildId: buildId,
+      });
+    } catch (installError) {
+      writeJSONToStdout({
+        success: false,
+        error: "Error installing Chrome browser",
+        context:
+          installError instanceof Error
+            ? installError.message
+            : String(installError),
+      });
+    }
+  }
+
+  return executablePath;
+};