@goodandready/dsh-image-gen 0.10.24 → 0.10.25

package/lib/responsive-helpers.js

@@ -0,0 +1,94 @@
+// Pure helpers for generate_responsive_mockups (#173) — no cordis imports.
+
+export const DEVICE_ORDER = ['mobile', 'tablet', 'desktop']
+
+export const DEVICE_PRESETS = {
+  mobile: {
+    id: 'mobile',
+    label: 'Mobile',
+    aspect: '9:16',
+    size: 'portrait_16_9',
+    fileStem: 'mockup-mobile',
+    viewport: 'iPhone-class mobile viewport 375×812, portrait 9:16',
+    layoutHint:
+      'Single-column mobile UI mockup: compact header, stacked content, thumb-reachable bottom actions. '
+      + 'Preserve the same product, brand colors, typography family and visual language as the desktop and tablet versions.',
+  },
+  tablet: {
+    id: 'tablet',
+    label: 'Tablet',
+    aspect: '3:4',
+    size: 'portrait_4_3',
+    fileStem: 'mockup-tablet',
+    viewport: 'iPad-class tablet viewport 768×1024, portrait 3:4',
+    layoutHint:
+      'Tablet UI mockup with two-column or wide single-column layout, roomier spacing than mobile, '
+      + 'same product screens, brand colors, and component language as mobile and desktop versions.',
+  },
+  desktop: {
+    id: 'desktop',
+    label: 'Desktop',
+    aspect: '16:9',
+    size: 'landscape_16_9',
+    fileStem: 'mockup-desktop',
+    viewport: 'desktop viewport 1440×900 / 1920×1080, landscape 16:10–16:9',
+    layoutHint:
+      'Desktop UI mockup with multi-column layout, full navigation chrome and wide content area. '
+      + 'Same product, brand palette and component language as mobile and tablet versions.',
+  },
+}
+
+export function normalizeDevices(input) {
+  if (input == null) return [...DEVICE_ORDER]
+  const list = Array.isArray(input) ? input : [input]
+  const cleaned = list
+    .map((d) => String(d || '').trim().toLowerCase())
+    .filter((d) => DEVICE_ORDER.includes(d))
+  const unique = []
+  for (const d of cleaned) {
+    if (!unique.includes(d)) unique.push(d)
+  }
+  return unique.length ? unique : [...DEVICE_ORDER]
+}
+
+export function resolveDevicePreset(device) {
+  return DEVICE_PRESETS[String(device || '').toLowerCase()] || DEVICE_PRESETS.mobile
+}
+
+/**
+ * Build a shared semantic base prompt so the three viewports stay visually coherent.
+ * Device-specific lines only restate composition constraints, not the product idea.
+ */
+export function buildResponsivePrompt(basePrompt, { device, stylePreset, paletteColors } = {}) {
+  const preset = resolveDevicePreset(device)
+  const core = String(basePrompt || '').trim()
+  const style = stylePreset ? ` Style preset: ${stylePreset}.` : ''
+  const palette = Array.isArray(paletteColors) && paletteColors.length
+    ? ` Dominant brand colors must remain consistent across all responsive mockups: ${paletteColors.join(', ')}.`
+    : ''
+  return `Responsive UI product mockup of: ${core}.${style}${palette} `
+    + `Render as a polished ${preset.viewport}. ${preset.layoutHint} `
+    + 'Keep the same information architecture, iconography language, spacing rhythm and color palette across mobile, tablet and desktop variants. '
+    + 'High-fidelity interface design, clean UI, realistic device framing only if needed, no lorem-ipsum walls of unreadable text, no watermark.'
+}
+
+export function mockupFileName(device, { outputName } = {}) {
+  const preset = resolveDevicePreset(device)
+  const stem = String(outputName || '').trim()
+    ? String(outputName).trim().replace(/\.(png|jpe?g|webp)$/i, '')
+    : preset.fileStem
+  // Issue requires mockup-mobile.png style names when default stem is used.
+  if (!outputName) return `${preset.fileStem}.png`
+  return `${stem}-${preset.id}.png`
+}
+
+export function deviceMeta(device) {
+  const preset = resolveDevicePreset(device)
+  return {
+    device: preset.id,
+    label: preset.label,
+    aspect: preset.aspect,
+    size: preset.size,
+    viewport: preset.viewport,
+  }
+}

