designkit-ai 1.1.0 → 1.1.2

package/bin/designkit.js

@@ -76,6 +76,8 @@ program
   .option('-o, --output <dir>', 'Output directory', '.')
   .option('-n, --name <name>', 'Output filename (without extension)', 'image')
   .option('-c, --count <n>', 'Number of images to generate (1–4)', '1')
+  .option('-m, --model <model>', 'Gemini model to use (run --list-models to see all)')
+  .option('--list-models', 'Show all available image models')
   .option('--aspect <ratio>', 'Aspect ratio: 1:1, 16:9, 9:16, 4:3, 3:4', '1:1')
   .option('--size <size>', 'DALL-E size: 1024x1024, 1792x1024, 1024x1792', '1024x1024')
   .option('--quality <quality>', 'DALL-E quality: standard, hd', 'standard')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designkit-ai",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "502 HTML UI components + AI skills for designing and building web and mobile apps",
   "keywords": [
     "design-system",

package/src/commands/imagine.js

@@ -1,13 +1,12 @@
 import { GoogleGenAI } from '@google/genai'
 import OpenAI from 'openai'
 import { writeFileSync, existsSync, mkdirSync } from 'fs'
-import { resolve, dirname } from 'path'
+import { resolve } from 'path'
 
-const IMAGEN_MODEL = 'imagen-3.0-generate-002'
 const DALLE_MODEL = 'dall-e-3'
 
 const PROVIDERS = {
-  gemini: { envKey: 'GEMINI_API_KEY', label: 'Imagen 3 (Google Gemini)' },
+  gemini: { envKey: 'GEMINI_API_KEY', label: 'Gemini (Google)' },
   openai: { envKey: 'OPENAI_API_KEY', label: 'DALL-E 3 (OpenAI)' }
 }
 
@@ -22,10 +21,35 @@ function checkApiKey(provider) {
   return key
 }
 
+const GEMINI_MODELS = [
+  { model: 'gemini-2.5-flash-image',          type: 'gemini', note: 'Default — fast, good quality' },
+  { model: 'gemini-3.1-flash-image-preview',  type: 'gemini', note: 'Newer flash preview' },
+  { model: 'gemini-3-pro-image-preview',      type: 'gemini', note: 'Pro quality' },
+  { model: 'imagen-4.0-fast-generate-001',    type: 'imagen', note: 'Imagen 4 Fast' },
+  { model: 'imagen-4.0-generate-001',         type: 'imagen', note: 'Imagen 4 — high quality' },
+  { model: 'imagen-4.0-ultra-generate-001',   type: 'imagen', note: 'Imagen 4 Ultra — best quality' },
+]
+
 export async function imagineCommand(prompt, options) {
   const provider = options.provider || 'gemini'
   const validProviders = Object.keys(PROVIDERS)
 
+  // --list-models: show available models and exit
+  if (options.listModels) {
+    console.log('\nGemini image models:\n')
+    console.log('  ' + 'Model'.padEnd(42) + 'Notes')
+    console.log('  ' + '─'.repeat(60))
+    for (const m of GEMINI_MODELS) {
+      console.log(`  ${m.model.padEnd(42)}${m.note}`)
+    }
+    console.log('\nOpenAI image models:\n')
+    console.log('  dall-e-3                                  Standard or HD quality')
+    console.log('\nUsage:')
+    console.log('  designkit imagine "prompt" --model imagen-4.0-ultra-generate-001')
+    console.log('')
+    return
+  }
+
   if (!validProviders.includes(provider)) {
     console.error(`Error: Unknown provider "${provider}". Available: ${validProviders.join(', ')}`)
     process.exit(1)
@@ -37,19 +61,69 @@ export async function imagineCommand(prompt, options) {
 
   if (!existsSync(outputDir)) mkdirSync(outputDir, { recursive: true })
 
-  console.error(`\nProvider: ${PROVIDERS[provider].label}`)
-  console.error(`Prompt: ${prompt}`)
-  console.error(`Count: ${count}`)
-  console.error(`Output: ${outputDir}\n`)
-
   if (provider === 'gemini') {
-    await generateWithGemini({ apiKey, prompt, count, outputDir, options })
+    const model = options.model || 'gemini-2.5-flash-image'
+    console.error(`\nModel: ${model}`)
+    console.error(`Prompt: ${prompt}`)
+    console.error(`Count: ${count}`)
+    console.error(`Output: ${outputDir}\n`)
+
+    // imagen-* models use generateImages API
+    // gemini-* models use generateContent with responseModalities
+    if (model.startsWith('imagen')) {
+      await generateWithImagen({ apiKey, model, prompt, count, outputDir, options })
+    } else {
+      await generateWithGeminiFlash({ apiKey, model, prompt, count, outputDir, options })
+    }
   } else if (provider === 'openai') {
+    console.error(`\nModel: ${DALLE_MODEL}`)
+    console.error(`Prompt: ${prompt}`)
+    console.error(`Count: ${count}`)
+    console.error(`Output: ${outputDir}\n`)
     await generateWithOpenAI({ apiKey, prompt, count, outputDir, options })
   }
 }
 
-async function generateWithGemini({ apiKey, prompt, count, outputDir, options }) {
+// gemini-2.5-flash, gemini-2.0-flash-exp-image-generation, etc.
+async function generateWithGeminiFlash({ apiKey, model, prompt, count, outputDir, options }) {
+  const ai = new GoogleGenAI({ apiKey })
+  console.error(`Generating images...`)
+
+  const saved = []
+  for (let i = 0; i < count; i++) {
+    const response = await ai.models.generateContent({
+      model,
+      contents: prompt,
+      config: {
+        responseModalities: ['image', 'text'],
+      }
+    })
+
+    const parts = response.candidates?.[0]?.content?.parts || []
+    const imagePart = parts.find(p => p.inlineData?.mimeType?.startsWith('image/'))
+
+    if (!imagePart?.inlineData?.data) {
+      console.error(`Warning: No image in response ${i + 1}`)
+      continue
+    }
+
+    const ext = imagePart.inlineData.mimeType === 'image/jpeg' ? 'jpg' : 'png'
+    const filename = count === 1
+      ? `${options.name || 'image'}.${ext}`
+      : `${options.name || 'image'}-${i + 1}.${ext}`
+
+    const outputPath = resolve(outputDir, filename)
+    const buffer = Buffer.from(imagePart.inlineData.data, 'base64')
+    writeFileSync(outputPath, buffer)
+    saved.push(outputPath)
+    console.error(`Saved: ${outputPath}`)
+  }
+
+  console.error(`\nDone — ${saved.length} image(s) generated`)
+}
+
+// imagen-3.0-generate-002
+async function generateWithImagen({ apiKey, model, prompt, count, outputDir, options }) {
   const ai = new GoogleGenAI({ apiKey })
 
   const config = {
@@ -57,21 +131,13 @@ async function generateWithGemini({ apiKey, prompt, count, outputDir, options })
     outputMimeType: 'image/png'
   }
 
-  if (options.width && options.height) {
-    config.aspectRatio = getAspectRatio(parseInt(options.width), parseInt(options.height))
-  } else if (options.aspect) {
-    config.aspectRatio = options.aspect
-  }
+  if (options.aspect) config.aspectRatio = options.aspect
 
-  console.error(`Generating with Imagen 3...`)
-
-  const response = await ai.models.generateImages({
-    model: IMAGEN_MODEL,
-    prompt,
-    config
-  })
+  console.error(`Generating images...`)
 
+  const response = await ai.models.generateImages({ model, prompt, config })
   const images = response.generatedImages || []
+
   if (!images.length) {
     console.error('Error: No images generated')
     process.exit(1)
@@ -83,12 +149,11 @@ async function generateWithGemini({ apiKey, prompt, count, outputDir, options })
     if (!imageData) continue
 
     const filename = count === 1
-      ? (options.name || 'image') + '.png'
+      ? `${options.name || 'image'}.png`
       : `${options.name || 'image'}-${i + 1}.png`
 
     const outputPath = resolve(outputDir, filename)
-    const buffer = Buffer.from(imageData, 'base64')
-    writeFileSync(outputPath, buffer)
+    writeFileSync(outputPath, Buffer.from(imageData, 'base64'))
     saved.push(outputPath)
     console.error(`Saved: ${outputPath}`)
   }
@@ -98,13 +163,11 @@ async function generateWithGemini({ apiKey, prompt, count, outputDir, options })
 
 async function generateWithOpenAI({ apiKey, prompt, count, outputDir, options }) {
   const client = new OpenAI({ apiKey })
-
   const size = options.size || '1024x1024'
   const quality = options.quality || 'standard'
 
-  console.error(`Generating with DALL-E 3...`)
+  console.error(`Generating images...`)
 
-  // DALL-E 3 only supports n=1 at a time
   const saved = []
   for (let i = 0; i < count; i++) {
     const response = await client.images.generate({
@@ -120,24 +183,14 @@ async function generateWithOpenAI({ apiKey, prompt, count, outputDir, options })
     if (!imageData) continue
 
     const filename = count === 1
-      ? (options.name || 'image') + '.png'
+      ? `${options.name || 'image'}.png`
       : `${options.name || 'image'}-${i + 1}.png`
 
     const outputPath = resolve(outputDir, filename)
-    const buffer = Buffer.from(imageData, 'base64')
-    writeFileSync(outputPath, buffer)
+    writeFileSync(outputPath, Buffer.from(imageData, 'base64'))
     saved.push(outputPath)
     console.error(`Saved: ${outputPath}`)
   }
 
   console.error(`\nDone — ${saved.length} image(s) generated`)
 }
-
-function getAspectRatio(width, height) {
-  const ratio = width / height
-  if (ratio >= 1.7) return '16:9'
-  if (ratio >= 1.3) return '4:3'
-  if (ratio >= 0.95) return '1:1'
-  if (ratio >= 0.7) return '3:4'
-  return '9:16'
-}