src/lib/components/image-generation/Form.svelte

<script lang="ts">
  import Prompt from "$lib/components/Prompt.svelte";
	import SelectModel from "$lib/components/SelectModel.svelte";
  import Input from "$lib/components/Input.svelte";
  import Toggle from "$lib/components/Toggle.svelte";
	import { IMAGE_GENERATIONS } from "$lib/utils/models";

  export let form: Record<string, any>;
  export let onForm: (form: Record<string, any>) => void;
</script>

<SelectModel value={form.model} items={IMAGE_GENERATIONS} onChange={(model) => onForm({ ...form, model })} />
<Prompt
  value={form.inputs}
  placeholder="A red apple on a table"
  onChange={(inputs) => onForm({ ...form, inputs })}
/>
<div class="flex items-center justify-start gap-4 mt-3">
  <p class="text-slate-500 uppercase font-medium text-sm">
    Optional parameters
  </p>
  <div class="w-full flex-1 h-[1px] bg-slate-600" />
</div>
<div class="grid grid-cols-2 gap-x-10 gap-y-6">
  <Input
    label="Negative prompt"
    type="text"
    class="col-span-2"
    tooltip="A text describing content that you want the model to steer away from."
    value={form?.parameters?.negative_prompt}
    onChange={(negative_prompt) =>
      onForm({
        ...form,
        parameters: { ...form.parameters, negative_prompt },
      })
    }
  />
  <div class="flex flex-col gap-3">
    <Input
      label="Guidance scale"
      type="number"
      tooltip="How closely you want the model to match the prompt. Lower numbers are less accurate, very high numbers might decrease image quality or generate artifacts."
      min={1}
      max={100}
      sanitize={(value) => {
        const valueAsNumber = Number(value);
        if (valueAsNumber > 1) return 1;
        if (valueAsNumber < 0) return 0;
        return valueAsNumber;
      }}
      value={form?.parameters?.guidance_scale}
      onChange={(guidance_scale) =>
        onForm({
          ...form,
          parameters: { ...form.parameters, guidance_scale },
        })
      }
    />
    <Input
      label="Inference steps"
      type="number"
      tooltip="The number of denoising steps to run. Larger numbers may produce better quality but will be slower. Typical values are between 20 and 50 steps."
      min={20}
      max={50}
      sanitize={(value) => {
        const valueAsNumber = Number(value);
        if (valueAsNumber > 1) return 1;
        if (valueAsNumber < 0) return 0;
        return valueAsNumber;
      }}
      value={form?.parameters?.num_inference_steps}
      onChange={(num_inference_steps) =>
        onForm({
          ...form,
          parameters: { ...form.parameters, num_inference_steps },
        })
      }
    />
  </div>
  <div class="flex flex-col gap-3">
    <Input
      label="Width"
      type="number"
      tooltip="The desired image dimensions. SDXL works best for sizes between 768 and 1024."
      sanitize={(value) => {
        const valueAsNumber = Number(value);
        if (valueAsNumber > 1) return 1;
        if (valueAsNumber < 0) return 0;
        return valueAsNumber;
      }}
      value={form?.parameters?.width}
      onChange={(width) =>
        onForm({
          ...form,
          parameters: { ...form.parameters, width },
        })
      }
    />
    <Input
      label="Height"
      type="number"
      tooltip="The desired image dimensions. SDXL works best for sizes between 768 and 1024."
      sanitize={(value) => {
        const valueAsNumber = Number(value);
        if (valueAsNumber > 1) return 1;
        if (valueAsNumber < 0) return 0;
        return valueAsNumber;
      }}
      value={form?.parameters?.height}
      onChange={(height) =>
        onForm({
          ...form,
          parameters: { ...form.parameters, height },
        })
      }
    />
  </div>
</div>