Spaces:
Runtime error
Runtime error
File size: 2,352 Bytes
bb88c4d |
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 |
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { useMyPresence } from '$lib/liveblocks';
import { Status } from '$lib/types';
const dispatch = createEventDispatcher();
export let initPrompt = '';
let prompt: string;
let inputEl: HTMLInputElement;
let boxEl: HTMLDivElement;
const myPresence = useMyPresence();
const onKeyup = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
dispatch('showModal', { showModal: false });
}
};
onMount(() => {
inputEl.focus();
prompt = initPrompt;
window.addEventListener('keyup', onKeyup);
window.addEventListener('pointerdown', cancelHandler, true);
return () => {
window.removeEventListener('keyup', onKeyup);
window.removeEventListener('pointerdown', cancelHandler, true);
};
});
let timer: NodeJS.Timeout;
function debouce(newPrompt: string) {
clearTimeout(timer);
timer = setTimeout(() => {
prompt = newPrompt;
myPresence.update({
currentPrompt: prompt,
status: Status.prompting
});
}, 100);
}
function onPrompt(event: Event) {
event.stopPropagation();
event.preventDefault();
event.stopImmediatePropagation();
if (prompt.trim() !== '') {
dispatch('paint');
}
}
function onInput(event: Event) {
const target = event.target as HTMLInputElement;
debouce(target.value);
}
function cancelHandler(event: Event) {
if (boxEl.contains(event.target as Node)) {
return;
}
myPresence.update({
status: Status.ready
});
dispatch('showModal', { showModal: false });
}
</script>
<form
class="fixed w-screen top-0 left-0 bottom-0 right-0 h-screen z-50 flex items-center justify-center bg-black bg-opacity-80"
on:submit={onPrompt}
>
<div
class="flex bg-white overflow-hidden rounded-2xl w-full max-w-lg 2xl:max-w-xl"
bind:this={boxEl}
>
<input
value={prompt}
bind:this={inputEl}
on:click|stopPropagation
on:input={onInput}
class="flex-1 outline-none ring-0 border-none text-xl 2xl:text-2xl py-3 px-3"
placeholder="Describe your prompt"
title="Input prompt to generate image and obtain palette"
type="text"
name="prompt"
/>
<button
class="font-semibold bg-blue-700 text-white border-l-2 px-5 text-xl 2xl:text-2xl spacing tracking-wide hover:saturate-150"
type="submit"
><span class="mr-2">🖍</span> Paint
</button>
</div>
</form>
|