Reasoning

As text prompts are for content creation, so we could look into the way images are dynamically generated.

How it works

<ai-img
  src="http://localhost:4321/api/openai/img"
  width="256" height="256"
  prompt="funny dolphin up to no good"
  fallback="https://placekitten.com/256/256"
></ai-img>
 
<script type="module">import 'wc-img-ai';</script>

The api server itself needs to receive this body and return a string with the url of the image

Function: POST

This function sends a request to the an API to generate an image based on a given prompt.

Request Body Format

• prompt (string): The description or prompt based on which the image will be generated.
• width (number): The width of the desired image in pixels.
• height (number): The height of the desired image in pixels.

Example Request Body

{
  "prompt": "a sleeping little kitten",
  "width": 300,
  "height": 300
}

Return

"https://example.com/path/to/generated/image.jpg"