Spaces:
Runtime error
Runtime error
File size: 2,270 Bytes
a6e7e8f 4b154d2 7c37442 5636b7a 7c37442 a6e7e8f 95c652b 7d4e291 7c37442 a6e7e8f 95c652b a6e7e8f 95c652b a6e7e8f 7d4e291 e847619 95c652b a6e7e8f e847619 a6e7e8f 7d4e291 d11af81 5636b7a d11af81 7d4e291 d11af81 5636b7a 95c652b 7d4e291 d11af81 95c652b 93b70aa 5636b7a 93b70aa a6e7e8f 35946a9 7d4e291 a6e7e8f 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 |
<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;
const myPresence = useMyPresence();
const onKeyup = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
cancel(e);
}
};
onMount(() => {
inputEl.focus();
inputEl.addEventListener('focusout', cancel);
prompt = initPrompt;
window.addEventListener('keyup', onKeyup);
return () => {
window.removeEventListener('keyup', onKeyup);
inputEl.removeEventListener('focusout', cancel);
};
});
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() !== '') {
console.log('Prompting with: ', prompt);
dispatch('paint');
dispatch('close');
}
}
function onInput(event: Event) {
const target = event.target as HTMLInputElement;
debouce(target.value);
}
function cancel(event?: Event) {
if (!(event instanceof KeyboardEvent) && event?.relatedTarget !== null) 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">
<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>
|