picture-it 0.2.0

package/src/pipeline.ts

@@ -0,0 +1,243 @@
+import sharp from "sharp";
+import satori from "satori";
+import { Resvg } from "@resvg/resvg-js";
+import path from "path";
+import fs from "fs";
+import { log, parseSize, ensureFalKey, writeOutput } from "./operations.ts";
+import { configureFal, generate, edit, removeBg, uploadFile, uploadBuffer, cropToExact } from "./fal.ts";
+import { composite } from "./compositor.ts";
+import { applyColorGrade, applyGrain, applyVignette } from "./postprocess.ts";
+import { loadFonts } from "./fonts.ts";
+import type { PipelineStep, Overlay } from "./types.ts";
+
+export async function executePipeline(
+  steps: PipelineStep[],
+  outputPath: string,
+  verbose = false
+): Promise<string> {
+  let buffer: Buffer | null = null;
+  const falKey = ensureFalKey();
+  configureFal(falKey);
+
+  for (let i = 0; i < steps.length; i++) {
+    const step = steps[i]!;
+    if (verbose) log(`Pipeline step ${i + 1}/${steps.length}: ${step.op}`);
+
+    switch (step.op) {
+      case "generate": {
+        const { width, height } = parseSize(step.size, step.platform);
+        buffer = await generate({
+          prompt: step.prompt,
+          model: step.model,
+          width,
+          height,
+          verbose,
+        });
+        buffer = await cropToExact(buffer, width, height);
+        break;
+      }
+
+      case "edit": {
+        if (!buffer && (!step.assets || step.assets.length === 0)) {
+          throw new Error("Edit step requires input buffer or assets");
+        }
+        const urls: string[] = [];
+        if (buffer) {
+          urls.push(await uploadBuffer(buffer, "input.png"));
+        }
+        if (step.assets) {
+          for (const asset of step.assets) {
+            urls.push(await uploadFile(path.resolve(asset)));
+          }
+        }
+        const size = step.size ? parseSize(step.size) : buffer ? await getBufferSize(buffer) : { width: 1200, height: 630 };
+        buffer = await edit({
+          inputUrls: urls,
+          prompt: step.prompt,
+          model: step.model,
+          width: size.width,
+          height: size.height,
+          verbose,
+        });
+        buffer = await cropToExact(buffer, size.width, size.height);
+        break;
+      }
+
+      case "remove-bg": {
+        if (!buffer) throw new Error("remove-bg requires input");
+        const url = await uploadBuffer(buffer, "input.png");
+        buffer = await removeBg({ inputUrl: url, verbose });
+        break;
+      }
+
+      case "replace-bg": {
+        if (!buffer) throw new Error("replace-bg requires input");
+        // Remove bg from current buffer
+        const cutoutUrl = await uploadBuffer(buffer, "input.png");
+        const cutout = await removeBg({ inputUrl: cutoutUrl, verbose });
+        // Generate new background
+        const size = await getBufferSize(buffer);
+        const bg = await generate({
+          prompt: step.prompt,
+          model: step.model,
+          width: size.width,
+          height: size.height,
+          verbose,
+        });
+        const bgCropped = await cropToExact(bg, size.width, size.height);
+        // Composite cutout onto new bg
+        buffer = await sharp(bgCropped)
+          .composite([{ input: cutout, blend: "over" }])
+          .png()
+          .toBuffer();
+        break;
+      }
+
+      case "crop": {
+        if (!buffer) throw new Error("crop requires input");
+        const { width, height } = parseSize(step.size);
+        const pos = (step.position || "attention") as any;
+        buffer = await cropToExact(buffer, width, height, pos);
+        break;
+      }
+
+      case "grade": {
+        if (!buffer) throw new Error("grade requires input");
+        buffer = await applyColorGrade(buffer, step.name);
+        break;
+      }
+
+      case "grain": {
+        if (!buffer) throw new Error("grain requires input");
+        buffer = await applyGrain(buffer, step.intensity);
+        break;
+      }
+
+      case "vignette": {
+        if (!buffer) throw new Error("vignette requires input");
+        buffer = await applyVignette(buffer, step.opacity);
+        break;
+      }
+
+      case "text": {
+        if (!buffer) throw new Error("text requires input");
+        buffer = await renderTextOnto(buffer, step);
+        break;
+      }
+
+      case "compose": {
+        if (!buffer) throw new Error("compose requires input");
+        let overlays: Overlay[];
+        if (typeof step.overlays === "string") {
+          overlays = JSON.parse(fs.readFileSync(path.resolve(step.overlays), "utf-8"));
+        } else {
+          overlays = step.overlays;
+        }
+        const size = await getBufferSize(buffer);
+        buffer = await composite(buffer, overlays, size.width, size.height, process.cwd(), verbose);
+        break;
+      }
+
+      case "upscale": {
+        if (!buffer) throw new Error("upscale requires input");
+        const { upscale: upscaleFn } = await import("./fal.ts");
+        const url = await uploadBuffer(buffer, "input.png");
+        buffer = await upscaleFn({ inputUrl: url, scale: step.scale, verbose });
+        break;
+      }
+    }
+  }
+
+  if (!buffer) throw new Error("Pipeline produced no output");
+
+  const finalPath = await writeOutput(buffer, outputPath);
+  return finalPath;
+}
+
+async function getBufferSize(buffer: Buffer): Promise<{ width: number; height: number }> {
+  const meta = await sharp(buffer).metadata();
+  return { width: meta.width || 1200, height: meta.height || 630 };
+}
+
+async function renderTextOnto(
+  buffer: Buffer,
+  step: { title: string; font?: string; color?: string; fontSize?: number; zone?: string }
+): Promise<Buffer> {
+  const meta = await sharp(buffer).metadata();
+  const w = meta.width || 1200;
+  const h = meta.height || 630;
+  const fonts = await loadFonts();
+
+  const fontSize = step.fontSize || 64;
+  const fontFamily = step.font || "Space Grotesk";
+  const color = step.color || "white";
+
+  const jsx = {
+    type: "div",
+    props: {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        height: "100%",
+      },
+      children: {
+        type: "span",
+        props: {
+          style: {
+            fontSize,
+            fontFamily,
+            fontWeight: 700,
+            color,
+            textShadow: "0 2px 10px rgba(0,0,0,0.5)",
+            textAlign: "center",
+          },
+          children: step.title,
+        },
+      },
+    },
+  };
+
+  const textW = Math.round(w * 0.9);
+  const textH = Math.round(h * 0.3);
+
+  const svg = await satori(jsx as any, { width: textW, height: textH, fonts });
+  const resvg = new Resvg(svg, { fitTo: { mode: "width", value: textW } });
+  const textPng = Buffer.from(resvg.render().asPng());
+
+  // Position based on zone
+  const { resolvePosition } = await import("./zones.ts");
+  const { ZONES } = await import("./types.ts");
+  const zoneName = step.zone || "hero-center";
+  const pos = resolvePosition(
+    zoneName as any,
+    w, h, textW, textH, "center"
+  );
+
+  return sharp(buffer)
+    .composite([{ input: textPng, left: Math.max(0, pos.x), top: Math.max(0, pos.y), blend: "over" }])
+    .png()
+    .toBuffer();
+}
+
+// Gradient background helper (used by templates)
+export async function createGradientBackground(
+  gradient: string,
+  width: number,
+  height: number
+): Promise<Buffer> {
+  const fonts = await loadFonts();
+
+  const jsx = {
+    type: "div",
+    props: {
+      style: { width, height, backgroundImage: gradient, display: "flex" },
+      children: [],
+    },
+  };
+
+  const svg = await satori(jsx as any, { width, height, fonts });
+  const resvg = new Resvg(svg, { fitTo: { mode: "width", value: width } });
+  return Buffer.from(resvg.render().asPng());
+}

