Block

Image generation result

Name: ngx-prompt-kit
Author: PianoNic

Assistant returns a grid of generated images. pk-image handles base64 payloads natively (NgOptimizedImage doesn't accept data: URLs).

Generated images in a chat reply

Generate four cover variants in a sunset palette.

Here are four variants — each runs the same prompt through a different seed. Click any image to upscale.

Pending: variant 4 — waiting for the queue.

<pk-message>
  <pk-message-avatar src="" alt="Assistant" fallback="AI" />
  <div class="flex flex-1 flex-col gap-3">
    <p>Here are four variants — each runs through a different seed.</p>
    <div class="grid grid-cols-2 gap-2">
      <pk-image
        [base64]="art1Base64"
        mediaType="image/png"
        alt="Variant 1"
        class="aspect-square w-full rounded-md"
      />
      <pk-image
        [base64]="art2Base64"
        mediaType="image/png"
        alt="Variant 2"
        class="aspect-square w-full rounded-md"
      />
      <pk-image
        [base64]="art3Base64"
        mediaType="image/png"
        alt="Variant 3"
        class="aspect-square w-full rounded-md"
      />
      <pk-image alt="Pending generation" class="aspect-square w-full rounded-md" />
    </div>
  </div>
</pk-message>