Spaces:
Running
Running
File size: 3,724 Bytes
de2d4cd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
<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>
|