package/src/postprocess.ts

@@ -0,0 +1,124 @@
+import sharp from "sharp";
+import { Resvg } from "@resvg/resvg-js";
+import type { ColorGrade } from "./types.ts";
+
+export async function applyColorGrade(
+  buffer: Buffer,
+  grade: ColorGrade
+): Promise<Buffer> {
+  let img = sharp(buffer);
+
+  switch (grade) {
+    case "cinematic":
+      // Teal shadows, warm highlights
+      img = img
+        .recomb([
+          [1.05, 0, 0.05],
+          [0, 1.1, 0],
+          [0.05, 0, 1.15],
+        ])
+        .linear(1.1, -10);
+      break;
+    case "moody":
+      // Desaturated, crushed blacks
+      img = img.modulate({ saturation: 0.8 }).linear(1.15, 5);
+      break;
+    case "vibrant":
+      img = img.modulate({ saturation: 1.3 });
+      break;
+    case "clean":
+      img = img.sharpen({ sigma: 0.5 });
+      break;
+    case "warm-editorial":
+      img = img
+        .tint({ r: 255, g: 220, b: 180 })
+        .modulate({ saturation: 0.9 });
+      break;
+    case "cool-tech":
+      img = img
+        .tint({ r: 180, g: 200, b: 255 })
+        .linear(1.2, -15);
+      break;
+  }
+
+  return img.png().toBuffer();
+}
+
+export async function applyGrain(
+  buffer: Buffer,
+  intensity = 0.07
+): Promise<Buffer> {
+  const meta = await sharp(buffer).metadata();
+  const w = meta.width!;
+  const h = meta.height!;
+
+  // Generate noise texture
+  const noiseData = Buffer.alloc(w * h * 4);
+  for (let i = 0; i < noiseData.length; i += 4) {
+    const v = Math.round(128 + (Math.random() - 0.5) * 80);
+    noiseData[i] = v;     // R
+    noiseData[i + 1] = v; // G
+    noiseData[i + 2] = v; // B
+    noiseData[i + 3] = Math.round(255 * intensity); // A
+  }
+
+  const noiseBuffer = await sharp(noiseData, {
+    raw: { width: w, height: h, channels: 4 },
+  })
+    .png()
+    .toBuffer();
+
+  return sharp(buffer)
+    .composite([{ input: noiseBuffer, blend: "overlay" }])
+    .png()
+    .toBuffer();
+}
+
+export async function applyVignette(
+  buffer: Buffer,
+  opacity = 0.35
+): Promise<Buffer> {
+  const meta = await sharp(buffer).metadata();
+  const w = meta.width!;
+  const h = meta.height!;
+
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">
+    <defs>
+      <radialGradient id="vig" cx="50%" cy="50%" r="70%">
+        <stop offset="50%" stop-color="black" stop-opacity="0"/>
+        <stop offset="100%" stop-color="black" stop-opacity="${opacity}"/>
+      </radialGradient>
+    </defs>
+    <rect width="${w}" height="${h}" fill="url(#vig)"/>
+  </svg>`;
+
+  const resvg = new Resvg(svg, { fitTo: { mode: "width", value: w } });
+  const vigBuffer = Buffer.from(resvg.render().asPng());
+
+  return sharp(buffer)
+    .composite([{ input: vigBuffer, blend: "multiply" }])
+    .png()
+    .toBuffer();
+}
+
+export async function finalizeOutput(
+  buffer: Buffer,
+  outputPath: string,
+  quality = 90
+): Promise<void> {
+  const ext = outputPath.split(".").pop()?.toLowerCase();
+  let img = sharp(buffer);
+
+  switch (ext) {
+    case "jpg":
+    case "jpeg":
+      await img.jpeg({ quality: quality || 85 }).toFile(outputPath);
+      break;
+    case "webp":
+      await img.webp({ quality: quality || 85 }).toFile(outputPath);
+      break;
+    default:
+      await img.png({ quality: quality || 90 }).toFile(outputPath);
+      break;
+  }
+}

package/src/presets.ts

@@ -0,0 +1,105 @@
+import type { PlatformPreset, StylePreset, ColorGrade } from "./types.ts";
+
+export const PLATFORM_PRESETS: Record<string, PlatformPreset> = {
+  "blog-featured": {
+    width: 1200,
+    height: 630,
+    safeZone: "10% inset all sides",
+    minHeading: 48,
+    defaultGrade: "cinematic",
+  },
+  "blog-inline": {
+    width: 800,
+    height: 450,
+    safeZone: "5% inset",
+  },
+  "og-image": {
+    width: 1200,
+    height: 630,
+    safeZone: "key content within center 1000x500",
+  },
+  "twitter-header": {
+    width: 1500,
+    height: 500,
+    safeZone: "center 60% only (sides crop on mobile)",
+  },
+  "instagram-square": {
+    width: 1080,
+    height: 1080,
+    safeZone: "10% inset, avoid bottom 15%",
+  },
+  "instagram-story": {
+    width: 1080,
+    height: 1920,
+    safeZone: "avoid top 15% and bottom 20%",
+  },
+  "linkedin-post": {
+    width: 1200,
+    height: 627,
+    safeZone: "similar to OG",
+  },
+  "youtube-thumbnail": {
+    width: 1280,
+    height: 720,
+    safeZone: "avoid bottom-right 20% (duration badge)",
+    notes: "High contrast required, text readable at small size",
+  },
+  "shopify-app-listing": {
+    width: 1200,
+    height: 628,
+    safeZone: "10% inset",
+  },
+};
+
+export const STYLE_PRESETS: Record<string, StylePreset> = {
+  "dark-tech": {
+    falPromptStyle:
+      "deep purple/blue tones, neon accents, particle dust, tech atmosphere",
+    font: "Space Grotesk",
+    defaultGrade: "cinematic",
+    glowDefault: "derive from asset dominant color",
+  },
+  "minimal-light": {
+    falPromptStyle: "clean white/soft gray, subtle shadows, airy, bright",
+    font: "Inter",
+    defaultGrade: "clean",
+  },
+  "gradient-mesh": {
+    falPromptStyle: "vibrant multi-color mesh gradients, bold saturated",
+    font: "Space Grotesk",
+    defaultGrade: "vibrant",
+  },
+  editorial: {
+    falPromptStyle: "muted earth tones, textured paper, sophisticated",
+    font: "DM Serif Display",
+    defaultGrade: "warm-editorial",
+  },
+  glassmorphism: {
+    falPromptStyle: "frosted layers, translucent surfaces, soft blur",
+    font: "Inter",
+    defaultGrade: "cool-tech",
+  },
+};
+
+export const DEPTH_ORDER: Record<string, number> = {
+  background: 0,
+  midground: 1,
+  foreground: 2,
+  overlay: 3,
+  frame: 4,
+};
+
+export const AUTO_SHADOW: Record<string, { blur: number; offset: number; opacity: number }> = {
+  midground: { blur: 10, offset: 4, opacity: 0.2 },
+  foreground: { blur: 20, offset: 8, opacity: 0.3 },
+  overlay: { blur: 4, offset: 2, opacity: 0.15 },
+};
+
+export const COLOR_GRADES: Record<ColorGrade, string> = {
+  cinematic: "Slight teal shadows, warm highlights",
+  moody: "Desaturated, crushed blacks",
+  vibrant: "Boosted saturation, warmth",
+  clean: "Slight sharpening only",
+  "warm-editorial": "Golden tones, slight desat",
+  "cool-tech": "Blue shift, high contrast",
+};

package/src/satori-jsx.ts

@@ -0,0 +1,17 @@
+import type { SatoriJSX } from "./types.ts";
+
+// Convert our JSON JSX tree to React-like elements for Satori
+export function jsxToReact(node: SatoriJSX | string): any {
+  if (typeof node === "string") return node;
+
+  const { tag, props = {}, children = [] } = node;
+  const childElements = children.map((c) => jsxToReact(c));
+
+  return {
+    type: tag,
+    props: {
+      ...props,
+      children: childElements.length === 1 ? childElements[0] : childElements.length > 0 ? childElements : undefined,
+    },
+  };
+}