Image Generation

ShipAny uses ai-sdk as its foundation library, combined with custom Providers to support mainstream image generation models.

Using OpenAI’s Image Models

Using OpenAI’s dall-e-3 model to generate images:

First, you need to add funds to your OpenAI Platform account and create an API Key.

Set environment variables

.env.development

OPENAI_BASE_URL = "https://api.openai.com/v1"
OPENAI_API_KEY = "sk-xxx"

Generate images

For providerOptions.openai supported parameters, refer to OpenAI Image Generation API documentation

app/api/demo/gen-image/route.ts

import { experimental_generateImage as generateImage } from "ai";
import { openai } from "@ai-sdk/openai";
 
const prompt = "a beautiful girl running with 2 cats";
const model = "dall-e-3";
 
const imageModel = openai.image(model);
const providerOptions = {
  openai: {
    quality: "hd",
    style: "natural",
  },
};
 
const { images, warnings } = await generateImage({
  model: imageModel,
  prompt: prompt,
  n: 1,
  providerOptions,
});

Preview result

openai-image

Using Image Models from Replicate

First, you need to link a credit card on Replicate and create an API Token.

Set environment variables

.env.development

REPLICATE_API_TOKEN = "r8_xxx"

Generate images

Choose an image generation model from the Replicate Model Hub and copy the model name.

For providerOptions.replicate supported parameters, refer to the chosen model’s API documentation

app/api/demo/gen-image/route.ts

import { experimental_generateImage as generateImage } from "ai";
import { replicate } from "@ai-sdk/replicate";
 
const prompt = "a beautiful girl running with 2 cats";
const model = "black-forest-labs/flux-1.1-pro";
 
const imageModel = replicate.image(model);
const providerOptions = {
  replicate: {
    output_quality: 90,
  },
};
 
const { images, warnings } = await generateImage({
  model: imageModel,
  prompt: prompt,
  n: 1,
  providerOptions,
});

Preview result

replicate-image

Using Kling AI’s Image Models

First, you need to add funds to Kling AI Image Generation API and create an API Key.

Set environment variables

.env.development

KLING_ACCESS_KEY = "xxx"
KLING_SECRET_KEY = "xxx"

Generate images

Note: Here we’re using ShipAny’s custom Provider: import { kling } from "@/aisdk/kling";, which has a different import path from the providers under @ai-sdk.

For providerOptions.kling supported parameters, refer to Kling Image Generation API documentation

app/api/demo/gen-image/route.ts

import { experimental_generateImage as generateImage } from "ai";
import { kling } from "@/aisdk/kling";
 
const prompt = "a beautiful girl running with 2 cats";
const model = "kling-v1";
 
const imageModel = kling.image(model);
const providerOptions = {
  kling: {},
};
 
const { images, warnings } = await generateImage({
  model: imageModel,
  prompt: prompt,
  n: 1,
  providerOptions,
});

Preview result

kling-image

Saving Images to Local Files

Images generated through generateImage are returned as an array of base64 encoded strings.

You can refer to the code below to save the image content to local files.

app/api/demo/gen-image/route.ts

const { images, warnings } = await generateImage({
  model: imageModel,
  prompt: prompt,
  n: 1,
  providerOptions,
});
 
if (warnings.length > 0) {
  console.log("gen images warnings:", provider, warnings);
  return respErr("gen images failed");
}
 
const batch = getUuid();
 
const processedImages = await Promise.all(
  images.map(async (image, index) => {
    const fileName = `${provider}_image_${batch}_${index}.png`;
    const filePath = path.join(process.cwd(), ".tmp", fileName);
 
    const buffer = Buffer.from(image.base64, "base64");
    await writeFile(filePath, buffer);
 
    return {
      provider,
      fileName,
      filePath,
    };
  })
);

References

Add Table Video Generation