src/routes/image-generation/+page.svelte

<script lang="ts">
  import Form from "$lib/components/image-generation/Form.svelte";
  import Response from "$lib/components/image-generation/Response.svelte";
  import Loading from "$lib/components/Loading.svelte";

  let loading: boolean = false;
  let data: string | ArrayBuffer | null = ''
  let bodyRequest: Record<string, any> = {}

  let form: Record<string, any> = {
    model: "stabilityai/stable-diffusion-xl-base-1.0",
    inputs: "A red apple on a table, high definition, realistic, 4k",
    parameters: {
      negative_prompt: "not blurry, not low resolution, not pixelated",
      guidance_scale: 9,
      width: 768,
      height: 1024,
      num_inference_steps: 20,
    },
  }

  const onchange = (newForm: Record<string, any>) => form = newForm

  const onsubmit = async () => {
    if (loading) return
    loading = true
    const request = await fetch('/api/image-generation', {
      method: 'POST',
      body: JSON.stringify(form),
      headers: {
        "Content-Type": "application/json"
      }
    })
    const blob = await request?.clone()?.blob()

    if (blob) {
      const reader = new FileReader()
      reader.readAsDataURL(blob)
      reader.onloadend = () => {
        const base64data = reader.result
        data = base64data
      }
    }

    const res = await request.clone().json().catch(() => ({}))
    if (res) {
      data = res
    }

    bodyRequest = form
    loading = false
  }
</script>

<main class="min-h-screen w-full grid grid-cols-1 lg:grid-cols-2">
  <div class="p-6 lg:p-10 w-full flex flex-col gap-6 lg:overflow-auto lg:h-screen">
    <Form form={form} onForm={onchange} />
    <div class="flex justify-end">
      <button
        class="w-full bg-gradient-to-r from-slate-900/50 to-slate-900 border border-slate-800/40 text-white rounded-lg text-base transition-all duration-200 leading-relaxed outline-none relative py-3 px-6"
        disabled={loading}
        on:click={onsubmit}
      >
        {#if loading}
          <Loading />
        {/if}
        Submit
      </button>
    </div>
  </div>
  <div class="border-t lg:border-t-0 lg:border-l border-slate-900 bg-slate-950">
    <Response loading={loading} res={data} body={bodyRequest} form={form} endpoint={form.model} />
  </div>
</main>