Spaces:
Runtime error
Runtime error
File size: 2,374 Bytes
a6e7e8f 4b154d2 7c37442 5636b7a 7c37442 a6e7e8f 3b048e4 95c652b 3b048e4 95c652b 7d4e291 35d6c3b 3b048e4 7c37442 a6e7e8f 3b048e4 a6e7e8f 95c652b a6e7e8f 7d4e291 95c652b a6e7e8f 331e32b a6e7e8f 331e32b a6e7e8f d11af81 5636b7a d11af81 3b048e4 7d4e291 5636b7a 7d4e291 d11af81 35d6c3b 93b70aa 5636b7a 93b70aa 3b048e4 93b70aa a6e7e8f 759b9dd 3b048e4 a6e7e8f 27cf1bb 9ed69b7 27cf1bb 5636b7a 95c652b 5636b7a 9ed69b7 27cf1bb 5636b7a 27cf1bb 9ed69b7 5636b7a a6e7e8f |
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({ addToHistory: true });
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>
|