Image Generator with Controls

<section
  class="mx-auto max-w-3xl overflow-hidden rounded-2xl border shadow-md"
  style="
    --ws-image-generator-bg: oklch(0.985 0.002 75);
    --ws-image-generator-text: oklch(0.205 0.015 75);
    --ws-image-generator-text-soft: oklch(0.556 0.01 75);
    --ws-image-generator-border: oklch(0.885 0.008 75);
    --ws-image-generator-accent: oklch(0.588 0.16 250);
    --ws-image-generator-action-bg: oklch(0.588 0.16 250);
    --ws-image-generator-action-text: oklch(0.985 0.002 75);
    background: var(--ws-image-generator-bg);
    color: var(--ws-image-generator-text);
    border-color: var(--ws-image-generator-border);
  "
>
  <!-- Prompt input -->
  <div class="p-6 pb-4">
    <label for="img-gen-controls-prompt" class="sr-only">Describe your image</label>
    <div class="flex items-center gap-3">
      <input
        id="img-gen-controls-prompt"
        type="text"
        placeholder="Describe your image..."
        class="flex-1 rounded-xl border px-4 py-3 text-sm outline-none transition focus:ring-2"
        style="border-color: var(--ws-image-generator-border); background: var(--ws-image-generator-bg); color: var(--ws-image-generator-text)"
      />
      <button
        type="button"
        class="shrink-0 rounded-xl px-5 py-3 text-sm font-medium transition hover:opacity-90"
        style="background: var(--ws-image-generator-action-bg); color: var(--ws-image-generator-action-text)"
      >
        Generate
      </button>
    </div>
  </div>

  <!-- Controls -->
  <div
    class="space-y-4 border-b px-6 pb-6"
    style="border-color: var(--ws-image-generator-border)"
  >
    <!-- Style selector -->
    <div>
      <p class="mb-2 text-xs font-medium" style="color: var(--ws-image-generator-text-soft)">Style</p>
      <div class="flex flex-wrap gap-2" role="radiogroup" aria-label="Image style">
        <span
          role="radio"
          aria-checked="true"
          tabindex="0"
          class="cursor-pointer rounded-full px-3.5 py-1.5 text-xs font-medium text-white"
          style="background: var(--ws-image-generator-accent)"
        >Photorealistic</span>
        <span
          role="radio"
          aria-checked="false"
          tabindex="-1"
          class="cursor-pointer rounded-full border px-3.5 py-1.5 text-xs font-medium"
          style="border-color: var(--ws-image-generator-border); color: var(--ws-image-generator-text)"
        >Illustration</span>
        <span
          role="radio"
          aria-checked="false"
          tabindex="-1"
          class="cursor-pointer rounded-full border px-3.5 py-1.5 text-xs font-medium"
          style="border-color: var(--ws-image-generator-border); color: var(--ws-image-generator-text)"
        >Abstract</span>
        <span
          role="radio"
          aria-checked="false"
          tabindex="-1"
          class="cursor-pointer rounded-full border px-3.5 py-1.5 text-xs font-medium"
          style="border-color: var(--ws-image-generator-border); color: var(--ws-image-generator-text)"
        >3D Render</span>
      </div>
    </div>

    <!-- Aspect ratio -->
    <div>
      <p class="mb-2 text-xs font-medium" style="color: var(--ws-image-generator-text-soft)">Aspect Ratio</p>
      <div class="flex gap-2" role="radiogroup" aria-label="Aspect ratio">
        <span
          role="radio"
          aria-checked="true"
          tabindex="0"
          class="cursor-pointer rounded-lg px-3.5 py-1.5 text-xs font-medium text-white"
          style="background: var(--ws-image-generator-accent)"
        >1:1</span>
        <span
          role="radio"
          aria-checked="false"
          tabindex="-1"
          class="cursor-pointer rounded-lg border px-3.5 py-1.5 text-xs font-medium"
          style="border-color: var(--ws-image-generator-border); color: var(--ws-image-generator-text)"
        >16:9</span>
        <span
          role="radio"
          aria-checked="false"
          tabindex="-1"
          class="cursor-pointer rounded-lg border px-3.5 py-1.5 text-xs font-medium"
          style="border-color: var(--ws-image-generator-border); color: var(--ws-image-generator-text)"
        >9:16</span>
      </div>
    </div>

    <!-- Quality toggle -->
    <div>
      <p class="mb-2 text-xs font-medium" style="color: var(--ws-image-generator-text-soft)">Quality</p>
      <div class="flex gap-2" role="radiogroup" aria-label="Image quality">
        <span
          role="radio"
          aria-checked="true"
          tabindex="0"
          class="cursor-pointer rounded-lg border px-3.5 py-1.5 text-xs font-medium"
          style="border-color: var(--ws-image-generator-border); color: var(--ws-image-generator-text)"
        >Standard</span>
        <span
          role="radio"
          aria-checked="false"
          tabindex="-1"
          class="cursor-pointer rounded-lg border px-3.5 py-1.5 text-xs font-medium text-white"
          style="background: var(--ws-image-generator-accent)"
        >HD</span>
      </div>
    </div>
  </div>

  <!-- Image output area -->
  <div class="p-6">
    <div
      class="flex aspect-square flex-col items-center justify-center rounded-xl"
      style="background: linear-gradient(135deg, oklch(0.75 0.1 250), oklch(0.65 0.15 300), oklch(0.7 0.12 200))"
      role="img"
      aria-label="Generated image placeholder"
    >
      <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
      </svg>
      <p class="mt-3 text-sm font-medium text-white/60">Ready to generate</p>
    </div>
  </div>
</section>