package/lib/spritesheet-helpers.js

@@ -0,0 +1,65 @@
+// Pure helpers for generate_spritesheet (#177) — no cordis/dsh-tools imports.
+
+export const ANIMATION_PRESETS = {
+  idle: ['neutral standing pose', 'subtle breathing chest rise', 'slight weight shift', 'return to neutral'],
+  walk: ['contact pose left foot forward', 'down pose', 'passing pose', 'up pose', 'contact pose right foot forward', 'down pose', 'passing pose', 'up pose'],
+  attack: ['wind-up anticipation', 'strike extension', 'impact frame', 'recoil follow-through'],
+  pulse: ['scale 1.0 rest', 'scale 1.08 glow peak', 'scale 1.0 settle', 'scale 0.96 micro-bounce'],
+  hover: ['lift 0px', 'lift -6px', 'lift 0px', 'lift 2px press'],
+}
+
+export function clampFrames(n, animation = 'idle') {
+  const v = Number(n)
+  const anim = String(animation || 'idle').toLowerCase()
+  // walk preset has a natural 8-phase cycle; 12 would stutter at loop point
+  if (anim === 'walk') return v === 4 ? 4 : 8
+  if (v === 4 || v === 8 || v === 12) return v
+  return 8
+}
+
+export function buildSpritesheetCss({ frameCount, frameW, frameH, durationSec, name }) {
+  const anim = name || 'play'
+  const sheetW = frameW * frameCount
+  return `/* dsh-image-gen spritesheet */
+.${anim} {
+  width: ${frameW}px;
+  height: ${frameH}px;
+  background-image: url('./${anim}-sheet.svg');
+  background-repeat: no-repeat;
+  background-size: ${sheetW}px ${frameH}px;
+  animation: ${anim} ${durationSec}s steps(${frameCount}) infinite;
+}
+@keyframes ${anim} {
+  from { background-position: 0 0; }
+  to { background-position: -${sheetW}px 0; }
+}
+`
+}
+
+export function buildSpritesheetSvg(frames, { frameW, frameH }) {
+  const count = frames.length
+  const totalW = frameW * count
+  const totalH = frameH
+  let images = ''
+  frames.forEach((src, idx) => {
+    const b64 = Buffer.isBuffer(src.bytes) ? src.bytes.toString('base64') : Buffer.from(src.bytes).toString('base64')
+    const mime = src.mediaType || 'image/png'
+    const x = idx * frameW
+    images += `<image href="data:${mime};base64,${b64}" x="${x}" y="0" width="${frameW}" height="${frameH}" preserveAspectRatio="xMidYMid slice"/>`
+  })
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="${totalW}" height="${totalH}" viewBox="0 0 ${totalW} ${totalH}">
+${images}
+</svg>`
+}
+
+export function buildFramePrompts(subject, animation, frameCount) {
+  const preset = ANIMATION_PRESETS[animation] || ANIMATION_PRESETS.idle
+  const phases = []
+  for (let i = 0; i < frameCount; i++) {
+    phases.push(preset[i % preset.length])
+  }
+  return phases.map((phase, i) =>
+    `2D game sprite frame ${i + 1} of ${frameCount}: ${subject}. Animation phase: ${phase}. `
+    + 'Transparent or solid flat background, consistent character scale and camera, same character design across frames, clean silhouette, even lighting.')
+}

package/lib/tools/editing.js

@@ -116,6 +116,7 @@ export function registerEditingTools(ctx, deps) {
         },
         async execute(args, exec) {
           try {
+            const cfg = live()
             trackAndAssertLoopGuard(exec?.agent?.session?.id || 'default', { limit: cfg.loopGuardLimit })
             const estimatedCostEdit = calculateGenerationCost({
               provider: cfg.provider || 'fal',
@@ -249,6 +250,7 @@ export function registerEditingTools(ctx, deps) {
         },
         async execute(args, exec) {
           try {
+            const cfg = live()
             trackAndAssertLoopGuard(exec?.agent?.session?.id || 'default', { limit: cfg.loopGuardLimit })
             const count = normalizeCount(args.count || 1)
             const estimatedCostVary = calculateGenerationCost({

package/lib/tools/pattern.js

@@ -0,0 +1,125 @@
+// pattern — generate_seamless_pattern tool (#178)
+
+import { defineTool } from '@deepseek-ai/dsh-tools'
+import path from 'node:path'
+import { mkdir, writeFile } from 'node:fs/promises'
+import { makeProviders, toLosslessJson, saveAttachmentSafe, sizeToPixels } from '../providers.js'
+import { trackAndAssertLoopGuard } from '../loop-guard.js'
+import { sanitizeErrorAndLogs } from '../security.js'
+import {
+  buildSeamlessPrompt,
+  buildPatternCss,
+  normalizeDensity,
+} from '../pattern-helpers.js'
+
+export function registerPatternTools(ctx, deps) {
+  const { live, slugify, resolveApiKey } = deps
+
+  ctx.effect(() => {
+    ctx.tools.register(
+      defineTool({
+        name: 'generate_seamless_pattern',
+        description:
+          'Generate a seamless tileable repeating pattern for backgrounds (#178). '
+          + 'Describe the motif and optional style; returns a square pattern image plus CSS background-repeat snippet.',
+        parameters: {
+          motif: {
+            type: 'string',
+            required: true,
+            description: 'What to repeat (e.g. "terrazzo chips", "sakura blossoms", "circuit traces").',
+          },
+          style: {
+            type: 'string',
+            description: 'Visual style (e.g. "watercolor", "flat vector", "isometric").',
+          },
+          density: {
+            type: 'string',
+            description: 'Motif density: low, medium, or high (default medium).',
+          },
+          size: {
+            type: 'string',
+            description: 'Named image size (default square).',
+          },
+          output_name: {
+            type: 'string',
+            description: 'File name stem / CSS class (default seamless-pattern).',
+          },
+        },
+        output: {
+          schema: {
+            type: 'object',
+            additionalProperties: true,
+            properties: {
+              summary: { type: 'string' },
+              path: { type: 'string' },
+              url: { type: 'string' },
+              css: { type: 'string' },
+              cssPath: { type: 'string' },
+              format: { type: 'string' },
+              attachment: { type: 'object', additionalProperties: true },
+            },
+          },
+        },
+        async execute(args, exec) {
+          try {
+            const cfg = live()
+            trackAndAssertLoopGuard(exec?.agent?.session?.id || 'default', { limit: cfg.loopGuardLimit })
+            const density = normalizeDensity(args.density)
+            const prompt = buildSeamlessPrompt(args.motif, args.style, density)
+            const provider = cfg.provider || 'fal'
+            const format = cfg.defaultFormat || 'png'
+            const size = args.size || 'square'
+            const seed = Math.floor(Math.random() * 100000)
+
+            const pdeps = {
+              fetchImpl: fetch,
+              resolveKey: (ref) => resolveApiKey(ctx, ref),
+              cfg,
+            }
+            const job = { prompt, size, format, seed, provider }
+            const providers = makeProviders(pdeps, job)
+            const fn = providers[provider] || providers.fal || providers.custom
+            const gen = await fn(seed, prompt)
+
+            const stem = slugify(args.output_name || 'seamless-pattern')
+            const name = `${stem}.${format}`
+            const { attachment, localUrl } = await saveAttachmentSafe(ctx, {
+              bytes: gen.bytes,
+              mediaType: gen.mediaType || 'image/png',
+              name,
+            })
+
+            const sessionCwd = exec?.agent?.session?.header?.cwd
+            const outDir = path.resolve(sessionCwd || process.cwd(), cfg.outputDir || 'generated/images')
+            await mkdir(outDir, { recursive: true })
+            const filePath = path.join(outDir, name)
+            await writeFile(filePath, gen.bytes)
+
+            const [tilePx] = sizeToPixels(size)
+            const css = buildPatternCss({ className: stem, sizePx: tilePx, imagePath: `./${name}` })
+            const cssPath = path.join(outDir, `${stem}.css`)
+            await writeFile(cssPath, css, 'utf8')
+
+            const summary = `### Seamless pattern (${density})\n`
+              + `- **Motif**: ${args.motif}\n`
+              + `- **File**: \`${filePath}\`\n`
+              + `- **CSS**: \`${cssPath}\`\n\n`
+              + `![${stem}](${localUrl || filePath})`
+
+            return toLosslessJson({
+              summary,
+              path: filePath,
+              url: localUrl,
+              css,
+              cssPath,
+              format,
+              attachment,
+            })
+          } catch (err) {
+            throw new Error(sanitizeErrorAndLogs(err.message || err))
+          }
+        },
+      }),
+    )
+  }, 'dsh-image-gen: tool generate_seamless_pattern')
+}

