picture-it 0.2.0

package/src/contrast.ts

@@ -0,0 +1,155 @@
+import sharp from "sharp";
+import { resolvePosition, resolveDimension } from "./zones.ts";
+import type { SatoriTextOverlay, GradientOverlay, Overlay } from "./types.ts";
+
+function log(msg: string) {
+  process.stderr.write(`[picture-it] ${msg}\n`);
+}
+
+// WCAG relative luminance
+function relativeLuminance(r: number, g: number, b: number): number {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs! + 0.7152 * gs! + 0.0722 * bs!;
+}
+
+function contrastRatio(l1: number, l2: number): number {
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+function parseColor(color: string): { r: number; g: number; b: number } | null {
+  // Handle hex
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    if (hex.length === 3) {
+      return {
+        r: parseInt(hex[0]! + hex[0]!, 16),
+        g: parseInt(hex[1]! + hex[1]!, 16),
+        b: parseInt(hex[2]! + hex[2]!, 16),
+      };
+    }
+    if (hex.length >= 6) {
+      return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16),
+      };
+    }
+  }
+
+  // Handle rgb/rgba
+  const rgbMatch = color.match(
+    /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/
+  );
+  if (rgbMatch) {
+    return {
+      r: parseInt(rgbMatch[1]!),
+      g: parseInt(rgbMatch[2]!),
+      b: parseInt(rgbMatch[3]!),
+    };
+  }
+
+  // Named colors
+  const named: Record<string, { r: number; g: number; b: number }> = {
+    white: { r: 255, g: 255, b: 255 },
+    black: { r: 0, g: 0, b: 0 },
+  };
+  return named[color.toLowerCase()] || null;
+}
+
+function extractTextColor(jsx: any): string {
+  if (jsx?.props?.style?.color) return jsx.props.style.color;
+  if (jsx?.children) {
+    for (const child of Array.isArray(jsx.children) ? jsx.children : [jsx.children]) {
+      if (typeof child === "object") {
+        const c = extractTextColor(child);
+        if (c) return c;
+      }
+    }
+  }
+  return "white"; // default assumption
+}
+
+export async function checkAndFixContrast(
+  baseBuffer: Buffer,
+  overlays: Overlay[],
+  canvasWidth: number,
+  canvasHeight: number
+): Promise<Overlay[]> {
+  const result = [...overlays];
+  const inserts: { index: number; overlay: GradientOverlay }[] = [];
+
+  for (let i = 0; i < result.length; i++) {
+    const overlay = result[i]!;
+    if (overlay.type !== "satori-text") continue;
+
+    const textOverlay = overlay as SatoriTextOverlay;
+    const textW = textOverlay.width || canvasWidth;
+    const textH = textOverlay.height || canvasHeight;
+
+    const pos = resolvePosition(
+      textOverlay.zone || "title-area",
+      canvasWidth,
+      canvasHeight,
+      textW,
+      textH,
+      textOverlay.anchor || "center"
+    );
+
+    // Crop the region where text will land
+    const cropX = Math.max(0, Math.min(pos.x, canvasWidth - 1));
+    const cropY = Math.max(0, Math.min(pos.y, canvasHeight - 1));
+    const cropW = Math.min(textW, canvasWidth - cropX);
+    const cropH = Math.min(textH, canvasHeight - cropY);
+
+    if (cropW <= 0 || cropH <= 0) continue;
+
+    const region = await sharp(baseBuffer)
+      .extract({ left: cropX, top: cropY, width: cropW, height: cropH })
+      .grayscale()
+      .stats();
+
+    const bgLuminance = (region.channels[0]?.mean || 128) / 255;
+
+    // Extract text color from JSX
+    const textColor = extractTextColor(textOverlay.jsx);
+    const parsed = parseColor(textColor);
+    const textLum = parsed
+      ? relativeLuminance(parsed.r, parsed.g, parsed.b)
+      : 1; // assume white
+
+    const ratio = contrastRatio(bgLuminance, textLum);
+
+    if (ratio < 4.5) {
+      log(
+        `Low contrast (${ratio.toFixed(1)}:1) at ${JSON.stringify(textOverlay.zone)}, adding safety overlay`
+      );
+
+      // Determine if we need dark or light overlay
+      const needDark = textLum > 0.5; // Light text → dark overlay behind it
+      const gradColor = needDark ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.6)";
+
+      const safetyOverlay: GradientOverlay = {
+        type: "gradient-overlay",
+        gradient: `linear-gradient(180deg, transparent 0%, ${gradColor} 30%, ${gradColor} 70%, transparent 100%)`,
+        opacity: 0.7,
+        blend: "normal",
+        depth: (textOverlay.depth as any) || "overlay",
+      };
+
+      // Insert before the text overlay
+      inserts.push({ index: i, overlay: safetyOverlay });
+    }
+  }
+
+  // Insert safety overlays in reverse order to maintain indices
+  for (const ins of inserts.reverse()) {
+    result.splice(ins.index, 0, ins.overlay);
+  }
+
+  return result;
+}

