llm.generateImage

llm.generateImage

Generates an image from a given text prompt

The llm.generateImage() function is used to generate an image based on a textual description or prompt provided by the user. The image is being generated by the DALL-E-2 of OpenAI.

Syntax

const { images } = await llm.generateImage({ prompt, n, size });
const { images } = await llm.generateImage({ prompt, n, size });

Parameters

This function accepts an object with the following property:

  • prompt: A string that describes the image to be generated.
  • n (optional): A number that specifies the number of variations to generate. If not provided, the default is 1.
  • size (optional): A string that specifies the size of the generated images. It can be either "256x256", "512x512", or "1024x1024". If not provided, the default is "256x256".

Return Value

It returns a Promise which resolves to an object containing a list of URLs or Base64 encoded strings representing the generated images.

Example

Here's an example implementation of llm.generateImage function (live demo):

import { Button, Input } from "@/components/ui";
import useLLM from "@/usellm";
import React, { useState } from "react";
 
export default function ImageGeneration() {
  const [prompt, setPrompt] = useState("");
  const [image, setImage] = useState("");
  const llm = useLLM({ serviceUrl: "/api/llm" });
 
  async function handleGenerateClick() {
    setImage("");
    const { images } = await llm.generateImage({ prompt });
    setImage(images[0]);
  }
 
  return (
    <div className="max-w-4xl w-full mx-auto my-4">
      <h1 className="font-medium text-4xl text-center">Image Generation</h1>
      <div className="flex mt-4">
        <Input
          type="text"
          placeholder="Enter a prompt here"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
        />
        <Button onClick={handleGenerateClick} className="ml-2">
          Generate
        </Button>
      </div>
      {image && (
        <img
          className="mt-4"
          src={image}
          alt={prompt}
          width={256}
          height={256}
        />
      )}
    </div>
  );
}
import { Button, Input } from "@/components/ui";
import useLLM from "@/usellm";
import React, { useState } from "react";
 
export default function ImageGeneration() {
  const [prompt, setPrompt] = useState("");
  const [image, setImage] = useState("");
  const llm = useLLM({ serviceUrl: "/api/llm" });
 
  async function handleGenerateClick() {
    setImage("");
    const { images } = await llm.generateImage({ prompt });
    setImage(images[0]);
  }
 
  return (
    <div className="max-w-4xl w-full mx-auto my-4">
      <h1 className="font-medium text-4xl text-center">Image Generation</h1>
      <div className="flex mt-4">
        <Input
          type="text"
          placeholder="Enter a prompt here"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
        />
        <Button onClick={handleGenerateClick} className="ml-2">
          Generate
        </Button>
      </div>
      {image && (
        <img
          className="mt-4"
          src={image}
          alt={prompt}
          width={256}
          height={256}
        />
      )}
    </div>
  );
}

In the above example, the llm.generateImage() method is called when the "Generate" button is clicked. The function generates an image from the text prompt provided by the user.

Note: We are planning to add more features to this function in future updates to the useLLM API, stay tuned for more details.