Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 2,933 Bytes
e71d24a 1c0590e 3b4bd9f eb29a95 1c0590e 3b4bd9f c9a7b70 1c0590e 3b4bd9f 1c0590e eb29a95 0477988 1c0590e 2081a7c eb29a95 0477988 eb29a95 404baa5 eb29a95 c9a7b70 eb29a95 1c0590e c16a39b eb29a95 1c0590e 3e14492 1c0590e eb29a95 1c0590e 3b4bd9f 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 105 106 |
<svelte:head>
<title>Generate your Image</title>
<meta name="description" content="Svelte demo app" />
</svelte:head>
<script lang="ts">
import { get } from "svelte/store";
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";
import { generationStore } from "$lib/stores/use-generation";
import { error } from "$lib/utils/toaster.js";
export let data
let generation = get(generationStore);
let loading: boolean = false;
let form = ((data?.model?.id && generation?.form?.model?.id && data?.model?.id !== generation?.form?.model?.id) || !generation?.form) ? {
model: data?.model ?? null,
inputs: `${data?.model?.instance_prompt ?? ""}`,
parameters: {
negative_prompt: ""
}
} : generation?.form
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 response = await request.json();
if (response?.error) {
error(response?.error)
} else {
generationStore.set({
image: response?.image,
gallery: response?.gallery,
form: form
})
}
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 loading_generation={loading} />
</main> |