package/src/fal.ts

@@ -0,0 +1,218 @@
+import { fal } from "@fal-ai/client";
+import fs from "fs";
+import sharp from "sharp";
+import { log } from "./operations.ts";
+import {
+  getEndpoint,
+  getCost,
+  selectGenerateModel,
+  selectEditModel,
+  mapAspectRatio,
+  mapResolution,
+} from "./model-router.ts";
+import type { FalModel, CropPosition } from "./types.ts";
+
+export function configureFal(apiKey: string) {
+  fal.config({ credentials: apiKey });
+}
+
+// --- Upload ---
+
+export async function uploadFile(filePath: string): Promise<string> {
+  const buffer = fs.readFileSync(filePath);
+  const filename = filePath.split("/").pop() || "image.png";
+  const file = new File([buffer], filename, { type: "image/png" });
+  return fal.storage.upload(file);
+}
+
+export async function uploadBuffer(buffer: Buffer, filename: string): Promise<string> {
+  const file = new File([buffer], filename, { type: "image/png" });
+  return fal.storage.upload(file);
+}
+
+// --- Generate (no input images) ---
+
+export async function generate(opts: {
+  prompt: string;
+  model?: string;
+  width?: number;
+  height?: number;
+  verbose?: boolean;
+}): Promise<Buffer> {
+  const model = selectGenerateModel(opts.model, opts.verbose);
+  const endpoint = getEndpoint(model);
+  const cost = getCost(model);
+
+  log(`FAL generate: ${model} @ $${cost.toFixed(3)}`);
+
+  const w = opts.width || 1200;
+  const h = opts.height || 630;
+
+  const input: Record<string, unknown> = {
+    prompt: opts.prompt,
+    num_images: 1,
+    image_size: mapFluxSize(w, h),
+  };
+
+  const result = await fal.subscribe(endpoint, {
+    input,
+    logs: true,
+    onQueueUpdate: (update) => {
+      if (update.status === "IN_PROGRESS" && opts.verbose) {
+        for (const entry of (update as any).logs || []) {
+          log(`FAL: ${entry.message}`);
+        }
+      }
+    },
+  });
+
+  return downloadResult(result);
+}
+
+// --- Edit (with input images) ---
+
+export async function edit(opts: {
+  inputUrls: string[];
+  prompt: string;
+  model?: string;
+  width?: number;
+  height?: number;
+  verbose?: boolean;
+}): Promise<Buffer> {
+  const model = selectEditModel(opts.inputUrls.length, opts.model, opts.verbose);
+  const endpoint = getEndpoint(model);
+  const cost = getCost(model);
+
+  log(`FAL edit: ${model} @ $${cost.toFixed(2)} | ${opts.inputUrls.length} input(s)`);
+
+  const w = opts.width || 1200;
+  const h = opts.height || 630;
+
+  let input: Record<string, unknown>;
+
+  if (model === "seedream") {
+    input = {
+      prompt: opts.prompt,
+      image_urls: opts.inputUrls,
+      image_size: seedreamSize(w, h),
+      num_images: 1,
+      max_images: 1,
+    };
+  } else if (model === "banana2") {
+    input = {
+      prompt: opts.prompt,
+      image_urls: opts.inputUrls,
+      aspect_ratio: mapAspectRatio(w, h),
+      resolution: mapResolution(w, h),
+      output_format: "png",
+      num_images: 1,
+      limit_generations: true,
+    };
+  } else {
+    // banana-pro — minimal params, let it auto-detect
+    input = {
+      prompt: opts.prompt,
+      image_urls: opts.inputUrls,
+      num_images: 1,
+    };
+  }
+
+  const result = await fal.subscribe(endpoint, {
+    input,
+    logs: true,
+    onQueueUpdate: (update) => {
+      if (update.status === "IN_PROGRESS" && opts.verbose) {
+        for (const entry of (update as any).logs || []) {
+          log(`FAL: ${entry.message}`);
+        }
+      }
+    },
+  });
+
+  return downloadResult(result);
+}
+
+// --- Remove background ---
+
+export async function removeBg(opts: {
+  inputUrl: string;
+  verbose?: boolean;
+}): Promise<Buffer> {
+  log("FAL: birefnet background removal");
+
+  const result = await fal.subscribe("fal-ai/birefnet", {
+    input: { image_url: opts.inputUrl },
+  });
+
+  const outputUrl = (result as any).data?.image?.url;
+  if (!outputUrl) throw new Error("birefnet returned no image");
+
+  const response = await fetch(outputUrl);
+  return Buffer.from(await response.arrayBuffer());
+}
+
+// --- Upscale ---
+
+export async function upscale(opts: {
+  inputUrl: string;
+  scale?: number;
+  verbose?: boolean;
+}): Promise<Buffer> {
+  log(`FAL: upscale ${opts.scale || 2}x`);
+
+  // Use creative upscaler
+  const result = await fal.subscribe("fal-ai/creative-upscaler", {
+    input: {
+      image_url: opts.inputUrl,
+      scale: opts.scale || 2,
+    },
+  });
+
+  return downloadResult(result);
+}
+
+// --- Crop to exact size ---
+
+export async function cropToExact(
+  buffer: Buffer,
+  width: number,
+  height: number,
+  position: CropPosition = "attention"
+): Promise<Buffer> {
+  return sharp(buffer)
+    .resize(width, height, {
+      fit: "cover",
+      position: position as any,
+    })
+    .png()
+    .toBuffer();
+}
+
+// --- Helpers ---
+
+async function downloadResult(result: any): Promise<Buffer> {
+  const url = result?.data?.images?.[0]?.url || result?.data?.image?.url;
+  if (!url) throw new Error("FAL returned no image URL");
+
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`Failed to download: ${response.status}`);
+  return Buffer.from(await response.arrayBuffer());
+}
+
+function mapFluxSize(w: number, h: number): string {
+  const ratio = w / h;
+  if (Math.abs(ratio - 1) < 0.1) return "square_hd";
+  if (ratio > 1.5) return "landscape_16_9";
+  if (ratio < 0.67) return "portrait_16_9";
+  if (ratio > 1) return "landscape_4_3";
+  return "portrait_4_3";
+}
+
+function seedreamSize(w: number, h: number): unknown {
+  // SeedDream supports custom dimensions (1920-4096px per axis)
+  if (w >= 1920 && h >= 1080 && w <= 4096 && h <= 4096) {
+    return { width: w, height: h };
+  }
+  // Fall back to preset
+  return "auto_2K";
+}

