feat (examples): show generate-image result preview in terminal (#4728)

vercel · Feb 7, 2025 · 0345e59 · 0345e59
1 parent 1f108fe
commit 0345e59
Show file tree

Hide file tree

Showing 20 changed files with 1,526 additions and 189 deletions.
diff --git a/examples/ai-core/.gitignore b/examples/ai-core/.gitignore
@@ -0,0 +1,2 @@
+output
+
diff --git a/examples/ai-core/package.json b/examples/ai-core/package.json
@@ -8,8 +8,8 @@
     "@ai-sdk/azure": "1.1.9",
     "@ai-sdk/cerebras": "0.1.8",
     "@ai-sdk/cohere": "1.1.8",
-    "@ai-sdk/deepseek": "0.1.8",
     "@ai-sdk/deepinfra": "0.1.9",
+    "@ai-sdk/deepseek": "0.1.8",
     "@ai-sdk/fal": "0.0.2",
     "@ai-sdk/fireworks": "0.1.8",
     "@ai-sdk/google": "1.1.10",
@@ -24,15 +24,18 @@
     "@ai-sdk/replicate": "0.1.7",
     "@ai-sdk/togetherai": "0.1.9",
     "@ai-sdk/xai": "1.1.8",
-    "@opentelemetry/sdk-node": "0.54.2",
+    "@google/generative-ai": "0.21.0",
     "@opentelemetry/auto-instrumentations-node": "0.54.0",
+    "@opentelemetry/sdk-node": "0.54.2",
     "@opentelemetry/sdk-trace-node": "1.28.0",
     "ai": "4.1.24",
     "dotenv": "16.4.5",
+    "image-type": "^5.2.0",
     "mathjs": "14.0.0",
+    "sharp": "^0.33.5",
+    "terminal-image": "^2.0.0",
     "zod": "3.23.8",
-    "zod-to-json-schema": "3.23.5",
-    "@google/generative-ai": "0.21.0"
+    "zod-to-json-schema": "3.23.5"
   },
   "scripts": {
     "test:e2e:all": "vitest run src/e2e/*.test.ts",

diff --git a/examples/ai-core/src/generate-image/deepinfra.ts b/examples/ai-core/src/generate-image/deepinfra.ts
@@ -1,19 +1,15 @@
 import { deepinfra } from '@ai-sdk/deepinfra';
 import { experimental_generateImage as generateImage } from 'ai';
+import { presentImages } from '../lib/present-image';
 import 'dotenv/config';
-import fs from 'fs';
 
 async function main() {
   const result = await generateImage({
     model: deepinfra.image('black-forest-labs/FLUX-1-schnell'),
     prompt: 'A resplendent quetzal mid flight amidst raindrops',
   });
 
-  for (const [index, image] of result.images.entries()) {
-    const filename = `image-${Date.now()}-${index}.png`;
-    fs.writeFileSync(filename, image.uint8Array);
-    console.log(`Image saved to ${filename}`);
-  }
+  await presentImages(result.images);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/fal.ts b/examples/ai-core/src/generate-image/fal.ts
@@ -1,17 +1,15 @@
 import { fal } from '@ai-sdk/fal';
 import { experimental_generateImage as generateImage } from 'ai';
+import { presentImages } from '../lib/present-image';
 import 'dotenv/config';
-import fs from 'node:fs';
 
 async function main() {
-  const { image } = await generateImage({
+  const { images } = await generateImage({
     model: fal.image('fal-ai/flux/schnell'),
-    prompt: 'A cat wearing a intricate robe',
+    prompt:
+      'A cat wearing an intricate robe while gesticulating wildly, in the style of 80s pop art',
   });
-
-  const filename = `image-${Date.now()}.png`;
-  fs.writeFileSync(filename, image.uint8Array);
-  console.log(`Image saved to ${filename}`);
+  await presentImages(images);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/fireworks.ts b/examples/ai-core/src/generate-image/fireworks.ts
@@ -1,7 +1,7 @@
-import 'dotenv/config';
 import { fireworks } from '@ai-sdk/fireworks';
 import { experimental_generateImage as generateImage } from 'ai';
-import fs from 'fs';
+import { presentImages } from '../lib/present-image';
+import 'dotenv/config';
 
 async function main() {
   const result = await generateImage({
@@ -21,11 +21,7 @@ async function main() {
     },
   });
 
-  for (const [index, image] of result.images.entries()) {
-    const filename = `image-${Date.now()}-${index}.png`;
-    fs.writeFileSync(filename, image.uint8Array);
-    console.log(`Image saved to ${filename}`);
-  }
+  await presentImages(result.images);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/google-vertex.ts b/examples/ai-core/src/generate-image/google-vertex.ts
@@ -1,7 +1,7 @@
-import 'dotenv/config';
 import { vertex } from '@ai-sdk/google-vertex';
 import { experimental_generateImage as generateImage } from 'ai';
-import fs from 'fs';
+import { presentImages } from '../lib/present-image';
+import 'dotenv/config';
 
 async function main() {
   const { image } = await generateImage({
@@ -16,9 +16,7 @@ async function main() {
     },
   });
 
-  const filename = `image-${Date.now()}.png`;
-  fs.writeFileSync(filename, image.uint8Array);
-  console.log(`Image saved to ${filename}`);
+  await presentImages([image]);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/luma-character-reference.ts b/examples/ai-core/src/generate-image/luma-character-reference.ts
@@ -1,7 +1,7 @@
 import { luma } from '@ai-sdk/luma';
 import { experimental_generateImage as generateImage } from 'ai';
+import { presentImages } from '../lib/present-image';
 import 'dotenv/config';
-import fs from 'fs';
 
 async function main() {
   const result = await generateImage({
@@ -22,11 +22,7 @@ async function main() {
     },
   });
 
-  for (const [index, image] of result.images.entries()) {
-    const filename = `image-${Date.now()}-${index}.png`;
-    fs.writeFileSync(filename, image.uint8Array);
-    console.log(`Image saved to ${filename}`);
-  }
+  await presentImages(result.images);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/luma-image-reference.ts b/examples/ai-core/src/generate-image/luma-image-reference.ts
@@ -1,7 +1,7 @@
 import { luma } from '@ai-sdk/luma';
 import { experimental_generateImage as generateImage } from 'ai';
+import { presentImages } from '../lib/present-image';
 import 'dotenv/config';
-import fs from 'fs';
 
 async function main() {
   const result = await generateImage({
@@ -21,11 +21,7 @@ async function main() {
     },
   });
 
-  for (const [index, image] of result.images.entries()) {
-    const filename = `image-${Date.now()}-${index}.png`;
-    fs.writeFileSync(filename, image.uint8Array);
-    console.log(`Image saved to ${filename}`);
-  }
+  await presentImages(result.images);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/luma-modify-image.ts b/examples/ai-core/src/generate-image/luma-modify-image.ts
@@ -1,7 +1,7 @@
 import { luma } from '@ai-sdk/luma';
 import { experimental_generateImage as generateImage } from 'ai';
+import { presentImages } from '../lib/present-image';
 import 'dotenv/config';
-import fs from 'fs';
 
 async function main() {
   const result = await generateImage({
@@ -19,11 +19,7 @@ async function main() {
     },
   });
 
-  for (const [index, image] of result.images.entries()) {
-    const filename = `image-${Date.now()}-${index}.png`;
-    fs.writeFileSync(filename, image.uint8Array);
-    console.log(`Image saved to ${filename}`);
-  }
+  await presentImages(result.images);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/luma-style-reference.ts b/examples/ai-core/src/generate-image/luma-style-reference.ts
@@ -1,7 +1,7 @@
 import { luma } from '@ai-sdk/luma';
 import { experimental_generateImage as generateImage } from 'ai';
+import { presentImages } from '../lib/present-image';
 import 'dotenv/config';
-import fs from 'fs';
 
 async function main() {
   const result = await generateImage({
@@ -21,11 +21,7 @@ async function main() {
     },
   });
 
-  for (const [index, image] of result.images.entries()) {
-    const filename = `image-${Date.now()}-${index}.png`;
-    fs.writeFileSync(filename, image.uint8Array);
-    console.log(`Image saved to ${filename}`);
-  }
+  await presentImages(result.images);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/luma.ts b/examples/ai-core/src/generate-image/luma.ts
@@ -1,7 +1,7 @@
 import { luma } from '@ai-sdk/luma';
 import { experimental_generateImage as generateImage } from 'ai';
+import { presentImages } from '../lib/present-image';
 import 'dotenv/config';
-import fs from 'fs';
 
 async function main() {
   const result = await generateImage({
@@ -15,11 +15,7 @@ async function main() {
     },
   });
 
-  for (const [index, image] of result.images.entries()) {
-    const filename = `image-${Date.now()}-${index}.png`;
-    fs.writeFileSync(filename, image.uint8Array);
-    console.log(`Image saved to ${filename}`);
-  }
+  await presentImages(result.images);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/openai-many.ts b/examples/ai-core/src/generate-image/openai-many.ts
@@ -1,7 +1,7 @@
 import { openai } from '@ai-sdk/openai';
 import { experimental_generateImage as generateImage } from 'ai';
+import { presentImages } from '../lib/present-image';
 import 'dotenv/config';
-import fs from 'fs';
 
 async function main() {
   const { images } = await generateImage({
@@ -10,11 +10,7 @@ async function main() {
     prompt: 'Santa Claus driving a Cadillac',
   });
 
-  for (const image of images) {
-    const filename = `image-${Date.now()}.png`;
-    fs.writeFileSync(filename, image.uint8Array);
-    console.log(`Image saved to ${filename}`);
-  }
+  await presentImages(images);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/openai.ts b/examples/ai-core/src/generate-image/openai.ts
@@ -1,17 +1,15 @@
 import { openai } from '@ai-sdk/openai';
 import { experimental_generateImage as generateImage } from 'ai';
+import { presentImages } from '../lib/present-image';
 import 'dotenv/config';
-import fs from 'fs';
 
 async function main() {
   const { image } = await generateImage({
     model: openai.image('dall-e-3'),
     prompt: 'Santa Claus driving a Cadillac',
   });
 
-  const filename = `image-${Date.now()}.png`;
-  fs.writeFileSync(filename, image.uint8Array);
-  console.log(`Image saved to ${filename}`);
+  await presentImages([image]);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/replicate-1.ts b/examples/ai-core/src/generate-image/replicate-1.ts
@@ -1,17 +1,15 @@
 import { replicate } from '@ai-sdk/replicate';
 import { experimental_generateImage as generateImage } from 'ai';
+import { presentImages } from '../lib/present-image';
 import 'dotenv/config';
-import fs from 'node:fs';
 
 async function main() {
   const { image } = await generateImage({
     model: replicate.image('black-forest-labs/flux-schnell'),
     prompt: 'The Loch Ness Monster getting a manicure',
   });
 
-  const filename = `image-${Date.now()}.png`;
-  fs.writeFileSync(filename, image.uint8Array);
-  console.log(`Image saved to ${filename}`);
+  await presentImages([image]);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/replicate-2.ts b/examples/ai-core/src/generate-image/replicate-2.ts
@@ -1,7 +1,7 @@
 import { replicate } from '@ai-sdk/replicate';
 import { experimental_generateImage as generateImage } from 'ai';
+import { presentImages } from '../lib/present-image';
 import 'dotenv/config';
-import fs from 'node:fs';
 
 async function main() {
   const { image } = await generateImage({
@@ -10,9 +10,7 @@ async function main() {
     aspectRatio: '16:9',
   });
 
-  const filename = `image-${Date.now()}.png`;
-  fs.writeFileSync(filename, image.uint8Array);
-  console.log(`Image saved to ${filename}`);
+  await presentImages([image]);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/replicate-3.ts b/examples/ai-core/src/generate-image/replicate-3.ts
@@ -1,7 +1,7 @@
 import { replicate } from '@ai-sdk/replicate';
 import { experimental_generateImage as generateImage } from 'ai';
+import { presentImages } from '../lib/present-image';
 import 'dotenv/config';
-import fs from 'node:fs';
 
 async function main() {
   const { image } = await generateImage({
@@ -15,9 +15,7 @@ async function main() {
     },
   });
 
-  const filename = `image-${Date.now()}.png`;
-  fs.writeFileSync(filename, image.uint8Array);
-  console.log(`Image saved to ${filename}`);
+  await presentImages([image]);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/replicate-versioned.ts b/examples/ai-core/src/generate-image/replicate-versioned.ts
@@ -1,7 +1,7 @@
 import { replicate } from '@ai-sdk/replicate';
 import { experimental_generateImage as generateImage } from 'ai';
+import { presentImages } from '../lib/present-image';
 import 'dotenv/config';
-import fs from 'node:fs';
 
 async function main() {
   const { image } = await generateImage({
@@ -11,9 +11,7 @@ async function main() {
     prompt: 'The Loch Ness Monster getting a manicure',
   });
 
-  const filename = `image-${Date.now()}.png`;
-  fs.writeFileSync(filename, image.uint8Array);
-  console.log(`Image saved to ${filename}`);
+  await presentImages([image]);
 }
 
 main().catch(console.error);
diff --git a/examples/ai-core/src/generate-image/togetherai.ts b/examples/ai-core/src/generate-image/togetherai.ts
@@ -1,7 +1,7 @@
 import { togetherai } from '@ai-sdk/togetherai';
 import { experimental_generateImage as generateImage } from 'ai';
+import { presentImages } from '../lib/present-image';
 import 'dotenv/config';
-import fs from 'fs';
 
 async function main() {
   const result = await generateImage({
@@ -16,11 +16,7 @@ async function main() {
     },
   });
 
-  for (const [index, image] of result.images.entries()) {
-    const filename = `image-${Date.now()}-${index}.png`;
-    fs.writeFileSync(filename, image.uint8Array);
-    console.log(`Image saved to ${filename}`);
-  }
+  await presentImages(result.images);
 }
 
 main().catch(console.error);