Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 2,743 Bytes
e71d24a 1c0590e eb29a95 1c0590e eb29a95 1c0590e eb29a95 1c0590e c16a39b eb29a95 1c0590e eb29a95 1c0590e eb29a95 |
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 |
<svelte:head>
<title>Generate your Image</title>
<meta name="description" content="Svelte demo app" />
</svelte:head>
<script lang="ts">
import Button from "$lib/components/Button.svelte";
import Textarea from "$lib/components/fields/Textarea.svelte";
import Banner from "$lib/components/generate/Banner.svelte";
import Response from "$lib/components/generate/Response.svelte";
import Autocomplete from "$lib/components/models/autocomplete/Autocomplete.svelte";
export let data
let loading: boolean = false;
let response: string | ArrayBuffer | null = '';
let form = {
model: data?.model ?? null,
inputs: "",
parameters: {
negative_prompt: ""
}
}
const handleSubmit = async () => {
if (loading) return
loading = true
const request = await fetch(`/api/generate`, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(form)
});
const blob = await request?.clone()?.blob()
if (blob) {
const reader = new FileReader()
reader.readAsDataURL(blob)
reader.onloadend = () => {
const base64data = reader.result
response = base64data
}
}
const res = await request.clone().json().catch(() => ({}))
if (res) {
response = res
}
loading = false
}
</script>
<main class="grid grid-cols-5 w-full h-full gap-5 xl:gap-10">
<div class="w-full px-6 py-10 lg:px-10 lg:py-12 col-span-5 xl:col-span-3">
<div class="w-full flex gap-8 flex-col-reverse xl:flex-col">
<Banner />
<h1 class="text-white font-semibold text-2xl">
Start generating
</h1>
</div>
<div class="mt-5 grid grid-cols-1 gap-6">
<div>
<p class="text-neutral-300 mb-2.5 text-base">Models</p>
<Autocomplete
value={form?.model}
defaultModels={data?.models?.cards}
onChange={(model) => form.model = model}
/>
</div>
<div>
<p class="text-neutral-300 mb-2.5 text-base">Prompt</p>
<Textarea
value={form?.inputs}
placeholder="Aerial photography of a desert through autumn forests, with vibrant red and orange foliage"
onChange={(inputs) => form.inputs = inputs}
/>
</div>
<div>
<p class="text-neutral-300 mb-2.5 text-base">Negative Prompt</p>
<Textarea
value={form?.parameters?.negative_prompt}
placeholder="Write your negative prompt here"
onChange={(negative_prompt) => form.parameters.negative_prompt = negative_prompt}
/>
</div>
<div class="flex justify-end">
<Button
icon="fluent:glance-horizontal-sparkles-16-filled"
theme="pink"
size="lg"
{loading}
onClick={handleSubmit}
>
Generate
</Button>
</div>
</div>
</div>
<Response response={response} form={form} />
</main> |