package/src/fonts.ts

@@ -0,0 +1,165 @@
+import fs from "fs";
+import path from "path";
+import { APP_DIR } from "./config.ts";
+
+const USER_FONT_DIR = path.join(APP_DIR, "fonts");
+const LOCAL_FONT_DIR = path.join(import.meta.dirname, "..", "fonts");
+
+interface SatoriFont {
+  name: string;
+  data: ArrayBuffer;
+  weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+  style: "normal" | "italic";
+}
+
+const FONT_FILES: {
+  name: string;
+  file: string;
+  weight: SatoriFont["weight"];
+  style: SatoriFont["style"];
+  url: string;
+}[] = [
+  {
+    name: "Inter",
+    file: "Inter-Regular.ttf",
+    weight: 400,
+    style: "normal",
+    url: "https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf",
+  },
+  {
+    name: "Inter",
+    file: "Inter-SemiBold.ttf",
+    weight: 600,
+    style: "normal",
+    url: "https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf",
+  },
+  {
+    name: "Inter",
+    file: "Inter-Bold.ttf",
+    weight: 700,
+    style: "normal",
+    url: "https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf",
+  },
+  {
+    name: "Space Grotesk",
+    file: "SpaceGrotesk-Medium.ttf",
+    weight: 500,
+    style: "normal",
+    url: "https://fonts.gstatic.com/s/spacegrotesk/v22/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7aUUsj.ttf",
+  },
+  {
+    name: "Space Grotesk",
+    file: "SpaceGrotesk-Bold.ttf",
+    weight: 700,
+    style: "normal",
+    url: "https://fonts.gstatic.com/s/spacegrotesk/v22/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj4PVksj.ttf",
+  },
+  {
+    name: "DM Serif Display",
+    file: "DMSerifDisplay-Regular.ttf",
+    weight: 400,
+    style: "normal",
+    url: "https://fonts.gstatic.com/s/dmserifdisplay/v17/-nFnOHM81r4j6k0gjAW3mujVU2B2K_c.ttf",
+  },
+];
+
+let cachedFonts: SatoriFont[] | null = null;
+
+function getFontPathCandidates(file: string): string[] {
+  return [
+    path.join(USER_FONT_DIR, file),
+    path.join(LOCAL_FONT_DIR, file),
+  ];
+}
+
+function readFontFile(file: string): Buffer | null {
+  for (const fontPath of getFontPathCandidates(file)) {
+    try {
+      return fs.readFileSync(fontPath);
+    } catch {
+      // Try the next font location.
+    }
+  }
+
+  return null;
+}
+
+export function getFontDirectory(): string {
+  return USER_FONT_DIR;
+}
+
+export async function downloadFonts(options: {
+  force?: boolean;
+  onProgress?: (message: string) => void;
+} = {}): Promise<{ dir: string; downloaded: string[]; skipped: string[] }> {
+  const { force = false, onProgress } = options;
+  const downloaded: string[] = [];
+  const skipped: string[] = [];
+
+  fs.mkdirSync(USER_FONT_DIR, { recursive: true });
+
+  for (const font of FONT_FILES) {
+    const outPath = path.join(USER_FONT_DIR, font.file);
+
+    if (!force && fs.existsSync(outPath) && fs.statSync(outPath).size > 0) {
+      skipped.push(font.file);
+      onProgress?.(`Already installed: ${font.file}`);
+      continue;
+    }
+
+    onProgress?.(`Downloading: ${font.file}`);
+    const res = await fetch(font.url);
+    if (!res.ok) {
+      throw new Error(`Failed to download ${font.file}: ${res.status} ${res.statusText}`);
+    }
+
+    const buf = Buffer.from(await res.arrayBuffer());
+    fs.writeFileSync(outPath, buf);
+    downloaded.push(font.file);
+    onProgress?.(`Saved: ${font.file} (${(buf.length / 1024).toFixed(0)} KB)`);
+  }
+
+  cachedFonts = null;
+
+  return {
+    dir: USER_FONT_DIR,
+    downloaded,
+    skipped,
+  };
+}
+
+export async function loadFonts(): Promise<SatoriFont[]> {
+  if (cachedFonts) return cachedFonts;
+
+  const fonts: SatoriFont[] = [];
+  const available: string[] = [];
+  const missing: string[] = [];
+
+  for (const f of FONT_FILES) {
+    const data = readFontFile(f.file);
+    if (!data) {
+      missing.push(f.file);
+      continue;
+    }
+
+    fonts.push({
+      name: f.name,
+      data: data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength),
+      weight: f.weight,
+      style: f.style,
+    });
+    available.push(f.file);
+  }
+
+  if (missing.length > 0) {
+    process.stderr.write(`[picture-it] Warning: missing fonts: ${missing.join(", ")}\n`);
+    process.stderr.write(`[picture-it] Run: picture-it download-fonts to fetch them\n`);
+  }
+
+  if (fonts.length === 0) {
+    throw new Error("No fonts available. Run: picture-it download-fonts");
+  }
+
+  cachedFonts = fonts;
+  return fonts;
+}

