<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>