package/lib/tools/processing-advanced.js

@@ -458,7 +458,13 @@ export function registerProcessingAdvancedTools(ctx, deps) {
                   const b64 = Buffer.isBuffer(src.bytes) ? src.bytes.toString('base64') : Buffer.from(src.bytes).toString('base64')
                   logoDataUri = `data:${src.mediaType || 'image/png'};base64,${b64}`
                 }
-              } catch (_) {}
+              } catch (err) {
+                // Optional logo embed: brand pack still exports without it.
+                const msg = err?.message || String(err)
+                if (typeof ctx?.logger?.debug === 'function') {
+                  ctx.logger.debug(`dsh-image-gen: brand logo embed skipped: ${msg}`)
+                }
+              }
             }
 
             const exportedFiles = []

package/lib/tools/responsive.js

@@ -0,0 +1,267 @@
+// responsive — generate_responsive_mockups tool (#173)
+
+import { defineTool } from '@deepseek-ai/dsh-tools'
+import path from 'node:path'
+import { mkdir, writeFile } from 'node:fs/promises'
+import {
+  makeProviders,
+  toLosslessJson,
+  saveAttachmentSafe,
+  tryGenerate,
+  fallbackOrder,
+  PROVIDER_KEYS,
+} from '../providers.js'
+import { trackAndAssertLoopGuard } from '../loop-guard.js'
+import { sanitizeErrorAndLogs } from '../security.js'
+import { buildDualOutputMarkdown } from '../resolve-image.js'
+import {
+  buildResponsivePrompt,
+  deviceMeta,
+  mockupFileName,
+  normalizeDevices,
+  resolveDevicePreset,
+} from '../responsive-helpers.js'
+
+async function asyncPool(tasks, concurrency = 3) {
+  const results = new Array(tasks.length)
+  let nextIdx = 0
+  async function worker() {
+    while (nextIdx < tasks.length) {
+      const idx = nextIdx++
+      results[idx] = await tasks[idx]()
+    }
+  }
+  await Promise.all(
+    Array.from({ length: Math.min(concurrency, tasks.length) }, () => worker()),
+  )
+  return results
+}
+
+export function registerResponsiveTools(ctx, deps) {
+  const { live, resolveApiKey } = deps
+
+  ctx.effect(() => {
+    ctx.tools.register(
+      defineTool({
+        name: 'generate_responsive_mockups',
+        description:
+          'Generate one product UI mockup across Mobile (9:16), Tablet (3:4) and Desktop (16:9) viewports in one call (#173). '
+          + 'Keeps prompt, style and brand palette synchronized so the three screens look like the same product family. '
+          + 'Saves mockup-mobile.png, mockup-tablet.png and mockup-desktop.png and shows a tabbed preview in chat.',
+        parameters: {
+          prompt: {
+            type: 'string',
+            required: true,
+            description: 'Shared product/screen description used for all viewports (e.g. "settings dashboard for a smart home app").',
+          },
+          devices: {
+            type: 'array',
+            items: { type: 'string' },
+            description: 'Subset of viewports: mobile, tablet, desktop. Default: all three.',
+          },
+          style_preset: {
+            type: 'string',
+            description: 'Optional style preset shared by all viewports (same catalog as generate_image).',
+          },
+          palette_colors: {
+            type: 'array',
+            items: { type: 'string' },
+            description: 'Optional brand color hex list enforced across every viewport for visual consistency.',
+          },
+          seed: {
+            type: 'integer',
+            description: 'Optional base seed for reproducible responsive sets (each device uses seed, seed+1, seed+2…).',
+          },
+          output_name: {
+            type: 'string',
+            description: 'Optional file stem. Default produces mockup-mobile.png, mockup-tablet.png, mockup-desktop.png.',
+          },
+          output_dir: {
+            type: 'string',
+            description: 'Optional directory relative to session cwd (defaults to settings outputDir).',
+          },
+        },
+        output: {
+          schema: {
+            type: 'object',
+            additionalProperties: true,
+            properties: {
+              summary: { type: 'string' },
+              images: { type: 'array', items: { type: 'object', additionalProperties: true } },
+              devices: { type: 'array', items: { type: 'string' } },
+              count: { type: 'number' },
+              seedBase: { type: 'number' },
+              provider: { type: 'string' },
+              warnings: { type: 'array', items: { type: 'string' } },
+            },
+          },
+        },
+        async execute(args, exec) {
+          try {
+            const cfg = live()
+            trackAndAssertLoopGuard(exec?.agent?.session?.id || 'default', { limit: cfg.loopGuardLimit })
+            if (!args.prompt || !String(args.prompt).trim()) {
+              throw new Error('prompt is required for generate_responsive_mockups')
+            }
+
+            const devices = normalizeDevices(args.devices)
+            if (!devices.length) {
+              throw new Error('devices must include at least one of: mobile, tablet, desktop')
+            }
+
+            const provider = cfg.provider || 'fal'
+            const format = cfg.defaultFormat || 'png'
+            const seedBase = Number.isInteger(args.seed) ? args.seed : Math.floor(Math.random() * 100000)
+            const stylePreset = args.style_preset || cfg.stylePreset
+            const paletteColors = Array.isArray(args.palette_colors) ? args.palette_colors : undefined
+            const sessionCwd = exec?.agent?.session?.header?.cwd
+            const targetDir = (args.output_dir && String(args.output_dir).trim()) || cfg.outputDir || 'generated/images'
+            const outDir = path.resolve(sessionCwd || process.cwd(), targetDir)
+            await mkdir(outDir, { recursive: true })
+
+            const pdeps = {
+              fetchImpl: fetch,
+              resolveKey: (ref) => resolveApiKey(ctx, ref),
+              cfg,
+            }
+            const order = fallbackOrder(provider)
+            const warnings = []
+
+            const tasks = devices.map((device, index) => async () => {
+              const preset = resolveDevicePreset(device)
+              const devicePrompt = buildResponsivePrompt(args.prompt, {
+                device,
+                stylePreset,
+                paletteColors,
+              })
+              const seed = seedBase + index
+              const job = {
+                prompt: devicePrompt,
+                size: preset.size,
+                format,
+                seed,
+                provider,
+                ...(stylePreset ? { style: stylePreset, style_preset: stylePreset } : {}),
+                ...(paletteColors ? { palette_colors: paletteColors } : {}),
+              }
+              const providers = makeProviders(pdeps, job)
+              const generators = Object.fromEntries(PROVIDER_KEYS.map((k) => [
+                k,
+                async (s, p) => {
+                  const fn = providers[k]
+                  if (typeof fn !== 'function') throw new Error(`provider ${k} unavailable`)
+                  return fn(s, p)
+                },
+              ]))
+
+              try {
+                const gen = await tryGenerate(generators, order, seed, devicePrompt)
+                let bytes = gen.bytes || gen.image || gen.buffer
+                if (bytes && !Buffer.isBuffer(bytes)) bytes = Buffer.from(bytes)
+                if (!bytes || !bytes.length) throw new Error('provider returned empty image bytes')
+
+                const name = mockupFileName(device, {
+                  outputName: String(args.output_name || '').trim() || undefined,
+                })
+                const mediaType = gen.mediaType
+                  || `image/${String(gen.format || format).replace('jpg', 'jpeg')}`
+                const { attachment, localUrl } = await saveAttachmentSafe(ctx, {
+                  bytes,
+                  mediaType,
+                  name,
+                })
+                const filePath = path.join(outDir, name)
+                await writeFile(filePath, bytes)
+                const meta = deviceMeta(device)
+                return {
+                  success: true,
+                  ...meta,
+                  seed,
+                  path: filePath,
+                  url: localUrl,
+                  width: gen.width || attachment.width,
+                  height: gen.height || attachment.height,
+                  cost: gen.cost || 0,
+                  prompt: devicePrompt,
+                  format: String(gen.format || format).replace('jpg', 'jpeg'),
+                  attachment: {
+                    attachmentId: attachment.attachmentId,
+                    mediaType: attachment.mediaType,
+                    bytes: attachment.bytes,
+                    width: attachment.width,
+                    height: attachment.height,
+                    name: attachment.name,
+                  },
+                }
+              } catch (err) {
+                warnings.push(`${preset.id}: ${err?.message || err}`)
+                return { device: preset.id, success: false, error: err?.message || String(err) }
+              }
+            })
+
+            const settled = await asyncPool(tasks, 3)
+            const images = settled.filter((r) => r && r.success === true)
+            if (!images.length) {
+              throw new Error(`All responsive mockup generations failed: ${warnings.join('; ') || 'unknown error'}`)
+            }
+
+            const first = images[0]
+            const totalCost = images.reduce((s, i) => s + (i.cost || 0), 0)
+            const summaryBody = buildDualOutputMarkdown({
+              action: 'generated',
+              filePath: first.path,
+              width: first.width,
+              height: first.height,
+              mediaType: first.mediaType || `image/${format}`,
+              seed: seedBase,
+              provider,
+              model: cfg.model || cfg.customModel || 'default',
+              cost: totalCost,
+              attachmentId: first.attachment?.attachmentId || 'N/A',
+            })
+            const extraLines = images
+              .map((i) => `- **${i.device}** \`${i.path}\` (${i.width}×${i.height})`)
+              .join('\n')
+            // Machine-readable payload for the toolview tab strip (#173).
+            const tabPayload = JSON.stringify({
+              kind: 'generate_responsive_mockups',
+              images: images.map((i) => ({
+                device: i.device,
+                label: i.label,
+                aspect: i.aspect,
+                width: i.width,
+                height: i.height,
+                path: i.path,
+                seed: i.seed,
+                url: i.url,
+                attachment: i.attachment,
+              })),
+            })
+            const summary = `${summaryBody}\n\n**Responsive set (${images.length} viewports)**\n${extraLines}\n\n<dsh-image-gen-responsive>${tabPayload}</dsh-image-gen-responsive>`
+
+            return toLosslessJson({
+              summary,
+              images,
+              devices: images.map((i) => i.device),
+              count: images.length,
+              seedBase,
+              provider,
+              path: first.path,
+              url: first.url,
+              attachment: first.attachment,
+              width: first.width,
+              height: first.height,
+              seed: seedBase,
+              prompt: args.prompt,
+              cost: totalCost,
+              format,
+              ...(warnings.length ? { warnings } : {}),
+            })
+          } catch (err) {
+            throw new Error(sanitizeErrorAndLogs(err.message || err))
+          }
+        },
+      }),
+    )
+  }, 'dsh-image-gen: tool generate_responsive_mockups')
+}