package/src/model-router.ts

@@ -0,0 +1,78 @@
+import type { FalModel } from "./types.ts";
+import { log } from "./operations.ts";
+
+const MODEL_ENDPOINTS: Record<FalModel, string> = {
+  seedream: "fal-ai/bytedance/seedream/v4.5/edit",
+  banana2: "fal-ai/nano-banana-2/edit",
+  "banana-pro": "fal-ai/nano-banana-pro/edit",
+  "flux-dev": "fal-ai/flux/dev",
+  "flux-schnell": "fal-ai/flux/schnell",
+};
+
+const MODEL_COSTS: Record<FalModel, number> = {
+  seedream: 0.04,
+  banana2: 0.08,
+  "banana-pro": 0.15,
+  "flux-dev": 0.03,
+  "flux-schnell": 0.003,
+};
+
+export function getEndpoint(model: FalModel): string {
+  return MODEL_ENDPOINTS[model];
+}
+
+export function getCost(model: FalModel): number {
+  return MODEL_COSTS[model];
+}
+
+export function selectGenerateModel(explicit?: string, verbose = false): FalModel {
+  if (explicit && explicit in MODEL_ENDPOINTS) return explicit as FalModel;
+
+  const model: FalModel = "flux-schnell";
+  if (verbose) log(`Model: ${model} ($${getCost(model)}) — fast generation`);
+  return model;
+}
+
+export function selectEditModel(
+  inputCount: number,
+  explicit?: string,
+  verbose = false
+): FalModel {
+  if (explicit && explicit in MODEL_ENDPOINTS) return explicit as FalModel;
+
+  let model: FalModel;
+  let reason: string;
+
+  if (inputCount > 10) {
+    model = "banana2";
+    reason = `${inputCount} inputs (>10), needs banana2`;
+  } else {
+    model = "seedream";
+    reason = "default edit model, $0.04";
+  }
+
+  if (verbose) log(`Model: ${model} ($${getCost(model)}) — ${reason}`);
+  return model;
+}
+
+export function mapAspectRatio(width: number, height: number): string {
+  const ratio = width / height;
+  if (Math.abs(ratio - 1) < 0.1) return "1:1";
+  if (Math.abs(ratio - 16 / 9) < 0.15) return "16:9";
+  if (Math.abs(ratio - 9 / 16) < 0.15) return "9:16";
+  if (Math.abs(ratio - 4 / 3) < 0.15) return "4:3";
+  if (Math.abs(ratio - 3 / 4) < 0.15) return "3:4";
+  if (Math.abs(ratio - 3 / 2) < 0.15) return "3:2";
+  if (Math.abs(ratio - 2 / 3) < 0.15) return "2:3";
+  if (Math.abs(ratio - 21 / 9) < 0.2) return "21:9";
+  if (ratio >= 3.5) return "4:1";
+  return "auto";
+}
+
+export function mapResolution(width: number, height: number): string {
+  const maxDim = Math.max(width, height);
+  if (maxDim <= 512) return "0.5K";
+  if (maxDim <= 1024) return "1K";
+  if (maxDim <= 2048) return "2K";
+  return "4K";
+}

