Spaces:
Running
Running
File size: 2,260 Bytes
de2d4cd 13c9aca de2d4cd 13c9aca de2d4cd 82cb3c3 de2d4cd 82cb3c3 de2d4cd e6e7027 b99fcde de2d4cd 13c9aca de2d4cd 13c9aca de2d4cd 13c9aca de2d4cd b99fcde 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 |
<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> |