Spaces:
Runtime error
Runtime error
File size: 2,337 Bytes
a6e7e8f 4b154d2 7c37442 5636b7a 7c37442 a6e7e8f 95c652b 7d4e291 35d6c3b 7c37442 a6e7e8f 35d6c3b a6e7e8f 95c652b a6e7e8f 7d4e291 95c652b a6e7e8f 35d6c3b a6e7e8f 35d6c3b a6e7e8f d11af81 5636b7a d11af81 7d4e291 5636b7a 95c652b 7d4e291 d11af81 35d6c3b 93b70aa 5636b7a 93b70aa a6e7e8f 35946a9 7d4e291 a6e7e8f 35d6c3b 5636b7a 95c652b 5636b7a 4b154d2 5636b7a a6e7e8f 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 |
<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') {
myPresence.update({
status: Status.ready
});
dispatch('close');
}
};
onMount(() => {
inputEl.focus();
prompt = initPrompt;
window.addEventListener('keyup', onKeyup);
window.addEventListener('click', cancelHandler, true);
return () => {
window.removeEventListener('keyup', onKeyup);
window.removeEventListener('click', 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() {
if (prompt.trim() !== '') {
dispatch('paint');
dispatch('close');
}
}
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('close');
}
</script>
<form
class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 flex items-center justify-center bg-black bg-opacity-80 px-3"
on:submit|preventDefault={onPrompt}
>
<div class="flex bg-white rounded-2xl px-2 w-full max-w-md" bind:this={boxEl}>
<input
value={prompt}
bind:this={inputEl}
on:click|stopPropagation
on:input={onInput}
class="input"
placeholder="Type a prompt..."
title="Input prompt to generate image and obtain palette"
type="text"
name="prompt"
/>
<button on:click|preventDefault={onPrompt} class="font-mono border-l-2 pl-2" type="submit"
>Paint</button
>
</div>
</form>
<style lang="postcss" scoped>
.input {
@apply flex-grow text-sm m-2 p-0 disabled:opacity-50 italic placeholder:text-black text-black placeholder:text-opacity-50 border-0 focus:outline-none focus:border-gray-400 focus:ring-1;
}
</style>
|