package/src/operations.ts

@@ -0,0 +1,85 @@
+import sharp from "sharp";
+import fs from "fs";
+import path from "path";
+import { PLATFORM_PRESETS } from "./presets.ts";
+
+export function log(msg: string) {
+  process.stderr.write(`[picture-it] ${msg}\n`);
+}
+
+export function parseSize(
+  sizeStr?: string,
+  platform?: string
+): { width: number; height: number } {
+  if (sizeStr) {
+    const [w, h] = sizeStr.split("x").map(Number);
+    if (w && h) return { width: w, height: h };
+  }
+  if (platform && PLATFORM_PRESETS[platform]) {
+    return {
+      width: PLATFORM_PRESETS[platform]!.width,
+      height: PLATFORM_PRESETS[platform]!.height,
+    };
+  }
+  return { width: 1200, height: 630 };
+}
+
+export async function readInput(inputPath: string): Promise<Buffer> {
+  if (!fs.existsSync(inputPath)) {
+    log(`Input not found: ${inputPath}`);
+    process.exit(1);
+  }
+  return sharp(inputPath).png().toBuffer();
+}
+
+export async function writeOutput(
+  buffer: Buffer,
+  outputPath: string
+): Promise<string> {
+  const resolved = path.resolve(outputPath);
+  const ext = path.extname(resolved).toLowerCase();
+
+  let img = sharp(buffer);
+  switch (ext) {
+    case ".jpg":
+    case ".jpeg":
+      await img.jpeg({ quality: 90 }).toFile(resolved);
+      break;
+    case ".webp":
+      await img.webp({ quality: 90 }).toFile(resolved);
+      break;
+    default:
+      await img.png({ quality: 90 }).toFile(resolved);
+      break;
+  }
+
+  return resolved;
+}
+
+export function ensureFalKey(): string {
+  const config = loadFalKey();
+  if (!config) {
+    log("No FAL API key configured. Run 'picture-it auth --fal <key>' to set up.");
+    process.exit(1);
+  }
+  return config;
+}
+
+function loadFalKey(): string | undefined {
+  // 1. Env var
+  if (process.env["FAL_KEY"]) return process.env["FAL_KEY"];
+
+  // 2. Config file
+  const configPath = path.join(
+    process.env["HOME"] || "~",
+    ".picture-it",
+    "config.json"
+  );
+  try {
+    const raw = fs.readFileSync(configPath, "utf-8");
+    const config = JSON.parse(raw);
+    return config.fal_key;
+  } catch {
+    return undefined;
+  }
+}